Cum să afișați bare laterale conștiente de conținut pentru orice pagină sau tip de postare WordPress

În regulă, să vorbim despre bare laterale care conțin conținut. Cu toate acestea, înainte de a face acest lucru, ar trebui să vorbim mai întâi despre bare laterale în general.

Bara laterală tipică este o bază a designului web și a multor teme WordPress. Acestea sunt un loc bun pentru a afișa informații suplimentare, cum ar fi formularele de contact, cele mai recente sau cele mai populare postări de pe blog, reclama sau orice altceva care nu este principala atracție a site-ului dvs. În timp ce în ultimii ani, tendința s-a îndreptat către proiectele de o pagină fără bare laterale, acestea rămân un element popular.

În majoritatea cazurilor, bara laterală a unui site web va afișa același conținut, indiferent de pagina pe care vă aflați. Cu toate acestea, acesta nu este întotdeauna modul optim de a face acest lucru. De fapt, există o mulțime de motive pentru a afișa bare laterale personalizate pe diferite pagini sau postări care sunt conștiente de conținutul pe care îl însoțesc.

Din acest motiv, în acest articol vrem să vorbim mai multe despre acest subiect. Mai întâi vă vom arăta cazuri de utilizare pentru bare laterale care conțin conținut. În acest fel, veți înțelege dacă au sens pentru dvs. După aceea, vom continua explicând cum să implementăm acest tip de bară laterală pe site-ul dvs. WordPress.

Gata de plecare? Atunci hai să scăpăm.

Care este scopul conținutului conștient de bare laterale?

Înainte de orice altceva, să vorbim despre motivul pentru care v-ați deranja chiar personalizarea barei laterale, în funcție de conținutul în care apar. La urma urmei, bara laterală statică există de veacuri și încă pare să facă trucul. De ce să te încurci cu un sistem de lucru?

După cum se dovedește, există o mulțime de cazuri de utilizare în care are sens să folosești bare laterale conștiente de conținut:

• Onboarding - Vizitatorii pentru prima dată ar putea avea nevoie de conținut diferit ca de obicei. De exemplu, utilizatorii dvs. conectați nu trebuie să vadă apelul la acțiune „înscrieți-vă”, menit să determine oamenii să se alăture site-ului dvs. sau pe lista dvs. de e-mailuri.
• Informații personalizate - Unele informații au mai mult sens pe unele pagini decât pe altele. Exemple includ informații suplimentare de contact pe pagina de contact, cele mai bune sau cele mai recente articole de pe pagina blogului, oferte speciale pe pagina magazinului - veți obține esența.
• Îmbunătățirea SEO - Deși nu este un factor major, conținutul barei laterale contează în continuare pentru optimizarea motorului de căutare (mai ales dacă titlurile widget-urilor sunt învelite în mod corespunzător în etichete de titlu). Prin urmare, puteți utiliza bare laterale care conțin conținut pentru a face paginile dvs. chiar mai vizate.
• Apeluri la acțiune - Puteți utiliza, de asemenea, acest tip de bară laterală pentru a personaliza apelurile la acțiune pentru diferite locuri de pe site-ul dvs. web.
• Limbi - De asemenea, fac posibilă crearea de bare laterale pentru diferite versiuni lingvistice ale site-ului dvs. și vizează diferite piețe.

După cum puteți vedea, există mai multe motive pentru a utiliza bare laterale conștiente de conținut și această listă este departe de a fi exhaustivă. Cu toate acestea, să ne concentrăm acum asupra modului în care să le implementăm.

Cum să implementați bare de conținut conștient în WordPress

Există trei modalități principale de a configura bare laterale personalizate pentru postări și pagini. Toate acestea au în comun faptul că conținutul barei laterale este modificat ca răspuns la pagina sau postarea pe care este afișat. Condițiile includ etichete WordPress, categorii, nume de pagini sau alte atribute, cum ar fi dacă un utilizator este conectat sau nu.

După aceea, bara laterală este de obicei schimbată în unul din cele trei moduri:

• Filtrare widgeturi - O bară laterală este plină de widgeturi și un fel de logică în fundal decide ce widgeturi apar în ce locație și care sunt ascunse
• Configurați bare laterale întregi - O altă modalitate este de a crea bare laterale complet separate, care apar în aceeași locație atunci când sunt îndeplinite condiții diferite. Ele pot conține configurații individuale de widget.
• Hardcoded în temă - Desigur, puteți adăuga, de asemenea, bare laterale personalizate în fișierele temei, dacă aveți coduri de codare pentru aceasta

