Adăugați un subsol Widgetized la tema dvs. WordPress

Inspirația pentru acest tutorial provine de la o tweet pe care l-am primit cu feedback pentru curând să fie lansat Tema RS12.


raspuns zakmorris twitter

Deși subsolul widgetizat nu l-a făcut în cele din urmă în lansarea temei RS12, am decis să scriu acest tutorial pentru a arăta oamenilor cum să adauge exact un subsol widgetizat în tema dvs. În acest ghid, veți afla:

  • Codul HTML și CSS necesar pentru producerea subsolului widgetizat
  • Cum să adăugați etichete de șablon WordPress utilizate frecvent
  • Cum să widgetizeze subsolul de subsol și să plasezi widget-uri în el

Va fi o mulțime de coduri în această postare, așa că dacă sunteți la dispoziție, citiți mai departe …

Voi folosi Razele verzi Tema WordPress ca exemplu în acest tutorial. În momentul de față, subsolul are doar un mesaj „drepturi de autor” și credite standard.

HTML

Primul pas este să adăugați marcajul HTML. Să presupunem că vom avea trei secțiuni diferite în subsolul widgetizat, cu liste cu cele mai recente postări, arhive lunare și arhive zilnice. Vom așeza acest cod HTML deasupra liniei actuale „drepturi de autor”.

Postări recente

Arhivele Monthy

arhive zilnice

Practic, acest cod pune fiecare „widget” într-o div. În interiorul fiecărui widget se află un titlu și o listă neordonată cu link-uri. Da, știu că linkurile nu merg nicăieri. Ulterior, vom înlocui acest lucru cu etichete șablon WordPress. Iată ce avem până acum:

Razele verzi de subsol 1

CSS

După cum vedeți, acest lucru nu arată atât de bine fără niciun stil CSS. Adăugați următorul cod în foaia de stil.

.footer-item {
plutește la stânga;
latime: 33%;
căptușire-jos: 10px;
}
.footer-item ul {
căptușire-stânga: 15px;
}

Ce face acest cod este să plutești fiecare element de subsol la stânga, ceea ce înseamnă practic că pot fi unul lângă altul. Lățimea este setată la 33%, ceea ce oferă suficient spațiu pentru trei articole de subsol într-un singur rând. Există, de asemenea, un pic de umplutură adăugată sub fiecare articol de subsol. Cea de-a doua piesă este doar căptușirea listelor cu 15 pixeli la stânga.

Acum puteți vedea HTML și CSS încep să se alăture. Iată ce ar trebui să aveți până acum:

Rays Green Footer 2

Cod WordPress

În acest moment, avem o grămadă de legături HTML goale, fără cod WordPress real. Înlocuim listele din postările recente, arhivele lunare și arhivele zilnice cu echivalentele etichetelor de tip WordPress. Înlocuiți ceea ce aveți în prezent cu următoarele:

Postări recente

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

Arhivele Monthy

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

arhive zilnice

    <?php wp_get_archives (‘type = zilnic&Limita = 4’ ); ?>

Parametrii ar trebui să fie destul de explicați, dar dacă nu sunteți sigur de niciunul dintre ei, încercați să căutați wp_get_archives în Instrument de căutare a etichetelor WordPress. Amintiți-vă, folosesc doar etichetele de șablon wp_get_archives () ca marcator de loc. Mai târziu, le vom schimba cu alte widget-uri WordPress, după ce vom widgetiza subsolul.

Widgetize It

Pentru această secțiune a tutorialului, voi împrumuta părți din precedentele mele widgetizing teme tutorial.

Primul pas este înregistrarea „barelor laterale”. Pentru a face acest lucru, pur și simplu înlocuiți conținutul curent al fișierului funcții.php cu următoarele:

<?php
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘nume’ => ‘Sidebar’,
‘before_widget’ => „“,
‘after_widget’ => „“,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘nume’ => ‘Subsol’,
‘before_widget’ => „“,
‘after_widget’ => „“,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

Acum, vom intra în sidebar.php și vom înlocui eticheta condițională a barei laterale dinamice curente cu aceasta:

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

Cu asta:

<?php if (! function_exists (‘dinamic_sidebar’) ||! dinamic_sidebar ("Bara laterală")): ?>

Acum, vom merge în fișierul nostru footer.php și vom înfășura articolele de subsol în propria sa etichetă condițională pentru bara laterală. Înainte de prima divizare „sidebar-item”, adăugați următoarele.

<?php if (! function_exists (‘dinamic_sidebar’) ||! dinamic_sidebar ("Subsol")): ?>

Imediat după div „închiderea finală” div (și deasupra div-ului „clar” pe care l-am adăugat mai devreme), vom adăuga următoarele:

<?php endif; ?>

Bine, acum bara laterală și subsolul nostru ar trebui să fie widgetizate. Să-l testăm adăugând câteva widget-uri în subsol. Voi adăuga un widget Blogroll, widget Comentarii recente și un widget text. Iată cum ar trebui să arate:

Rays Green Footer 3

Concluzie

Ei bine, aceasta este elementele de bază pentru adăugarea unui subsol widgetizat la tema dvs. Poate doriți să adăugați reguli de styling separate pentru alte tipuri de widget, cum ar fi calendarul sau caseta de căutare. Probabil că aceasta nu va funcționa cu fiecare temă, cum ar fi tema RS12, de exemplu, deoarece avea un subsol neexpandibil.

Dacă cineva dorește cu orice șansă tema actualizată a razelor verzi, o puteți descărca aici. În acest fel puteți vedea unde am adăugat exact codul. Îl poți compara cu tema originală de asemenea.

Sper că v-a plăcut tutorialul. Vei adăuga un subsol widgetizat la tema ta? Există ceva în codul pe care l-am folosit mai sus, ar face altfel? Întrebările, comentariile, sugestiile și criticile sunt binevenite, așa că nu ezitați să sunați în comentarii.

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