WordPress – Twenty Sixteen – Personnaliser les balises metas

  • Wordpress
  • 282
  • 0
  • J’avais déjà fait un petit article sur ces fameuses balises métas. C’était un peu barbare puisque la modification se faisait directement dans le thème du blog. Thème dont j’avais fait la copie pour faire un pseudo thème enfant mais pour le coup il n’y avait plus de mises à jour. Là on va voir comment modifier les balises métas à partir d’un vrai thème enfant. Je tiens à préciser que le thème utilisé pour cet article est le dernier né de WordPress, Twenty Sixteen donc.

    Création du thème enfant

    Vous pouvez le faire manuellement comme bien expliqué dans cet article de WP Formation. Perso j’ai préféré le faire grâce à un plugin, histoire de ne pas me prendre la tête. On peut ensuite désinstaller ce plugin.

    Une fois votre thème enfant créé, direction le ftp pour modifier les métas.

    Modifications des métas

    C’est quoi les métas ? Tout simplement les informations sur l’article, date d’édition, auteur, tags, etc… Dans le thème Twenty Sixteen, les métas se trouvent dans le fichier…

    ./wp-content/themes/twentysixteen/inc/template-tags.php

    … mais nous n’allons nous servir que de ce fichier pour recopier les fonctions qui nous intéressent pour ensuite les coller dans le fichier

    ./wp-content/themes/mon-theme-enfant/functions.php

    Les fonctions à recopier sont :

    • theme_enqueue_styles()
    • twentysixteen_entry_date()
    • twentysixteen_entry_meta()
    • twentysixteen_entry_taxonomies()

    A contrario d’autres thèmes les métas ont, ici, leur propre fichier qui facilite grandement les choses. Les modifications à faire sont en gras dans les blocs de code.

    Ensuite, modifiez à votre guise. D’abord ajoutons des petits icône de Font Awesome devant les lignes.

    Dans la fonction twentysixteen_entry_meta(), qui est la principale, celle qui va être appelée dans l’affichage de la page, on va d’abord importer l’API Font Awesome :

    echo '<script src="https://use.fontawesome.com/de0377c6a2.js"></script>';

    Je préfère le placer là. Si plus tard on veut ajouter des icônes ailleurs dans le site, alors il sera peut-être préférable de placer cette ligne dans le fichier du header.php.

    Tant que nous sommes dans cette fonctions, ajoutons l’icône des commentaires (bloc de code à la fin de la fonction) :

    if ( ! is_singular() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
    
    // Mise en variable du code html pour l'icône des commentaires
     $by_Alex_comment_icon = '<span class="fa fa-comment"></span> ';
    
     echo '<span class="comments-link">' .$by_Alex_comment_icon;
    
     comments_popup_link( sprintf( __( 'Leave a comment<span class="screen-reader-text"> on %s</span>', 'twentysixteen' ), get_the_title() ) );
     echo '</span>';
     }
    

    Ensuite, ajoutons les icônes pour la date.

    function twentysixteen_entry_date() {
        $time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
    
        if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
            $time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
        }
    $by_Alex_time_icon = '<span class="fa fa-clock-o"></span> ';
        $time_string = sprintf( $time_string,
            esc_attr( get_the_date( 'c' ) ),
            get_the_date(),
            esc_attr( get_the_modified_date( 'c' ) ),
            get_the_modified_date()
        );
    
        printf( '<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
            _x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
            esc_url( get_permalink() ),
            $by_Alex_time_icon.$time_string . ' ('. by_Alex_compteur_visites() .')'
        );          
    }

    La fonction by_Alex_compteur_visites() permet de compter le nombre de vues. Elle est également dans le fichier functions.php. Pour plus d’infos sur cette fonction et l’ajout d’un compteur de visites, rendez-vous sur cette page.

    Et pour terminer, ajoutons les icônes pour les tags et les catégories :

    function twentysixteen_entry_taxonomies() {
     $by_Alex_cat_icon = '<span class="fa fa-folder-open"></span> ';
     $by_Alex_tag_icon = '<span class="fa fa-hashtag"></span> ';
     $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
     if ( $categories_list && twentysixteen_categorized_blog() ) {
     printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
     _x( 'Categories', 'Used before category names.', 'twentysixteen' ),
     $by_Alex_cat_icon.$categories_list
     );
     }
    
    $tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
     if ( $tags_list ) {
     printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
     _x( 'Tags', 'Used before tag names.', 'twentysixteen' ),
     $by_Alex_tag_icon.$tags_list
     );
     }
    }

     

    Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    9 × one =