Cum să adăugați o bară laterală la WordPress » Ghid final pas cu pas

Când vă creați site-ul WordPress, ar trebui să adăugați o bară laterală ca una dintre secțiunile de aspect ale site-ului dvs. WordPress. Crearea unei bare laterale în site-ul HTML de bază este simplă, deoarece trebuie doar să utilizați etichetele barei laterale <aside> </aside>, dar pentru a adăuga o bară laterală la WordPress aveți nevoie de o abordare diferită.

Etichetă șablon de bară laterală: cum este afișată bara laterală în WordPress

Este important să vă amintiți că WordPress funcționează cu etichete șablon și antetul este apelat cu funcția get_header() în timp ce subsolul este apelat cu funcția get_footer(). Pentru bara laterală, aceasta este afișată cu eticheta șablon get_sidebar().

Această etichetă șablon poate fi adăugată oriunde doriți să adăugați bara laterală WordPress. Dar înainte de a începe să afișați bara laterală WordPress, trebuie să aflăm cum este creată, astfel încât să existe în codul dvs. de temă înainte de a o putea apela în șabloane.

Există doi pași majori pe care ar trebui să îi urmați pentru a adăuga o bară laterală în WordPress; acești pași includ: înregistrarea barei laterale, apelarea barei laterale

Cum să adăugați o bară laterală la WordPress pas cu pas

Pentru a adăuga cu succes noua bară laterală la WordPress sau pentru a crea o bară laterală personalizată în WordPress, trebuie să urmați următorii pași:

1. Mai întâi, creați o copie de rezervă a temei dvs. WordPress
2. Creați o temă copil din tema WordPress părinte, iar tema copil ar trebui să aibă fișierul functions.php
3. În interiorul acestui fișier functions.php al temei copilului, veți folosi funcția register_sidebar() pentru a crea bara laterală.
4. Creați fișierul sidebar.php și adăugați funcția dynamic_sidebar() la acest fișier cu numele barei laterale astfel – dynamic_sidebar( 'sidebar-1' ) unde sidebar-1 este id-ul barei laterale pe care ați adăugat-o când ați înregistrat bara laterală.
5. În fișierele șablon ale temei , acum puteți apela bara laterală folosind eticheta șablon get_sidebar() .
6. Dacă ați creat o bară laterală personalizată , puteți utiliza funcția dynamic_sidebar() pentru a afișa bara laterală personalizată.

Anatomia unei bare laterale WordPress

Pentru a înțelege în profunzime cum funcționează bara laterală în WordPress, trebuie să aflați cum codul barei laterale este răspândit în diferite fișiere de teme WordPress.

Funcții din bara laterală WordPress

Este important de știut că cele trei funcții WordPress legate de adăugarea barei laterale WordPress sunt:

• Înregistrați bara laterală – register_sidebar()
• Bara laterală dinamică – dynamic_sidebar()
• Obține bara laterală – get_sidebar()

Înregistrează Bara laterală – Pasul unu

Această funcție register_sidebar() este prima funcție care creează bara laterală și se află în fișierul functions.php al temei tale.

Când deschideți fișierul functions.php al temei, ar trebui să vedeți această funcție register_sidebar() care înregistrează diferitele bare laterale afișate pe tema dvs.

La fel ca și în cazul temei implicite Twenty seventeen WordPress, puteți vedea în imaginea de mai jos codul care înregistrează barele laterale pe tema respectivă:

Practic, această funcție este cea care pornește totul

Înregistrați parametrii barei laterale

Funcția barei laterale registru este exprimată ca o funcție care preia diferitele argumente care pot fi sub forma de date a unui tablou sau a unui șir. În general, poate fi exprimat astfel:

register_sidebar( array|string $args = array() )

Următoarea este o imagine a funcției register_sidebar, așa cum este utilizată într-o temă WordPress, unde diferiții parametri sunt adăugați la matricea care este transmisă în apelul funcției:

Această funcție WordPress are diverse argumente pe care le poate accepta, care pot fi fie un șir PHP, fie o matrice PHP. Argumentele includ:

