Så lägger du till en WordPress-widget till din webbplatsrubrik

Vill du lägga till en WordPress-widget till webbplatsens rubrikområde? Widgets låter dig enkelt lägga till innehållsblock i avsedda avsnitt av ditt tema. I den här artikeln visar vi dig hur du enkelt lägger till en WordPress-widget i sidans rubrik.


Lägg till en WordPress-widget i sidans rubrik

Notera: Detta är en tutorial på mellannivå. Du måste lägga till kod i dina WordPress-temafiler och skriva CSS.

Varför och när du behöver en rubrikwidget på din webbplats?

Widgets gör att du enkelt kan lägga till innehållsblock till ett angivet område i ditt WordPress-tema. Dessa utsedda områden kallas sidofält eller widget-färdiga områden.

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

Det här området kallas ‘Under fällan’ och alla populära webbplatser använder det för att visa riktigt viktiga saker.

Rubrikavsnittet på den populära webbplatsen List25

Vanligtvis lägger WordPress-teman till sidofält bredvid innehållet eller i sidfotområdet. Inte många WordPress-teman lägger till widget-klara områden ovanför innehållet eller i rubriken.

Det är därför vi i den här artikeln kommer att täcka hur du lägger till ett widgetområde i din WordPress-webbplatss rubrik.

Steg 1. Skapa ett Header Widget-område

Först måste vi skapa ett anpassat widgetområde. Detta steg låter dig se ditt anpassade widgetområde på Utseende »Widgets sida i din WordPress-instrumentpanel.

Du måste lägga till den här koden i ditt temas funktioner.php-fil.

funktion wpb_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’, ‘wpb_widgets_init’);

Den här koden registrerar ett nytt sidofält eller ett widget-klara område för ditt tema.

Du kan nu gå till Utseende »Widgets och du kommer att se ett nytt widgetområde som är märkt ‘Custom Header Widget Area’.

Anpassat område för widgethuvud

Gå vidare och lägg till en textwidget i det nyligen skapade widgetområdet och spara det. Se vår guide om hur du lägger till och använder widgets i WordPress för detaljerade instruktioner om hur du lägger till widgetar.

Steg 2: Visa din anpassade rubrikwidget

Om du besöker din webbplats nu kan du inte se textwidgeten som du just har lagt till i din nyskapade rubrikwidget.

Det beror på att vi ännu inte har sagt till WordPress var vi ska visa detta widget-område.

Låt oss göra det i det här steget.

Du måste redigera filen header.php i ditt tema och lägga till den koden där du vill visa ditt anpassade widgetområde.

<?php

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

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

<?php endif; ?>

Glöm inte att spara dina ändringar.

Du kan nu besöka din webbplats och du kommer att se ditt område för widgethuvud.

Ostylerad sidhuvudwidget

Du kommer att märka att det ser lite opolerat ut. Det är där du behöver CSS för att det ska se bättre ut.

Steg 3: Style ditt Header Widget-område med CSS

Beroende på ditt tema måste du lägga till CSS för att kontrollera hur rubrikwidgetområdet och varje widget inuti det visas.

Det enklare sättet att göra detta är att använda CSS Hero-plugin. Det låter dig använda ett intuitivt användargränssnitt för att ändra CSS för alla WordPress-teman. För mer information se vår CSS Hero-recension.

Om du inte vill använda ett plugin kan du lägga till anpassade css till ditt tema genom att besöka Utseende »Anpassa sida.

Detta kommer att starta WordPress-temanpassningsgränssnittet. Du måste klicka på fliken “Ytterligare CSS”.

Lägga till anpassad CSS till ett WordPress-tema

Den ytterligare CSS-fliken i tematilpassare gör att du kan lägga till din anpassade CSS medan du tittar på ändringarna visas i liveförhandsvisningen.

För denna tutorial antar vi att du bara 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 några exempel på CSS som hjälper dig komma igång.

div # header-widget-område {
bredd: 100%;
bakgrundsfärg: # f7f7f7;
border-bottom: 1px solid #eeeeee;
text-align: center;
}
h2.chw-title {
margin-top: 0px;
text-align: vänster;
text-transform: versaler;
typstorlek: liten;
bakgrundsfärg: #feffce;
bredd: 130px;
stoppning: 5px;
}

Så här såg ut vårt anpassade rubrikwidget-område på standardtvintemintyget.

Förhandsvisning av huvudwidget

Du kan behöva justera CSS för att matcha ditt tema. Ta en titt på vår guide om hur du lägger till anpassade stilar till WordPress-widgetar.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en WordPress-widget i sidans rubrik. Du kanske också vill se vår lista med 25 mest användbara WordPress-widgetar för din webbplats.

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