WordPress Blick header.php

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Dieser Beitrag dient der Erklärung der header.php. Er bezieht sich auf Artikelserie der Website t3n.de, die mit viel Liebe zum Detail erstellt wurden. Die technischen Teile des Textes wurden vom Autor Florian B.* verfasst und hier entsprechend gekennzeichnet. Darüber hinaus werden weitere Informationen zur header.php durch Internetrecherche und Links zu den jeweiligen Websites bereitgestellt.

Zur Website betreffs verschiedenes an Artikel … mit Liebe gemacht!

* OT: Meiner Nachfrage und Ambition zum Artikel auf meiner Website: Im kleinen E-Mail-Verkehr durfte ich Ratschlags zur Zitation hinzulernen. … Sodann ein freundliches "okay" des Autors. – Danksagung meinerseits!

Im April 2018 feierte meine Webseite mit WordPress den dreijährigen Jahrestag. Ich möchte hier ein Kompliment an die Fachleute, insbesondere an die WordPress-Community, aussprechen. Es gibt so viele Erklärungen und Hilfestellungen, die mich motivieren und unterstützen. Deshalb möchte ich auch ein großes Dankeschön aussprechen.

Inhaltsverzeichnis

HTML/Dokumentstruktur: header.php

Obigen Titels auf wiki.selfhtml.org möchte man sich Durchklicken zum Durchblicken.

Dokumenttyp-Deklaration

!DOCTYPE html ist für das gesamte HTML-Dokument, dem folgen die weiteren Auszeichnungen.

(Haupt)-Elemente (ich benenne es mal so)

<!--[if IE]> Für die Internet Explorer gibt es sogenannte. Conditional Comments .
head Das head-Element (deutsch: Kopf) ist in allen HTML-Standards ein Pflicht-Element und enthält maßgebliche Informationen über das im HTML-Körper folgende Dokument. Die Kopfdaten sind in der Mehrzahl Informationen für die technische Funktionalität einer Internetseite. Sie erlauben die korrekte Darstellung des sichtbaren Teils des Dokuments.
body Das body-Element enthält den anzuzeigenden/darzustellenden Inhalt eines HTML-Dokuments.
header Das header-Element umfasst den sichtbaren Kopfbereich einer Webseite oder eines Teils einer Seite. Dabei soll es einleitende Inhalte gruppieren, etwa Firmenlogos, ein Motto, Links zum Impressum oder zur Kontaktseite, aber nicht Links zu externen Seiten, etwa sozialen Netzwerken.

Elemente

wiki.selfhtml.org/wiki/HTML/Skripte/script: script. Mit dem Element script kann man einen oder mehrere Script-Bereiche definieren. Innerhalb von Script-Bereichen können die Anweisungen der verwendeten Script-Sprache notiert werden. <script> kann man im Dateikopf, also zwischen <head> und </head>, oder auch innerhalb des Dateikörpers, also zwischen <body> und </body> platzieren. – Wird es im Kopfbereich platziert, werden die Skripte typischerweise vor dem Rendern der Seite geladen und ausgeführt, während das Platzieren im Body-Bereich es ermöglicht, Skripte nach dem Rendern der Seite zu laden und auszuführen.
wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta meta Das Meta-Element ist ein wichtiges Element innerhalb des head-Elements und wird zur Angabe von Metadaten verwendet. Es ist ein leeres Element, was bedeutet, dass es kein schließendes Tag hat. Mithilfe des Meta-Elements können Informationen wie der Titel der Webseite, die Sprache der Seite, die Beschreibung der Seite, Schlüsselwörter, die Encoding-Methode und andere wichtige Informationen bereitgestellt werden. Also das Meta-Element dient in HTML- oder XHTML-Dokumenten zur Angabe von Metadaten und wird als leeres Element innerhalb des head-Elements notiert. S. Meta-Element. Als Metainformationen bezeichnet man allgemein Daten, die Informationen über andere Daten enthalten. In HTML gibt es dafür das Meta-Element, mit dem Zusatzangaben bereitgestellt werden können, die das Parsen der Datei oder die Verwaltung des Dateiinhalts erleichtern sollen.
link Das link-Element in HTML wird verwendet, um Ressourcen wie Stylesheets, Icons, Schriftarten und andere Dokumente zu verknüpfen. Das rel-Attribut gibt dabei an, welche Beziehung zwischen dem aktuellen Dokument und der verlinkten Ressource besteht (z.B. stylesheet für Stylesheets oder icon für Favicons).

