So zeigen Sie Post-Meta-Daten in WordPress an und gestalten sie

Ist Ihnen schon einmal ein Datum oder eine Kategorie in einem Blogbeitrag aufgefallen? Dies sind sogenannte „Post-Metadaten“ – ein wichtiger Bestandteil eines Blog-Posts. Es hilft bei der Bereitstellung prägnanter Metadaten zu den Inhalten Ihres Blogs.

Bei richtiger Verwendung kann Post Meta die Benutzererfahrung verbessern; Angenommen, ein Besucher interessiert sich nur für ein bestimmtes Thema, dann kann Kategorie-Meta ihm dabei helfen, Beiträge nach Kategorie zu verkürzen, sodass er Beiträge zu diesem bestimmten Thema anzeigen kann, anstatt alle Beiträge zu sehen. Wenn Sie nur Beiträge eines bestimmten Autors anzeigen möchten, kann Ihnen Post Meta dabei helfen.

In diesem Beitrag zeige ich Ihnen, wie Sie Post-Metadaten anzeigen und formatieren können.

Was sind Post-Metadaten und wie können sie meinem Blog helfen?

Der Abschnitt mit den Post-Metadaten enthält relevante Informationen eines Blog-Posts wie Veröffentlichungsdatum, Autorenname, Kategorien, Tags und benutzerdefinierte Taxonomien usw.

Wenn Sie einen Blog haben, sollten Sie sicherstellen, dass die Metadaten Ihres Beitrags genau richtig sind, da diese Informationen einem Besucher helfen können, mehr über den Beitrag zu erfahren, und auch dazu beitragen können, Ihre Seitenaufrufe zu erhöhen, indem die Navigation auf Ihrer Website vereinfacht wird.

Wie viele Post-Meta-Daten sollten Sie anzeigen?

Der Speicherort der Post-Metadaten variiert von Thema zu Thema. Einige zeigen es möglicherweise vor dem Beitragstitel an, andere nach dem Titel und einige direkt nach dem Inhalt.

Aber zu viele Post-Meta-Stücke können das Layout durcheinander bringen. Im Idealfall würden Sie nur die Informationen anzeigen, die Sie für notwendig halten.

Sehen wir uns nun an, wie Sie Post-Meta anpassen und hinzufügen können.

Anpassen von Post-Meta-Daten

Wie bereits erwähnt, variiert die Post-Meta-Position von Thema zu Thema. Hier arbeiten wir an einem bestimmten Thema – in diesem Fall dem Standardthema TwentySeventeen. Denken Sie also daran, dass sich Code und Seiten von Ihrem Thema unterscheiden können.

In modernen Themes werden Post-Meta auf der Template-Tags-Seite definiert und bei Bedarf aufgerufen, aber in einigen Themes werden Post-Meta möglicherweise direkt vor oder nach dem Post-Titel platziert.

Im Allgemeinen finden Sie Post-Meta-Tags in den Seiten index.php , single.php , archive.php und Inhaltsvorlagen .

Ein einfacher Code würde so aussehen:

Veröffentlicht am

 <?php the_time('F jS, Y'); ?> von <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>

Dieser Code zeigt etwa Folgendes an: Gepostet am Datum nach Autorenname mit Bearbeitungsschaltfläche (nur wenn Sie im Dashboard angemeldet sind).

Aber jetzt verwenden die meisten modernen Themen Vorlagen-Tags, um Post-Meta zu verarbeiten. Mal sehen, wie es funktioniert.

Zunächst müssten Sie ein untergeordnetes Thema erstellen, bevor Sie Änderungen vornehmen können.

Wir werden an einer einzelnen Beitragsseite arbeiten und so sieht es vom Frontend aus aus.

Angenommen, wir möchten ein Benutzersymbol vor dem Autorennamen hinzufügen. Gehen Sie dazu wie folgt vor:

Im TwentySeventeen-Design wird die Vorlage single.php verwendet, um einzelne Beiträge anzuzeigen. Suchen Sie nun nach get_template_part und beachten Sie dort den Vorlagenpfad, in unserem Fall lautet der Pfad:

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

Öffnen Sie nun gemäß dem Pfad content.php und suchen Sie nach entry-header section.

 <header class="entry-header">

<?php

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

echo '<div class="entry-meta">';

if ( is_single() ) {

zwanzigsiebzehn_posted_on();

} anders {

Echo Twentyseventeen_time_link ();

zwanzigsiebzehn_edit_link();

};

echo '</div><!-- .entry-meta -->';

};

 

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>' );

} anders {

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

}

?>

</header>

<!-- .entry-header -->

Wir können Twentyseventeen_posted_on(); Funktion wird hier aufgerufen, um das Post-Meta anzuzeigen, wir müssen diese Funktion bearbeiten. Sie finden diese Funktion in der Datei template-tags.php .

Ein Tipp: Überprüfen Sie die Datei function.php des Themas, um den Dateinamen und den Pfad zu erhalten.

Suchen Sie nach Twentyseventeen_posted_on() und kopieren Sie die gesamte Funktion in die function.php -Datei Ihres Child-Themes (wenn Sie keine function.php -Datei in Ihrem Child-Theme haben, erstellen Sie eine leere Datei mit demselben Namen).

Wir werden hier Font Awesome-Symbole verwenden. Der einfachste Weg, Font Awesome in WordPress zu verwenden, ist die Installation des Better Font Awesome-Plugins.

 if ( ! function_exists( 'twentyseventeen_posted_on' ) ) :

/**

* Druckt HTML mit Metainformationen für das aktuelle Post-Datum/Zeit und den Autor.

*/

Funktion Twentyseventeen_Posted_on () {

// Holen Sie sich den Namen des Autors; packen Sie es in einen Link.

$byline = sprintf(

/* Übersetzer: %s: Beitragsautor */

__( 'von %s', 'siebzehnundzwanzig' ),

'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '"><i class="fa fa-user" aria-hidden="true"></i>' . get_the_author() . '</a></span>'

);

// Zum Schluss schreiben wir das alles auf die Seite.

echo '<span class="posted-on">' . Twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . '</span>';

}

endif;

Jetzt sehen Sie neben dem Autorennamen ein Benutzersymbol.

Ein Tipp: Sie können diese Änderungen direkt in der content.php -Datei vornehmen, aber es ist eine gute Praxis, der Themenstruktur zu folgen.

Hinzufügen von Post-Metadaten

Bisher haben wir vorhandene Meta-Tags angepasst. Nun, um die Dinge aufzupolieren – nehmen wir an, wir möchten Kategorien und Tags nach dem Beitragstitel anzeigen.

Kopieren Sie dazu die Datei content.php aus dem Parent-Theme und fügen Sie sie in Ihr Child-Theme ein, wobei Sie das gleiche Verzeichnismuster beibehalten.

Twentyseventeen > Template-Parts > Post > Content.php bis Twentyseventeen-Child > Template-Parts > Post > Content.php

Jetzt müssen Sie eine neue Funktion schreiben.

Denken Sie, es ist hart? Eigentlich ist es nicht, hier ist, was Sie tun müssen.

Die meisten Themen zeigen Kategorien und Tags irgendwo im Beitrag an, Sie müssen nur die Datei suchen und den Code in Ihrer Funktion replizieren, das war's.

In unserem Beispiel werden im TwentySeventeen-Design Kategorien und Tags nach dem Inhalt platziert. Jetzt müssen wir unserem vorherigen Workflow folgen.

Öffnen Sie die content.php und sehen Sie, welche Funktion für Kategorien und Tags verwendet wird.

 <?php

if ( is_single() ) {

Twentyseventeen_entry_footer();

}

?>

Hier ist es Twentyseventeen_entry_footer().

Gehen Sie nun zur Datei template-tags.php und suchen Sie nach twentyseventeen_entry_footer().

if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* Druckt HTML mit Metainformationen für die Kategorien, Tags und Kommentare.

*/

Funktion Twentyseventeen_entry_footer() {

 

/* Übersetzer: Wird zwischen Listenelementen verwendet, nach dem Komma steht ein Leerzeichen */

$separate_meta = __( ', ', 'siebzehnundzwanzig' );

 

// Kategorien für Beiträge abrufen.

$categories_list = get_the_category_list( $separate_meta );

 

// Tags für Posts abrufen.

$tags_list = get_the_tag_list( '', $separate_meta );

 

// Wir wollen keine .entry-footer ausgeben, wenn sie leer ist, also stellen Sie sicher, dass dies nicht der Fall ist.

if ( ( ( Twentyseventeen_categorized_blog() && $categories_list ) || $tags_list ) || get_edit_post_link() ) {

 

echo '<footer class="entry-footer">';

 

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

if ( ( $categories_list && seventeen_categorized_blog() ) || $tags_list ) {

echo '<span class="cat-tags-links">';

 

// Vor der Anzeige sicherstellen, dass es mehr als eine Kategorie gibt.

if ( $categories_list && seventeen_categorized_blog() ) {

echo '<span class="cat-links">' . Twentyseventeen_get_svg( array( 'icon' => 'folder-open' ) ) ). '<span class="screen-reader-text">' . __( 'Kategorien', 'siebzehnundzwanzig' ) . '</span>' . $categories_list . '</span>';

}

 

if ( $tags_list ) {

echo '<span class="tags-links">' . Twentyseventeen_get_svg( array( 'icon' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __( 'Tags', 'siebzehnundzwanzig' ) . '</span>' . $tags_liste . '</span>';

}

 

echo '</span>';

}

}

 

zwanzigsiebzehn_edit_link();

 

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

Suchen Sie den Code für Kategorie und Tags, kopieren Sie den Code und fügen Sie ihn in die function.php -Datei Ihres untergeordneten Themas in eine neue Funktion ein, wie diese -

if ( ! function_exists( 'twentyseventeen_post_meta' ) ) :

/**

* Druckt HTML mit Metainformationen für das aktuelle Post-Datum/Zeit und den Autor.

*/

Funktion Twentyseventeen_post_meta () {

/* Übersetzer: Wird zwischen Listenelementen verwendet, nach dem Komma steht ein Leerzeichen */

$separate_meta = __( ', ', 'siebzehnundzwanzig' );

// Kategorien für Beiträge abrufen.

$categories_list = get_the_category_list( $separate_meta );

// Tags für Posts abrufen.

$tags_list = get_the_tag_list( '', $separate_meta );

echo '<span class="cat-tags-links">';

// Vor der Anzeige sicherstellen, dass es mehr als eine Kategorie gibt.

if ( $categories_list && seventeen_categorized_blog() ) {

echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Kategorien', 'siebzehnundzwanzig' ) . '</span>' . $categories_list . '</span>';

}

if ( $tags_list ) {

echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Tags', 'siebzehnundzwanzig' ) . '</span>' . $tags_liste . '</span>';

}

echo '</span>';

};

endif;

Sie können sehen, dass ich sowohl für Kategorien als auch für Tags fantastische Symbole für Schriftarten verwendet habe.

Gestalten Sie Ihre Post-Meta

Da wir unsere Meta-Tags an der gewünschten Stelle platziert haben, ist es an der Zeit, den Stil anzupassen.

Es ist sehr einfach, wenn Sie die Grundlagen von CSS kennen. Lassen Sie uns unsere Kategorie- und Tags-Sektion anpassen.

 .entry-header .cat-tags-links {

Schriftgröße: 14px;

}

.entry-header .cat-links {

Polsterung rechts: 5px;

}

Jetzt sieht es anders aus.

Aber wenn Sie Ihr eigenes benutzerdefiniertes Symbol anstelle von Font Awesome oder einem anderen anzeigen möchten, können Sie Ihr Bild wie folgt als Hintergrundbild in CSS verwenden:

 .entry-header .cat-links {

Hintergrund: url(category-img.jpg) links mittig ohne Wiederholung;

Polsterung links: 5px;

Polsterung rechts: 5px;

}

.entry-header .tags-links {

Hintergrund: url(tag-img.jpg) links mittig ohne Wiederholung;

Polsterung links: 5px;

Polsterung rechts: 5px;

}

Wenn Sie fertig sind, vergessen Sie nicht, den Font-Awesome-Code aus Ihrer function.php -Datei zu entfernen.

Entfernen Sie alle Post-Meta

Das Entfernen von Post-Meta ist sehr einfach, finden Sie einfach den Code und löschen Sie ihn.

Wenn Sie beispielsweise jetzt unsere einzelne Post-Seite sehen, erscheinen die Kategorien und Tags jetzt in zwei Abschnitten. Wenn Sie es nicht nach dem Inhalt anzeigen möchten, löschen Sie einfach die Kategorie und den Tag-Code aus der Funktion Twentyseventeen_entry_footer().

Der neue Code würde also in Ihrem Child-Theme so aussehen.

 if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* Druckt HTML mit Metainformationen für die Kategorien, Tags und Kommentare.

*/

Funktion Twentyseventeen_entry_footer() {

// Wir wollen keine .entry-footer ausgeben, wenn sie leer ist, also stellen Sie sicher, dass dies nicht der Fall ist.

if ( get_edit_post_link() ) {

echo '<footer class="entry-footer">';

zwanzigsiebzehn_edit_link();

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

Fazit

Wie Sie sehen, können Post-Metadaten auf viele Arten angezeigt werden, aber es ist am besten, wenn Sie sich zuerst ein grundlegendes Verständnis Ihrer Themenstruktur aneignen und erst dann, wenn möglich, entsprechende Anpassungen vornehmen. Dies minimiert die Möglichkeit, dass Ihr Thema zusammenbricht. PS Vergiss nicht, ein Backup zu erstellen.

Ich hoffe, dieser Beitrag hat Ihnen geholfen zu verstehen, wie Post-Metadaten funktionieren, aber wenn Sie relevante Fragen haben, posten Sie unten Ihre Kommentare.