Ako pridať Widget WordPress do hlavičky webových stránok

Chcete pridať widget WordPress do oblasti hlavičky svojho webu? Widgety vám umožňujú ľahko pridávať bloky obsahu do určených častí témy. V tomto článku vám ukážeme, ako ľahko pridať miniaplikáciu WordPress do hlavičky svojej stránky.


Pridajte do hlavičky svojej stránky miniaplikáciu WordPress

Poznámka: Toto je výučba na strednej úrovni. Budete musieť pridať kód do svojich tematických súborov WordPress a napísať CSS.

Prečo a kedy potrebujete na svojom webe widget hlavičky?

Widgety vám umožňujú ľahko pridávať bloky obsahu do určenej oblasti v téme WordPress. Tieto označené oblasti sa nazývajú bočné panely alebo oblasti pripravené pre widget.

Na zobrazovanie reklám, nedávnych článkov alebo čokoľvek, čo chcete, môžete použiť oblasť pripravenú miniaplikáciu v hlavičke alebo pred obsahom.

Táto konkrétna oblasť sa nazýva „pod záhybom stránky“ a všetky populárne stránky ju používajú na zobrazenie skutočne dôležitých vecí.

Sekcia hlavičky na populárnej webovej stránke List25

Témy WordPress zvyčajne pridávajú bočné panely vedľa obsahu alebo do oblasti päty. Nie je veľa tém WordPress, ktoré pridávajú oblasti pripravené na widget nad obsah alebo v hlavičke.

Preto sa v tomto článku budeme zaoberať tým, ako do záhlavia webových stránok WordPress pridať oblasť miniaplikácií.

Krok 1. Vytvorenie oblasti miniaplikácie hlavičky

Najprv musíme vytvoriť oblasť vlastných miniaplikácií. Tento krok vám umožní zobraziť oblasť vlastných miniaplikácií Vzhľad »Widgety na hlavnom paneli WordPress.

Tento kód budete musieť pridať do súboru features.php témy.

function wpb_widgets_init () {

register_sidebar (pole (
‘name’ => „Vlastná oblasť miniaplikácií hlavičky“,
‘id’ => ‘Custom-header-Widget’,
‘before_widget’ => , ‘,
‘after_widget’ => , ‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Tento kód zaregistruje nový bočný panel alebo oblasť pripravenú pre miniaplikáciu pre vašu tému.

Teraz môžete ísť na Vzhľad »Widgety a uvidíte novú oblasť miniaplikácií s názvom „Vlastná oblasť miniaplikácií hlavičky“.

Vlastná oblasť miniaplikácie hlavičky

Pokračujte a do tejto novo vytvorenej oblasti miniaplikácií pridajte textový widget a uložte ho. Podrobné pokyny o pridávaní miniaplikácií nájdete v našej príručke o pridávaní a používaní miniaplikácií v programe WordPress.

Krok 2: Zobrazte vlastnú miniaplikáciu hlavičky

Ak teraz navštívite svoje webové stránky, neuvidíte textové miniaplikáciu, ktorú ste práve pridali do svojej novo vytvorenej miniaplikácie hlavičky.

Je to preto, že sme ešte nepovedali WordPress, kde zobraziť túto oblasť miniaplikácií.

Urobme to v tomto kroku.

Vo svojom motíve budete musieť upraviť súbor header.php a pridať tento kód, kde chcete zobraziť oblasť vlastných miniaplikácií.

<?php

if (is_active_sidebar (‘custom-header-widget’)): ?>

<?php dynamic_sidebar (‘custom-header-widget’); ?>

<?php endif; ?>

Nezabudnite uložiť zmeny.

Teraz môžete navštíviť svoj web a uvidíte oblasť hlavičky.

Miniaplikácia hlavičky Unstyled

Všimnite si, že to vyzerá trochu neleštené. To je miesto, kde budete potrebovať CSS, aby to vyzeralo lepšie.

Krok 3: Prispôsobte oblasť svojej hlavičky widgetu pomocou CSS

V závislosti od témy budete musieť pridať CSS, aby ste určili, ako sa bude zobrazovať oblasť miniaplikácií hlavičky a každá miniaplikácia v nej.

Najjednoduchší spôsob je použitie doplnku CSS Hero. Umožňuje vám používať intuitívne používateľské rozhranie na zmenu CSS ľubovoľnej témy WordPress. Viac informácií nájdete v našej recenzii CSS Hero.

Ak nechcete používať doplnok, môžete do svojho motívu pridať vlastnú CSS na stránke Vzhľad »Prispôsobiť strana.

Tým sa spustí rozhranie prispôsobovača tém WordPress. Budete musieť kliknúť na kartu „Ďalšie CSS“.

Pridanie vlastného CSS do témy WordPress

Ďalšia karta CSS v nástroji na prispôsobenie tém vám umožňuje pridať svoj vlastný CSS pri sledovaní zmien, ktoré sa objavia v živom náhľade.

Z dôvodu tohto tutoriálu predpokladáme, že túto oblasť budete používať iba na pridanie jediného miniaplikácie na zobrazenie bannerových reklám alebo vlastného miniaplikácie ponuky.

Tu je niekoľko ukážok CSS, ktoré vám pomôžu začať.

div # header-widget-area {
šírka: 100%;
farba pozadia: # f7f7f7;
hraničné dno: 1px solídne #eeeeee;
zarovnanie textu: stred;
}
h2.chw-title {
horná hranica: 0px;
zarovnanie textu: vľavo;
textová transformácia: veľké písmená;
veľkosť písma: malá;
farba pozadia: #feffce;
šírka: 130px;
čalúnenie: 5px;
}

Takto naša oblasť vlastných miniaplikácií hlavičky vyzerala na predvolenú tému dvadsaťsedemnásť.

Ukážka miniaplikácie hlavičky

Možno bude potrebné upraviť CSS tak, aby zodpovedal vašej téme. Prezrite si nášho sprievodcu o tom, ako pridať vlastné štýly do miniaplikácií WordPress.

Dúfame, že vám tento článok pomohol naučiť sa, ako do hlavičky stránky pridať widget WordPress. Môžete tiež vidieť zoznam 25 najužitočnejších miniaplikácií WordPress pre vaše stránky.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me