Blick header.php f.

Dieser Beitrag stellt zur evtl. Editierung der header.php ein annähernden Verständnis.

t3n
Zur Website betreffs verschiedenes an Artikel … mit Liebe gemacht!

Mein Beitrag ist Konzepts der Website t3n.de. Die konkret techn. Textteile vom Autor Florian B.* sind mit entsprechender Kennzeichnung. Dazu sind über Internetrecherche weitere Informationen zur header.php mit Links zur jeweiligen Website.

* 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! – nicht nur von wegen Textteile.

Im April 2018 zum dreijährigen Jahrestag meiner Wəb-Site mit WordPress. Das Kompliment an die Fachleute wie gleich WordPress’er. Es erfolgt so vieles in Erläuterung. Hiermit ist ‚WordPress‘ so was von Motivation. … Und eine Danksagung ist da sehr zu tun.

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)

  1. <!--[if IE]> Für die Internet Explorer sog. Conditional Comments .
  2. head Das head-Element (deutsch: Kopf) ist in allen HTML-Standards ein Pflicht-Element und enthält maßgeblich Informationen über das im HTML-Körper folgende Dokument. Die Kopfdaten sind in der Mehrzahl Informationen für die techn. Funktionalität einer Internetseite. Sie erlauben die korrekte Darstellung des sichtbaren Teils des Dokuments.
  3. body Das body-Element bringt den anzuzeigenden / darzustellenden Inhalt eines HTML-Dokumentes.
  4. 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.
  • wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta meta Das Meta-Element dient in HTML- oder XHTML-Dokumenten zur Angabe von Metadaten. Es 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 Elementname bzw. Starttag hängt mit dem rel-Attribut und entwprechenden Attributwert zusammen.

Attribute

  •  html.com/attributes/link-:  rel=""  ist ein Attribut von <link> HTML-Tag. Es gibt die Beziehung zwischen zwei verknüpften Dokumenten an. Das <link> -Element erstellt eine Verknüpfung zwischen Ihrem HTML-Dokument und einer externen Ressource. Das Attribut rel gibt die Beziehung zwischen den beiden Dokumenten an. Suchmaschinen können auch die Informationen im Attribut ‚rel‘ verwenden, um festzulegen, wie die Seite indexiert oder angezeigt wird.

t3n  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: !--[if IE 7] d. h., diesen Inhalt sehen alle Nutzer mit Internet Explorer 7 und html class="ie ie7" <?php language_attributes() zeigt die Sprachattribute für das <html> -Tag an. Die möglichen Sprachattribute sind in (Textrichtung), lang und xml : lang. Die Auswahl von lang und xml : lang hängt vom Argument $doctype ab.

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>

t3n  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.

  Das Attribut profile, wie link rel="profile" href="http://gmpg.org/xfn/11" gibt den Speicherort eines oder mehrerer Metadaten-Profile an, die durch Leerzeichen voneinander getrennt sind. Bei zukünftigen Erweiterungen sollten Benutzerprogramme den Wert als Liste betrachten, obwohl diese Spezifikation nur die erste URI als signifikant betrachtet.

  Pingbacks (auch bekannt als Trackbacks) link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" sind eine Form des automatisierten Kommentars für eine Seite oder einen Post, die erstellt wird, wenn ein anderer WordPress-Blog auf diese Seite oder diesen Post verweist. Wenn ein neuer Blogpost veröffentlicht, versucht WordPress, alle Websites zu „pingen“, die in dem Beitrag verlinkt wurden. d. h. die WordPress-Website informiert andere Websites, die mit dieser verknüpft haben. Wenn man Ping-Packs erhält, bedeutet dies, dass jemand anderes dieselben Posts oder Seiten verlinkt hat.

t3n  Die Funktion get_template_directory_uri(): Zurückgegeben wird der Pfad zum Theme.

t3n: Mit wp_head() werden Plugin-Stylesheets, Javascript-Funktionen und anderes eingebunden, was für die WordPress-Site wichtig ist.

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; ?>

t3n  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() gibt true oder false zurück, je nachdem, ob ein Header-Bild im Backend gewählt wurde oder nicht – mit:

t3n: Mit esc_url() werden potenziell gefährliche Zeichen aus einer URL gefiltert, und home_url( '/' ) gibt den Link zur Homepage der Website zurück.

t3n: header_image() im Zusammenhang get_header_image() (s. oben) wird dieses dann mit header_image() ausgegeben.
Die Funktionen get_custom_header()->width und get_custom_header()->height, ist von selbstverständlich.

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">

t3n  Funktion wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ist mit den Parametern im Zusammenhang wirkend: Es wird ein Menü ausgegeben, dessen Funktion in der functions.php (Linie 82) beinhaltet ist: // This theme uses wp_nav_menu() in two locations. register_nav_menus( array( ‚primary‘   => __( ‚Top primary menu‘, ‚twentyfourteen‘ ), ’secondary‘ => __( ‚Secondary menu in left sidebar‘, ‚twentyfourteen‘ ), ) ); Zwei Menüs werden angelegt, im Backend unter „Design / Menüs“. Mit primary beziehungsweise secondary wird die theme_location, die wir oben in dem Code-Schnipsel von wp_nav_menu() wiederfinden, vergeben. Darüber wird der Name des Menüs vergeben, der im Backend angezeigt werden soll. Mit dem Parameter menu_class wird dem Menü eine Klasse zugewiesen. Weitere Informationen zu dieser Funktion und weitere Parameter.

t3n: Funktion get_search_form() gibt ein Suchformular zurück. Wenn keine search.php im Theme enthalten ist, wird das Standard-Formular zurückgegeben.

… in Zusammenfassung: WordPress-Theme Dateien im Überblick