Gå till innehållet

Hur man lägger till en widget på rubriken på din Wordpress blogg

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Vill du lägga till en WordPress-widget i rubrikområdet på din webbplats?

Med widgetar kan du enkelt lägga till innehållsblock i angivna delar av ditt WordPress-tema.

I den här tutorialen visar vi dig hur du enkelt kan lägga till en WordPress-widget till rubriken på din webbplats.

Anmärkningar: Detta är en handledning på mellannivå. Du måste lägga till kod i filer med ditt WordPress-tema och behärska vissa CSS.

Men innan någon modifiering upptäck vår 5 Wordpress plugins att säkerhetskopiera din blogg eller Hur man installerar en Wordpress tema et Hur många insticksprogram ska jag installera på Wordpress.

Låt oss sedan gå tillbaka till varför vi är här. 

Varför och när måste du lägga till en widget i rubriken?

Med widgets kan du enkelt lägga till innehållsblock till ett visst område i ditt WordPress-tema. Dessa utsedda områden kallas " sidofält "Eller områden med" Widgetar".

Ett widget-område på rubriken kan användas för att visa annonser, nya artiklar eller vad du vill.

Denna speciella domän används på alla populära webbplatser för att visa riktigt viktig information.

Upptäck också Så här lägger du till anpassade widgets efter att du har lagt in på WordPress

widgetområdet i spetsen för wordpress

Vanligtvis lägger WordPress-teman till sidofält bredvid innehållet eller i sidfotområdet. Mycket få WordPress-teman lägger till widgetområden ovanför innehållet eller i rubriken.

Vi rekommenderar också att upptäcka vårt MailChimp handledning på franska: den kompletta guiden för att skapa ett nyhetsbrev

Det är därför vi i den här tutorialen visar dig hur du lägger till ett widgetområde i rubriken på din WordPress-webbplats.

Steg 1: Skapa ett widgetområde

Först och främst måste vi skapa ett anpassat widgetområde. Detta steg låter dig se ett anpassat widgetområde i " Utseende> Widgets På din WordPress-instrumentpanel.

Du måste lägga till den här koden i filen functions.php Av ditt tema.

funktion 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');

Den här koden sparar ett nytt sidofält eller widget-område i ditt WordPress-tema.

Om du aldrig har installerat WordPress lokalt, ta reda på det Hur man installerar Wordpress lokalt på en PC / Windows med XAMPP

Du kan gå till " Utseende> Widgets Och du kommer att se ett nytt widgetområde markerat " Anpassad Header Widget Area ".

ny WordPress widget-zon

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Gå vidare och lägg till en textwidget till det nyskapade området och spara det.

Försök också vår guide för att lägga till widgetar.

Steg 2: Visa din widget i rubriken

Om du besöker din webbplats kommer du inte att kunna se textwidgeten du just har lagt till.

Eftersom vi ännu inte har visat dig hur du visar zonerna för anpassade widgets Wordpress.

Detta är vad vi kommer att göra i detta steg.

Här är också en lista med 5 Kritiska WordPress-plugins för att öka din bloggs intäkter

Du måste redigera filen header.php I ditt WordPress-tema och lägg till den här koden där du vill visa widgetarna.


 
 
 
 

Glöm inte att spara dina ändringar.

Du kan sedan besöka din webbplats och du kommer att se textwidgeten i din rubrik.

demo-sida i åtanke

Resultatet blir inte nödvändigtvis det mest attraktiva. Det är därför du behöver CSS så att den visas korrekt.

3 Steg: Ge stil till dina CSS-rubriker

Beroende på ditt WordPress-tema måste du lägga till CSS-kod för att styra hur rubriken och widgetområdet visas.

Ett av de enklaste sätten att göra detta är att använda CSS Hero. Det senare låter dig använda ett intuitivt användargränssnitt för att ändra CSS för ett WordPress-tema.

Vi råder dig också att upptäcka detta Vad kan du göra med det gula pennans WordPress-plugin?

Om du inte vill använda ett plugin kan du lägga till anpassad CSS till ditt WordPress-tema genom att besöka " Utseende »Anpassa För att anpassa WordPress-temat.

Läs också vår artikel om 10 WordPress-plugins för att förbättra trafiken för en blogg

Detta gör att du kan visa WordPress-anpassningsgränssnittet. Du måste klicka på " ytterligare CSS ".

Ytterligare css WorDPress

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Fliken « Ytterligare CSS I " Customizer Låter dig lägga till din anpassade CSS medan du visar ändringarna i förhandsgranskningen till höger.

