Header.php - Hva trenger å gå i det og hva som ikke gjør det

I denne veiledningen, la oss snakke om header.php, en viktig fil for et WordPress-tema. Jeg vil vise deg et fint headerfileksempel og gi tips om hva som må gå inn i det og hva som ikke gjør det.

Trinn 1: Introduksjon

Det første du trenger å vite om header.php filen er din funksjon.

Men vi har mer enn en logo og meny i denne filen, vi har også hode tag og mange andre tagger, som: link, manus, meta og tittel.

Jeg har skrevet et eksempel header.php fil, jeg har prøvd å lage en fil så full som mulig, men Du kan gjerne kommentere denne opplæringen og gi tips om filen.

Husk at overskriften din er alt innhold som vises på alle sidene på nettstedet ditt. For eksempel vises logoen og menyen på alle sidene så ... begge blir lagt til i header.php

Hvis et element bare vises på en bestemt side, må du tenke på om dette elementet virkelig må være innenfor overskriften.

La oss jobbe og jeg håper at du liker det!

Trinn 2: Den endelige koden

Her kan du få den endelige koden til å bruke i temaet ditt. Les de andre trinnene for å vite nøyaktig hva hver linje gjør.

Først lim inn disse linjene øverst på din functions.php fil: (Husk at du må endre stiene til CSS og JavaScript-filer)

 define ("THEME_DIR", get_template_directory_uri ()); / * --- FJERN GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES funksjonen enqueue_styles () / ** REGISTER css / screen.css ** / wp_register_style ('skjermstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'alle '); wp_enqueue_style ('skjermstil');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS funksjonen enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', false); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 OtherScript.js ** / wp_register_script ('tilpasset script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom-script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Nå inne i din header.php legg til disse linjene: (Husk at du må endre stiene til CSS og JavaScript-filer)

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

En overskrift "må" ha noen ting, denne malen jeg har laget gjør følgende (i de neste trinnene jeg snakker om hver):

Doctyper
Conditionals til IE8, 7, 6
Metatagger for å sikre at temaet ditt blir gjort riktig
Favicon, RSS og Pingback
Tittel
Følgende offisielle WordPress-retningslinjer, legger til skript og stiler med wp_enqueue_script og wp_enqueue_style funksjoner
Optimalisert ved bruk av konstanter og fjerning av Meta Generator-tag for å bistå med sikkerhet
Ren og kommentert kode

Trinnene nedenfor vil snakke om koden som brukes, og du lærer hvorfor du bruker den.

Trinn 2: Den functions.php Fil

La oss begynne å snakke om functions.php fil, vi la til disse linjene i filen:

 define ("THEME_DIR", get_template_directory_uri ()); / * --- FJERN GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES funksjonen enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('skjermstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'alle '); wp_enqueue_style ('skjermstil');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS funksjonen enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', false); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 OtherScript.js ** / wp_register_script ('tilpasset script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom-script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Den første linjen oppretter bare en konstant kalt THEME_DIR som lagrer malkatalogen, oppretter vi dette konstant for å optimalisere temaet, hvis du ser i vår header.php fil, vi trenger katalogen et par ganger, og vi bruker det i functions.php fil også for å skrive ut tema banen. Hvis vi kaller get_template_directory_uri () hele tiden skaper vi bare forespørsler. Å skape en konstant og bruke den lagrer vi serverbehandling, fordi vi kaller funksjonen en gang.

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

Denne linjen fjerner Meta Generator Tag, fordi denne taggen viser hvem som helst, WordPress-versjonen er installert. Denne typen informasjon kan tillate en inntrenger å vite feilene i din versjon og utnytte dem.

Legge til CSS

 // ENQUEUE STYLES funksjonen enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('skjermstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'alle '); wp_enqueue_style ('skjermstil');  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Her opprettet vi en funksjon for å legge til link tags til header.php. De offisielle WordPress-retningslinjene sier at den bedre måten å legge til stiler (.css) og skript (.js) er med wp_enqueue_script og wp_enqueue_style funksjoner. Du kan lære mer om dette i vår artikkel, hvordan du inkluderer JavaScript og CSS i WordPress-temaene og pluginene.

Først oppretter vi en funksjon som kalles enqueue_styles og så kaller vi ADD_ACTION funksjon, sier denne linjen til WordPress at den må ringe vår funksjon når 'wp_enqueue_scripts'-hendelsen utløses, noe som skjer under vår samtale til wp_head () i header.php!

Innenfor vår funksjon har vi følgende linjer:

 / ** REGISTER css / screen.cs ** / wp_register_style ('skjermstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'alle'); wp_enqueue_style ('skjermstil');

Først registrerer vi stilarket og legger det til i WordPress-køen.

Vi bruker funksjonen wp_register_style For å registrere en stil, krever denne funksjonen følgende:

# 1 Param: Et navn du kan velge, noe som helst min stil, mediaqueries...
# 2 Param: Filbanen, merk at vi bruker THEME_DIR konstant her.
# 3 Param: Her skriver du avhengighetene, navnet på stilfiler som må lastes før denne filen.
# 4 Param: Versjonen.
# 5 Param: Medieattributtet for koblingsmerket.

Og så kaller vi wp_enqueue_style funksjon og vi sender som en parameter navnet på vår stil som vil bli lagt til.

For å legge til flere stiler i filen, dupliser bare disse to linjene og endre navnet, katalogen og de andre parameterne.

Legge til skriptene

Nå ser vi funksjonen som legger til våre skript.

 // ENQUEUE SCRIPTS funksjonen enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', false); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 OtherScript.js ** / wp_register_script ('tilpasset script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom-script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Her er prosessen den samme, forskjellen her er at vi bruker andre funksjoner for å legge til skript.

For å legge til skript bruker vi wp_register_script og wp_enqueue_script funksjoner. De wp_register_script funksjonen krever følgende:

# 1 Param: Et navn du kan velge, noe som jquery, dojo osv.
# 2 Param: Filkatalogen, merk at vi bruker THEME_DIR konstant her.
# 3 Param: Her skriver du avhengighetene, navnet på skriptfiler som må lastes inn før denne filen.
# 4 Param: Versjonen.
# 5 Param: Her sier du om dette skriptet vil bli lagt til i wp_head () (vanligvis i header.php) eller wp_footer () (vanligvis i footer.php) funksjonssamtaler. Hvis du sender feil, blir den lastet på wp_head (). Hvis du passerer sann, vil bli lastet på wp_footer ()

Og så kaller vi wp_enqueue_script funksjon og vi sender som en parameter navnet på skriptet vårt som vil bli lagt til.

For å legge til flere skript i filen, dupliser bare disse to linjene og endre navnene, katalogen og de andre parameterne.

Trinn 3: Den header.php

Først vil jeg liste her linkene til bibliotekene du kan bruke på denne malen, jeg bruker allerede jQuery og HTML5 Shim i denne malen, men du kan legge til andre.

jQuery - bibliotek for å legge til fine effekter på temaet ditt, jeg tror du sikkert allerede kjenner dette biblioteket, og det er faktisk allerede inkludert i WordPress som standard
Modernizr - dette biblioteket lar deg vite nøyaktig de funksjonene som støttes av brukerens nettleser
HTML5 Shim - dette biblioteket tillater nettlesere som ikke har opprinnelig støtte for HTML5-markup for å begynne å støtte den
Respond.js - tillater nettlesere som ikke har opprinnelig støtte for CSS3 Media spørringer å begynne å støtte det

Du kan laste ned disse bibliotekene og oppdatere stiene i din header.php fil.

dOCTYPE

I denne malen bruker vi bare standard HTML5 doktypen:

stikkord

I denne delen brukte jeg noen IE-betingelser for å legge til en klasse i henhold til IE-versjonen, eller ikke legge til noe om nettleseren ikke er IE 8 eller lavere (Firefox, IE9, Chrome og andre).

Dette er veldig nyttig fordi du kan opprette en regel i CSS-filen din for å påvirke et objekt hvis nettleseren er IE 7 gjør følgende:

 / * RUNER PÅ ALLE BROWSERS * / #mymenu width: 400px;  / * KUN KUN PÅ IE7 * / .ie7 #mymenu bredde: 200px;

Men du kan også lage en egen CSS-fil og koble den inn i conditionals-området, vi snakker om det i trinnene nedenfor. Valget er ditt.