În acest ghid, vom vorbi despre header.php. un fișier necesar pentru fiecare temă WordPress. Vă voi arăta un bun exemplu al acestui dosar și veți da sfaturi cu privire la ce ar trebui să fie în el și ce nu ar trebui să fie.
Pasul 1: Introducere
În acest fișier nu avem doar logo și meniu, există și o etichetă cap și multe alte etichete, de exemplu: link. script-ul. meta și titlu.
Amintiți-vă că "capacul" dvs. este conținutul afișat în toate paginile site-ului dvs. De exemplu, pe toate paginile se afișează o siglă și un meniu, astfel încât acestea vor fi adăugate la header.php.
Dacă un element este afișat numai pe o anumită pagină, trebuie să vă gândiți din nou la întrebarea dacă să adăugați acest element în fișierul cu antet.
Să mergem la muncă, sper că vă place!
Pasul 2. Codul gata
Aici puteți obține codul complet pentru utilizarea în subiectul dvs. Citiți ceilalți pași pentru a înțelege exact ceea ce face fiecare linie.
Ar trebui să existe câteva lucruri în capac. Acest șablon, pe care l-am făcut, face următoarele: (în etapele următoare voi vorbi despre fiecare dintre acestea)
Apoi vom vorbi despre codul pe care l-am folosit. Veți afla de ce trebuie să-l utilizați.
Pasul 3. Funcțiile fișierului.php
Să vorbim despre fișierul functions.php. am adăugat următoarele fișiere în fișier:
Prima linie creează THEME_DIR constantă. care stochează directorul de șabloane. Creăm această constantă pentru a optimiza subiectul. Dacă te uiți în fișierul header.php. veți vedea că trebuie să folosim directorul de mai multe ori, îl folosim, de asemenea, în fișierul functions.php. pentru a obține calea spre subiect. Dacă apelăm constant get_template_directory_uri (). noi doar creăm interogări. Prin crearea unei constante și folosind-o, salvăm resursele procesorului, deoarece suntem numiți doar o dată.
Această linie șterge eticheta Meta Generator. deoarece această etichetă arată tuturor versiunea instalată a WordPress. Aceste informații pot permite unui atacator să recunoască erorile versiunii dvs. și să le utilizeze.
Adăugarea CSS-ului
Aici am creat o funcție pentru a adăuga o etichetă link în header.php. Oficial Ghidul WordPress indică faptul că cel mai bun mod de a adăuga stil (.css) și script-uri (Js) - este utilizarea funcțiilor și wp_enqueue_style wp_enqueue_script. Mai multe despre asta puteți afla aici.
În primul rând, vom crea o funcție numită enqueue_styles și apoi ne numim funcția ADD_ACTION. Această linie spune WordPress, că el ar trebui să solicite funcția noastră ca „wp_enqueue_scripts“ este un eveniment care are loc la wp_head nostru de apel () în header.php!
În cadrul funcției noastre, avem următoarele linii:
Mai întâi vom înregistra foaia de stil și o adăugăm în coada WordPress.
Utilizăm funcția wp_register_style. pentru a înregistra un stil. Această funcție necesită următoarele:
- Parametrul # 1. Un nume pe care îl puteți alege este ceva de genul meu. mediaqueries ...
- Parametrul # 2. Calea spre fișier, rețineți că aici folosim THEME_DIR constant.
- Parametrul # 3. Aici scrieți dependențele dvs., numele foilor de stil pe care trebuie să le încărcați înainte de acest fișier.
- Parametrul # 4. Versiunea.
- Parametrul # 5. Atributul media pentru eticheta de link.
Apoi numim funcția wp_enqueue_style și transmitem ca parametru numele stilului nostru care va fi adăugat.
Pentru a adăuga mai multe stiluri la fișier, copiați aceste două linii și modificați numele, directorul și alți parametri.
Adăugarea de scripturi
Acum ne vom uita la funcția care adaugă scenariile noastre.
Aici procesul este același, diferența fiind că folosim și alte funcții pentru a adăuga scripturi.
Pentru a adăuga scripturi, folosim funcțiile wp_register_script și wp_enqueue_script. Funcția wp_register_script necesită următorii parametri:
- Parametrul # 1. Numele pe care îl puteți alege este ceva de genul jquery. dojo. și altele asemenea.
- Parametrul # 2. Calea spre fișier, rețineți că aici folosim THEME_DIR constant.
- Parametrul # 3. Aici scrieți dependențele dvs., numele fișierelor de script pe care trebuie să le încărcați înainte de acest fișier.
- Parametrul # 4. Versiunea.
- Parametrul # 5. Aici spui, va fi adăugat la acest script apel wp_head funcția () (de obicei header.php) sau wp_footer () (de obicei, în footer.php). Dacă treceți fals. acesta va fi încărcat în wp_head (). Dacă treci adevărat. Acesta va fi încărcat în wp_footer ().
Apoi numim funcția wp_enqueue_script și transmitem ca parametru numele scriptului nostru pe care dorim să-l adăugăm.
Pentru a adăuga mai multe scripturi în fișierul dvs., copiați aceste două linii și modificați numele, directorul și alți parametri.
Pasul 4. header.php
Mai întâi voi lista aici referințele la bibliotecile pe care le putem folosi în acest șablon, deja folosesc jQuery și HTML5 Shim în acest șablon, dar puteți adăuga altele.
- jQuery este o bibliotecă pentru adăugarea de efecte interesante temei dvs., cred că nu cunoașteți această bibliotecă în mod corect, este deja inclusă în WordPress în mod implicit.
- Modernizr - această bibliotecă vă permite să știți exact caracteristicile pe care browserul utilizatorului le suportă.
- HTML5 Shim - această bibliotecă permite browserelor care nu au suportul de markup încorporat HTML5 să o susțină.
- Respond.js - permite browserelor care nu au suport integrat pentru cererile media CSS3, începe să le susțină.
Puteți descărca aceste biblioteci și puteți schimba căile din fișierul header.php.
În acest șablon, folosim pretestul standard HTML5:
etichetă
În această parte am folosit câteva condiții pentru IE. care adaugă o clasă în conformitate cu versiunea IE. sau nu adaugă nimic dacă browserul nu este IE 8 sau mai mic (Firefox, IE9, Chrome și altele).
Acest lucru este foarte convenabil pentru că puteți crea o regulă în interiorul fișierului CSS astfel încât să afecteze obiectul dacă browserul IE 7:
Dar, de asemenea, puteți crea un fișier CSS separat și îl puteți lega în zona de condiție, vom vorbi despre acest lucru în pașii următori. Alegerea este a ta.
tag-uri
Meta etichetele sunt foarte importante, pentru că ei transmit anumite informații browserului pentru a vă asigura că subiectul dvs. va fi recepționat corect.
Această linie confirmă faptul că browserul nu va utiliza modul Quirks. acest lucru este foarte util, deoarece acest mod poate rupe marcajul.
Această linie indică browserului codificarea pentru a evita caracterele necunoscute.
Doar metae tag-uri de bază care pot îmbunătăți SEO-ul subiectului tău. Puteți adăuga cuvinte cheie care descriu site-ul și scrie numele firmei dvs.
Această etichetă elimină / resetează orice creștere a dispozitivului mobil, de tipul iPad și iPhone, este foarte convenabil dacă lucrați cu marcare flexibilă.
tag-uri
Această linie adaugă un favicon pentru pagina dvs., adaugă un pic de aspect profesional la site-ul dvs.