Header.php - Ceea ce trebuie să meargă și ce nu are

În acest tutorial, să vorbim despre header.php, un fișier esențial pentru orice temă WordPress. Vă voi arăta un exemplu de fișier de antet frumos și veți da sfaturi despre ceea ce trebuie să meargă în el și ce nu.

Pasul 1: Introducere

Primul lucru de care aveți nevoie să știți despre header.php fișierul este funcția dvs..

Dar, avem mai mult decât un logo și un meniu în acest fișier, de asemenea, avem cap eticheta și multe alte etichete, cum ar fi: legătură, scenariu, meta și titlu.

Am scris un exemplu header.php fișier, am încercat să creez un fișier cât mai complet posibil, dar nu ezitați să comentați acest tutorial oferind sfaturi despre fișier.

Rețineți că antetul dvs. este tot conținutul afișat pe toate paginile site-ului dvs. De exemplu, logo-ul și meniul sunt afișate pe toate paginile astfel încât ... ambele vor fi adăugate la header.php

Dacă un element este afișat numai pe o anumită pagină, trebuie să re-gândiți dacă acest element trebuie să se afle în interiorul antetului dvs..

Să lucrăm și sper că vă place!

Pasul 2: Codul final

Aici puteți obține codul final de utilizat în tema dvs. Citiți ceilalți pași pentru a afla exact ce are fiecare linie.

Mai întâi, lipiți aceste linii în partea de sus a dvs. functions.php fişier: (Rețineți că trebuie să modificați căile spre fișierele CSS și JavaScript)

 defini ("THEME_DIR", get_template_directory_uri ()); / * --- REMOVE GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); / / REGISTER css / screen.css ** / wp_register_style ('stil de ecran', THEME_DIR. '/Css_path/screen.css', array (), '1', 'toate '); wp_enqueue_style ("stil de ecran");  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // Funcția SCURTA ENQUEUE enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', fals); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 AlteScript.js ** / wp_register_script ('personalizat-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ("personalizat-script");  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Acum, înăuntrul tău header.php adăugați următoarele linii: (Rețineți că trebuie să modificați căile spre fișierele CSS și JavaScript)

       >              <?php wp_title(); ?> - <?php bloginfo( 'name' ); ?>    >

Un antet "trebuie" să aibă câteva lucruri, acest șablon pe care l-am făcut face următoarele (în pașii următori voi vorbi despre fiecare):

doctypes
Condiții pentru IE8, 7, 6
Etichete Meta pentru a vă asigura că tema dvs. este redată corect
Favicon, RSS și Pingback
Titlu
Urmând îndrumările oficiale WordPress, adăugând scripturi și stiluri wp_enqueue_script și wp_enqueue_style funcții
Optimizată cu utilizarea constantelor și eliminarea etichetei Meta Generator pentru a vă ajuta cu securitatea
Codul curat și comentat

Pașii de mai jos vor vorbi despre codul utilizat și veți afla de ce să îl utilizați.

Pasul 2: The functions.php Fişier

Să începem să vorbim despre functions.php fișier, am adăugat aceste linii în fișier:

 defini ("THEME_DIR", get_template_directory_uri ()); / * --- REMOVE GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); / / REGISTER css / screen.cs ** / wp_register_style ('stil de ecran', THEME_DIR. '/Css_path/screen.css', array (), '1', 'toate '); wp_enqueue_style ("stil de ecran");  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // Funcția SCURTA ENQUEUE enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', fals); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 AlteScript.js ** / wp_register_script ('personalizat-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ("personalizat-script");  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Prima linie creează doar o constantă numită THEME_DIR care stochează directorul șablon, vom crea această constantă pentru a optimiza tema, dacă te uiți în nostru header.php fișierul, avem nevoie de directorul de câteva ori și îl folosim functions.php fișier, de asemenea, pentru a imprima calea temei. Dacă sunăm get_template_directory_uri () tot timpul, noi creăm doar cereri. Creând o constanta si folosindu-ne salvam procesarea serverului, pentru ca numim o singura functie.

 / * --- REMOVE GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator');

Această linie elimină eticheta Meta Generator, deoarece această etichetă arată pentru oricine versiunea WordPress instalată. Acest tip de informații pot permite unui invadator să cunoască erorile versiunii dvs. și să le exploateze.

Adăugarea CSS

 / / REGISTER css / screen.cs ** / wp_register_style ('stil de ecran', THEME_DIR. '/Css_path/screen.css', array (), '1', 'toate '); wp_enqueue_style ("stil de ecran");  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Aici, am creat o funcție pentru a adăuga legătură etichete pentru a header.php. Instrucțiunile oficiale WordPress spun că modalitatea mai bună de a adăuga stiluri (.css) și scripturi (.js) este cu wp_enqueue_script și wp_enqueue_style funcții. Puteți afla mai multe despre acest lucru în articolul nostru, Cum să includem JavaScript și CSS în temele și pluginurile WordPress.

Mai întâi, vom crea o funcție numită enqueue_styles și apoi sunăm ADD_ACTION funcția, această linie spune WordPress că trebuie să apeleze funcția noastră atunci când evenimentul "wp_enqueue_scripts" este declanșat, ceea ce se întâmplă în timpul apelului nostru către wp_head () în header.php!

În cadrul funcției noastre avem următoarele linii:

 / ** REGISTER css / screen.cs ** / wp_register_style ('stil de ecran', THEME_DIR. '/Css_path/screen.css', array (), '1', 'toate'); wp_enqueue_style ("stil de ecran");

Mai întâi, înregistrăm foaia de stil și apoi adăugăm-o în coada de așteptare a WordPress.

