Cum să afișați diferite bare laterale pentru postări și pagini în WordPress

Publicat: 2023-02-16

În mod implicit, WordPress arată aceeași bară laterală pe toate postările și paginile. Dar uneori, poate doriți să afișați o bară laterală complet diferită pentru cele mai importante postări sau articole din bara laterală legate de o întreagă categorie de postări. Dacă te-ai întrebat vreodată cum să faci asta, ai noroc!

În acest articol, vă vom arăta cum să creați bare laterale unice pentru diferite postări sau pagini, atât manual, cât și cu pluginuri WordPress. Dar mai întâi, să vorbim mai multe despre motivul pentru care ai putea dori să faci asta.

De ce ați putea dori bare laterale diferite

După cum am menționat mai devreme, dacă aveți o mulțime de categorii în blogul dvs., puteți fi tentat să aveți o bară laterală cu oferte, anunțuri sau produse similare cu acel subiect. Sau poate doriți să vorbiți despre afacerea dvs. într-o bară laterală „Despre noi”, adaptată publicului fiecărei pagini.

În aceste tipuri de situații, veți dori să aveți o bară laterală unică. Există două moduri în care puteți crea unul: manual, dezvoltându-vă propriul dvs. sau cu un plugin WordPress.

Să acoperim mai întâi modul manual.

imaginea instrumentelor rigle tastatură și plantă aliniate pentru a afișa bara laterală wordpress pe birou cu alte cărți și tehnologie

Cum să creați manual o nouă bară laterală WordPress

Pentru a crea manual o nouă bară laterală, în mod ideal ar trebui să utilizați o temă copil într-un mediu local. Am creat deja una pentru tema douăzeci și șaptesprezece, dar puteți urma același proces pentru orice temă.

Mai întâi, găsiți fișierul în care este înregistrată bara laterală în tema dvs. De obicei, este fișierul functions.php, dar poate varia în funcție de tema dvs.

Deschideți fișierul și găsiți funcția pentru codul barei laterale. În general, va consta din register_sidebar și funcția completă ar putea arăta cam așa:

[php]