Av anledningar tillhörande denna tutorial antar vi att du kommer att använda det här området för att lägga till en enda widget för att visa bannerannonser eller en anpassad menywidget.

Här är ett exempel på CSS för att komma igång:

div # header-widget-område {bredd: 100%; bakgrundsfärg: #f7f7f7; border-bottom: 1px fast #eeeeee; text-align: center; } H2.chw-title {margin-top: 0px; text-align: left; text-trans: versaler; font-size: small; bakgrundsfärg: #feffce; bredd: 130px; padding: 5px; }

Så här kommer vår anpassade widget att dyka upp i tjugo sjutton temahuvud.

demotema tjugo sjutton ordpress

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. Smart4y Tooltip

Smart4y Tooltip är ett flexibelt WordPress-plugin som är dedikerat till att skapa moderna verktygstips utan något beroende av JavaScript-biblioteket. Det är fullt lyhörd och erbjuder möjligheten att infoga HTML-innehåll.

Smart4y Tooltip Responsiv WordPress-plugin

Dess WYSIWYG-redigerare låter dig visuellt skapa varje verktygstips utan att behöva ange någon kod, men om du är villig kan du alltid göra det.

Upptäck också vår 10 WordPress plugins för att utvärdera artiklar från din blogg

Dess andra funktioner är: Stöd för byggmästarsida, en ganska responsiv layout, förmågan att definiera globala parametrar för alla verktygstips eller att definiera specifika parametrar för varje verktygstips, stöd för fördefinierade visuella effekter, beräkning av positionen för verktygstips i det ändrade fönstret, detaljerad dokumentation, etc….

Ladda ner | Demo | webbhotell

2. motiverade

WordPress Justified plugin är ett lyhört galleriplugin som justerar miniatyrerna i ett motiverat rutnät med jQuery, som på Flickr. 

Motiverade-plugin-fotografer,

Det ger funktioner som skiljer dina gallerier från konkurrenterna!

Dess huvudfunktioner är: responsiv layout, speciella flyover-effekter, automatisk justering av rutnätet,  en kortkodredigerare, utseende ehelt anpassningsbar, stödet från ptittare och många andra…

Ladda ner | demo | webbhotell  

3. Schemalägga e-postmeddelanden

detta WordPress-plugin som namnet antyder låter dig schemalägga e-postpublikationen på din webbplats. Det är en del av plugins till WordPress-plugin "Follow My Blog Post". Schemalägg e-post Följ mitt blogginlägg wordpress plugin

Du kommer nu att kunna schemalägga publiceringen av dina e-postmeddelanden efter timmar, dagar eller veckor.

Läs också vår artikel om 10 WordPress plugins för att använda kartor på din webbplats

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Det ger möjlighet att skicka ett kombinerat e-postmeddelande för alla aviseringar istället för varje e-postmeddelande för varje avisering och gör det också möjligt att definiera olika e-postmallar för olika e-postmeddelanden, slutligen för att göra mottagningen av dina e-postmeddelanden mer smältbar. .

Ladda nerdemo |webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Det är det! Det här är allt för denna tutorial, jag hoppas att det kommer att hjälpa dig att lägga till ett widgetområde i rubriken på ditt WordPress-tema. Tveka inte att dela med dina vänner på dina favorit sociala nätverk

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.

.

Den här artikeln innehåller kommentarer 8

  1. Hej! Jag skulle vilja veta om du har en chans att berätta för mig hur man lägger till en "informationsruta" som liknar den som används här i början av den här artikeln, inklusive de klickbara knapparna bredvid "Ladda ner" och "Kalkylark", layout är mycket trevlig. Tack!

  2. Sir, jag försökte det. Faktum är att widgetsidan matas ut och definierar tillägget av widgets. Och jag lade till det. När steg 2 inte anger koden i php-rubriken. Gissa 2, vad är felet, sir?

  3. I den första koden som visas, som är att generera ett nytt widgetområde, börja med att skriva "funktion", men jag skulle säga att det börjar med "funktion". Egentligen har den här koden flera fel som gör den fel när du skriver den. Jag skulle uppskatta att det korrigerades.

  4. 🙂 Allt är OK, bara ingen i deras råd förklarar var du ska lägga till koden till “functions.php !!! " Det är viktigt! Alla använder de "olika" teman ...

  5. hej,

    Tack för dessa stöd.

    Jag visste hur jag skulle lägga till mitt sökfält i den personliga rubriken. Å andra sidan, för att anpassa stilen är det mer komplicerat ...

    Jag vill ändra storlek, position (att den inte tar hela sidhuvudets bredd) samt bakgrundsfärg.

    Merci d'avance.

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
7 aktier
del1
tweet
Enregistrer6