Antet personalizat WordPress: ce este și cum să creați unul

Una dintre cele mai flexibile și utile funcționalități pe care WordPress le-a introdus vreodată este Anteturile personalizate. Este o caracteristică care vă permite să personalizați secțiunea de sus a site-ului dvs. WordPress, oferindu-vă posibilitatea de a o personaliza după cum credeți de cuviință, folosind un șablon de antet personalizat. Și, ca și în cazul majorității funcționalităților WordPress, există mai multe modalități de a personaliza un antet, folosind funcții de temă, cod personalizat sau un plugin WordPress.

În acest articol, vă vom prezenta aceste trasee și vă vom oferi câteva exemple. Dar mai întâi, să vorbim despre anteturile WordPress și de ce v-ați deranja să le personalizați.

De ce să folosiți un antet WordPress personalizat?

Antetul este unul dintre cele mai esențiale aspecte grafice ale unui site web, deoarece este primul lucru pe care îl vor observa vizitatorii tăi. Ca atare, merită să examinați dacă modificarea antetului site-ului dvs. ar putea îmbunătăți experiența utilizatorului. De exemplu, puteți îmbunătăți estetica și designul antetului, astfel încât mesajul dvs. de afaceri să fie comunicat mai eficient vizitatorilor.

Găzduiește-ți site-ul web cu Pressidium

GARANTIE 60 DE ZILE BANI RAPIS

VEZI PLANUL NOSTRU

Mai mult, un antet bine structurat poate ajuta vizitatorii să exploreze conținutul dvs. mai ușor și poate fi folosit pentru a-i împinge ușor către produse sau servicii pe care doriți să se concentreze.

Ce poți schimba de fapt

Din punct de vedere tehnic, aproape orice este deschis pentru modificare în antetul site-ului, inclusiv dimensiunea fontului, imaginile, schema de culori și așa mai departe. Puteți adăuga o zonă de widgeturi, puteți aplica diferite stiluri pentru anumite pagini, puteți poziționa sigla după cum doriți, puteți aplica butoanele CTA (Call to Action), modificați meniul de navigare și multe altele!

Dacă în acest moment, ești convins că ai nevoie de un șablon de antet personalizat, iată opțiunile care vin cu WordPress atât pentru dezvoltatori, cât și pentru non-codatori.

Cum să personalizați un antet în WordPress

Să ne uităm la unele dintre cele mai populare moduri de personalizare a antetului.

Utilizați Personalizatorul temei dvs

Pentru a utiliza personalizatorul WordPress încorporat pentru a vă edita antetul, mai întâi trebuie să aflați dacă tema dvs. acceptă acest lucru. Puteți căuta tema în biblioteca oficială de teme și puteți utiliza filtrele pentru a afla dacă tema curentă are o funcție încorporată pentru anteturi personalizate.

Dacă instalați una dintre temele care vin cu această caracteristică, veți observa că, la activare, unele elemente de meniu suplimentare apar sub meniul „Aspect”. Dacă instalați și activați Blog Forever, de exemplu, veți obține acest meniu:

După ce faceți clic pe elementul de meniu „Header”, veți fi transferat la opțiunile antet.

În meniul de personalizare, puteți găsi și alte opțiuni care vă ajută să personalizați antetul.

O mulțime de opțiuni sunt disponibile aici. Puteți schimba culorile, puteți adăuga widget-uri în antet, cum ar fi rețelele sociale sau informațiile de contact, puteți schimba sloganul etc.

Dar ce se întâmplă dacă tema ta nu este una dintre temele „editabile pentru antet”?

Cum să adăugați suport pentru antet personalizat la tema dvs

Să luăm tema GeneratePress ca exemplu de teme care nu acceptă această funcționalitate. Dacă instalați și activați această temă, nu veți vedea nicio opțiune pentru a schimba imaginea antetului în personalizarea temei.

Dacă aveți abilități de codificare și utilizați versiunea de bază WordPress 3.4 sau o versiune ulterioară, puteți activa destul de ușor funcția de antet personalizat. Îl puteți adăuga cu ușurință utilizând funcția add_theme_support() .

