The header.php - Was muss drin sein und was nicht?

Lassen Sie uns in diesem Tutorial über die header.php, eine wesentliche Datei für jedes WordPress-Theme. Ich zeige Ihnen ein schönes Beispiel für eine Header-Datei und gebe Tipps, was darin zu finden ist und was nicht.

Schritt 1: Einführung

Das erste, was Sie über das wissen müssen header.php Datei ist Ihre Funktion.

Aber wir haben mehr als nur ein Logo und ein Menü in dieser Datei, wir haben auch das Kopf tag und viele andere tags, wie: Verknüpfung, Skript, Meta und Titel.

Ich habe ein Beispiel geschrieben header.php Datei, ich habe versucht, eine Datei so voll wie möglich zu erstellen, aber Fühlen Sie sich frei, dieses Tutorial mit Tipps zur Datei zu kommentieren.

Denken Sie daran, dass Ihre Kopfzeile sämtlicher Inhalt ist, der auf allen Seiten Ihrer Website angezeigt wird. Zum Beispiel werden das Logo und das Menü auf allen Seiten angezeigt, sodass… beide zu der hinzugefügt werden header.php

Wenn ein Element nur auf einer bestimmten Seite angezeigt wird, müssen Sie noch einmal darüber nachdenken, ob sich dieses Element wirklich in Ihrem Header befinden muss.

Lass uns arbeiten und ich hoffe, dass es dir gefällt!

Schritt 2: Der endgültige Code

Hier können Sie den endgültigen Code erhalten, der in Ihrem Design verwendet werden soll. Lesen Sie die anderen Schritte, um genau zu erfahren, was jede Zeile macht.

Fügen Sie diese Zeilen zuerst oben in Ihr ein Functions.php Datei: (Denken Sie daran, dass Sie die Pfade zu Ihren CSS- und JavaScript-Dateien ändern müssen.)

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

Jetzt in deinem header.php füge diese Zeilen hinzu: (Denken Sie daran, dass Sie die Pfade zu Ihren CSS- und JavaScript-Dateien ändern müssen.)

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

Ein Header "muss" einige Dinge haben, diese Vorlage, die ich erstellt habe, führt Folgendes aus (in den nächsten Schritten werde ich über jedes sprechen):

Doktypen
Bedingungen zu IE8, 7, 6
Meta-Tags, um sicherzustellen, dass das Design richtig dargestellt wird
Favicon, RSS und Pingback
Titel
Befolgen Sie die offiziellen WordPress-Richtlinien und fügen Sie Skripts und Stile mit hinzu wp_enqueue_script und wp_enqueue_style Funktionen
Optimiert durch die Verwendung von Konstanten und Entfernen des Meta Generator-Tags zur Unterstützung der Sicherheit
Sauberer und kommentierter Code

In den folgenden Schritten wird der verwendete Code beschrieben, und Sie erfahren, warum er verwendet wird.

Schritt 2: Die Functions.php Datei

Fangen wir an, über das zu sprechen Functions.php Datei haben wir diese Zeilen in die Datei eingefügt:

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

Die erste Zeile erstellt nur eine Konstante, die aufgerufen wird THEME_DIR Wenn Sie das Vorlagenverzeichnis speichern, erstellen wir diese Konstante, um das Thema zu optimieren, wenn Sie in unser Verzeichnis schauen header.php Datei, wir brauchen das Verzeichnis einige Male und verwenden es in Functions.php Datei auch zum Drucken des Designpfads. Wenn wir das anrufen get_template_directory_uri () Wir erstellen ständig Anfragen. Wenn Sie eine Konstante erstellen und verwenden, sparen wir die Server-Verarbeitung, da wir die Funktion einmal aufrufen.

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

Diese Zeile entfernt das Meta Generator-Tag, da dieses Tag jedem die installierte WordPress-Version anzeigt. Diese Art von Informationen kann es einem Eindringling ermöglichen, die Fehler Ihrer Version zu kennen und auszunutzen.

