Ostatní

Jak ve WordPress vytvořit informační pop-up okno na webu

Vyskakovací okno ve WordPress
Autor příspěvku Tomáš Cirkl

V posledních dnech mě kontaktovali desítky lidí, se žádostí na umístění pop-up okna s upozorněním na jejich WordPress web. Jedná se samozřejmě o reakci na aktuální situaci, kdy majitelé/správci webu potřebují umístit informaci ohledně provozu/uzavření v nouzovém stavu kvůli COVID-19.

V tomto návodu si ukážeme jednoduchý způsob jak pomocí pluginu vytvořit pop-up okno s vlastním textem.

Budeme k tomu potřebovat plugin Popup Builder, který se nachází v oficiálním katalogu pluginů, takže je možné jej nainstalovat přímo z WordPress administrace.

Plugin Popup Builder

Plugin Popup Builder

Tvorba pop-up okna

Po instalaci a aktivaci se v administračním menu WordPress objeví nová položka Popup Builder. Klikněte na ní a poté vyberte tlačítko Add New, kterým založíte nové pop-up okno.

Vytvoření pop-up okna

Vytvoření pop-up okna

Na další stránce vyberte typ pop-up okna HTML.

Výběr typu okna

Výběr typu okna

Dostanete se na stránku, kde může pop-up naplnit a nastavit jeho chování.

Nastavení pop-up okna

Nebudu zde popisovat veškeré nastavení, ale jen to, které potřebujete k zobrazení informační zprávy.

V horní části obrazovky zadejte název pop-up okna (slouží jen pro vás) a pomocí klasického editoru vložte upozornění, které chcete vytvořit.

Vložení obsahu

Vložení obsahu

Box Popup Display Rules 

Slouží k nastavení pravidel, kde se pop-up okno zobrazí. V rozbalovací záložce označené Select rule vyberte typ obsahu, kde chcete informace zobrazit. V případě, že chcete vybrat konkrétní stránku, bude pak ještě potřeba ve třetím sloupci z nabídky vybrat stránku nebo její typ. Níže pár příkladů nastavení.

Na každé stránce

Na každé stránce

Pouze na hlavní straně

Pouze na hlavní straně

Na vybraných stránkách

Na vybraných stránkách

Box Design

Slouží k nastavení vzhledu pop-up okna. Obvykle stačí jen nastavit odsazení obsahu od krajů okna (Padding) a vzhled lightboxu (Theme).

Nastavení vzhledu

Nastavení vzhledu

Box Dimensions

Zde můžete nastavit rozměry okna, aby nebylo s textem obrovské přes celou obrazovku. Používejte k tomu pole Max width. Já jej nastavuji na 1000.

Nastavení velikosti

Nastavení velikosti

Box Popup Options

V tomto boxu máte další nastavení týkající se vyskakovacího okna. Důležité nastavení je:

  • Action on popup content click – co se stane, když na okno někdo klikne.
    • Close Popup – zavře okno (výchozí).
    • Redirect – přesměruje na jinou stránku.
    • Copy to clipboard – zkopíruje obsah okna.
  • Popup showing limitation – omezení zobrazení okna pro návštěvníka.
    • Pokud nezaškrtnete, zobrazí se vždy, když návštěvník splní podmínku zobrazení (navštíví stránku).
    • Popup showing count – počet, kolikrát se může okno zobrazit danému návštěvníkovi.
    • Popup showing expiry – doba ve dnech, za jak dlouho se zresetuje možnost zobrazení návštěvníkovi.
    • Apply option on each page – zaškrtnutím bude počet a expirace počítána na každé stránce zvlášť.
Nastavení pop-up okna

Nastavení pop-up okna

Posledním krokem je jen publikování a máte vše hotovo.

Zveřejnění

Zveřejnění

Kontrola nastavení a příklady zobrazení

Dobré pak je si přes anonymní okno ověřit a zkontrolovat zobrazení pop-up okna.

Vyskakovací okno ve WordPress

Vyskakovací okno ve WordPress

Vyskakovací okno ve WordPress #2

Vyskakovací okno ve WordPress #2

Vyskakovací okno ve WordPress #3

Vyskakovací okno ve WordPress #3

 

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

4 komentáře

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.