Aggiungi un piè di pagina widget al tuo tema WordPress

L’ispirazione per questo tutorial proviene da a tweet che ho ricevuto con feedback per il prossimo rilascio Tema RS12.


risposta twitter di zakmorris

Sebbene il piè di pagina widget non sia riuscito a farcela con il rilascio del tema RS12, ho deciso di scrivere questo tutorial per mostrare alle persone come aggiungere esattamente un piè di pagina widget nel tema. In questa guida imparerai:

  • Il codice HTML e CSS necessario per produrre il piè di pagina widget
  • Come aggiungere tag modello WordPress comunemente usati come segnaposto
  • Come widgetizzare il piè di pagina e posizionare i widget al suo interno

Ci sarà molto codice in questo post, quindi se sei pronto, continua a leggere …

Userò il Raggi verdi Tema WordPress come il mio esempio in questo tutorial. Al momento, il piè di pagina ha solo un messaggio e crediti “copyright” standard.

HTML

Il primo passo è aggiungere il markup HTML. Diciamo che avremo tre diverse sezioni nel piè di pagina con widget con elenchi di post più recenti, archivi mensili e archivi giornalieri. Posizioneremo questo codice HTML sopra l’attuale riga “copyright”.

messaggi recenti

Archivi mensili

Archivi Giornalieri

Fondamentalmente questo codice mette ogni “widget” in un div. All’interno di ogni widget è presente un’intestazione e un elenco non ordinato con collegamenti. Sì, so che i link non vanno da nessuna parte. In seguito lo sostituiremo con tag modello WordPress. Ecco cosa abbiamo finora:

Piè di pagina dei raggi verdi 1

Il CSS

Come puoi vedere, non sembra così bello senza uno stile CSS. Aggiungi il seguente codice al tuo foglio di stile.

.footer-item {
galleggiante: a sinistra;
larghezza: 33%;
imbottitura inferiore: 10px;
}
.piè di pagina ul {
imbottitura-sinistra: 15px;
}

Ciò che fa questo codice è di spostare ogni elemento a piè di pagina a sinistra, il che significa sostanzialmente che possono essere fianco a fianco. La larghezza è impostata al 33%, il che offre spazio sufficiente per elementi a piè di pagina in una sola riga. C’è anche un po ‘di imbottitura aggiunta sotto ogni elemento del piè di pagina. Il secondo pezzo è solo riempiendo gli elenchi di 15 pixel a sinistra.

Ora puoi vedere che HTML e CSS stanno iniziando a riunirsi. Ecco cosa dovresti avere finora:

Piè di pagina dei raggi verdi 2

Codice WordPress

Al momento, abbiamo un sacco di collegamenti HTML vuoti, senza un vero codice WordPress. Sostituiamo gli elenchi in Articoli recenti, Archivi mensili e Archivi giornalieri con gli equivalenti dei tag del modello WordPress. Sostituisci ciò che hai attualmente con quanto segue:

messaggi recenti

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

Archivi mensili

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

Archivi Giornalieri

    <?php wp_get_archives (‘type = daily&Limite = 4’ ); ?>

I parametri dovrebbero essere abbastanza esplicativi, ma se non sei sicuro di nessuno di essi, prova a cercare wp_get_archives nel Strumento di ricerca tag modello WordPress. Ricorda, sto solo usando i tag del modello wp_get_archives () come segnaposto. Li sostituiremo con altri widget di WordPress in seguito, dopo che avremo programmato il piè di pagina.

Widgetize It

Per questa sezione del tutorial, prenderò in prestito parti dal mio precedente temi di widget lezione.

Il primo passo è registrare le “barre laterali”. Per fare ciò, è sufficiente sostituire il contenuto corrente del file Functions.php con il seguente:

<?php
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘nome’ => ‘Sidebar’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘nome’ => ‘Footer’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

Ora andremo in sidebar.php e sostituiremo l’attuale tag condizionale della barra laterale dinamica con questo:

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

Con questo:

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

Ora andremo nel nostro file footer.php e avvolgeremo gli elementi del piè di pagina nel rispettivo tag condizionale della barra laterale. Proprio prima del primo div “elemento della barra laterale”, aggiungi quanto segue.

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

Subito dopo il div di “footer-item” di chiusura finale (e sopra il div “clear” che abbiamo aggiunto in precedenza) aggiungeremo quanto segue:

<?php endif; ?>

Bene, ora la nostra barra laterale e piè di pagina dovrebbero essere widget. Proviamo aggiungendo alcuni widget nel piè di pagina. Aggiungerò un widget Blogroll, un widget Commenti recenti e un widget di testo. Ecco come dovrebbe essere:

Piè di pagina dei raggi verdi 3

Conclusione

Bene, questa è la base per aggiungere un piè di pagina widgetizzato al tuo tema. Potresti voler aggiungere regole di stile separate per altri tipi di widget come il calendario o la casella di ricerca. Questo probabilmente non funzionerà con tutti i temi, come ad esempio il tema RS12, poiché aveva un piè di pagina non espandibile.

Se qualcuno vuole il tema Green Rays aggiornato per caso, puoi scaricarlo Qui. In questo modo puoi vedere esattamente dove ho aggiunto il codice. Puoi confrontarlo con il tema originale anche.

Spero ti sia piaciuto il tutorial. Aggiungerai un piè di pagina widgetizzato al tuo tema? C’è qualcosa nel codice che ho usato sopra che faresti diversamente? Domande, commenti, suggerimenti e critiche sono tutti ben accetti, quindi sentitevi liberi di esprimervi nei commenti.

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