Chcete přidat widget WordPress do oblasti záhlaví vašeho webu?
Widgety vám umožní snadno přidávat bloky obsahu do určených sekcí vašeho tématu WordPress.
V tomto tutoriálu vám ukážeme, jak snadno přidat widget WordPress do záhlaví vašeho webu.
Poznámka: Toto je výuka na střední úrovni. Budete muset přidat kód do soubory vašeho motivu WordPress a zvládnout některé CSS.
Ale před jakoukoli úpravou objevte naši 5 WordPress pluginy pro zálohování vašeho blogu nebo Jak nainstalovat motiv WordPress et Kolik pluginy mám nainstalovat na WordPress.
Pak se vraťme k tomu, proč jsme tady.
Proč a kdy je třeba do záhlaví přidat widget?
Widgety vám umožní snadno přidávat bloky obsahu do určené oblasti v motivu WordPress. Tyto určené oblasti se nazývají „ postranní "Nebo oblasti" widgety".
Oblast widgetu v záhlaví lze použít k zobrazování reklam, posledních článků nebo všeho, co chcete.
Tato konkrétní doména se používá na všech populárních webech k zobrazení opravdu důležitých informací.
Objevte také Jak po přidání na WordPress přidávat vlastní widgety
Jako obecné pravidlo, Témata WordPress přidat postranní panely vedle obsahu nebo do oblasti zápatí. Velmi málo témat WordPress přidává oblasti widgetů nad obsah nebo v záhlaví.
Doporučujeme také objevit naše MailChimp výukový program ve francouzštině: Kompletní průvodce pro vytvoření informační bulletin
Proto v tomto tutoriálu vám ukážeme, jak přidat oblast widgetů do záhlaví vašeho webu WordPress.
Krok 1: Vytvořte oblast widgetu
Nejprve musíme vytvořit vlastní oblast widgetů. Tento krok vám umožní zobrazit vlastní oblast widgetu v „ Vzhled> Widgety Na hlavním panelu WordPress.
Tento kód budete muset do souboru přidat functions.php Tvého tématu.
function bpc_widgets_init () {register_sidebar (array ('name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');
Tento kód ukládá nový postranní panel nebo oblast widgetu na téma WordPress.
Pokud jste WordPress nikdy lokálně nenainstalovali, zjistěte to Jak nainstalovat WordPress lokálně na PC / Windows s XAMPP
Můžete jít na " Vzhled> Widgety A uvidíte novou oblast widgetu označenou „ Vlastní zóna záhlaví Widget ".
Pokračujte a do této nově vytvořené oblasti přidejte textový widget a uložte jej.
Zkuste také náš průvodce přidáváním widgetů.
Krok 2: Zobrazte widget v záhlaví
Pokud navštívíte svůj web, neuvidíte textový widget, který jste právě přidali.
Protože jsme vám dosud neukazovali, jak zobrazit zóny vlastní widgety WordPress.
To uděláme v tomto kroku.
Zde je pro vás také seznam Doplňky 5 Critical WordPress pro zvýšení výdělků vašeho blogu
Budete muset soubor upravit header.php Do svého motivu WordPress přidejte tento kód, kde chcete zobrazit widgety.
Nezapomeňte uložit změny.
Poté můžete navštívit svůj web a v záhlaví uvidíte textový widget.
Výsledek nemusí být nutně nejatraktivnější. Proto budete potřebovat CSS, aby se zobrazoval správně.
Krok 3: Dejte styl svým hlavičkám CSS
V závislosti na vašem motivu WordPress budete muset přidat kód CSS, abyste mohli ovládat, jak se oblast záhlaví a widgetu zobrazí.
Jedním z nejjednodušších způsobů, jak toho dosáhnout, je použití CSS Hero. Druhá možnost vám umožňuje používat intuitivní uživatelské rozhraní k úpravě CSS motivu WordPress.
Doporučujeme vám to také objevit Co můžete dělat s pluginem WordPress Yellow Pencil?
Pokud nechcete použít plugin, můžete do svého motivu WordPress přidat vlastní CSS na stránce „ Vzhled »Přizpůsobte Přizpůsobení motivu WordPress.
Přečtěte si také náš článek o Doplňky 10 WordPress ke zlepšení provozu blogu
To vám umožní zobrazit rozhraní WordPress Customizer. Budete muset kliknout na Další CSS ".
Karta « dodatečný CSS V " Customizer Umožňuje přidat vlastní CSS při prohlížení změn v náhledu vpravo.
Z důvodů spojených s tímto tutoriálem předpokládáme, že tuto oblast použijete k přidání jediného widgetu k zobrazení bannerových reklam nebo vlastního widgetu nabídky.
Pro začátek uvádíme příklad CSS:
div # header-widget-area {šířka: 100%; barva pozadí: # f7f7f7; hranice dolní: 1px solid #eeeeee; text-align: center; } h2.chw-title {margin-top: 0px; text-zarovnání: vlevo; textová transformace: velká; velikost písma: malá; barva pozadí: #feffce; šířka: 130px; polstrování: 5px; }
Zde se zobrazí náš vlastní widget v záhlaví motivu Dvacet sedmnáct.
Objevte také některé prémiové doplňky WordPress
Můžete použít jiné WordPress pluginy poskytnout moderní vzhled a optimalizovat práci s vaším blogem nebo webem.
Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.
1. Nápověda Smart4y
Smart4y Tooltip je a WordPress Plugin flexibilní nástroj určený k vytváření moderních popisků bez jakékoli závislosti na knihovně Javascript. Je plně responzivní a nabízí možnost vkládání HTML obsahu.
Jeho WYSIWYG editor vám umožní vizuálně vytvořit každý popis, aniž byste museli zadávat žádný kód, ale pokud jste ochotni, můžete to udělat vždy.
Objevte také naše 10 WordPress pluginy pro hodnocení článků z vašeho blogu
Mezi jeho další funkce patří: Podpora stránek pro tvůrce, poměrně responzivní rozložení, schopnost definovat globální parametry pro všechny popisky nebo definovat konkrétní parametry pro každý popisek, podpora předdefinovaných vizuálních efektů, výpočet polohy popisku v okně se změněnou velikostí, podrobná dokumentace atd.
Stáhnout | Demo | Web hosting
2. odůvodněné
Le WordPress Plugin Justified je responzivní plugin galerie, který zarovná vaše miniatury do zarovnané mřížky pomocí jQuery, jako na Flickru.
Přináší funkce, které odlišují vaše galerie od konkurence!
Mezi jeho hlavní funkce patří: pohotové rozložení, speciální efekty nadjíždění, automatické vyrovnání mřížky, editor krátkého kódu, vzhled ezcela přizpůsobitelné, podpora pdiváci a mnoho dalších…
Stáhnout | Demo | Web hosting
3. Naplánujte e-maily
tento plugin WordPress, jak naznačuje jeho název, vám umožňuje naplánovat zveřejnění e-mailu na vašem webu. Je součástí doplňků pluginu WordPress „Follow My Blog Post“.
Nyní budete moci naplánovat zveřejnění svých e-mailů podle hodin, dnů nebo týdnů.
Přečtěte si také náš článek o Zásuvné moduly 10 WordPress pro použití map na vašich webových stránkách
Nabízí možnost posílat kombinovaný e-mail pro všechna oznámení namísto každého e-mailu pro každé oznámení a také umožňuje definovat různé šablony e-mailů pro různé e-maily, aby se příjem vašich e-mailů stal lépe stravitelným. .
Stáhnout | Demo | Web hosting
Doporučené zdroje
Zjistěte další doporučené zdroje, které vám pomohou vytvořit a spravovat váš web.
- Naučí se vytvářet dokumenty Excel a Word na WordPress
- Jak přizpůsobit logo WordPress na hlavním panelu
- Jak najít soubory pro úpravu z tématu WordPress
- Jak přizpůsobit CSS vašeho webu WordPress
závěr
To je vše! To je vše pro tento tutoriál, doufám, že vám pomůže přidat oblast widgetů do záhlaví vašeho WordPress motivu. Neváhej sdílet se svými přáteli na svých oblíbených sociálních sítích.
Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress.
Pokud máte návrhy nebo připomínky, nechte je v naší sekci commentaires.
...
Ahoj! Chtěl bych vědět, jestli máte šanci mi říci, jak vložit „informační pole“ podobné tomu, které se zde používá na začátku tohoto článku, včetně klikatelných tlačítek vedle položek „Stáhnout“ a „Tabulky“, rozložení je velmi pěkné. Děkuji!
Přidání kódu header.php nefunguje
Pane, zkusil jsem to. Ve skutečnosti je stránka widgetů výstupem definujícím přidání widgetů. A přidal jsem to. Pokud se v kroku 2 nepodaří zadat kód do záhlaví php. Asi 2, jaká je chyba, pane?
V prvním zobrazeném kódu, který má generovat novou oblast widgetu, začněte zadáním „funkce“, ale řekl bych, že začíná „funkcí“. Ve skutečnosti má tento kód několik chyb, které ho při psaní zhoršují. Ocenil bych, že to bude opraveno.
OK.
🙂 Všechno je v pořádku, pouze nikdo v jejich radách nevysvětluje, kam přidat kód do „functions.php !!! " To je důležité! Každý používá „jiná“ témata…
Dobrý den,
Děkujeme za podporu.
Věděl jsem, jak přidat svůj vyhledávací panel do přizpůsobené hlavičky. Na druhou stranu, přizpůsobit styl je to komplikovanější ...
Chtěl bych změnit velikost, polohu (že nezabere celou šířku záhlaví), stejně jako barvu pozadí.
Merci d'avance.
Dobrý den, Thomas,
To vyžaduje trochu znalostí CSS. Doporučuji však tento vynikající WordPress plugin: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand