Magdagdag ng isang Widgetized Footer sa Iyong Tema ng WordPress

Ang inspirasyon para sa tutorial na ito ay nagmula sa a tweet na natanggap ko na may puna para sa malapit na maipalabas Tema ng RS12.


tugon ng zakmorris twitter

Kahit na ang widget na footer ay hindi ginawa sa huli sa pagpapalabas ng tema ng RS12, nagpasya akong isulat ang tutorial na ito upang ipakita sa mga tao kung paano eksaktong magdagdag ng isang naka-widget na footer sa iyong tema. Sa gabay na ito, malalaman mo:

  • Ang HTML at CSS code na kinakailangan upang makabuo ng naka-widget na footer
  • Paano magdagdag ng mga karaniwang ginagamit na tag ng template ng WordPress bilang mga placeholder
  • Paano i-widget ang footer at ilagay ang mga widget sa loob nito

Maraming magiging code sa post na ito, kaya kung mag-upo ka para dito, basahin mo …

Gagamitin ko ang Mga Green Rays WordPress tema bilang aking halimbawa sa tutorial na ito. Sa ngayon, ang footer ay mayroong standard na mensahe at kredito lamang.

Ang HTML

Ang unang hakbang ay upang magdagdag ng markup ng HTML. Sabihin natin na magkakaroon kami ng tatlong magkakaibang mga seksyon sa naka-widget na footer na may mga listahan ng Pinaka Pinakabagong Mga Post, Buwanang Archives, at Daily Archives. Inilalagay namin ang HTML code na ito sa itaas ng kasalukuyang “copyright” na linya.

Kamakailang Mga Post

Buwanang Archive

Pang-araw-araw na Archives

Karaniwang inilalagay ng code na ito ang bawat “widget” sa isang div. Sa loob ng bawat widget ay isang heading at isang unordered list na may mga link. Oo, alam ko na ang mga link ay hindi pupunta saanman. Mamaya naming palitan ito ng mga tag ng template ng WordPress. Narito kung ano ang mayroon tayo hanggang ngayon:

Green Rays Footer 1

Ang CSS

Tulad ng nakikita mo, hindi ito maganda ang hitsura nang walang anumang estilo ng CSS. Idagdag ang sumusunod na code sa iyong styleheet.

.item ng footer {
lumutang pakaliwa;
lapad: 33%;
padding-ibaba: 10px;
}
.footer-item ul {
padding-kaliwa: 15px;
}

Ano ang ginagawa ng code na ito ay lumutang sa bawat item ng footer sa kaliwa, na nangangahulugang nangangahulugang maaari silang magkatabi. Ang lapad ay nakatakda sa 33%, na nagbibigay ng sapat na silid para sa tatlong mga item ng paa sa isang solong hilera. Mayroon ding kaunting padding na idinagdag sa ibaba ng bawat item ng footer. Ang pangalawang piraso ay padding lamang ng mga listahan ng 15 mga piksel sa kaliwa.

Ngayon ay maaari mong makita ang HTML at CSS ay nagsisimula na magkasama. Narito ang dapat mong magkaroon ng hanggang ngayon:

Green Rays Footer 2

WordPress Code

Sa ngayon, mayroon kaming isang grupo ng mga walang laman na mga link sa HTML, na walang aktwal na WordPress code. Palitan natin ang mga listahan sa ilalim ng Kamakailang Mga Post, Buwanang Archives, at Daily Archives na may mga katumbas na tag ng template ng WordPress. Palitan kung ano ang mayroon ka sa mga sumusunod:

Kamakailang Mga Post

    <?php wp_get_archives (‘type = postbypost&limitasyon = 4 ‘); ?>

Buwanang Archive

    <?php wp_get_archives (‘limit = 4’); ?>

Pang-araw-araw na Archives

    <?php wp_get_archives (‘type = araw-araw&limitasyon = 4 ‘); ?>

Ang mga parameter ay dapat na maging paliwanag sa sarili, ngunit kung hindi ka sigurado tungkol sa alinman sa mga ito, subukang maghanap ng wp_get_archives sa Tool ng Paghahanap ng Tag ng template ng WordPress. Tandaan, gumagamit lang ako ng wp_get_archives () mga tag ng template bilang isang placeholder. Ililipat namin ang mga ito sa iba pang mga widget ng WordPress mamaya, pagkatapos naming i-Widget ang footer.

I-Widgetize Ito

Para sa seksyong ito ng tutorial, hihiram ako ng mga bahagi mula sa aking nauna mga widget na tema pagtuturo.

Ang unang hakbang ay ang pagrehistro ng “mga sidebars.” Upang gawin ito, palitan lamang ang kasalukuyang nilalaman ng file ng function.php sa mga sumusunod:

<?php
kung (function_exists (‘register_sidebar’))
rehistro_sidebar (array
‘pangalan’ => ‘Sidebar’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
kung (function_exists (‘register_sidebar’))
rehistro_sidebar (array
‘pangalan’ => ‘Footer’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

Ngayon ay pupunta kami sa sidebar.php at palitan ang kasalukuyang dinamikong tag na kondisyon ng sidebar na kasama nito:

<?php kung (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ()): ?>

Kasama nito:

<?php kung (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Sidebar")): ?>

Ngayon ay pupunta kami sa aming footer.php file at ibalot ang mga item ng footer sa kani-kanilang taglay na conditional tag ng sidebar. Sakto bago ang unang “sidebar-item” div, idagdag ang sumusunod.

<?php kung (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Footer")): ?>

Matapos ang panghuling pagsara ng “footer-item” div (at sa itaas ng “malinaw” div na idinagdag namin mas maaga) idaragdag namin ang sumusunod:

<?php endif; ?>

Okay, ngayon ang aming sidebar at footer ay dapat na naka-widget. Subukan natin ito sa pamamagitan ng pagdaragdag ng ilang mga widget sa footer. Magdaragdag ako ng isang Blogroll widget, Kamakailang Mga Komento sa Komento, at isang widget ng teksto. Narito kung ano ang hitsura nito:

Green Rays Footer 3

Konklusyon

Well, iyon ang mga pangunahing kaalaman sa pagdaragdag ng isang naka-widget na footer sa iyong tema. Maaaring nais mong magdagdag ng hiwalay na mga patakaran sa estilo para sa iba pang mga uri ng mga widget tulad ng kalendaryo o kahon ng paghahanap. Marahil hindi ito gagana sa bawat tema, tulad ng tema ng RS12, dahil mayroon itong hindi mapapalawak na footer.

Kung nais ng sinuman ang na-update na tema ng Green Rays sa pamamagitan ng anumang pagkakataon, maaari mong i-download ito dito. Sa ganitong paraan maaari mong makita kung saan eksaktong idinagdag ko ang code. Maaari mong ihambing ito sa orihinal na tema din.

Sana nagustuhan mo ang tutorial. Magdaragdag ka ba ng isang naka-widget na footer sa iyong tema? Mayroon bang anumang bagay sa code na ginamit ko sa itaas ay kakaiba ang gagawin mo? Ang mga tanong, puna, mungkahi, at pagpuna ay lahat ay maligayang pagdating, kaya huwag mag-atubiling tumunog sa mga komento.

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