So erstellen Sie benutzerdefinierte Single-Post-Vorlagen in WordPress

Haben Sie jemals eine Beitragsdetailseite mit einem völlig anderen Layout als andere Beiträge auf derselben Website gesehen? Das liegt wahrscheinlich daran, dass es eine benutzerdefinierte Vorlage verwendet. Sie können einzelnen Beiträgen eine benutzerdefinierte Vorlage zuweisen, wodurch Sie mehr Flexibilität beim Erscheinungsbild Ihrer Website erhalten.

Möchten Sie erfahren, wie Sie eine benutzerdefinierte Single-Post-Vorlage erstellen? In diesem Beitrag zeige ich dir, wie du ganz einfach deine eigenen erstellen kannst!

Der Vorteil benutzerdefinierter Vorlagen

Bevor wir mit der Erstellung beginnen, wollen wir untersuchen, warum Sie möglicherweise eine benutzerdefinierte Vorlage benötigen und was sie bewirkt.

Wenn Sie möchten, dass sich ein bestimmter Beitrag oder Beitragstyp vom Rest Ihrer Inhalte abhebt, sollten Sie erwägen, eine benutzerdefinierte Vorlage für einen einzelnen Beitrag zu erstellen. Diese Vorlage wird nur auf die Posts angewendet, denen Sie sie zuweisen, was bedeutet, dass sie ein völlig anderes Layout haben kann als Ihre Standardposts. Ein einzigartiges Design und Layout kann dann die Benutzerbindung für diesen bestimmten Beitrag erhöhen.

Sind Sie bereit, Ihre eigenen zu entwickeln? Das Erstellen und Verwenden einer benutzerdefinierten Beitragsvorlage ähnelt einer benutzerdefinierten Seitenvorlage.

So erstellen Sie eine benutzerdefinierte Beitragsvorlage

Ich werde das Design Twenty Seventeen für mein Beispiel verwenden, aber der Prozess ist für jedes Design gleich.

Bevor ich eine benutzerdefinierte Beitragsvorlage erstelle, erstelle ich zuerst ein Child-Theme. Sie können im Hauptdesign arbeiten, aber da Sie eine benutzerdefinierte Vorlage erstellen, verlieren Sie Ihre Vorlage, wenn Sie das übergeordnete Design aktualisieren. Aus diesem Grund empfiehlt es sich, Ihre benutzerdefinierten Vorlagen vom Hauptthema getrennt zu halten.

Für eine benutzerdefinierte Vorlage müssen Sie einen Vorlagennamen (den Namen der Vorlage) und einen Vorlagen-Beitragstyp (wo diese Vorlage verwendet wird) definieren. Es sieht aus wie das:

<?php
/* Template Name: Full Width Post * Template Post Type: post*/ /*The template for displaying full width single posts. */
get_header( );
?>

Behalten Sie beim Speichern der Datei den Dateinamen bei, der für den Vorlagennamen relevant ist, z. B. full-width-post.php . Wenn Sie einen Beitrag über das Admin-Panel anzeigen, wird die neue Vorlage in einem Dropdown-Menü des Abschnitts „Beitragsattribute“ angezeigt.

Unsere benutzerdefinierte Vorlage ist fertig, aber noch nicht nützlich. Machen wir es ein bisschen vorteilhafter!

Hinweis: Wir werden an mehreren Dateien arbeiten, behalten Sie also die Dateinamen und Ordner im Auge.

Hier ist das aktuelle Layout der Blog-Beitragsseiten im Thema Twenty Seventeen. Ich bin damit zufrieden, also belassen wir es dabei.

Nehmen wir nun an, Sie möchten ein Layout in voller Breite für ein paar Posts. Wir werden den Beitragstitel über die Metadaten setzen. Die Metadaten sollten oben und unten einen Rahmen haben und sowohl Titel als auch Metadaten sollten zentriert ausgerichtet sein. Hier ist das Drahtmodell:

Um dieses Layout zu erstellen, müssen Sie herausfinden, welche Datei für die Anzeige der Beitragsdetailseiten verantwortlich ist. In den meisten Themes ist single.php die Datei, es sei denn, es gibt bestimmte vordefinierte Vorlagen. Die Codestruktur variiert von Thema zu Thema, daher kann es ein wenig Lernen erfordern, um zu verstehen, wie Ihr spezielles Thema funktioniert.

Wenn Sie die Datei gefunden haben, die Beitragsdetailseiten anzeigt, sollten Sie herausfinden, ob eine Funktion verwendet wird, um eine andere Datei aufzurufen, oder ob die Vorlage direkt erstellt wird. In diesem Beispiel mit dem Thema Twenty Seventeen ist es die Funktion get_template_part.

Der Pfad get_template_part ist der wichtigste Teil, dem hier zu folgen ist.

<div class="wrap">

<div id="primary" class="content-area">
        	<main id="main" class="site-main" role="main">
              	<?php /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
                          	'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
                    	) );
              	endwhile; // End of the loop.
              	?>

Wie Sie sehen können, bezieht es sich auf einen Pfad:

get_template_part( 'template-parts/post/content', get_post_format()
);

Die Datei content.php wird also innerhalb von single.ph , um die Post-Detailseite auszugeben.

Nachdem Sie nun wissen, wie die Datei single.php funktioniert, kopieren wir den Code daraus und fügen ihn in unsere zuvor erstellte Datei full-width-post.php im Child-Theme ein. Da es sich um eine Vorlage in voller Breite handelt, entfernen wir die Seitenleiste.

