Dodaj Widgetized Footer do motywu WordPress

Inspiracja do tego samouczka pochodzi z tweet otrzymałem z informacją zwrotną o nadchodzącym wydaniu Motyw RS12.


odpowiedź twittera zakmorris

Chociaż stopka widgetizowana ostatecznie nie pojawiła się w wydaniu motywu RS12, postanowiłem napisać ten samouczek, aby pokazać ludziom, jak dokładnie dodać stopkę widgetizowaną do motywu. W tym przewodniku dowiesz się:

  • Kod HTML i CSS potrzebny do utworzenia stopki widżetowanej
  • Jak dodać często używane znaczniki szablonów WordPress jako symbole zastępcze
  • Jak widgetować stopkę i umieszczać w niej widżety

W tym poście będzie dużo kodu, więc jeśli masz ochotę, czytaj dalej …

Będę używać Zielone promienie Motyw WordPress jako mój przykład w tym samouczku. W tej chwili stopka ma tylko standardowy komunikat „prawa autorskie” i napisy.

HTML

Pierwszym krokiem jest dodanie znaczników HTML. Załóżmy, że w stopce widżetowej będą trzy różne sekcje z listami najnowszych postów, miesięcznych archiwów i codziennych archiwów. Umieścimy ten kod HTML powyżej bieżącego wiersza „prawa autorskie”.

Najnowsze posty

Archiwa Monthy

Codzienne archiwa

Zasadniczo ten kod umieszcza każdy „widget” w div. Wewnątrz każdego widżetu znajduje się nagłówek i nieuporządkowana lista z linkami. Tak, wiem, że linki nigdzie nie idą. Później zastąpimy to tagami szablonów WordPress. Oto, co do tej pory mamy:

Stopka zielonych promieni 1

CSS

Jak widać, nie wygląda to tak dobrze bez stylizacji CSS. Dodaj następujący kod do swojego arkusza stylów.

.element stopki {
float: left;
szerokość: 33%;
padding-bottom: 10px;
}
.pozycja stopki ul {
padding-left: 15px;
}

Ten kod przesuwa każdy element stopki w lewo, co w zasadzie oznacza, że ​​mogą one znajdować się obok siebie. Szerokość jest ustawiona na 33%, co zapewnia wystarczająco dużo miejsca na trzy stopki w jednym rzędzie. Pod każdym elementem stopki znajduje się również odrobina dopełnienia. Drugi element to tylko wypełnienie list 15 pikseli w lewo.

Teraz możesz zobaczyć, jak HTML i CSS zaczynają się łączyć. Oto, co powinieneś mieć do tej pory:

Stopka zielonych promieni 2

Kod WordPress

W tej chwili mamy kilka pustych linków HTML, bez rzeczywistego kodu WordPress. Zastąpmy listy w obszarze Najnowsze posty, Archiwum miesięczne i Archiwum codzienne odpowiednikami tagu szablonu WordPress. Zastąp to, co obecnie masz:

Najnowsze posty

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

Archiwa Monthy

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

Codzienne archiwa

    <?php wp_get_archives (‘type = codziennie&limit = 4 ‘); ?>

Parametry powinny być dość zrozumiałe, ale jeśli nie masz pewności co do któregoś z nich, spróbuj wyszukać wp_get_archives w Narzędzie wyszukiwania znaczników szablonu WordPress. Pamiętaj, że po prostu używam tagów szablonu wp_get_archives () jako symbolu zastępczego. Zamienimy je na inne widżety WordPress później, po tym jak zrobimy widget stopkę.

Widgetize It

W tej części samouczka pożyczę części z poprzedniego tematy widgetujące instruktaż.

Pierwszym krokiem jest zarejestrowanie „pasków bocznych”. Aby to zrobić, po prostu zamień bieżącą zawartość pliku functions.php na:

<?php
if (function_exists (‘register_sidebar’))
register_sidebar (tablica (
„name” => ‘Pasek boczny’,
„before_widget” => ”,
„after_widget” => ”,
„before_title” => „

„,
„after_title” => „

„,
));
if (function_exists (‘register_sidebar’))
register_sidebar (tablica (
„name” => „Stopka”,
„before_widget” => ”,
„after_widget” => ”,
„before_title” => „

„,
„after_title” => „

„,
));
?>

Teraz przejdziemy do sidebar.php i zastąpimy bieżący dynamiczny tag warunkowy paska bocznego następującym:

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

Z tym:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Pasek boczny")): ?>

Teraz przejdziemy do naszego pliku footer.php i zawiniemy elementy stopki we własny znacznik warunkowy na pasku bocznym. Tuż przed pierwszym divem „sidebar-item” dodaj następujące.

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Stopka")): ?>

Zaraz po ostatnim zamykającym div „stopka” (i powyżej div „wyczyść”, który dodaliśmy wcześniej) dodamy:

<?endif php; ?>

OK, teraz nasz pasek boczny i stopka powinny zostać umieszczone w widżetach. Przetestujmy to, dodając kilka stopek w stopce. Dodam widżet Blogroll, widżet Najnowsze komentarze i widżet tekstowy. Oto jak powinno to wyglądać:

Stopka zielonych promieni 3

Wniosek

Cóż, to są podstawy dodania stopki do swojego motywu. Możesz dodać osobne reguły stylów dla innych typów widżetów, takich jak kalendarz lub pole wyszukiwania. Prawdopodobnie nie będzie działać z każdym motywem, na przykład motywem RS12, ponieważ miał nierozwijalną stopkę.

Jeśli ktoś zechce zaktualizować motyw Zielone promienie, możesz go pobrać tutaj. W ten sposób możesz zobaczyć, gdzie dokładnie dodałem kod. Możesz to porównać z oryginalny motyw także.

Mam nadzieję, że podoba Ci się samouczek. Czy dodasz widget do stopki do swojego motywu? Czy jest coś w kodzie, którego użyłem powyżej, zrobiłbyś inaczej? Pytania, komentarze, sugestie i krytyka są mile widziane, więc zachęcamy do wypowiedzenia się.

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