Paano Magdagdag ng isang WordPress Widget sa iyong Website Header

Nais mo bang magdagdag ng isang WordPress widget sa lugar ng header ng iyong website? Pinapayagan ka ng mga Widget na madaling magdagdag ng mga bloke ng nilalaman sa mga itinalagang seksyon ng iyong tema. Sa artikulong ito, ipapakita namin sa iyo kung paano madaling magdagdag ng isang WordPress widget sa header ng iyong site.


Magdagdag ng isang WordPress widget sa header ng iyong site

Tandaan: Ito ay isang gitnang antas ng tutorial. Kailangan mong magdagdag ng code sa iyong mga file ng tema ng WordPress at magsulat ng CSS.

Bakit at Kailan Kailangan mo ng isang header Widget sa Iyong Site?

Pinapayagan ka ng mga Widget na madaling magdagdag ng mga bloke ng nilalaman sa isang itinalagang lugar sa iyong WordPress tema. Ang mga itinalagang lugar na ito ay tinatawag na mga sidebars o mga lugar na handa ng widget.

Ang isang handa na widget na lugar sa header o bago magamit ang nilalaman upang maipakita ang mga ad, kamakailang mga artikulo, o anumang nais mo.

Ang partikular na lugar na ito ay tinatawag na ‘Sa ibaba ng fold’ at ginagamit ito ng lahat ng mga tanyag na site upang ipakita ang talagang mahalagang bagay.

Ang seksyon ng header sa sikat na website ng List25

Karaniwan, ang mga tema ng WordPress ay nagdaragdag ng mga sidebars sa tabi ng nilalaman o sa lugar ng footer. Hindi maraming mga tema ng WordPress ang nagdaragdag ng mga handa na widget na nasa itaas ng nilalaman ay o sa header.

Iyon ang dahilan kung bakit sa artikulong ito, tatakpan namin kung paano magdagdag ng isang lugar ng widget sa header ng iyong website ng WordPress.

Hakbang 1. Paglikha ng isang Pook na Widget Area

Una, kailangan nating lumikha ng isang pasadyang lugar ng widget. Ang hakbang na ito ay magpapahintulot sa iyo na makita ang iyong pasadyang widget area Hitsura »Mga Widget pahina sa iyong WordPress dashboard.

Kailangan mong magdagdag ng code na ito sa mga file na file.php ng ​​iyong tema.

gumana wpb_widgets_init () {

rehistro_sidebar (array
‘pangalan’ => ‘Pasadyang Header Widget Area’,
‘id’ => ‘pasadyang-header-widget’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘mga widget_init’, ‘wpb_widgets_init’);

Ang code na ito ay nagrerehistro ng isang bagong sidebar o isang handa na widget para sa iyong tema.

Maaari ka na ngayong pumunta Hitsura »Mga Widget pahina, at makikita mo ang isang bagong lugar ng widget na may label na ‘Custom Header Widget Area’.

Pasadyang lugar ng widget ng header

Sige, at magdagdag ng isang widget ng teksto sa bagong nilikha na lugar ng widget at i-save ito. Tingnan ang aming gabay sa kung paano magdagdag at gumamit ng mga widget sa WordPress para sa detalyadong mga tagubilin sa pagdaragdag ng mga widget.

Hakbang 2: Ipakita ang Iyong Custom Header Widget

Kung binisita mo ang iyong website ngayon, hindi mo makita ang teksto ng widget na idinagdag mo lamang sa iyong bagong nilikha na header widget.

Iyon ay dahil hindi pa namin sinabi sa WordPress kung saan ipapakita ang lugar na ito ng widget.

Gawin natin ito sa hakbang na ito.

Kailangan mong i-edit ang file ng header.php sa iyong tema at idagdag ang code na ito kung saan nais mong ipakita ang iyong pasadyang lugar ng widget.

<?php

kung (is_active_sidebar (‘pasadyang-header-widget’)): ?>

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

<?php endif; ?>

Huwag kalimutan na i-save ang iyong mga pagbabago.

Maaari mo na ngayong bisitahin ang iyong website at makikita mo ang iyong lugar ng header ng header.

Unstyled header widget

Mapapansin mo na mukhang hindi pa nabu-blol. Iyon ay kung saan kakailanganin mo ang CSS upang maging maganda itong hitsura.

Hakbang 3: Estilo ng Iyong Header Widget Area Gamit CSS

Depende sa iyong tema, kakailanganin mong magdagdag ng CSS upang makontrol kung paano ipinapakita ang header widget area at bawat widget sa loob nito.

Ang mas madaling paraan upang gawin ito ay sa pamamagitan ng paggamit ng CSS Hero plugin. Pinapayagan ka nitong gumamit ng isang madaling gamitin na interface ng gumagamit upang baguhin ang CSS ng anumang tema ng WordPress. Para sa higit pang mga detalye tingnan ang aming pagsusuri sa CSS Hero.

Kung ayaw mong gumamit ng isang plugin, pagkatapos ay maaari kang magdagdag ng mga pasadyang css sa iyong tema sa pamamagitan ng pagbisita Hitsura »Ipasadya pahina.

Ilulunsad nito ang interface ng WordPress tema customizer. Kailangan mong mag-click sa tab na ‘Karagdagang CSS’.

Pagdaragdag ng pasadyang CSS sa isang tema ng WordPress

Ang karagdagang tab na CSS sa tema ng customizer ay nagbibigay-daan sa iyo upang idagdag ang iyong pasadyang CSS habang pinapanood ang mga pagbabago ay lilitaw sa live na preview.

Para sa kapakanan ng tutorial na ito, ipinapalagay namin na magagamit mo lamang ang lugar na ito upang magdagdag ng isang solong widget upang magpakita ng mga ad ad, o isang pasadyang menu ng menu.

Narito ang ilang halimbawang CSS upang matulungan kang magsimula.

div # header-widget-area {
lapad: 100%;
kulay ng background: # f7f7f7;
hangganan-ibaba: 1px solid #eeeeee;
align ng teksto: gitna;
}
h2.chw-pamagat {
margin-tuktok: 0px;
align ng teksto: kaliwa;
pagbabago ng teksto: malalaking titik;
laki ng font: maliit;
kulay ng background: #feffce;
lapad: 130px;
padding: 5px;
}

Ito ay kung paano tumingin ang aming pasadyang lugar ng header ng widget sa default na Dalawampu’t labing tema.

Preview ng header widget

Maaaring kailanganin mong ayusin ang CSS upang tumugma sa iyong tema. Tingnan ang aming gabay sa kung paano magdagdag ng mga pasadyang estilo sa mga widget ng WordPress.

Inaasahan naming nakatulong sa iyo ang artikulong ito kung paano magdagdag ng isang WordPress widget sa header ng iyong site. Maaari mo ring makita ang aming listahan ng 25 pinaka kapaki-pakinabang na mga widget ng WordPress para sa iyong site.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map