Attribute

html.com/attributes/link-: rel="" Das rel-Attribut wird verwendet, um die Beziehung zwischen dem aktuellen Dokument und dem verlinkten Dokument anzugeben. Es gibt verschiedene Werte für das rel-Attribut, wie zum Beispiel stylesheet für CSS-Dateien oder icon für Favicon-Dateien. Die Angabe der Beziehung zwischen den Dokumenten ist für die korrekte Interpretation der verknüpften Ressource wichtig, und kann auch von Suchmaschinen zur Indexierung und Darstellung der Seite verwendet werden.

Die WordPress-Eigene-Funktionen

bloginfo( 'charset' )
bloginfo( 'pingback_url' )
bloginfo( 'name' )
wp_title( '|', true, 'right' )
get_template_directory_uri()
wp_head()
body_class()
get_header_image()
header_image()
get_custom_header()->width
get_custom_header()->height
esc_url()
home_url( '/' )
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' )
get_search_form()

header.php

Die Haupt-Elemente sind Markiert, folgend sind diese zur Anschaulichkeit separat gegliedert (s. "Infos" on)

<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?><!DOCTYPE html>
Teil 1 / Conditional Comments
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
Teil 2 / head
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
Teil 3 / body
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
</div>
<?php endif; ?>
Teil 4 / header
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<div class="search-toggle">
<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">

Teil 1
Conditional Comments

?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

codex.wordpress.org: Zur Ergänzung, das if-Statement in <!--[if IE 7]> wird nur von Internet Explorer 7 interpretiert und ausgeführt. Dadurch können gezielt Anpassungen nur für diesen Browser vorgenommen werden. Die html-Class ie ie7 dient dazu, spezifische CSS-Regeln nur für den 'IE7' anwenden zu können.

Die language_attributes()-Funktion gibt Sprachattribute aus, die für das <html>-Tag relevant sind, wie beispielsweise lang oder dir. Diese Attribute können dann dazu verwendet werden, die Sprache der Website und die Schreibrichtung festzulegen.

Teil 2
head

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

Die Funktion bloginfo() gibt Informationen über die WordPress-Installation aus, z.B. den Namen des Blogs, die URL zum aktuellen Theme oder den Pfad zum Stylesheet. Mit dem Parameter charset gibt die Funktion den Zeichensatz zurück, der in der WordPress-Installation definiert ist. Der Parameter pingback_url gibt die URL für Pingback-Trackbacks zurück. Der Parameter name gibt den Namen des Blogs zurück.

