Dieser Beitrag wird eine Menge Code enthalten. Wenn Sie also Lust dazu haben, lesen Sie weiter …<\/p>\n
In diesem Tutorial verwende ich das WordPress-Theme \u201eGreen Rays\u201c als Beispiel. Im Moment enth\u00e4lt die Fu\u00dfzeile lediglich eine standardm\u00e4\u00dfige \u201eCopyright\u201c-Meldung und Credits.<\/p>\n
Der HTML<\/h3>\n
Der erste Schritt besteht darin, das HTML-Markup hinzuzuf\u00fcgen. Nehmen wir an, wir haben drei verschiedene Abschnitte in der Fu\u00dfzeile mit Widgets, die die neuesten Beitr\u00e4ge, die Monatsarchive und die Tagesarchive auflisten. Wir werden diesen HTML-Code oberhalb der aktuellen \u201eCopyright\u201c-Zeile platzieren.<\/p>\n
Grunds\u00e4tzlich platziert dieser Code jedes Widget in einem Div. In jedem Widget gibt es eine Kopfzeile und eine ungeordnete Liste mit Links. Ja, ich wei\u00df, dass die Links nirgendwohin f\u00fchren. Wir werden dies sp\u00e4ter durch WordPress-Vorlagen-Tags ersetzen. Das haben wir bisher:<\/p>\n
![\"Gr\u00fcne](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_212_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\")
<\/p>\n
Das CSS<\/h3>\n
Wie Sie sehen, sieht das ohne CSS-Stil nicht so gut aus. F\u00fcgen Sie den folgenden Code zu Ihrem Stylesheet hinzu.<\/p>\n
.footer-item {
linker Schwimmer;
Breite: 33 %;
gepolsterter Hintergrund: 10px;
}
.footer-item ul {
Polsterung links: 15px;
}<\/p>\n
Dieser Code verschiebt jedes Fu\u00dfzeilenelement nach links, was im Grunde bedeutet, dass sie nebeneinander liegen k\u00f6nnen. Die Breite ist auf 33 % eingestellt, was ausreichend Platz f\u00fcr drei Fu\u00dfzeilenelemente in einer einzigen Zeile bietet. Unter jedem Fu\u00dfzeilenelement wird au\u00dferdem etwas Polsterung hinzugef\u00fcgt. Der zweite Teil besteht darin, die Listen einfach 15 Pixel nach links zu f\u00fcllen. <\/p>\n
Jetzt k\u00f6nnen Sie sehen, dass HTML und CSS beginnen, zusammenzuwachsen. Das sollten Sie bisher haben:<\/p>\n
![\"Green](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_366_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\")
<\/p>\n
WordPress-Code<\/h3>\n
Im Moment haben wir eine Menge leerer HTML-Links ohne echten WordPress-Code. Ersetzen wir die Listen in \u201eNeueste Beitr\u00e4ge\u201c, \u201eMonatsarchiv\u201c und \u201eTagesarchiv\u201c durch die entsprechenden WordPress-Vorlagen-Tags. Ersetzen Sie das, was Sie derzeit haben, durch Folgendes:<\/p>\n
Die Parameter sollten ziemlich klar sein, aber wenn Sie sich bei einem davon nicht sicher sind, versuchen Sie, im WordPress-Vorlagen-Tag-Suchtool nach \u201ewp_get_archives\u201c zu suchen. Denken Sie daran, dass ich nur die wp_get_archives()-Vorlagen-Tags als Platzhalter verwende. Wir werden sie sp\u00e4ter mit anderen WordPress-Widgets \u00e4ndern, nachdem wir die Fu\u00dfzeile hinzugef\u00fcgt haben.<\/p>\n
Widgetisieren Sie es<\/h3>\n
F\u00fcr diesen Abschnitt des Tutorials leihe ich mir Teile aus meinem vorherigen Tutorial zu Widget-Themen aus.<\/p>\n
Der erste Schritt besteht darin, die \u201eSidebars\u201c zu registrieren. Ersetzen Sie dazu einfach den aktuellen Inhalt der Datei \u201efunctions.php\u201c durch Folgendes:<\/p>\n
if (function_exists (‘register_sidebar’))
register_sidebar (Array (
‘name’ => ‘Seitenleiste’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
‘,
‘after_title’ => ‘<\/h3>\n
‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (Array (
‘name’ => ‘Fu\u00dfzeile’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
‘,
‘after_title’ => ‘<\/h3>\n
‘,
));
?><\/p>\n
Jetzt gehen wir zu sidebar.php und ersetzen das aktuelle dynamische bedingte Tag der Seitenleiste durch dieses:<\/p>\n
Mit diesem:<\/p>\n
Jetzt gehen wir in unsere Datei \u201efooter.php\u201c und packen die Fu\u00dfzeilenelemente in ihre jeweiligen bedingten Seitenleisten-Tags ein. F\u00fcgen Sie direkt vor dem ersten \u201eSidebar-Element\u201c-Div Folgendes hinzu.<\/p>\n
Unmittelbar nach dem abschlie\u00dfenden \u201efooter-item\u201c-Div (und \u00fcber dem \u201eclear\u201c-Div, das wir zuvor hinzugef\u00fcgt haben) f\u00fcgen wir Folgendes hinzu:<\/p>\n
Ok, jetzt sollte die Fu\u00dfzeile der Seitenleiste ein Widget haben. Versuchen wir es, indem wir einige Widgets in der Fu\u00dfzeile hinzuf\u00fcgen. Ich f\u00fcge ein Blogroll-Widget, ein Widget f\u00fcr aktuelle Kommentare und ein Text-Widget hinzu. So sollte es aussehen:<\/p>\n
![\"Green](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_185_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\")
<\/p>\n
Abschluss<\/h3>\n
Nun, das sind die Grundlagen f\u00fcr das Hinzuf\u00fcgen einer Widget-Fu\u00dfzeile zu Ihrem Theme. M\u00f6glicherweise m\u00f6chten Sie separate Stilregeln f\u00fcr andere Widget-Typen hinzuf\u00fcgen, z. B. f\u00fcr Kalender oder Suchfelder. Dies wird wahrscheinlich nicht mit allen Themes funktionieren, wie zum Beispiel dem RS12-Theme, da es eine nicht erweiterbare Fu\u00dfzeile hatte.<\/p>\n
Wenn jemand zuf\u00e4llig das aktualisierte Green Rays-Theme haben m\u00f6chte, kann er es hier herunterladen. Auf diese Weise k\u00f6nnen Sie genau sehen, wo ich den Code hinzugef\u00fcgt habe. Sie k\u00f6nnen es auch mit dem Originalthema vergleichen.<\/p>\n
Ich hoffe, Ihnen hat das Tutorial gefallen. Werden Sie Ihrem Theme eine Widget-Fu\u00dfzeile hinzuf\u00fcgen? Gibt es etwas in dem Code, den ich oben verwendet habe, das ich anders machen w\u00fcrde? Fragen, Kommentare, Vorschl\u00e4ge und Kritik sind willkommen. Melden Sie sich also gerne in den Kommentaren.<\/p>\n ","protected":false},"excerpt":{"rendered":"
Die Inspiration f\u00fcr dieses Tutorial stammt von einem Tweet, den ich mit Feedback zum bald erscheinenden RS12-Theme erhalten habe. Obwohl es die Widget-Fu\u00dfzeile letztendlich nicht in die RS12-Theme-Version geschafft hat, habe ich beschlossen, dieses Tutorial zu schreiben, um den Leuten genau zu zeigen, wie sie ihrem Theme eine Widget-Fu\u00dfzeile hinzuf\u00fcgen k\u00f6nnen. In diesem Leitfaden erfahren […]<\/p>\n","protected":false},"author":1,"featured_media":850497,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/2-1.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/850496"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=850496"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/850496\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/850497"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=850496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=850496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=850496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}