Kopieren Sie nun die Datei content.php aus dem oben genannten Pfad. Sie können es in dasselbe Verzeichnis einfügen, in dem sich Ihre Vorlagendatei befindet, aber ich würde vorschlagen, derselben Ordnerstruktur wie das übergeordnete Thema zu folgen.

Sie können den Dateinamen unverändert lassen, aber wenn Sie jemals etwas in der Standardvorlage ändern möchten, führt dies zu einem Konflikt. Um Probleme zu vermeiden, würde ich vorschlagen, die Datei umzubenennen und sie für den Vorlagennamen relevant zu halten , wie zum Beispiel content-full-width.php .

Die Dateien sind vorhanden, also ändern wir jetzt den Code, um den Beitragstitel und die Beitragsmetadaten auszutauschen.

<header class="entry-header">
        	<?php

        	if ( is_single() ) {
              	the_title( '

<h1 class="entry-title">', '</h1>

' );
        	} elseif ( is_front_page() && is_home() ) {
              	the_title( '

<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>

' );
        	} else {
              	the_title( '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>

' );
        	}

        	if ( 'post' === get_post_type() ) {

              	echo '

<div class="entry-meta">';
                    	if ( is_single() ) {
                    	  	twentyseventeen_posted_on();
                    	} else {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</header>

<!-- .entry-header -->

Um diese Vorlage zu verwenden, bearbeiten Sie den gewünschten Beitrag im WordPress-Admin und weisen Sie die Vorlage aus dem Dropdown-Menü zu.

Wenn Sie den Beitrag im Frontend überprüfen, ist er immer noch nicht in voller Breite, aber der Titel und die Metadaten haben die Plätze getauscht, sodass wir wissen, dass der Beitrag unsere benutzerdefinierte Vorlage verwendet

Wir müssen etwas CSS hinzufügen, um es in voller Breite zu machen. WordPress generiert automatisch eine Klasse gemäß dem Vorlagennamen im Body-Abschnitt.

Verwenden Sie diese Klasse, um auf diese bestimmte Vorlage abzuzielen. Sie können das CSS zur style.css -Datei des Child-Themes hinzufügen.

.post-template-full-width-post.has-sidebar:not(.error404) #primary{
float:none;
width:auto;
}

.post-template-full-width-post .entry-header{
text-align:center;
margin-bottom:1.3em;
}

.post-template-full-width-post .entry-meta{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:15px 0;
}

Jetzt haben wir das gewünschte Layout. Jeder Beitrag, der diese Vorlage verwendet, hat genau denselben Stil.

Sie können so viele benutzerdefinierte Vorlagen erstellen, wie Sie möchten, um Ihren Anforderungen gerecht zu werden. Sie können sogar Vorlagen basierend auf Beitragskategorien erstellen.

Kann ich dafür ein Plugin verwenden?

Wenn Sie mit PHP-Codes nicht vertraut sind, können Sie einige Plugins verwenden, aber ich muss zugeben, dass es nur sehr wenige Plugins zum Erstellen benutzerdefinierter Beitragsvorlagen gibt und die meisten davon nicht sehr nützlich sind, da Sie die Vorlage sowieso manuell erstellen müssen.

Ich fand das Post Custom Templates Lite-Plugin sehr nützlich. Es ist ein kostenloses Plugin, mit dem Sie Post-Vorlagen ohne Programmierung in einer netten Drag-and-Drop-Oberfläche erstellen können. Es hat viele Anpassungsoptionen. Wenn Sie also eine Beitragsvorlage anpassen möchten, kann Ihnen dieses Plugin im Allgemeinen helfen.

Hinweis: In der kostenlosen Version können Sie nur normale Beitragsvorlagen anpassen. Sie müssen die Pro-Version verwenden, um benutzerdefinierte Beitragsvorlagen erstellen zu können und einige zusätzliche Funktionen zu erhalten.

Fazit

Unabhängig davon, ob Sie manuell arbeiten oder ein Plugin verwenden, um eine benutzerdefinierte Vorlage für einzelne Posts zu erstellen, können sich Ihre wichtigsten Posts von den anderen abheben. Schauen Sie sich zur Inspiration die Website von Brian Dean an; Er verwendet eine bestimmte Vorlage für seine endgültigen Leitfäden, damit sie sich von den anderen seiner Beiträge unterscheiden.

Probieren Sie es also aus und erstellen Sie Ihre eigene einzigartige Single-Post-Vorlage.

Alle Fotografien in diesem Artikel wurden intern bei Flywheel aufgenommen.

Sie müssen Ihre Kunden noch überzeugen?

Es ist keine leichte Aufgabe, Ihre Kunden davon zu überzeugen, dass verwaltetes WordPress-Hosting das Richtige für ihr Unternehmen ist. Um Ihnen bei Ihrer Mission zu helfen, haben wir ein paar One-Sheet-Broschüren zusammengestellt, die den Wert von Managed Hosting erklären, die Sie direkt an Ihren Kunden weitergeben können. Laden Sie es hier herunter!

Was wirst du als nächstes lernen? Probieren Sie eines dieser Tutorials aus!

• So wählen Sie die besten CSS-Einheiten aus, um bessere Website-Layouts zu erstellen
• So fügen Sie eine responsive Google Map in WordPress hinzu
• So migrieren Sie Ihre Websites effizient von Adobe Business Catalyst zu WordPress (+ über 20 Ressourcen!)