Utilizați un tip de post personalizat pentru conținutul dvs. lateral

Ce veți crea

Adesea folosesc widget-ul text pentru a adăuga conținut personalizat la barele laterale pe site-urile pe care le dezvolt. Acestea sunt widget-uri utile deoarece acceptă text și HTML, deci dacă puteți scrie HTML, le puteți folosi pentru a adăuga tot felul de conținut.

Cu toate acestea, dacă clienții mei vor edita bara laterală și nu sunt familiarizați cu HTML, este foarte ușor pentru ei să spargă lucrurile, mai ales dacă am inclus imagini sau link-uri.

O modalitate ușoară în acest sens este de a înlocui zonele widget în tema dvs. cu un tip de post personalizat, folosind WP_Query pentru a scoate mesaje din tipul postului personalizat în bara laterală.

Faceți acest lucru în două etape:

Înregistrați un tip de post personalizat pentru barele laterale.
Creați o funcție pentru a scoate conținutul barelor laterale și adăugați-le la sidebar.php fișier în tema dvs..

De asemenea, vom crea câteva bare laterale în adminul WordPress, vom verifica modul în care ar arăta și vom adăuga ceva stil pentru ei.

Ce ai nevoie

Pentru a lucra prin acest tutorial, veți avea nevoie de:

o instalare de dezvoltare a WordPress
un editor de cod

Voi crea o temă copilărească de Twenty Fifteen pentru a face acest lucru, dar puteți adăuga codul la propria temă sau puteți prefera să folosiți un plugin pentru a înregistra tipul postului și pentru a crea funcția, apoi adăugați funcția la tema ta sidebar.php fişier.

Crearea unei teme pentru copii

Dacă lucrați cu propria temă, puteți trece peste această parte, dar dacă începeți de la zero, cel mai simplu mod de a încerca această tehnică este să utilizați o temă copilărească. Voi crea un copil din tema Douăzeci și cincisprezece.

În dosarul tematic în wp-content, creați un dosar și dați-i un nume relevant pentru tema dvs. Îi sun pe a mea tutsplus-Sidebar-personalizat-post-tip.

În acest dosar, creați două fișiere goale: style.css și functions.php. Faceți o copie a textului sidebar.php fișier de la Twenty Fifteen în tema copilului dumneavoastră, de asemenea. Veți edita acest lucru mai târziu și WordPress va folosi fișierul șablon din tema copilului dvs. pentru a afișa bara laterală, în loc de cea de la Twenty Fifteen.

În noul stil de stil, adăugați următoarele:

/ * Nume temă: Tuts + Utilizați un tip de post Cusotm pentru URI pentru conținutul lateral al barei de poștă: http://rachelmccollin.co.uk/tutsplus-use-custom-post-type-for-sidebars/ Descriere: Tema de a sprijini tuts + tutorial cu privire la utilizarea un CPT pentru barele laterale. Tema copilului pentru tema Twenty Fifteen. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Format: twentyfifteen Versiune: 1.0 * / @import url ("... /twentyfifteen/style.css");

Va trebui să editați detaliile temei și ale autorului ca temă, nu a mea, dar asta vă oferă ideea.

Activați acum noua temă pentru site-ul dvs., prin tematică ecran în WordPress admin.

Înregistrarea tipului de mesaj personalizat

Următorul pas este să înregistrați tipul postului personalizat pentru barele laterale. Faceți acest lucru în fișierul funcțiilor temei (sau dacă creați un plugin pentru acest lucru, creați un fișier nou în dosarul pluginurilor din wp-content).

Deschide functions.php fișier în temă și adăugați acest cod:

("Sidebar"), "add_new_item", "add_new" => __ (' => __ ('Adăugare bara laterală'), 'edit_item' => __ ('Bara laterală modificată'), 'new_item' 'search_items' => __ ('Sidebaruri de căutare'), 'not_found' => __ ("Nu s-au găsit vederi laterale"), "not_found_in_trash" => __ (" $ args = array ('labels' => etichete $, 'has_archive' => false, 'public' => true, 'hierarchical' => false, extras "," câmpuri personalizate "," miniatură "," atribute de pagină ");); register_post_type ('sidebar_post', $ args);  add_action ('init', 'tutsplus_create_sidebar_post_type');

Aceasta înregistrează sidebar_post post tip personalizat. Rețineți că l-am numit în mod deliberat sidebar_post si nu bara laterală. Acest lucru se datorează faptului că o mulțime de teme deja utilizează .bara laterală clasa pentru bara laterală a acestora, ceea ce ar putea duce la un conflict cu clasele CSS emise de post_class () șablon de șablon când vrem să creăm o buclă mai târziu.

Acum, dacă actualizați ecranele de administrare, veți vedea tipul de post personalizat afișat:

Acum adăugați niște bare laterale în același mod în care adăugați un post normal. Aici sunt ale mele:

Unul dintre barele mele laterale nu consta decât dintr-o imagine prezentată. Acest lucru este deliberat, deoarece în buclă voi crea imagini de performanță în scurt timp.

Crearea unei funcții pentru afișarea barelor laterale

În momentul în care barele dvs. laterale nu vor apărea pe site-ul dvs., deoarece nu le-ați adăugat la tema dvs. Deci, următorul pas este să scrieți o funcție care o folosește WP_Query pentru a scoate posturile barei laterale.

Crearea funcției

Din nou în fișierul cu funcții, adăugați următoarele:

funcția tutsplus_sidebars () $ args = array ('post_type' => 'sidebar_post'); $ query = noua valoare WP_query ($ args); dacă ($ query-> have_posts ()) ?> have_posts ()): $ interogare-> the_post (); / * începe buclă * /?>

