Genauso wie die unterschiedlichen Beitragsformate, können wir auch verschiedene Seiten unterschiedlich über WordPress darstellen lassen. Nach derzeitigem Stand des Tutorials würden noch sämtliche Seiten und Beiträge über die Haupttemplatedatei index.php ausgegeben. Mit der Erstellung einer single.php könnte man noch die generelle Ansicht von Beiträgen ändern zB eine andere Seitenleiste oder was auch immer verwenden – in dieser Tutorial-Reihe belassen wir es aber dabei. Nicht jedoch bei der Anzeige von Seiten, welche wir in diesem Betrag noch individualisieren.
Wenn wir uns die Theme-Hierarchie aus dem ersten Teil dieser Tutorialreihe ansehen werden wir feststellen, dass uns für diesen Zweck mehrere Möglichkeiten zur Verfügung stehen.
- ein eigenes Seitentemplate erstellen, welches wir beim erstellen einer Seite unter den Attributen auswählen können (
$custom.php) - ein einzelnes Seitentemplate für einen bestimmten Seitentitel erstellen (
page-$slug.php) - ein einzelnes Seitentemplate für eine bestimmte Seiten ID erstellen (
page-$id.php) - ein allgemeines Seitentemplate erstellen, wenn keines der ersten drei Templates vorhanden ist wird dieses verwendet (
page.php) - seit WordPress v4.3 steht uns auch die
singular.phpzur Verfügung, welche allerdings auch für Beiträge zuständig ist - haben wir überhaupt keine individuellen Seitentemplates, so fällt wieder alles auf unsere
index.phpzurück, in welcher wir mitConditional Tagsebenfalls die Anzeige von Seiten regeln können – zBif ( is_page( 'seite-1' ) { // Ausgabe XYZ }
Ein Seitentemplate erstellen anhand der singular.php (ab WordPress v4.3)
Für das erste Beispiel zur Erstellung eines Seitentemplates verwenden wir die Datei singular.php. Hierzu erstellen wir im Theme-Verzeichnis eine neue Datei – singular.php – und kopieren den Inhalt der bereits vorhanden index.php hinein. Einiges können wir in der frisch angelegten singular.php entfernen. Wir benötigen für dieses Seitentemplate keinen Archivtitel, Archivbeschreibung, Fehlerseite und auch keine numerische Seitennavigation. Nach diesen Anpassungen könnte das Singular-Seiten-Template so aussehen.
<?php
// Theme: Zoechbauer Basis Theme
// singular.php
get_header();
echo '<main id="content" class="content-singular" role="main">';
// WordPress Loop
while ( have_posts() ) {
the_post();
// content.php - bei Post-Formaten auch content-image.php, content-aside.php ...
get_template_part( 'content', get_post_format() );
}
comments_template(); // Kommentare
// Beitragsnavigation
if ( is_single() ) {
// Voriger und nächster Beitrag
the_post_navigation(
);
}
echo '</main>';
// sidebar.php
get_sidebar();
// footer.php
get_footer();
?>Mit dem hinzufügen der Klasse .content-singular können wir dem Ganzen noch über die style.css ein individuelles Aussehen verleihen.
Jetzt stehen wir aber schon vor der nächsten Aufgabe. Der Seiten-Inhalt wir noch über die content.php aufgerufen, welche einiges an Tags enthält, die wir für eine Seite nicht brauchen oder wollen. Das können wir zB lösen, indem wir noch eine weitere Datei anlegen – content-page.php. In dieser Datei erzeugen wir die seitenoptimierte Version von der content.php. Datei content-page.php im Theme-Verzeichnis anlegen – Inhalt von der content.php hineinkopieren – anpassen. Das Seiten-Erstellungsdatum und der Seiten-Author sowie die Anzeige von Kategorien und Schlagwörten werden Tags sein, welche wir ziemlich sicher nicht benötigen, und daher entfernen wir diese, die Kommentarfunktion lassen wir vorerst einmal bestehen.
Die angepasste content-page.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article">
<header class="post-header">
<?php // Wenn ein Beitragsbild vorhanden ist, dann soll es mit folgendem Code geladen werden
if ( has_post_thumbnail() ) { ?>
<figure class="post-thumbnail">
<?php // In der Beitrags- und Seitenansicht nicht klickbar ansonsten schon
if ( is_singular() ) {
the_post_thumbnail();
// the_post_thumbnail( 'thumbnail' ); // 150x150 Pixel
// the_post_thumbnail( 'medium' ); // 300x300 Pixel
// the_post_thumbnail( 'large' ); // 600x600 Pixel
// the_post_thumbnail( 'full' ); // Original Auflösung
// the_post_thumbnail( 'custom' ); // Selbst definierte Auflösung in der functions.php
} else { ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Link zu <?php the_title_attribute(); ?>">
<?php // Das Beitragsbild
the_post_thumbnail(); ?>
</a>
<?php } ?>
</figure>
<?php } // Beitragsbild Ende ?>
<span class="posted-on">
<?php
// Anzahl der Kommentare anzeigen
comments_popup_link(
__( 'Keine Kommentare', 'zoechbauer' ),
__( '1 Kommentar', 'zoechbauer' ),
__( '% Kommentare', 'zoechbauer' ),
'comments-link',
__( 'Kommentare deaktiviert', 'zoechbauer' )
);
?>
</span>
<?php // Überschrift/Titel nicht klickbar in der Beitrags- und Seitenansicht ansonsten schon
if ( is_singular() ) { ?>
<h1 class="post-title"><?php the_title(); ?></h1>
<?php } else { ?>
<h1 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Link zu <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<?php } ?>
</header>
<section class="post-content">
<?php
// Bei Suche die Kurzfassung des Inhaltes anzeigen
if ( is_search() ) {
the_excerpt();
} else {
// Den Inhalt mit dem Weiterlesen-Link anzeigen - In der Einzelansicht den vollen Inhalt
the_content( __( '<span class="post-more">Weiterlesen</span>', 'zoechbauer' ) );
}
// Bei Aufteilung auf mehrere Seiten die Navigation hinzufügen - Nur wenn <!--nextpage --> eingesetzt wurde
if ( is_singular() ) {
wp_link_pages( array(
'before' => '<p class="page-links">' . __( 'Seite:', 'zoechbauer' ),
'after' => '</p>',
) );
}
?>
</section>
<?php // Wenn: Benutzer eingeloggt
if ( is_user_logged_in() ) { ?>
<footer class="post-footer">
<?php // Bearbeiten Link bei eingeloggtem Benutzer
edit_post_link( __( 'Bearbeiten', 'zoechbauer' ), '<p class="post-meta">', '</p>' ); ?>
</footer>
<?php } ?>
</article>Das es sich bei page ja nicht um ein Post-Format handelt wird auch unsere frisch angelegte Datei content-page.php auch nicht automatisch geladen. Hierzu ist noch eine kleine Änderung / Ergänzung in unserer singular.php nötig. Über den Conditional Tag is_page() teilen wir WordPress mit, dass es bei Seiten unseren Inhalt von content-page.php laden soll.
Dazu ersetzen wir in der singular.php folgende Zeile
get_template_part( 'content', get_post_format() );
mit diesem Code
if ( is_page() ) { // Seiteninhalt
get_template_part( 'content', 'page' );
} else { // Beitragsinhalt
get_template_part( 'content', get_post_format() );
}Die übergeordneten Dateien page.php und single.php wären hiermit relativ sinnlos, sofern wir nicht auch noch Beiträge und Seiten stark unterschiedlich darstellen wollen.
Individuelle Anzeige einer Seite mittels der Seiten-ID oder dem Seitentitel – page-TITLE.php oder page-ID.php
Manchmal ist es gewünscht, eine einzelne Seite unabhängig vom Rest, anders darzustellen. Nehmen wir als Beispiel eine Seite mit dem Namen Impressum. Diese Seite soll in diesem Beispiel keine Seitenleiste enthalten. Mit einem Template unter Angabe der Seiten-ID oder des Seitentitels ist dies ohne weiteres möglich.
Seiten-ID oder Seiten-Titel?
Für welche Version von beiden wir uns dabei entscheiden spielt keine Rolle. Es hat allerdings absolut keinen Sinn, für die gleiche Seite beide Templates zu erstellen. Wenn wir uns dabei noch einmal die Hierarchie von WordPress Themes anschauen wird eindeutig klar, dass der Titel vorrangig vor der ID verwendet wird.
Damit wir nun die Seite Impressum ohne Seitenleiste darstellen, erstellen wir im Theme-Verzeichnis eine neue Datei mit dem Namen page-impressum.php. In diese Datei kopieren wir nun den Inhalt von unserer singular.php und ändern diesen wieder etwas ab.
<?php
// Theme: Zoechbauer Basis Theme
// page-impressum.php
get_header();
echo '<main id="content" class="content-impressum" role="main">';
// WordPress Loop
while ( have_posts() ) {
the_post();
// content.php - bei Post-Formaten auch content-image.php, content-aside.php ...
get_template_part( 'content', 'page' );
}
comments_template(); // Kommentare
echo '</main>';
// footer.php
get_footer();
?>Die Klasse auf .content-impressum geändert zwecks Styling – Seitenleiste entfernt – fertig. Und schon wird nur die Seite Impressum ohne Seitenleiste angezeigt.
Wie wäre es mit der Seiten-ID?
Das gleiche Seiten-Template wird hierfür verwendet, es hat nur einen anderen Dateinamen. Anstatt page-impressum.php würde die Datei dann zB page-181.php heißen. Doch wie kommen sie zur Seiten-ID? Diese wird nach dem speichern der angelegten Seite in der Adressenleiste des verwendeten Browsers angezeigt.
Zum Beispiel: http://ihre-domain.com/wp-admin/post.php?post=181&action=edit
Ein separates allgemeines Seiten-Template erstellen – $custom.php
Genug von einem Template für eine bestimmte Seite. Jetzt erstellen wir noch ein Seiten-Template, welches wir anschließend auch innerhalb vom WordPress-Seiten-Editor auswählen und aktivieren können. Anwendungsbeispiele für solche Templates gibt es zur genüge. Ob man nun eine spezielle Produktseite erstellen will, eine Seite mit oder ohne oder mit spezifischer Seiteleiste, mit oder ohne Kommentare … was auch immer.
Als Beispiel für sämtliche Vertreter legen wir hier ein Seiten-Template an, wo wir Seiten ohne Kommentare anzeigen lassen. Hierzu legen wir mal wieder eine neue Datei in unserem WordPress Theme Verzeichnis an – template-no-comments.php. Inhaltlich nehme ich in diesem Beispiel den Inhalt von der singular.php als Ausgangspunkt.
Damit unser Seiten-Template aber auch von WordPress als solches erkannt wird, müssen wir am Anfang der Seite noch einen Template Namen vergeben indem wir zB folgende Zeile hinzufügen.
/* Template Name: Keine Kommentare*/
Diese Zeile genügt schon, damit WordPress unser individuelles Seitentemplate erkennt. Der Template Name Keine Kommentare kann natürlich ganz nach belieben angepasst werden.
Nach dem enfernen von sämtlichen Tags die nur Beiträge betreffen und der Kommentarfunktion sähe unsere Datei template-no-comments.php so aus.
<?php
/* Template Name: Keine Kommentare */
get_header();
echo '<main id="content" class="content-no-comments" role="main">';
// WordPress Loop
while ( have_posts() ) {
the_post();
// content.php - bei Post-Formaten auch content-image.php, content-aside.php ...
get_template_part( 'content', 'page' );
}
echo '</main>';
// sidebar.php
get_sidebar();
// footer.php
get_footer();
?>Das ist allerdings noch in diesem Fall noch nicht ganz das gewünschte Ziel. Durch die Funktion comments_popup_link() in unserer content-page.php erscheint trotzdem noch die unschöne Anzeige, dass Kommentare deaktiviert sind – diese benötigen wir in einem solchen Template nicht und wollen sie auch nicht haben.
Das Problem können wir jetzt lösen, indem wir nocheinmal eine Datei anlegen zB content-page-no-comments.php, den Inhalt von content-page.php hineinkopieren und die Funktion comments_popup_link() entfernen. Um diesen Inhalt dann zu laden müssten wir folgende Zeile in der template-no-comments.php
get_template_part( 'content', 'page' );
mit dieser
get_template_part( 'content', 'page-no-comments' );
ersetzen.
Eine weitere Möglichkeit wäre den Inhalt direkt in die template-no-comments.php einzufügen. Sofern wir die content-page-no-comments.php nicht auch in einem anderem Template verwenden wollen, wäre das für mich auch die schönere Lösung. Der komplette Inhalt des Seitentemplates Keine Kommentare wäre jetzt dadurch folgender.
<?php
/* Template Name: Keine Kommentare */
get_header();
echo '<main id="content" class="content-no-comments" role="main">';
// WordPress Loop
while ( have_posts() ) {
the_post();
// Seiteninhalt
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article">
<header class="post-header">
<?php // Wenn ein Beitragsbild vorhanden ist, dann soll es mit folgendem Code geladen werden
if ( has_post_thumbnail() ) { ?>
<figure class="post-thumbnail">
<?php // In der Beitrags- und Seitenansicht nicht klickbar ansonsten schon
if ( is_singular() ) {
the_post_thumbnail();
} else { ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Link zu <?php the_title_attribute(); ?>">
<?php // Das Beitragsbild
the_post_thumbnail(); ?>
</a>
<?php } ?>
</figure>
<?php } // Beitragsbild Ende ?>
<?php // Überschrift/Titel nicht klickbar in der Beitrags- und Seitenansicht ansonsten schon
if ( is_singular() ) { ?>
<h1 class="post-title"><?php the_title(); ?></h1>
<?php } else { ?>
<h1 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Link zu <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<?php } ?>
</header>
<section class="post-content">
<?php
// Bei Suche die Kurzfassung des Inhaltes anzeigen
if ( is_search() ) {
the_excerpt();
} else {
// Den Inhalt mit dem Weiterlesen-Link anzeigen - In der Einzelansicht den vollen Inhalt
the_content( __( '<span class="post-more">Weiterlesen</span>', 'zoechbauer' ) );
}
// Bei Aufteilung auf mehrere Seiten die Navigation hinzufügen - Nur wenn <!--nextpage --> eingesetzt wurde
if ( is_singular() ) {
wp_link_pages( array(
'before' => '<p class="page-links">' . __( 'Seite:', 'zoechbauer' ),
'after' => '</p>',
) );
}
?>
</section>
<?php // Wenn: Benutzer eingeloggt
if ( is_user_logged_in() ) { ?>
<footer class="post-footer">
<?php // Bearbeiten Link bei eingeloggtem Benutzer
edit_post_link( __( 'Bearbeiten', 'zoechbauer' ), '<p class="post-meta">', '</p>' ); ?>
</footer>
<?php } ?>
</article>
<?php
}
echo '</main>';
// sidebar.php
get_sidebar();
// footer.php
get_footer();
?>Nachdem wir nun unsere Datei abgespeichert haben, können wir im nun im WordPress Editor unser Template Keine Kommentare für bestimmte Seiten auswählen und aktivieren.
Noch individueller!
Wer es noch ein bisschen individueller benötigt, kann auch noch den header oder den footer des Seitentemplates ändern oder eine spezielle CSS-Datei oder Javascript-Datei laden. Angepasste header und footer erstellt man wieder nach dem selben Schema, wie wir es auch schon mit den Widgetbereichen gemacht haben.
Als kurzes abschließendes Beispiel hierzu könnte man eine neue Datei zB header-impressum.php anlegen – diese mit einem eigenen Inhalt versehen und in unserer page-impressum.php laden. Hierzu einfach die Zeile
get_header();
mit
get_header( 'impressum' );
ersetzen. Nach dem selben Schema könnten wir dann auch noch beim footer vorgehen.
Richtiges und/oder individuelles einbinden von CSS- und Javascript-Dateien werde ich im nächsten Artikel dieser Serie behandeln.
Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.