De header.php - Wat moet er in gaan en wat niet

Laten we het in deze tutorial hebben over de header.php, een essentieel bestand voor elk WordPress-thema. Ik zal je een mooi voorbeeld van een headerbestand laten zien en tips geven over wat erin moet komen en wat niet.

Stap 1: Introductie

Het eerste dat je moet weten over de header.php bestand is jouw functie.

Maar we hebben meer dan een logo en een menu in dit bestand, we hebben ook de hoofd tag en veel andere tags, zoals: link, script, meta en titel.

Ik heb een voorbeeld geschreven header.php bestand, ik heb geprobeerd een bestand zo volledig mogelijk te maken, maar voel je vrij om commentaar te geven op deze tutorial met tips over het bestand.

Vergeet niet dat uw koptekst alle inhoud is die op alle pagina's van uw site wordt weergegeven. Het logo en het menu worden bijvoorbeeld op alle pagina's getoond, dus ... beide worden toegevoegd aan de header.php

Als een element alleen op een specifieke pagina wordt getoond, moet je opnieuw nadenken of dit element echt in je header moet staan.

Laten we werken en ik hoop dat je het leuk vindt!

Stap 2: De definitieve code

Hier kun je de definitieve code krijgen die je in je thema kunt gebruiken. Lees de andere stappen om precies te weten wat elke regel doet.

