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

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

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

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

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

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

Pouze na hlavní straně

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

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

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

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

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 #2

Vyskakovací okno ve WordPress #3