Să aruncăm o privire prin acest cod pentru a identifica ce face:

În primul rând, creează o funcție numită tutsplus_sidebars (), pe care o vom adăuga mai târziu la sidebar.php fişier.
În cadrul acestei funcții, ea definește argumentele pentru WP_Query, și anume că tipul de post este sidebar_post.
Verifică că interogarea returnează postările și, dacă da, începe o buclă.
Se deschide un deoparte element folosind the_ID () și post_class () pentru a genera un ID și clase în CSS.
Se adaugă o h3 element cu titlul postului din acesta.
Verifică dacă postul are o imagine prezentată și, dacă da, o transmite.
Acesta scoate conținutul postului în interiorul a secțiune element.
Se închide deoparte element, încheie bucla și utilizările rewind_posts () pentru a reseta interogarea.

Salvați acum fișierele cu funcții.

Adăugarea funcției în fișierul șablon lateral al barei

Funcția pe care tocmai ați scris-o nu este atașată nici unui cârlig, astfel încât WordPress nu are cum să o execute. În schimb, trebuie să o apelați sidebar.php fişier.

Deschide sidebar.php fișier în tema dvs. Dacă lucrați cu un copil din tema Douăzeci și cincisprezece, aceasta va fi copia pe care ați făcut-o mai devreme.

Dacă doriți ca bara dvs. laterală să fie formată doar din aceste postări din bara laterală și nici widget-uri, ștergeți orice cod pentru a afișa widget-uri. Dacă doriți să păstrați widget-urile, lăsați-le înăuntru.

În cazul meu, voi șterge widget-urile din fișierul cu douăzeci și cinci de fise laterale, așadar șterg aceste linii:

Acum adăugați funcția de ieșire a barelor laterale. În Douăzeci și Cinceprezece o adaug pe la sfârșitul anului sidebar.php fișier, după endif; linia. În tema dvs. puteți adăuga oriunde doriți ieșirea sidebar-urilor:

Acum, aruncați o privire la site-ul dvs. Barele laterale vor fi afișate:

Ei au nevoie încă de un stil, pe care o vom ajunge în curând. Dar mai întâi să îngrijim zonele widget.

Anulați înregistrarea zonei Widget

Dacă lucrați cu o temă de copil și nu doriți să utilizați widget-uri în bara laterală, va preveni confuzia dacă eliminați zonele widget în tema copilului dumneavoastră. Aceasta înseamnă că nu vor apărea în ecranul de administrare Widgets. Dacă lăsați o zonă widget înregistrată, utilizatorii îi pot adăuga widget-uri și pot fi nedumerit atunci când nu apar pe site.

Dacă lucrați cu propria temă, tot ce trebuie să faceți este să ștergeți codul care a înregistrat aceste widget-uri în primul rând (sau să nu adăugați zone de widgeturi pentru a începe). Dar dacă utilizați o temă de copil nu puteți edita tema părinte, deci va trebui să utilizați unregister_sidebar () pentru a elimina zona widget (uri) din bara laterală.

În tema copilului tău functions.php fișier, adăugați aceasta:

funcția tutsplus_unregister_sidebar_widget_area () unregister_sidebar ('sidebar-1');  add_action ('widgets_init', 'tutsplus_unregister_sidebar_widget_area', 15);

Acest lucru anulează înregistrarea Sidebar-1 o zonă widget, care este ID-ul zonei widget pe care am eliminat-o din sidebar.php fişier. Rețineți că atunci când atașați funcția la widgets_init cârlig de acțiune, am adăugat o prioritate 15 pentru a vă asigura că această funcție este executată după înregistrarea barei laterale în primul rând, care are prioritatea implicită 10.

Acum, ecranul de administrare Widgets nu afișează zone widget:

Modelarea barelor laterale

În acest moment barele mele laterale nu se aliniază frumos cu celălalt conținut al buclei laterale, așa cum este desenat de foaia de stil Twenty Fifteen. Dacă utilizați propria temă, este posibil să nu aveți această problemă sau să aveți probleme diferite pe care trebuie să le rezolvați cu stilul.

Pentru a rezolva problema cu Twenty Fifteen, trebuie doar să adăugați o linie de CSS. Deschideți foaia de stil a temei copilului și adăugați aceasta:

.sidebar-post marja: 0 20%;

Acum salvați foaia de stil și vizualizați din nou site-ul:

Asa e mai bine! Acum, barele laterale sunt afișate corect.

rezumat

Utilizarea unui tip de post personalizat pentru conținutul barei laterale poate face viața mult mai ușoară dacă oamenii care editează site-ul nu au experiență cu cod. Utilizarea posturilor în acest fel înseamnă că pot folosi ecranele de administrare WordPress normale pentru a crea bare laterale și apoi a le trimite pe site.

Dacă vă place puteți adăuga la această tehnică prin adăugarea de argumente suplimentare în WP_Query. Poate puteți crea o taxonomie pentru postările din bara laterală și postările de ieșire prin taxonomie sau pentru a scoate conținut diferit (de ex. Includerea sau omiterea titlului postului sau a imaginii recomandate) în funcție de taxonomie (sau chiar mai bună, metadatele postate). Sau puteți adăuga un argument pentru postările care trebuie sortate după menu_order și adăugați că atunci când vă înregistrați tipul postului.

Cod