CSS hinzufügen

 // ENQUEUE STYLES-Funktion enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all') '); wp_enqueue_style ('screen-style');  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Hier haben wir eine Funktion zum Hinzufügen von erstellt Verknüpfung Tags zu header.php. Die offiziellen WordPress-Richtlinien besagen, dass der bessere Weg, um Stile (.css) und Skripte (.js) hinzuzufügen, der ist wp_enqueue_script und wp_enqueue_style Funktionen. Mehr darüber erfahren Sie in unserem Artikel "So integrieren Sie JavaScript und CSS in Ihre WordPress-Themes und Plugins".

Zuerst erstellen wir eine Funktion namens enqueue_styles und dann nennen wir das add_action Funktion, diese Zeile sagt zu WordPress, dass es unsere Funktion aufrufen muss, wenn das Ereignis 'wp_enqueue_scripts' ausgelöst wird, was während unseres Aufrufs an geschieht wp_head () im header.php!

In unserer Funktion haben wir folgende Zeilen:

 / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all'); wp_enqueue_style ('screen-style');

Zuerst registrieren wir unser Stylesheet und fügen es in die Warteschlange von WordPress ein.

Wir benutzen die Funktion wp_register_style Um einen Style zu registrieren, fordert diese Funktion Folgendes an:

# 1 Param: Ein Name, den Sie wählen können, etwa mein Stil, Medien-Anfragen…
# 2 Param: Der Dateipfad, beachten Sie, dass wir das verwenden THEME_DIR hier konstant.
# 3 Param: Hier geben Sie die Abhängigkeiten ein, den Namen der Style-Dateien, die vor dieser Datei geladen werden müssen.
# 4 Param: Die Version.
# 5 Param: Das Medienattribut für das Link-Tag.

Und dann nennen wir das wp_enqueue_style function und wir übergeben als Parameter den Namen unseres Stils, der hinzugefügt wird.

Um Ihrer Datei weitere Stile hinzuzufügen, duplizieren Sie einfach diese beiden Zeilen und ändern Sie den Namen, das Verzeichnis und die anderen Parameter.

Hinzufügen der Skripte

Nun sehen wir die Funktion, die unsere Skripte hinzufügt.

 // ENQUEUE SCRIPTS-Funktion enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'), array ('jquery.) '),' 1 ', falsch); wp_enqueue_script ('html5-shim'); / ** REGISTER 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 ist der Prozess derselbe, der Unterschied hier ist, dass wir andere Funktionen verwenden, um Skripts hinzuzufügen.

Um Skripte hinzuzufügen, verwenden wir die wp_register_script und wp_enqueue_script Funktionen. Das wp_register_script Funktion erfordert Folgendes:

# 1 Param: Ein Name, den Sie wählen können, etwa Jquery, Dojo usw.
# 2 Param: Das Dateiverzeichnis, beachten Sie, dass wir das verwenden THEME_DIR hier konstant.
# 3 Param: Hier geben Sie die Abhängigkeiten ein, den Namen der Skriptdateien, die vor dieser Datei geladen werden müssen.
# 4 Param: Die Version.
# 5 Param: Hier sagen Sie, ob dieses Skript in der hinzugefügt wird wp_head () (normalerweise in header.php) oder der wp_footer () (normalerweise in footer.php) Funktionsaufrufe. Wenn Sie false übergeben, wird es geladen wp_head (). Wenn Sie true übergeben, wird auf geladen wp_footer ()

Und dann nennen wir das wp_enqueue_script function und wir übergeben als Parameter den Namen unseres Skripts, das hinzugefügt wird.

Um Ihrer Datei weitere Skripts hinzuzufügen, duplizieren Sie einfach diese beiden Zeilen und ändern Sie die Namen, das Verzeichnis und die anderen Parameter.

Schritt 3: Die header.php