Die Funktion bloginfo() liefert, je nach übergebenem Parameter, den Zeichensatz, die Pingback-URL oder den Namen des Blogs zurück.wp_title('|', true, 'right' ) gibt eigentlich zurück, was in der wp-includes / general-template.php steht. In diesem Fall aber in der functions.php (Theme) eine Funktion twentyfourteen_wp_title() (Linie 505) definiert, die die Funktion erweitert: function twentyfourteen_wp_title( $title, $sep ) { global $paged, $page; if ( is_feed() ) { return $title; } Zurückgegeben wird der Name des Blogs, auf der Startseite zusätzlich die Beschreibung und auf anderen Seiten der Titel der jeweiligen Seite. Die Parameter sind (von links nach rechts) der Seperator, ob und wo der Titel angezeigt werden soll. Weitere Informationen zu dieser etwas komplexeren Funktion im WordPress-Codex.

Es ist wichtig zu erwähnen, dass das Attribut profile, wie link rel="profile" href="http://gmpg.org/xfn/11" ist in HTML5 veraltet als (deprecated) markiert und nicht mehr verwendet werden sollte. Stattdessen sollten Metadaten-Profile über andere Mechanismen, wie beispielsweise JSON-LD, eingebunden werden. Das XFN-Profil, auf das sich das Beispiel-Attribut bezieht, wird beispielsweise nicht mehr empfohlen und ist in der Praxis weitgehend veraltet.

Ein Pingback (auch bekannt als Trackbacks) link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" ist eine Benachrichtigung, die ein WordPress-Blog automatisch sendet, wenn es einen Link auf einen anderen Blogpost enthält, der Pingbacks akzeptiert. Der empfangende Blog erhält eine Benachrichtigung über den Pingback und kann entscheiden, ob er ihn als Kommentar auf dem Post zulässt oder nicht. Pingbacks können helfen, die Verbindung zwischen verschiedenen Blogs herzustellen und die Sichtbarkeit von Inhalten zu erhöhen.

Die Funktion get_template_directory_uri() gibt den Pfad zum aktuellen Theme-Verzeichnis als URL zurück. Dies ist nützlich, wenn man beispielsweise auf Bilder oder JavaScript-Dateien innerhalb des Themes verweisen möchte.

t3n: Die Funktion wp_head() wird meist im Header-Bereich der WordPress-Theme-Datei aufgerufen und gibt wichtige Informationen und Code-Snippets aus, die für Plugins, Stylesheets, Javascript-Funktionen, Metadaten und andere Funktionen benötigt werden. Dies umfasst zum Beispiel das Laden von Stylesheets und Skripten, die Einbindung von Metadaten wie dem Titel der Seite und der Beschreibung, die Verarbeitung von Pingbacks und die Ausgabe von Open Graph-Metadaten für soziale Netzwerke.

Teil 3
body

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
</div>
<?php endif; ?>

body_class() ist eine Funktion in WordPress, die eine Liste von CSS-Klassen generiert, die auf dem body-Tag der aktuellen Seite basieren. Diese Klassen können verwendet werden, um spezifische Styles für verschiedene Seitenarten oder Funktionen in WordPress anzuwenden. Zum Beispiel kann man mit der Class home spezielle Styles für die Startseite festlegen, während die Classe single für die Darstellung einzelner Blogbeiträge verwendet werden kann. Die Klasse js wird hinzugefügt, wenn JavaScript auf der Seite aktiviert ist, und kann dazu verwendet werden, bestimmte JavaScript-basierte Funktionen oder Styles anzupassen.

Je nach aufgerufener Site gibt body_class() passende Klassen aus, mit denen die verschiedenen Seitenarten zu stylen sind. Auf der Startseite wird beispielsweise home ausgegeben, auf der Blog-Übersicht blog, im Single-View single und so fort. Praktischerweise wird auch, falls JavaScript aktiviert ist, die Klasse js ausgegeben.

t3n: get_header_image() Die Funktion get_header_image() gibt die URL des Header-Bildes zurück, wenn ein solches im Backend ausgewählt wurde, andernfalls gibt sie den Wert false zurück.

t3n: Die Funktion esc_url() filtert potenziell gefährliche Zeichen aus einer URL, um Sicherheitsprobleme zu vermeiden. Die Funktion home_url( '/' ) gibt den Link zur Startseite der Website zurück.

t3n: Die Funktionen get_custom_header()->width und get_custom_header()->height geben die Breite und Höhe des Header-Bildes in Pixeln zurück, falls ein solches im Backend definiert wurde. Diese können dann z.B. verwendet werden, um das Bild in der richtigen Größe einzubinden.

Teil 4
header

<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<div class="search-toggle">
<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">

Die Funktion wp_nav_menu() erzeugt ein Menü, das von einer register_nav_menus()-Funktion in der functions.php-Datei abgerufen wird. Diese register_nav_menus()-Funktion definiert die verschiedenen Menüpositionen und ihre Namen im Backend. In dem wp_nav_menu()-Aufruf wird dann über den Parameter theme_location die entsprechende Menüposition ausgewählt und über den Parameter menu_class eine CSS-Klasse dem Menü zugewiesen. Weitere Parameter können genutzt werden, um das Menü weiter zu konfigurieren, siehe Funktion und weitere Parameter.

t3n: get_search_form() ist eine Funktion in WordPress, die das Suchformular der Website zurückgibt. Wenn in einem Theme keine search.php-Datei vorhanden ist, wird das Standard-Suchformular zurückgegeben. Man kann das Aussehen und Verhalten des Suchformulars durch Anpassung des entsprechenden Template-Files im Theme oder durch die Verwendung von Filtern und Hooks anpassen.

… in Zusammenfassung: WordPress-Theme Dateien im Überblick

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 April