Jak vytvořit notifikační lištu snadno, rychle a bez pluginu?

Prostřednictvím notifikační lišty můžete efektivně sdělit důležité informace, které by návštěvníci vašeho webu rozhodně neměli přehlédnout. Způsobů využití a výhod tohoto prvku je mnoho, ale o tom třeba někdy jindy. V tomto článku se dočtete, jak vytvořit notifikační lištu tak, aby neměla negativní dopad na výkon webu. Což může být problém, pokud použijete některý z mnoha pluginů či služeb třetích stran.

Pár možností, jak vytvořit notifikační lištu pomocí pluginu:

Hello Bar – z hlediska výkonu nic moc, a navíc s odkazem

WP Notification Bar Pro – tento plugin zpomaluje načítání webu o 150-200 ms

BugMeBar – poměrně rychlý plugin, ale kvůli animacím vypadá pomalejší. Přesto slušné řešení.

3 kroky k vlastní notifikační liště

Vytvořit notifikační lištu pomocí HTML je snadné. A protože chybí zavírací tlačítko, není ani cookie. Což je důvod, proč je dané řešení rychlejší.

Krok 1

První krok se může mírně lišit podle toho, jakou používáte šablonu. Většina však umožňuje editaci souboru header.php.

Krok 2

Zde je HTML kód, který dáte rovnou za </head>. Napíšete si tam, co zrovna potřebujete sdělit ostatním.

<div id="dabar" class="hide_on_mobile">Váš vzkaz světu.</div>

Krok 3

Nyní budete muset přidat nějaké vlastní CSS, aby lišta vypadala k světu. Pokud vaše šablona nemá custom CSS panel, můžete CSS přidat pomocí nějakého šikovného pluginu (např. Simple Custom CSS and JS).

#dabar{
background: #2c3644;
color: #fff;
font-size:16px;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#dabar a {color: #ffffff; border-bottom: 1px dotted;}

Standardně bude lišta statická a zmizí, když zaskrolujete směrem dolů. Samozřejmě můžete modifikovat CSS a připevnit ho navrch stránky natrvalo. Stačí použít následující kód.

#dabar{
background: #2c3644;
color: #fff;
font-size:16px;
position: fixed;
z-index:1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#dabar a {color: #ffffff; border-bottom: 1px dotted;}

A máte hotovo. Právě jste vytvořili krásnou notifikační lištu :-)

Jak lištu skrýt na mobilním zařízení?

Asi jste si všimli třídy zvané hide_on_mobile. Ta umožňuje skrytí lišty na mobilním zařízení. Jednoduše přidejte následující CSS.

@media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}
}

About The Author

Související články

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *