Comment afficher et styliser les métadonnées de publication dans WordPress
Publié: 2017-10-26
Avez-vous déjà remarqué une date ou une catégorie dans un article de blog ? C'est ce qu'on appelle une « métadonnée de publication » - une partie importante d'un article de blog. Cela aide à fournir des métadonnées succinctes concernant les éléments de contenu de votre blog.
S'il est utilisé correctement, le post-méta peut améliorer l'expérience utilisateur ; disons qu'un visiteur est intéressé par un certain sujet uniquement, alors la méta de catégorie peut l'aider à publier des articles courts par catégorie afin qu'il puisse afficher les articles sur ce sujet particulier plutôt que de voir tous les articles. Ou, si vous souhaitez afficher uniquement les publications d'un auteur particulier, la méta post peut vous aider à le faire.
Dans cet article, je vais vous montrer comment afficher et styliser les métadonnées des articles.
Qu'est-ce que les métadonnées de publication et comment peuvent-elles aider mon blog ?
La section des métadonnées de publication contient des informations pertinentes sur un article de blog, telles que la date de publication, le nom de l'auteur, les catégories, les balises et les taxonomies personnalisées, etc.
Si vous avez un blog, vous devez vous assurer que les métadonnées de votre publication sont exactes, car ces informations peuvent aider un visiteur à mieux comprendre la publication et peuvent également aider à augmenter le nombre de pages vues en facilitant la navigation sur votre site.
Quelle quantité de métadonnées de publication devriez-vous afficher ?
L'emplacement des post-métadonnées varie d'un thème à l'autre. Certains peuvent l'afficher avant le titre du message, d'autres après le titre et d'autres juste après le contenu.
Mais trop de pièces post-méta peuvent gâcher la mise en page. La situation idéale est celle dans laquelle vous n'afficheriez que les informations que vous jugez nécessaires.
Voyons maintenant comment vous pouvez personnaliser et ajouter des méta post.
Personnalisation des métadonnées de publication
Comme mentionné, l'emplacement post-méta varie d'un thème à l'autre. Ici, nous allons travailler sur un thème particulier - dans ce cas, le thème TwentySeventeen par défaut, alors gardez à l'esprit que le code et les pages peuvent être différents de votre thème.
Dans les thèmes modernes, les post meta sont définis dans la page des balises de modèle et appelés si nécessaire, mais dans certains thèmes, vous pouvez trouver que les post meta sont placés directement avant ou après le titre du post.
En règle générale, vous trouverez des balises META dans les pages index.php , single.php , archive.php et les modèles de contenu .
Un code simple ressemblerait à ceci :
Posté sur
<?php the_time('F jS, Y'); ?> par <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>Ce code affichera quelque chose comme ceci Date de publication par nom d'auteur avec bouton d'édition (uniquement si vous êtes connecté au tableau de bord).
Mais maintenant, la plupart des thèmes modernes utilisent la page des balises de modèle pour gérer la méta post. Voyons voir comment ça fonctionne.
Tout d'abord, vous devez créer un thème enfant avant d'apporter des modifications.
Nous travaillerons sur une seule page de publication et voici à quoi cela ressemble du front-end.
Disons que nous voulons ajouter une icône d'utilisateur avant le nom de l'auteur, pour ce faire, procédez comme suit :
Dans le thème TwentySeventeen , le modèle single.php est utilisé pour afficher un article unique. Recherchez maintenant get_template_part et notez le chemin du modèle, dans notre cas, le chemin est :
get_template_part( 'template-parts/post/content', get_post_format() );
Maintenant, selon le chemin, ouvrez content.php et recherchez la section entry-header .
<header class="entry-header">
<?php
si ( 'poster' === get_post_type() ) {
echo '<div class="entry-meta">' ;
si ( est_unique() ) {
vingt-sept_posté_le();
} autre {
echo vingt-sept_heure_lien();
vingt-sept_edit_link();
} ;
echo '</div><!-- .entry-meta -->';
} ;
si ( est_unique() ) {
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>' );
} autre {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
}
?>
</header>
<!-- .entry-header -->
Nous pouvons voir vingt-sept_posté_sur(); est appelée ici pour afficher la post meta, nous devons éditer cette fonction. Vous trouverez cette fonction dans le fichier template-tags.php .
Un conseil : vérifiez le fichier function.php du thème pour obtenir le nom et le chemin du fichier.
Recherchez Twentyseventeen_posted_on() et copiez-collez la fonction entière dans le fichier function.php de votre thème enfant (si vous n'avez pas de fichier function.php dans votre thème enfant, créez un fichier vide avec le même nom).
Nous utiliserons ici les icônes Font Awesome, la façon la plus simple d'utiliser Font Awesome dans WordPress consiste à installer le plugin Better Font Awesome.
if ( ! function_exists( 'twentyseventeen_posted_on' ) ) :
/**
* Imprime HTML avec des méta-informations pour la post-date/heure actuelle et l'auteur.
*/
function vingt-sept_posté_sur() {
// Récupère le nom de l'auteur ; enveloppez-le dans un lien.
$byline = sprintf(
/* traducteurs : %s : auteur du message */
__( 'par %s', 'vingt-sept' ),
'<span class="author vcard"><a class="url fn" 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>'
);
// Enfin, écrivons tout cela sur la page.
echo '<span class="posté sur">' . vingt-sept_heure_lien() . '</span><span class="byline"> ' . $byline . '</span>' ;
}
fin si;
Vous pouvez maintenant voir une icône d'utilisateur à côté du nom de l'auteur.
Un conseil : vous pouvez effectuer ces modifications directement dans le fichier content.php mais il est de bon ton de suivre la structure du thème.
Ajouter des métadonnées de publication
Jusqu'à présent, nous avons personnalisé les balises méta existantes. Maintenant, pour embellir les choses, supposons que nous voulions afficher la catégorie et les balises après le titre du message.
Pour ce faire, copiez le fichier content.php du thème parent et collez-le dans votre thème enfant en gardant le même modèle de répertoire.
vingt-sept > parties de modèle > publication > contenu.php à vingt-sept enfants > parties de modèle > publication > contenu.php
Maintenant, vous devez écrire une nouvelle fonction.
Vous pensez que c'est dur ? En fait, ce n'est pas le cas, voici ce que vous devez faire.
La plupart des thèmes afficheront la catégorie et les balises quelque part dans le message, il vous suffit de localiser le fichier et de répliquer le code dans votre fonction, c'est tout.
Dans notre cas, dans TwentySeventeen, la catégorie de thème et les balises sont placées après le contenu. Nous devons maintenant suivre notre flux de travail précédent.
Ouvrez content.php et voyez quelle fonction est utilisée pour la catégorie et les balises.
<?php
si ( est_unique() ) {
vingt-sept_entry_footer();
}
?>
Ici, il s'agit de Twentyseventeen_entry_footer().
Allez maintenant dans le fichier template-tags.php et recherchez Twentyseventeen_entry_footer().
if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :
/**
* Imprime HTML avec des méta-informations pour les catégories, les balises et les commentaires.
*/
function vingt-sept_entry_footer() {
/* traducteurs : utilisés entre les éléments de la liste, il y a un espace après la virgule */
$separate_meta = __( ', ', 'vingt-sept' );
// Récupère les catégories pour les messages.
$categories_list = get_the_category_list( $separate_meta );
// Récupère les balises pour les messages.
$tags_list = get_the_tag_list( '', $separate_meta );
// Nous ne voulons pas afficher .entry-footer s'il sera vide, alors assurez-vous que ce n'est pas le cas.
if ( ( ( Twentyseventeen_categorized_blog() && $categories_list ) || $tags_list ) || get_edit_post_link() ) {
echo '<footer class="entry-footer">' ;
si ( 'poster' === get_post_type() ) {
if ( ( $categories_list && vingt-sept_categorized_blog() ) || $tags_list ) {
echo '<span class="cat-tags-links">' ;
// Assurez-vous qu'il y a plus d'une catégorie avant d'afficher.
if ( $categories_list && vingt-sept_catégories_blog() ) {
echo '<span class="cat-links">' . vingt-sept_get_svg( array( 'icon' => 'folder-open' ) ) . '<span class="screen-reader-text">' . __( 'Catégories', 'vingt-sept' ) . '</span>' . $categories_list . '</span>' ;
}
si ( $tags_list ) {
echo '<span class="tags-links">' . vingt-sept_get_svg( array( 'icon' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __( 'Tags', 'vingt-sept' ) . '</span>' . $tags_list . '</span>' ;
}
echo '</span>';
}
}
vingt-sept_edit_link();
echo '</footer> <!-- .entry-footer -->';
}
}
fin si;
Trouvez le code pour la catégorie et les balises, puis copiez et collez le code dans le fichier function.php de votre thème enfant dans une nouvelle fonction, comme ceci -
if ( ! function_exists( 'twentyseventeen_post_meta' ) ) :
/**
* Imprime HTML avec des méta-informations pour la post-date/heure actuelle et l'auteur.
*/
function vingt-sept_post_meta() {
/* traducteurs : utilisés entre les éléments de la liste, il y a un espace après la virgule */
$separate_meta = __( ', ', 'vingt-sept' );
// Récupère les catégories pour les messages.
$categories_list = get_the_category_list( $separate_meta );
// Récupère les balises pour les messages.
$tags_list = get_the_tag_list( '', $separate_meta );
echo '<span class="cat-tags-links">' ;
// Assurez-vous qu'il y a plus d'une catégorie avant d'afficher.
if ( $categories_list && vingt-sept_catégories_blog() ) {
echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Catégories', 'vingt-sept' ) . '</span>' . $categories_list . '</span>' ;
}
si ( $tags_list ) {
echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Tags', 'vingt-sept' ) . '</span>' . $tags_list . '</span>' ;
}
echo '</span>';
} ;
fin si;
Vous pouvez voir que j'ai utilisé des icônes de police géniales pour les catégories et les balises.
Styliser votre Post Meta
Puisque nous avons placé nos balises méta à l'emplacement souhaité, il est temps d'ajuster un peu le style.
C'est très simple si vous connaissez les bases du CSS. Ajustons notre section de catégories et de balises.
.entry-header .cat-tags-links {
taille de police : 14 px ;
}
.entry-header .cat-links {
rembourrage à droite : 5 px ;
}
Maintenant, ça a l'air différent.
Mais si vous souhaitez afficher votre propre icône personnalisée au lieu de font awesome ou autre, vous pouvez utiliser votre image comme image d'arrière-plan dans CSS comme ceci :
.entry-header .cat-links {
arrière-plan : url (category-img.jpg) centre gauche sans répétition ;
rembourrage à gauche : 5 px ;
rembourrage à droite : 5 px ;
}
.entry-header .tags-links {
arrière-plan : url (tag-img.jpg) centre gauche sans répétition ;
rembourrage à gauche : 5 px ;
rembourrage à droite : 5 px ;
}
Une fois cela fait, n'oubliez pas de supprimer le code Font Awesome de votre fichier function.php .
Supprimer tout message méta
Supprimer n'importe quelle méta post est très simple, il suffit de trouver le code et de le supprimer.
Par exemple, si vous voyez maintenant notre page de publication unique, les catégories et les balises apparaissent maintenant dans deux sections. Si vous ne souhaitez pas l'afficher après le contenu, supprimez simplement la catégorie et le code de balise de la fonction Twentyseventeen_entry_footer().
Ainsi, le nouveau code ressemblerait à ceci dans votre thème enfant.
if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :
/**
* Imprime HTML avec des méta-informations pour les catégories, les balises et les commentaires.
*/
function vingt-sept_entry_footer() {
// Nous ne voulons pas afficher .entry-footer s'il sera vide, alors assurez-vous que ce n'est pas le cas.
si (get_edit_post_link()) {
echo '<footer class="entry-footer">' ;
vingt-sept_edit_link();
echo '</footer> <!-- .entry-footer -->';
}
}
fin si;Conclusion
Comme vous pouvez le voir, les métadonnées des publications peuvent être affichées de plusieurs façons, mais il est préférable que vous acquériez d'abord une compréhension de base de la structure de votre thème et seulement ensuite, si possible, faites les ajustements en conséquence. Cela minimise la possibilité que votre thème tombe en panne. PS n'oubliez pas de créer une sauvegarde.
J'espère que cet article vous a aidé à comprendre le fonctionnement des métadonnées de publication, mais si vous avez des questions pertinentes, postez vos commentaires ci-dessous.