Plak eerst deze lijnen boven aan je functions.php het dossier: (Vergeet niet dat u de paden naar uw CSS- en JavaScript-bestanden moet wijzigen)

 define ("THEME_DIR", get_template_directory_uri ()); / * --- VERWIJDER GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES functie enqueue_styles () / ** REGISTREER css / screen.css ** / wp_register_style ('schermstijl', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('schermstijl');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS functie enqueue_scripts () / ** REGISTREER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jQuery '),' 1 ', false); wp_enqueue_script ('html5-shim'); / ** REGISTREER 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 in jouw header.php voeg deze regels toe: (Vergeet niet dat u de paden naar uw CSS- en JavaScript-bestanden moet wijzigen)

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

Een koptekst "moet" een aantal dingen hebben, deze sjabloon die ik heb gemaakt doet het volgende (over de volgende stappen die ik over elk sjabloon zal bespreken):

doctypes
Voorwaardelijke voorwaarden voor IE8, 7, 6
Metatags om ervoor te zorgen dat je thema correct wordt weergegeven
Favicon, RSS en Pingback
Titel
Volgens officiële WordPress-richtlijnen, scripts en stijlen toevoegen met wp_enqueue_script en wp_enqueue_style functies
Geoptimaliseerd met het gebruik van constanten en het verwijderen van de Meta Generator-tag om te helpen met de beveiliging
Reinig en becommentarieerde code

De onderstaande stappen zullen vertellen over de gebruikte code en u zult leren waarom u deze moet gebruiken.

Stap 2: De functions.php het dossier

Laten we beginnen te praten over de functions.php bestand hebben we deze regels in het bestand toegevoegd:

 define ("THEME_DIR", get_template_directory_uri ()); / * --- VERWIJDER GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES functie enqueue_styles () / ** REGISTREER css / screen.cs ** / wp_register_style ('schermstijl', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('schermstijl');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS functie enqueue_scripts () / ** REGISTREER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jQuery '),' 1 ', false); wp_enqueue_script ('html5-shim'); / ** REGISTREER 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');

De eerste regel maakt gewoon een constante genaamd THEME_DIR waarin de sjabloondirectory is opgeslagen, maken we deze constante om het thema te optimaliseren, als u in onze header.php bestand, hebben we de directory een paar keer nodig en gebruiken we het functions.php bestand ook om het themapad af te drukken. Als we de get_template_directory_uri () de hele tijd creëren we verzoeken. Door een constante te maken en deze te gebruiken, besparen we serververwerking, omdat we de functie eenmaal bellen.

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

Deze regel verwijdert de Meta-generatortag, omdat deze tag wordt weergegeven aan iedereen die de WordPress-versie heeft geïnstalleerd. Dit soort informatie kan een indringer de bugs van uw versie laten weten en deze misbruiken.

Uw CSS toevoegen

 // ENQUEUE STYLES functie enqueue_styles () / ** REGISTREER css / screen.cs ** / wp_register_style ('schermstijl', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('schermstijl');  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Hier hebben we een functie gemaakt om de. Toe te voegen link tags voor header.php. De officiële WordPress-richtlijnen zeggen dat de beste manier om stijlen (.css) en scripts (.js) toe te voegen wp_enqueue_script en wp_enqueue_style functies. U kunt hier meer over lezen in ons artikel, JavaScript en CSS opnemen in uw WordPress-thema's en plug-ins.

Eerst maken we een functie genaamd enqueue_styles en dan noemen we de add_action functie, deze regel zegt tegen WordPress dat het onze functie moet aanroepen wanneer de 'wp_enqueue_scripts'-gebeurtenis wordt geactiveerd, wat gebeurt tijdens onze oproep aan wp_head () in header.php!

Binnen onze functie hebben we de volgende lijnen:

 / ** REGISTREER css / screen.cs ** / wp_register_style ('schermstijl', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all'); wp_enqueue_style ('schermstijl');

Eerst registreren we onze stylesheet en voegen deze vervolgens toe aan de wachtrij van WordPress.

We gebruiken de functie wp_register_style om een stijl te registreren, vraagt deze functie het volgende:

# 1 Param: Een naam die je kunt kiezen, zoiets mijn stijl, mediaqueries...
# 2 Param: Het bestandspad, merk op dat we de THEME_DIR constant hier.
# 3 Param: Hier typt u de afhankelijkheden, de naam van stijlbestanden die voor dit bestand moeten worden geladen.
# 4 Param: De versie.
# 5 Param: Het media-attribuut voor de koppelingstag.

En dan noemen we het wp_enqueue_style functie en we geven als parameter de naam van onze stijl door die zal worden toegevoegd.

Om meer stijlen aan uw bestand toe te voegen, dupliceert u gewoon deze twee regels en wijzigt u de naam, map en de andere parameters.

De scripts toevoegen

Nu zullen we de functie zien die onze scripts toevoegt.

 // ENQUEUE SCRIPTS functie enqueue_scripts () / ** REGISTREER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jQuery '),' 1 ', false); wp_enqueue_script ('html5-shim'); / ** REGISTREER 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');

Hier is het proces hetzelfde, het verschil hier is dat we andere functies gebruiken om scripts toe te voegen.

Om scripts toe te voegen, gebruiken we de wp_register_script en wp_enqueue_script functies. De wp_register_script functie vereist het volgende:

# 1 Param: Een naam die u kunt kiezen, bijvoorbeeld jQuery, Dojo, enz.
# 2 Param: De bestandsmap, merk op dat we de THEME_DIR constant hier.
# 3 Param: Hier typt u de afhankelijkheden, de naam van scriptbestanden die vóór dit bestand moeten worden geladen.
# 4 Param: De versie.
# 5 Param: Hier zegt u of dit script zal worden toegevoegd in de wp_head () (meestal in header.php) of de wp_footer () (meestal in footer.php) functieaanroepen. Als u false doorgeeft, wordt deze geladen wp_head (). Als u true doorgeeft, wordt geladen wp_footer ()

En dan noemen we het wp_enqueue_script functie en we geven als parameter de naam van ons script door dat zal worden toegevoegd.

Om meer scripts aan uw bestand toe te voegen, dupliceert u gewoon deze twee regels en wijzigt u de namen, directory en de andere parameters.

Stap 3: De header.php

Eerst zal ik hier de links naar de bibliotheken vermelden die u op deze sjabloon kunt gebruiken, ik gebruik al jQuery en de HTML5 Shim in deze sjabloon, maar u kunt anderen toevoegen.

jQuery - bibliotheek om leuke effecten aan je thema toe te voegen, ik denk dat je deze bibliotheek waarschijnlijk al kent, en het is eigenlijk al standaard opgenomen in WordPress
Modernizr - met deze bibliotheek kunt u precies weten welke functies door de browser van de gebruiker worden ondersteund
HTML5 Shim - met deze bibliotheek kunnen browsers zonder native-ondersteuning voor HTML5-markeringen deze ondersteunen
Respond.js - staat browsers toe die geen native support voor hebben CSS3 Media Queries om het te ondersteunen

U kunt deze bibliotheken downloaden en de paden in uw bibliotheek bijwerken header.php het dossier.

Doctype

In deze sjabloon gebruiken we alleen het standaard HTML5-doctype:

Label

In dit deel heb ik een aantal IE-conditionals gebruikt om een klasse toe te voegen volgens de IE-versie of voeg niets toe als de browser geen IE 8 of lager is (Firefox, IE9, Chrome en anderen).

Dit is echt handig omdat u een regel in uw CSS-bestand kunt maken om een object te beïnvloeden als de browser IE 7 het volgende doet:

 / * UITVOEREN OP ALLE BROWSERS * / #mymenu width: 400px;  / * UITSLUITEND OP IE7 * / .ie7 #mymenu width: 200px;

Maar u kunt ook een afzonderlijk CSS-bestand maken en dit koppelen binnen het gebied voor conditionals, we zullen er in de onderstaande stappen over praten. De keuze is aan jou.