Zuerst liste ich hier die Links zu den Bibliotheken auf, die Sie für diese Vorlage verwenden können. Ich verwende bereits jQuery und das HTML5-Shim in dieser Vorlage, aber Sie können weitere hinzufügen.

jQuery - Bibliothek zum Hinzufügen schöner Effekte zu Ihrem Thema. Ich glaube, Sie kennen diese Bibliothek wahrscheinlich bereits und sind in WordPress bereits standardmäßig enthalten
Modernizr - Mit dieser Bibliothek können Sie die vom Browser des Benutzers unterstützten Funktionen genau kennen
HTML5-Shim - Diese Bibliothek ermöglicht es Browsern, die keine native Unterstützung für HTML5-Markup bieten, diese zu unterstützen
Respond.js - ermöglicht Browser, für die es keine native Unterstützung gibt CSS3-Medienabfragen um es zu unterstützen

Sie können diese Bibliotheken herunterladen und die Pfade in Ihrem aktualisieren header.php Datei.

Doctype

In dieser Vorlage verwenden wir nur den Standard-HTML5-Doctype:

Etikett

In diesem Teil habe ich ein paar IE-Bedingungen verwendet, um eine Klasse gemäß der IE-Version hinzuzufügen oder nichts hinzuzufügen, wenn der Browser nicht IE 8 oder niedriger ist (Firefox, IE9, Chrome und andere)..

Dies ist sehr nützlich, da Sie in Ihrer CSS-Datei eine Regel erstellen können, die sich auf ein Objekt auswirkt, wenn der Browser IE 7 ist und folgende Aktionen ausführt:

 / * Läuft auf allen Browsern * / #mymenu width: 400px;  / * Läuft NUR AUF IE7 * / .ie7 #mymenu width: 200px;

Sie können jedoch auch eine separate CSS-Datei erstellen und diese innerhalb des Bedingungsbereichs verlinken. In den folgenden Schritten werden wir darüber sprechen. Es ist deine Entscheidung.

Stichworte

Die Meta-Tags sind sehr wichtig, da sie bestimmte Informationen an den Browser übergeben, um die korrekte Wiedergabe Ihres Designs zu gewährleisten.

Diese Zeile stellt sicher, dass Browser nicht verwendet werden Quirks-Modus, Sehr nützlich, da dieser Rendermodus das Layout beschädigen kann.

Diese Zeile sagt der Zeichensatz zum Browser, um unbekannte Zeichen zu vermeiden!

Nur grundlegende Meta-Tags, die dem helfen können SEO von Ihrem Thema. Sie können Keywords hinzufügen, die Ihre Website beschreiben und Ihren Namen oder den Namen Ihres Unternehmens eingeben.

Mit diesem Tag werden alle Standard-Zooms eines Mobilgeräts wie iPad und iPhone entfernt / zurückgesetzt, sehr nützlich, wenn Sie an einem responsiven Layout arbeiten.

Stichworte

Dies fügt ein Favicon auf Ihrer Seite, um Ihre Website professioneller zu gestalten.

Ein Link zum RSS-Feed Ihrer Website.

Ein Link für die Pingback-URL Ihrer Website.

</code> Etikett</h3> <pre> <title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?> Das Titel-Tag ist sehr wichtig, da es den Standardtitel ersetzt und zur Verbesserung Ihres Rankings in Suchmaschinen nützlich ist.
 wp_head ()
  
 Dies ist eine sehr wichtige Funktion, Sie MUSS rufen Sie diese Funktion auf! Über diese Funktion fügt WordPress Code aus Plugins, anderen JavaScript-Bibliotheken und vielem mehr hinzu.
 
 Fazit
 Und es ist geschafft! Ich hoffe wirklich, dass Ihnen dieser Artikel gefallen hat und bitte, Fühlen Sie sich frei, die Vorlage zu kommentieren und geben Sie Ihr Code-Snippet zur Verbesserung ein!



		
			
	   
	




Code