• Nume – acesta este numele sau titlul barei laterale, ar trebui să fie un șir.
• ID – acesta este un identificator unic al barei laterale pe care îl veți folosi funcția dynamic_sidebar () pentru a apela bara laterală.
• Descriere – aceasta este descrierea barei laterale care se afișează în interfața Widgets și este un șir.
• Clasa acesta este un argument pentru a adăuga o clasă CSS suplimentară pentru bara laterală, care vă va ajuta la stilare.
• Before_widget – acesta este conținutul HTML care este adăugat înainte ca fiecare dintre barele laterale să fie afișată
• After_widget – acesta este conținutul HTML care este adăugat după ce fiecare dintre barele laterale este afișată
• Before_title acesta este conținutul HTML care trebuie adăugat la titlul barei laterale când este afișat și implicit este de obicei eticheta HTML de deschidere <h2>.
• After_title acesta este conținutul HTML care trebuie adăugat la titlul barei laterale atunci când este afișat și implicit este de obicei eticheta HTML de deschidere <h2>.

Această funcție este adăugată la fișierul functions.php și înregistrează barele laterale WordPress folosind un cârlig de acțiune precum cel distribuit mai jos:

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

Pentru a înregistra o bară laterală trebuie să ne conectăm la evenimentul widgets_init și avem funcția de apel invers cu un nume la alegerea noastră, așa cum, în acest caz, am numit funcția de apel invers drept 'njengah_tutorial_sidebars'

Codul complet pe care ar trebui să-l adăugați în fișierul functions.php pentru a înregistra bara laterală este următorul:

 <?php

//Funcția de apel invers 

