WordPress Theme selbst anpassen Teil 2

Im ersten Teil ging es hauptsächlich um die Anpassungen des Themes mit CSS. Doch bei komplexeren Aufgaben stoßen wir allein mit CSS schnell an die Grenzen des machbaren. Aus diesem Grund geht es jetzt um die HTML Anpassung im Theme.

Die WordPress Struktur

Grundsätzlich besteht WordPress aus 3 Teilen.

Header

Im Kopf von WordPress sind alle üblichen Dateien vorhanden um CSS und Javascripte zu laden.
Zusätzlich werden neben dem Titel allerhand MetaTags eingebunden. Der Header Bereich beinhaltet aber auch HTML, welches auf jeder Seite angezeigt werden soll. Zu diesem Bereich gehört Beispielsweise das Logo und die Navigation.

Footer

Im Grunde ist der Footer mit dem Header sehr stark verwandt. Hier werden ebenfalls HTML Elemente angezeigt die auf jeder einzelnen Seite Verwendung finden. Zusätzlich werden häufig Javascripte eingebunden. Der Vorteil zum Einbinden im Headerbereich ist dass diese erst aktiv werden wenn der gesamte HTML Teil geladen wurde. Sollte eine Javascript Datei sehr lange “arbeiten” wird das Laden des HTML Teils davon nicht betroffen.

Content

Zwischen Header und Footer können im Content Bereich dynamische Seitenteile ausgegeben werden.
Wie im Beitrag Struktur von TwentyTwelve bereits angesprochen gibt es verschiedenen Seitentypen. Diese Seitentypen werden genau hier zur Anzeige gebracht.

Der Content Loop

Wenn wir uns die einzelnen Dateien wie Page (Seiten) und Beiträge (single) anschauen finden wir den Header und den Footer wieder.
Diese beiden Templates werden über get_header() und get_footer() geladen, zudem kommt die Sidebar mit get_sidebar() hinzu.

Jetzt schauen wir uns den Loop an:

<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->

Wie in diesem Quellcode zu erkennen ist, gibt es eine While Schleife die alle Beiträge ausgibt.
Zusätzlich finden wir die Kommentar Funktion.
Am wichtigsten ist jedoch diese Zeile:


<?php get_template_part( 'content', 'page' ); ?>

get_template_part lädt für jeden Beitrag ein spezielles Template.
Dieses spezielle Template finden wir in der Datei content-page.php, wieso fragen sich jetzt einige.
In WordPress ist es üblich Dateien mit verschiedenen Typen zu laden. Hier geht es um “content” und als 2. Parameter wird “page” übergeben. Damit wird die Datei content-page.php über die Funktion get_template_part geladen und für jeden Schleifen Durchlauf ausgeführt.

Content-page.php

In der Datei content-page.php finden wir folgenden Quellcode:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post -->

Für jeden Aufruf dieser Datei wird ein HTML Article ausgeben.
In diese Datei befinden sich einige Funktionen von WordPress.

the_ID()

Diese Funktion liefert die aktuelle ID eines Eintrag egal ob Seiten oder Beiträge. Jedes Elemente in WordPress hat eine eigenen ID, selbst Bilder welcher über die MediaThek hochgeladen werden erhalten eine solche ID.

post_class()

post_class() ist zur besseren Strukturierung für CSS gedacht. Diese Funktion erzeugt die Eigenschaft class mit den jeweiligen Werten.
Damit ist für jeden Typ eine eigenen CSS Klasse anwählbar.

the_title()

Mit dieser Funktion wird der Title eines Beitrags oder Seite ausgegeben, dieser sollte im entsprechenden H-Tag platziert werden.

the_content()

Neben the_title() ist the_content() eine der wichtigsten Funktionen. Diese Funktion lässt uns den Inhalt eines Beitrags oder Seite anzeigen.

wp_link_pages()

Damit wird die Navigation zwischen den einzelnen Seiten erstellt.

edit_post_link()

Diese Funktion ist nur als eingeloggter Administrator sichtbar. Diese lässt direkt im Beitrag einen Link in das Backend von WordPress erscheinen. Ich entfernen diese Link meistens wenn ich ein Theme bearbeite, da ich diese Links eher störend finde und am oberen Bildschirmrand die gleiche Funktion gibt.

Gleichmäßigkeiten in WordPress

Wir haben gerade die tiefe Struktur von WordPress anhand der Seiten aufgeschlüsselt. Diese Struktur ist identisch für die Dateien.
author,category,tag und so weiter.

Verwendete WordPress Funktionen

Autor: Marcus

Ich bin einer von zwei Geschäftsführern der Conversion Junkies. Zu meinen Themenschwerpunkten gehört das technische SEO, Entwicklungen im E-Commerce und Programmierung von Shopware und WordPress Plugins. Dieses Wissen gebe ich in Schulungen und Consultings gern weiter. Nutzen Sie die Kommentarfunktion für Ihre Fragen. Ich antworte darauf gern. Oder schreiben Sie mir eine E-Mail an marcus@conversion-junkies.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage einverstanden (Datenschutzbedingungen)