Header.php - Vad behöver gå i det och vad som inte gör det

I den här handledningen kan vi prata om header.php, en viktig fil för alla WordPress-teman. Jag ska visa dig ett bra headerfilexempel och ge tips om vad som behöver gå in i det och vad som inte gör det.

Steg 1: Introduktion

Det första du behöver veta om header.php filen är din funktion.

Men vi har mer än en logotyp och meny i den här filen, vi har också huvud tagg och många andra taggar, som: länk, manus, meta och titel.

Jag har skrivit ett exempel header.php fil, jag har försökt att skapa en fil så full som möjligt, men var god att kommentera denna handledning och ge tips om filen.

Kom ihåg att din rubrik är allt innehåll som visas på alla sidor på din webbplats. Till exempel visas logotypen och menyn på alla sidor så ... båda kommer att läggas till header.php

Om ett element bara visas på en viss sida måste du tänka om det här elementet verkligen måste vara inuti ditt huvud.

Låt oss arbeta och jag hoppas att du gillar det!

Steg 2: Slutkoden

Här kan du få den sista koden att använda i ditt tema. Läs de andra stegen för att veta exakt vad varje rad gör.

Först klistra in dessa rader högst upp på din functions.php fil: (Kom ihåg att du måste ändra banorna till dina CSS- och JavaScript-filer)

 definiera ("THEME_DIR", get_template_directory_uri ()); / * --- FEL GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES funktionen enqueue_styles () / ** REGISTER css / screen.css ** / wp_register_style ('skärmstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('skärmstil');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS funktionen 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'); / ** REGISTERER HTML5 OtherScript.js ** / wp_register_script ('custom script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Nu inne i din header.php lägg till dessa rader: (Kom ihåg att du måste ändra banorna till dina CSS- och JavaScript-filer)

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

En rubrik "måste" ha vissa saker, den här mallen som jag har gjort gör följande (i nästa steg ska jag prata om var och en):

DOCTYPE
Conditionals till IE8, 7, 6
Metataggar för att säkerställa att ditt tema görs korrekt
Favicon, RSS och Pingback
Titel
Följande officiella WordPress-riktlinjer lägger till skript och stilar med wp_enqueue_script och wp_enqueue_style funktioner
Optimerad med användning av konstanter och borttagning av Meta Generator-taggen för att hjälpa till med säkerhet
Ren och kommenterad kod

Stegen nedan kommer att tala om koden som används och du lär dig varför du ska använda den.

Steg 2: Den functions.php Fil

Låt oss börja prata om functions.php fil, lade vi till dessa rader i filen:

 definiera ("THEME_DIR", get_template_directory_uri ()); / * --- FEL GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES funktionen enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('skärmstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('skärmstil');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS funktionen 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'); / ** REGISTERER HTML5 OtherScript.js ** / wp_register_script ('custom 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örsta raden skapar bara en konstant kallad THEME_DIR som lagrar mallkatalogen, skapar vi den här konstanten för att optimera temat, om du tittar i vårt header.php fil, vi behöver katalogen ett par gånger och vi använder det i functions.php fil också för att skriva ut temat sökvägen. Om vi kallar get_template_directory_uri () hela tiden skapar vi bara förfrågningar. Att skapa en konstant och använda den sparar vi serverhantering, eftersom vi kallar funktionen en gång.

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

Den här raden tar bort Meta Generator Tag, eftersom den här taggen visar att WordPress-versionen installerats. Denna typ av information kan tillåta att en invader känner till buggarna i din version och utnyttjar dem.

Lägga till din CSS

 // ENQUEUE STYLES funktionen enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('skärmstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('skärmstil');  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Här skapade vi en funktion för att lägga till länk taggar till header.php. De officiella WordPress-riktlinjerna säger att det bättre sättet att lägga till stilar (.css) och skript (.js) är med wp_enqueue_script och wp_enqueue_style funktioner. Du kan lära dig mer om detta i vår artikel, hur du inkluderar JavaScript och CSS i dina WordPress-teman och plugins.

Först skapar vi en funktion som heter enqueue_styles och då kallar vi add_action funktionen säger den här linjen till WordPress att det måste ringa vår funktion när händelsen "wp_enqueue_scripts" utlöses, vilket händer under vårt samtal till wp_head () i header.php!

Inom vår funktion har vi följande rader:

 / ** REGISTER css / screen.cs ** / wp_register_style ('skärmstil', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all'); wp_enqueue_style ('skärmstil');

Först registrerar vi vårt stylesheet och lägger sedan till det i WordPress 'kö.

Vi använder funktionen wp_register_style För att registrera en stil begär denna funktion följande:

# 1 Param: Ett namn som du kan välja, något liknande min stil, mediaqueries...
# 2 Param: Filbanan, notera att vi använder THEME_DIR konstant här.
# 3 Param: Här skriver du beroenden, namnet på stilfiler som måste laddas före den här filen.
# 4 Param: Versionen.
# 5 Param: Mediet attribut för länktaggen.

Och då kallar vi wp_enqueue_style funktion och vi överför som en parameter namnet på vår stil som läggs till.

Om du vill lägga till fler stilar i din fil, duplicerar du bara de två raderna och ändrar namnet, katalogen och de andra parametrarna.

Lägga till skript

Nu ser vi den funktion som lägger till våra skript.

 // ENQUEUE SCRIPTS funktionen 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'); / ** REGISTERER HTML5 OtherScript.js ** / wp_register_script ('custom script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Här är processen samma, skillnaden här är att vi använder andra funktioner för att lägga till skript.

För att lägga till skript använder vi wp_register_script och wp_enqueue_script funktioner. De wp_register_script funktionen kräver följande:

# 1 Param: Ett namn som du kan välja, något som jquery, dojo osv.
# 2 Param: Filkatalogen, notera att vi använder THEME_DIR konstant här.
# 3 Param: Här skriver du beroenden, namnet på skriptfiler som behöver laddas innan den här filen.
# 4 Param: Versionen.
# 5 Param: Här säger du om detta skript kommer att läggas till i wp_head () (vanligtvis i header.php) eller den wp_footer () (vanligtvis i footer.php) funktionssamtal. Om du skickar fel, laddas den på wp_head (). Om du passerar sant, laddas den på wp_footer ()

Och då kallar vi wp_enqueue_script funktion och vi överför som en parameter namnet på vårt skript som kommer att läggas till.

För att lägga till fler skript till din fil, duplicera du bara dessa två rader och ändra namn, katalog och andra parametrar.

Steg 3: Den header.php

Först ska jag lista länkarna till biblioteken som du kan använda på den här mallen, jag använder redan jQuery och HTML5 Shim i den här mallen men du kan lägga till andra.

jQuery-biblioteket för att lägga till fina effekter på ditt tema, tror jag att du förmodligen redan känner till det här biblioteket, och det är faktiskt redan med i WordPress som standard
Modernizr - det här biblioteket låter dig veta exakt vilka funktioner som stöds av användarens webbläsare
HTML5 Shim - det här biblioteket tillåter webbläsare som inte har inbyggt stöd för HTML5-markup för att börja stödja den
Respond.js - tillåter webbläsare som inte har inbyggt stöd för CSS3 Media Queries att börja stödja den

Du kan hämta dessa bibliotek och uppdatera sökvägarna i din header.php fil.

doctype

I den här mallen använder vi bara standard HTML5-doktyp:

Märka

I den här delen använde jag några IE-villkor för att lägga till en klass i enlighet med IE-versionen eller inte lägga till något om webbläsaren inte är IE 8 eller lägre (Firefox, IE9, Chrome och andra).

Det här är verkligen användbart eftersom du kan skapa en regel i din CSS-fil för att påverka ett objekt om webbläsaren är IE 7 gör följande:

 / * RUNAR PÅ ALLA BROWSERS * / #mymenu width: 400px;  / * KÖRAR ENDAST PÅ IE7 * / .ie7 #mymenu bredd: 200px;

Men du kan också skapa en separat CSS-fil och länka den inom conditionalområdet, vi talar om det i stegen nedan. Valet är ditt.