Personal cred că a doua metodă este cea care are ca rezultat cea mai ordonată interfață cu utilizatorul. Cu toate acestea, în cele ce urmează vom trece în detaliu în fiecare direcție, astfel încât să vă puteți decide. După aceea, vom enumera câteva alte opțiuni pentru a implementa bare laterale personalizate pe site-ul dvs. WordPress.

Folosiți Jetpack Widget Visibility pentru a filtra widgeturile

Cel mai simplu mod de a filtra aspectul widgetului de pe site-ul dvs. este modulul numit în mod adecvat Widget Visibility inclus în Jetpack. Dacă aveți deja pluginul pe site-ul dvs., crearea de bare laterale personalizate este la fel de ușoară ca activarea modulului (dacă nu este deja activ în mod implicit). Alternativ, puteți utiliza și această versiune autonomă.

Odată ce faceți și accesați meniul widget, veți găsi un nou buton de vizibilitate pe toate widget-urile. Faceți clic pe acesta și puteți implementa cu ușurință logica de afișare dorită pentru widget-urile dvs. prin intermediul meniurilor derulante.

Condițiile pentru vizibilitate sunt următoarele:

• Categorie - Widgeturile pot apărea pe anumite pagini de categorii sau pe toate
• Autor - Aspect pe toate paginile autorului sau limitat la anumiți utilizatori
• Utilizator - Verifică dacă utilizatorul este conectat sau nu
• Rol - Controlează widgeturile în funcție de rolul utilizatorului
• Etichetă - Funcționează ca pagini de categorii, dar pentru etichete
• Data - Controlează data la care apar widgeturile de arhive
• Pagină - Setați vizibilitatea widgetului pentru prima pagină, pagina de postări, paginile de arhivă, pagina de eroare 404, tipurile de postări, tipurile de postări și paginile statice

Pentru fiecare opțiune, puteți defini dacă widgeturile sunt afișate sau ascunse. Regulile trebuie introduse separat, ceea ce înseamnă că nu este posibil să introduceți mai multe pagini simultan. Cu toate acestea, această metodă este încă mai convenabilă decât introducerea manuală a ID-urilor de pagină, după cum este necesar în alte soluții (mai multe despre cele de mai jos). Există, de asemenea, o casetă de selectare Potrivire toate condițiile care obligă widgeturile să fie afișate numai dacă toate condițiile sunt valabile.

Bare laterale conștiente de conținut Vă permite să configurați bare laterale personalizate

A doua soluție despre care vrem să vorbim este pluginul Content Aware Sidebars. Așa cum am menționat mai devreme, acest plugin vă permite să configurați bare laterale întregi pe care să le puteți completa cu widgeturi și să le atribuiți postărilor și paginilor. Este destul de simplu de utilizat.

După instalare, veți găsi un nou element de meniu numit Sidebars în meniul WordPress.

Când alegeți Add New aici, ajungeți la acest ecran:

Aici, primul lucru de făcut este să vă denumiți bara laterală. După aceea, este timpul să setați condițiile pentru afișarea acestuia. Opțiunile disponibile sunt similare cu Jetpack:

• Pagini statice - Alegeți pagini statice pentru a afișa bara laterală, cum ar fi prima pagină, rezultatele căutării sau 404 pagini de eroare
• Postări - Aceleași opțiuni ca mai sus, dar pentru postări
• Pagini - Alegeți pe ce pagini de pe site-ul dvs. să afișați bara laterală
• Media - Stabilește pe ce pagini media apare bara laterală
• Autori - Limitați afișarea la paginile autorului
• Șabloane de pagină - Alegeți șabloane de pagină pentru a afișa bara laterală
• Categorii - Alegeți anumite categorii sau toate arhivele categoriilor
• Etichete - Aceleași opțiuni, dar pentru etichete
• Formate - Din nou, aceleași setări pentru arhive de format
• Date - Și încă o dată pentru arhivele de date
• Adrese URL (numai versiunea Pro) - Limitați afișarea barei laterale la anumite adrese URL

Setari aditionale:

• Programare - Setați o sincronizare pentru afișarea barei laterale. În versiunea gratuită sunteți limitat la zile întregi, versiunea Pro oferă mai multe intervale de timp granulare.
• Proiectare - Adăugați clase CSS personalizate în bara laterală, widget-uri și titluri de widget-uri pentru a le manipula
• Avansat - Setați ordinea barei laterale (în cazul în care există mai multe)

În plus, puteți să îmbinați bare laterale între ele, să le înlocuiți, să le configurați ca zone widget și să le controlați vizibilitatea pentru utilizatorii conectați (roluri de utilizator disponibile în Pro).

După ce ați terminat configurarea, noua bară laterală apare în meniul widget normal, unde îl puteți completa, activa și dezactiva și chiar vedea reviziile anterioare. Ingrijit si usor.

Creați manual bare laterale personalizate

În cele din urmă, este, de asemenea, posibil să creați bare laterale personalizate prin codificare. WordPress oferă o mulțime de opțiuni pentru asta și vom trece repede peste proces.

Primul lucru de făcut pentru a crea bare laterale personalizate este să înregistrați o nouă zonă widgetizată. Pentru aceasta, pur și simplu introduceți următorul cod în functions.php al temei dvs. (copil):

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

Cu asta:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

După aceea, acesta este rezultatul final pe frontend:

Desigur, dacă aveți costuri de dezvoltare suplimentare, este posibil să adăugați mai multe condiții, cum ar fi afișarea barei laterale numai pentru utilizatorii conectați. Puteți obține, de asemenea, mai detalii despre locul în care să-l afișați folosind ierarhia șablonului WordPress. S-ar putea să nu fie cea mai dinamică soluție, cu toate acestea, face trucul și poate funcționa complet în fundal fără a fi nevoie să instalați pluginuri suplimentare.

Modalități suplimentare de implementare a barei laterale conștiente de conținut

În afară de opțiunile de mai sus, avem și alte câteva pluginuri cu funcționalități similare.

Logică widget

Acest plugin funcționează similar cu soluția Jetpack, cu toate acestea, în loc de meniuri derulante, trebuie să introduceți manual etichete condiționate WordPress. În acest fel, puteți stabili unde apar widgeturile în funcție de câte reguli doriți.

Cu toate acestea, pentru a face acest lucru, trebuie să cunoașteți ID-urile paginilor dvs. și, în general, este puțin mai tehnic decât ceea ce am văzut mai sus. Asta nu înseamnă că nu funcționează și nu este un plugin puternic, cu toate acestea, oamenii mai puțin tehnici ar putea fi mai bine cu altceva.

Barele laterale personalizate

Realizat de WPMU DEV, aici avem o altă soluție pentru a configura bare laterale conținând conținut care funcționează cu orice zonă widget. Pluginul vă permite să afișați dinamic widget-uri pe orice postare, pagină, arhivă de categorii, tip de postare și multe altele. În plus, face toate acestea cu o interfață cu utilizatorul foarte puternică și ușor de utilizat. Pentru o introducere completă, consultați articolul lui Tom Ewer pe site-ul lor.

Barele laterale simple ale paginii

Soluția finală pentru a crea bare laterale personalizate este făcută pentru simplitate. Vă permite să alocați bare laterale și să faceți modificări în bloc direct din editorul de pagini. După ce ați făcut acest lucru, puteți să le completați ca de obicei în meniul widget.

Din păcate, lipsesc opțiuni de personalizare mai avansate. Cu toate acestea, dacă doriți doar să aveți diferite bare laterale pentru paginile dvs., aceasta ar putea fi soluția pe care o căutați.

Conținutul conștient de bare laterale într-un cuvânt scurt

Există multe motive întemeiate pentru a utiliza bare laterale personalizate pe site-ul dvs. Nu tot conținutul are nevoie de aceleași informații pentru a apărea lângă el. Cu ajutorul barei laterale care conțin conținut, puteți afișa ceea ce are sens în loc să utilizați o bară laterală standard.

În acest tutorial, am învățat mai multe moduri de a crea bare laterale personalizate. De la filtrarea widgeturilor peste crearea de bare laterale noi până la codificarea lor în tema dvs., totul este acolo.

Înarmat cu aceste informații, puteți oferi acum conținutului din bara laterală de care aveți nevoie pentru o interacțiune mai bună a utilizatorilor și servicii pentru publicul dvs. Incearca!

Care este experiența dvs. cu bare laterale care conțin conținut? Spuneți-ne în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului de Kit8.net/ shutterstock.com