funcția twentyseventeen_widgets_init() {

register_sidebar(

matrice(

'name' => __( 'Blog Sidebar', 'twentyseventeen' ),

'id' => 'bara laterală-1',

'description' => __( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală în postările de blog și paginile de arhivă.', 'twentyseventeen' ),

'before_widget' => '<section id=”%1$s” class="widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

)

);

register_sidebar(

matrice(

'name' => __( 'Footer 1', 'twentyseventeen' ),

'id' => 'bara laterală-2',

'description' => __( 'Adăugați widget-uri aici pentru a apărea în subsol.', 'twentyseventeen' ),

'before_widget' => '<section id=”%1$s” class="widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

)

);

register_sidebar(

matrice(

'name' => __( 'Footer 2', 'twentyseventeen' ),

'id' => 'bara laterală-3',

'description' => __( 'Adăugați widget-uri aici pentru a apărea în subsol.', 'twentyseventeen' ),

'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', 'twentyseventeen_widgets_init');

[/php]

Acum copiați întreaga funcție și creați un fișier functions.php în tema copilului (dacă nu îl aveți deja) și lipiți codul. Asigurați-vă că schimbați numele funcției.

În funcție de câte bare laterale suplimentare trebuie să creați, puteți pur și simplu să replicați același cod și să atribuiți un id unic fiecărei bare laterale. De asemenea, ar trebui să schimbați numele și descrierea pentru a face fiecare unică. Aici am creat două noi bare laterale:

[php]

funcția twentyseventeen_new_widgets_init() {

register_sidebar(

matrice(

'nume' => __( 'Bară laterală WordPress', 'douăzeci şi şaptezeci' ),

'id' => 'bara laterală-4',

'description' => __( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală în postările de blog legate de wordpress.', 'twentyseventeen' ),

'before_widget' => '<section id=”%1$s” class="widget %2$s”>',

'after_widget' => '</section>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

)

);

register_sidebar(

matrice(

'name' => __( 'Bară laterală Web Design', 'twentyseventeen' ),

'id' => 'bara laterală-5',

'description' => __( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală în postările de blog legate de design web.', 'twentyseventeen' ),

'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', 'twentyseventeen_new_widgets_init');

[/php]

Noile bare laterale sunt gata acum; Dacă verificați secțiunea de widget-uri, aceasta va afișa două noi zone de widget-uri. Am adăugat un widget text simplu în fiecare bară laterală pentru a le face recunoscute.

tabloul de bord wordpress widget-uri și selector de conținut wordpress și bară laterală diferită cu mai multe subsoluri

După ce ați creat barele laterale, este timpul să atribuiți locația. Căutăm să înlocuim bara laterală dreaptă existentă, așa că trebuie să găsiți fișierul unde se află.

Pentru acest caz, este în sidebar.php . Copiați fișierul din tema părinte și inserați-l în tema copilului.

Dacă verificați fișierul, apelează sidebar-1 , care este id-ul barei laterale principale din dreapta.

[php]

<aside id=”secondary” class=”widget-area” role=”complementary” aria-label=”<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>”>

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aparte>

[/php]

Acum, vom crea o bară laterală pentru categoria mea de web design și alta pentru categoria mea WordPress. Acest lucru poate fi realizat în două moduri diferite: unul este o abordare bazată pe șablon și celălalt este o abordare bazată pe categorii.

Abordare bazată pe șabloane

În această abordare, trebuie să creați diferite șabloane în funcție de cerințele dvs. Pentru acest exemplu, single.php este responsabil pentru postările individuale, așa că puteți copia și lipi fișierul în tema copilului. Redenumiți fișierul în consecință, cum ar fi wordpress-post.php și adăugați și un nume de șablon.

[php]

/* Numele șablonului: Bara laterală WordPress

* Tip de postare șablon: post*/

[/php]

De asemenea, am creat un alt șablon numit webdesign-post.php .

tema wordpress twentyseventeen cu wordpress-post și webdesign-post în fișiere locale

Acum, reveniți la fișierul sidebar.php al temei copil și adăugați o condiție simplă pentru a verifica ce șablon este utilizat. Pentru aceasta, vom folosi funcția is_page_template() .

Codul se explică de la sine. Verifică ce șablon este utilizat și setează bara laterală în consecință. Dacă niciuna dintre condiții nu este îndeplinită, va folosi bara laterală implicită.

[php]

<?php

if ( is_page_template('wordpress-post.php') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( is_page_template('webdesign-post.php') ){

dynamic_sidebar( 'bara laterală-5');

}altfel{

dynamic_sidebar( 'sidebar-1' );

}

?>

[/php]

Acum să creăm o nouă postare și să atribuim unul dintre șabloanele pe care tocmai le-am creat.

editați șablonul atributelor postării wordpress cu bară laterală diferită

Veți vedea că am selectat bara laterală WordPress pentru această postare specială.

previzualizare wordpress a postării live cu bară laterală diferită

Abordare bazată pe categorii

Pentru acest exemplu (schimbarea barei laterale pe baza categoriilor de postări), o abordare bazată pe categorii va funcționa mai bine decât abordarea bazată pe șablon. Pentru a face acest lucru, va trebui să ajustați condiția din sidebar.php pe baza categoriei în loc de șablon folosind funcția in_category() .

[php]

<?php

dacă (în_categorie('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif (in_category('web-design') ){

dynamic_sidebar( 'sidebar-5' );

}altfel{

dynamic_sidebar( 'sidebar-1' );

}

?>

[/php]

Acum, dacă editați sau creați o postare nouă, trebuie doar să adăugați categoria dorită. Va afișa bara laterală în consecință, deci nu este nevoie să alegeți niciun șablon! Aici am ales web design ca categorie de postare, așa că va apărea bara laterală de web design.

Actualizarea barei laterale wordpress pe baza categoriilor de design web selectate

Practic, trebuie doar să ajustați condiția sidebar.php în funcție de cerințele dumneavoastră specifice.

Cum să creați bare laterale personalizate cu pluginuri WordPress

Dacă întâmpinați probleme la crearea manuală a barelor laterale, puteți încerca câteva pluginuri WordPress utile care vă permit să le creați cu ușurință!

Un astfel de plugin este Content Aware Sidebars. Este un plugin simplu care vă permite să creați în mod dinamic bare laterale pe pagini individuale, postări, categorii etc.

Odată instalat, veți vedea un meniu Sidebars în panoul de administrare.

Bare laterale > Adăugați nou

opțiunea pluginului pentru barele laterale wordpress adăugați o nouă bară laterală

Mai întâi, adăugați un nume în bara laterală. Puteți seta apoi condițiile de afișare din meniul derulant Condiții din bara laterală . O bară laterală poate avea mai multe condiții, cum ar fi pagini, postări, categorii, autor etc.

setați sugestiile mele pentru bara laterală diferită pentru postările și paginile wordpress

Puteți să vă programați bara laterală din fila de programare și să modificați etichetele HTML în fila de proiectare.

Veți vedea o casetă Opțiuni în partea dreaptă. De acolo, puteți seta locația și regulile noii bare laterale. De asemenea, puteți efectua acțiuni, cum ar fi crearea unui cod scurt al barei dvs. laterale.

Odată ce bara dvs. laterală este publicată, o puteți accesa din secțiunea Aspect > Widgeturi .

în aparență, widget-urile editează opțiunile barei mele laterale pentru a obține o bară laterală wordpress diferită pentru postări și pagini

Această nouă bară laterală va apărea automat pe pagini și postări, conform setărilor tale.

De asemenea, pluginul vă permite să selectați barele laterale atunci când editați fiecare postare sau pagină, indiferent de setările inițiale.

În cadrul unei postări sau pagini, veți vedea un panou Bare laterale – Selectare rapidă în partea dreaptă, care vă va afișa toate barele laterale existente. De acolo vă puteți selecta bara laterală în locația țintă stabilită anterior în setările inițiale.

De exemplu, am creat anterior bara mea laterală , iar locația țintă era bara laterală a blogului , așa că în panoul Selectare rapidă , bara mea laterală va fi disponibilă numai pentru bara laterală a blogului .

selectați rapid barele laterale de blog pentru postări și pagini pentru a obține diferite bare laterale wordpress

Totuși, puteți crea noi bare laterale din secțiunea de editare a paginii. Doar introduceți numele noii bare laterale și publicați sau actualizați pagina.

noua bară laterală wordpress selectată pe baza postărilor și paginilor

Dacă creați o nouă bară laterală, va trebui doar să o activați în secțiunea Aspect > Widgeturi .

detalii pe bara laterală diferită pentru postări și pagini din tabloul de bord wordpress

Notă: De asemenea, puteți atribui bare laterale paginilor dvs., dar asigurați-vă că șablonul de pagină include o bară laterală. Fără aceasta, bara laterală nu va fi afișată, chiar dacă o setați în secțiunea de editare a paginii.

Concluzie

Flywheelers fac echipă unii cu alții cum să afișeze bare laterale diferite pentru postări și pagini în wordpress

Ați văzut acum două opțiuni pentru crearea barelor laterale: dezvoltarea manuală, precum și cu pluginuri. Dacă nu sunteți confortabil cu codurile, atunci folosirea unui plugin ar putea fi cea mai bună opțiune pentru dvs., dar dacă aveți o cerință specifică și nu doriți să adăugați un plugin suplimentar pe site-ul dvs., atunci ar trebui să alegeți modul manual. . Important este să vă înțelegeți cerințele și apoi să alegeți cea mai bună opțiune!