Folosim funcția wp_register_style pentru a înregistra un stil, această funcție cere următoarele:

# 1 Param: Un nume pe care îl poți alege, ceva de genul stilul meu, mediaqueries...
# 2 Param: Calea fișierului, rețineți că folosim THEME_DIR constant aici.
# 3 Param: Aici introduceți dependențele, numele fișierelor de stil care trebuie încărcate înainte de acest fișier.
# 4 Param: Versiunea.
# 5 Param: Atributul media pentru eticheta de link.

Apoi, numim wp_enqueue_style funcția și vom trece ca parametru numele stilului nostru care va fi adăugat.

Pentru a adăuga mai multe stiluri la fișierul dvs., trebuie doar să duplicați aceste două linii și să modificați numele, directorul și ceilalți parametri.

Adăugarea scripturilor

Acum vom vedea funcția care adaugă scripturile noastre.

 // Funcția SCURTA ENQUEUE enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', fals); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 AlteScript.js ** / wp_register_script ('personalizat-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ("personalizat-script");  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Aici procesul este același, diferența este că folosim și alte funcții pentru a adăuga scripturi.

Pentru a adăuga scripturi, folosim wp_register_script și wp_enqueue_script funcții. wp_register_script funcția necesită următoarele:

# 1 Param: Un nume pe care îl puteți alege, cum ar fi jquery, dojo, etc.
# 2 Param: Directorul de fișiere, rețineți că folosim THEME_DIR constant aici.
# 3 Param: Aici introduceți dependențele, numele fișierelor de script care trebuie încărcate înainte de acest fișier.
# 4 Param: Versiunea.
# 5 Param: Aici spui dacă acest script va fi adăugat în wp_head () (de obicei în header.php) sau wp_footer () (de obicei în footer.php) apeluri funcționale. Dacă treceți fals, acesta va fi încărcat wp_head (). Dacă treceți cu adevărat, va fi încărcat wp_footer ()

Apoi, numim wp_enqueue_script funcția și vom trece ca parametru numele scriptului nostru care va fi adăugat.

Pentru a adăuga mai multe scripturi în fișierul dvs., trebuie doar să duplicați aceste două linii și să modificați numele, directorul și ceilalți parametri.

Pasul 3: The header.php

Mai întâi, vă vom prezenta aici linkurile către bibliotecile pe care le puteți utiliza pe acest șablon, deja folosesc jQuery și Shimul HTML5 în acest șablon, dar puteți adăuga altele.

jQuery - biblioteca pentru a adăuga efecte drăguțe temei dvs., cred că probabil știți deja această bibliotecă și de fapt este deja inclusă în WordPress în mod implicit
Modernizr - această bibliotecă vă permite să știți exact caracteristicile suportate de browserul utilizatorului
HTML5 Shim - această bibliotecă permite browserelor care nu au suport nativ pentru marcarea HTML5 pentru a începe să o susțină
Respond.js - permite browserelor pentru care nu există suport nativ Interogări media CSS3 pentru a începe să o sprijiniți

Puteți descărca aceste biblioteci și puteți actualiza căile din header.php fişier.

doctype

În acest șablon folosim doar doctype implicit HTML5:

Etichetă

În această parte am folosit câteva condiționalități IE pentru a adăuga o clasă în conformitate cu versiunea IE sau nu adăugați nimic dacă browserul nu este IE 8 sau mai mic (Firefox, IE9, Chrome și altele).

Acest lucru este cu adevărat util pentru că puteți crea o regulă în interiorul fișierului dvs. CSS pentru a afecta un obiect în cazul în care browser-ul este IE 7 face următoarele:

 / * RUNEAZĂ PE TOATE BROWSERII * / #mymenu width: 400px;  / * ROWS ONLY pe IE7 * / .77 #mymenu width: 200px;

Dar puteți crea, de asemenea, un fișier CSS separat și îl puteți conecta în interiorul zonei de condiționări, vom vorbi despre el în pașii de mai jos. Alegerea este a ta.

Etichete

Meta-etichetele sunt foarte importante deoarece transmit anumite informații browserului pentru a asigura redarea corectă a temei.

Această linie asigură că browserele nu vor fi utilizate Modulul Quirks, foarte util pentru că acest mod de redare poate întrerupe aspectul.

Această linie spune charset la browser, evitând personaje necunoscute!

Doar meta-tag-uri de bază care pot ajuta SEO din tema ta. Puteți să adăugați cuvinte cheie care descriu site-ul dvs. web și să introduceți numele sau numele companiei.

Această etichetă elimină / resetează orice zoom prestabilit al unui dispozitiv mobil cum ar fi iPad și iPhone, foarte util dacă lucrați la un aspect receptiv.

Etichete

Acest lucru adaugă a favicon la pagina dvs., oferind un aspect mai profesionist site-ului dvs. web.

Un link către feed-ul RSS al site-ului dvs..

O legătură pentru adresa URL Pingback a site-ului dvs..

</code> Etichetă</h3> <pre> <title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?> Eticheta titlului este foarte importantă deoarece înlocuiește titlul implicit și este utilă pentru a vă îmbunătăți rangul în motoarele de căutare.
 wp_head ()
  
 Aceasta este o funcție foarte importantă, tu TREBUIE SA sunați această funcție! Prin această funcție, WordPress adaugă codul din pluginuri, alte biblioteci JavaScript și multe altele.
 
 Concluzie
 Și sa terminat! Sper că te-ai bucurat de acest articol și te rog, nu ezitați să comentați despre șablon și să oferiți fragmentul de cod pentru a-l îmbunătăți!



		
			
	   
	




Cod