Mergeți în folderul temei dvs., găsiți fișierul functions.php și deschideți-l cu editorul preferat. Apoi adăugați următoarea linie:

 add_theme_support( 'custom-header' );

Și gata, acum vei putea vedea opțiunea de imagine antet pe pagina personalizatorului și în meniul Aspect. Puteți să-l utilizați și să încărcați o imagine pentru antetul dvs.

De asemenea, puteți transmite argumente pentru a seta oricare dintre opțiunile disponibile. Iată un exemplu despre cum puteți seta dimensiunea imaginii adăugând cod în functions.php:

 function mytheme_custom_header_setup() { $args = array( 'width' => 1000, 'height' => 250, ); add_theme_support( 'custom-header', $args ); } add_action( 'after_setup_theme', 'mytheme_custom_header_setup' );

After_setup_theme este folosită pentru a ne înregistra funcționalitatea imediat după inițializarea temei.

Cu toate acestea, după cum puteți observa, nu apare nicio imagine pe antet, ceea ce este normal, deoarece nu am făcut nimic pentru a o afișa.

Cum să afișați imaginea antetului

Pentru a afișa imaginea antetului, trebuie să utilizați funcția get_header_image() WordPress astfel:

 <?php if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; ?>

Puteți merge oriunde de aici, în funcție de cerințele și abilitățile dvs. de codare. Puteți adăuga o etichetă sau un titlu secundar sau oricare dintre widget-urile temei utilizând cârligul și, desigur, adăugați propriul dvs. CSS pentru a-l șlefui.

Ar trebui să inserați această bucată de cod personalizat în fișierul șablon de antet al instalării dvs. WordPress. Acest fișier nu este același pentru toate temele. Dacă nu știți care este, puteți consulta ierarhia șablonului, sau uitați de ce fișier și adăugați codul la antet prin functions.php folosind funcția wp_head().

 function my_custom_function(){ if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; }; add_action('wp_head', 'my_custom_function');

De asemenea, este important de subliniat că astfel de personalizări ar trebui aplicate într-o temă copil, astfel încât modificările să nu se piardă la actualizările temei.

Desigur, dacă utilizați o temă bloc WordPress precum Twenty Twenty Two care acceptă un editor complet de site, lucrurile pot deveni și mai ușoare pentru dvs. Vom intra în mai multe detalii despre acest lucru într-un articol viitor.

Creați un antet personalizat folosind un plugin WordPress

Există diverse plugin-uri populare care pot fi folosite pentru a vă ajuta să vă personalizați antetul WordPress. De fapt, prea multe pentru a intra în acest articol.

Acestea fiind spuse, există unul care merită verificat, deoarece poate fi folosit nu numai pentru a vă personaliza antetul, ci și ca instrument util pentru a insera cod în zona „dreaptă” a site-ului dvs. atunci când este necesar. Salutați pluginul „Inserați anteturi și subsoluri”.

Pluginul Inserare anteturi și subsoluri este util în multe feluri. Nu numai că vă permite să adăugați cod la antet, subsol sau corp, dar păstrează și toate acestea organizate într-un singur loc, sub „Setări -> Inserați anteturi și subsoluri”.

Totuși, nu este recomandat pentru non-codatori, deoarece mai trebuie să inserați scripturi. Dacă doriți să vă personalizați antetul și să evitați codificarea, vă recomandăm pluginul Add Custom Header Images pe care îl furnizează WordPress.

Tot ce trebuie să faci odată ce este instalat și activat, este să creezi o pagină (vizibilă sau privată) intitulată „The Headers” și să încarci imagini în ea.

Ceea ce face pluginul este a) să activeze opțiunea de personalizare „Header” și b) să analizeze toate imaginile încărcate în pagina „The Headers” și să le furnizeze ca anteturi sugerate în personalizare. Destul de la moda!

Concluzie

Antetul dvs. WordPress este primul lucru pe care îl va vedea cineva pe site-ul dvs. Ca atare, merită să vă asigurați că arată cât mai bine posibil! Sperăm că cele de mai sus v-au oferit câteva indicii și sfaturi despre cum să faceți acest lucru, indiferent dacă sunteți sau nu fericit să codificați.