funcția njengah_register_sidebar_tutorial() {
	
	//Înregistrați funcția Sidebar - https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		matrice(
			'name' => __( 'Exemplu de bară laterală', 'textdomain' ),
			'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ă.', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget' => '</section>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// Cârlig de acțiune 

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Bara laterală dinamică – Pasul doi

Această funcție dynamic_sidebar() apelează acum bara laterală pe care am înregistrat-o la pasul unu de mai sus și codul este plasat în fișierul sidebar.php sau în orice alt fișier în care dorim să afișam bara laterală pe care am creat-o în primul pas.

Expresia generală a funcției dynamic_sidebar() este următoarea:

dynamic_sidebar( int|string $index = 1 )

Această funcție ia un argument întreg sau șir și acesta poate fi fie numele, fie parametrii ID utilizați la înregistrarea barei laterale în primul pas.

În cele douăzeci și șaptesprezece tema WordPress implicită când deschideți fișierul sidebar.php, veți vedea funcția dynamic_sidebar() așa cum se arată în imaginea de mai jos:

În acest caz, puteți vedea că trecem parametrul id al funcției register_sidebar la funcția dynamic_sidebar , astfel încât să putem afișa acea bară laterală ca bară laterală implicită. După cum se arată în imaginea de mai jos:

Dacă am înregistra această bară laterală ca o bară laterală personalizată, am folosi codul de mai sus pentru a afișa în orice fișier șablon de temă care ar putea include; antet, subsol, corp și așa mai departe. Deci, codul pentru afișarea barei laterale ar trebui să fie după cum urmează:

 <?php if ( is_active_sidebar( 'personalizat' ) ) : ?>
  <div id="sidebar">
    <?php dynamic_sidebar( 'personalizat' ); ?>
   </div>
<?php endif; ?>

După cum puteți vedea, folosim o instrucțiune if pentru a valida dacă bara laterală este activă, iar funcția pe care o folosim aici este is_active_sidebar() . Această funcție descoperă pur și simplu dacă bara laterală transmisă în dynamic_sidebar() este în uz. Aceasta este una dintre etichetele condiționale WordPress.

Obțineți bara laterală - Pasul trei

Când creați bara laterală implicită WordPress într-o temă, trebuie să vă înregistrați , creați fișierul sidebar.php și, în sfârșit, utilizați eticheta de șablon get_sidebar() t pentru a încărca bara laterală în șablon.

Get_sidebar poate fi folosit pentru a afișa diferite bare laterale în diferite pagini, deoarece în mod implicit funcția acceptă un argument șir care este echivalent cu numele barei laterale. Numele pe care l-ați folosit pentru a înregistra bara laterală sau parametrul ID, așa cum este prezentat în pasul de mai sus.

get_sidebar( string $name = null )

Deci, dacă aveți o bară laterală numită „ cool-sidebar ”, puteți apela bara laterală într-un șablon de pagină personalizat, după cum urmează:

get_sidebar('cool-sidebar');

De asemenea, puteți avea mai multe bare laterale pentru fiecare pagină și puteți utiliza o declarație if/else pentru a afișa condițional fiecare dintre barele laterale în diferite pagini, ca în acest cod, unde avem trei bare laterale; unul pentru pagina de pornire, altul pentru 404 și bara laterală implicită:

 if ( is_home() ):

      get_sidebar('acasă');

   elseif ( is_404() ):

      get_sidebar('404');

   altceva:

     get_sidebar();

endif;

Fișiere din bara laterală WordPress

Este la fel de important să știți că cele șapte fișiere de teme WordPress comune în care este adăugat codul barei laterale sunt:

• functions.php File
• sidebar.php File
• Pages Files
• Posts Files
• Custom Posts Type Files
• footer.php File
• header.php File

Codul poate fi adăugat și la pluginuri în care vă înregistrați și afișați widget-uri din bara laterală, cum ar fi unele dintre cele mai comune pluginuri pentru widget-uri WordPress.

Dacă sunteți un dezvoltator WordPress sau un începător în WordPress, învățați cum funcționează WordPress , înțelegerea modului în care aceste fișiere sunt legate de adăugarea și afișarea barei laterale WordPress va fi un pas grozav spre a deveni un profesionist.

Cum funcționează codul din bara laterală în fiecare fișier WordPress temă

Într-un rezumat rapid, cele trei funcții de adăugare a barei laterale în WordPress sunt plasate în fiecare dintre aceste fișiere ilustrate în tabelul de mai jos, respectiv:

Pentru a adăuga bara laterală în WordPress, ar trebui să urmați cei trei pași pe care i-am subliniat în acest tutorial de dezvoltare WordPress, care include:

• Register – Înregistrați bara laterală în functions.php folosind register_sidebar()
• Apelați bara laterală implicită/ bara laterală personalizată - Apelați bara laterală din fișierul sidebar.php pentru bara laterală implicită, dar sau bara laterală personalizată o puteți apela în orice fișier șablon folosind dynamic_sidebar()
• Afișați bara laterală în șabloanele WP Post – În șablonul de pagină, postare și pagină personalizată și șablonul de postare personalizat, puteți apela bara laterală folosind eticheta șablon get_sidebar().

Cum să adăugați o bară laterală la exemplu de cod WordPress

Următorul este exemplul de cod despre cum ați adăuga o bară laterală implicită într-o temă WordPress pe care o vom denumi ca Njengah Tutorial Sidebar

Înregistrați bara laterală

Primul pas îl înregistrăm după cum urmează:

 /**
* Înregistrați zona widget.
*
* @link https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

funcția njengah_register_sidebar_tutorial() {

  //Înregistrați funcția Sidebar - https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        matrice(
                  'name' => __( 'Njengah Tutorial Sidebar ', 'textdomain' ),
                   'id' => 'njengah-sidebar-default',
                   'description' => __( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală în postările de blog și paginile de arhivă.', 'textdomain' ),
                   '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', 'njengah_register_sidebar_tutorial');

Rezultatul va fi văzut pe tabloul de bord WordPress sub aspect > Widgeturi , așa cum se arată în imaginea de mai jos:

Apelați bara laterală implicită în fișierul Sidebar.php

În fișierele sidebar.php sau index nu ar trebui să apelăm bara laterală după cum urmează:

 dacă ( ! is_active_sidebar('njengah-sidebar-default') ) {
   întoarcere;
}

  dynamic_sidebar('njengah-sidebar-default');

Afișează bara laterală

În cele din urmă, în șabloanele noastre de pagină, am apela pur și simplu bara laterală folosind următorul cod

get_sidebar();

Încheierea

În această postare, am subliniat în mod cuprinzător abordarea pas cu pas despre cum să adăugați bara laterală în tema WordPress. Într-un rezumat rapid, trebuie să vă amintiți că sunt doar 2 sau trei pași; pentru a adăuga bara laterală implicită în WordPress trebuie să înregistrați bara laterală în functions.php , să creați un fișier sidebar.php unde apelați bara laterală pe care ați înregistrat-o la pasul unu și în șabloanele de pagină sau postați utilizați funcția get_sidebar pentru a apela implicit bara laterală .

Dacă adăugați bare laterale personalizate, nu aveți nevoie de ultima parte, deoarece ați plasa direct codul dynamic_sidebar() în șablon sau în fișierul în care doriți să afișați bara laterală. De exemplu, în subsol, veți vedea în mod obișnuit widget-urile de subsol afișate folosind această funcție dynamic_sidebar().

Sper că ați învățat ceva nou din acest tutorial sau că ați înțeles mai bine cum să adăugați o bară laterală la tema WordPress fără neapărat să copiați și să lipiți codul în fișierul functions.php. Dacă doriți mai mult ajutor în acest domeniu sau aveți nevoie de sfaturi de la un dezvoltator WordPress profesionist, nu ezitați să mă contactați.