web-dev-qa-db-fra.com

Liste des commentaires the_tags () dans l'attribut HTML data

Je suis nouveau sur wordpress et j'essaie de créer un thème. J'utilise un script de filtrage jQuery sur une page de publications qui filtre les publications imbriquées dans une liste non ordonnée en utilisant l'attribut HTML data en tant que lien dans les éléments de liste.

Je veux utiliser les balises de chaque message comme crochet d'attribut de données. J'ai consulté des variantes des fonctions the_tags (), mais je n'arrive pas à en créer une qui répertorie simplement les balises séparées par des virgules sans les balises d'ancrage supplémentaires, etc.

C'est le plus proche que je puisse obtenir de ce que je veux:

<li class="griditemleft" data-="<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $sep . $tag->name; $sep = ', ';
}
}
?>">

Cela semble juste dans le premier élément de liste, mais les éléments de liste suivants ont une virgule supplémentaire au début de la chaîne d'attribut de données.

phptheme-developmentfunctions
1
kyle

Utilisez json_encode():

<li class="griditemleft" data-tags="<?php
$posttags = get_the_tags();
$data = array();
foreach($posttags as $tag) {
    $data[] = $tag->name;
}
echo json_encode( $data );

Plus tard, dans votre JavaScript, parcourez les éléments li et, pour chaque élément, utilisez:

// get an array of tag names with jQuery's parseJSON()
var itemtags = $.parseJSON( item.data('tags') );

Voir jQuery parseJSON () pour plus de détails.

Mettre à jour

En fait, vous n’avez même pas besoin de parseJSON() dans votre cas, c’est beaucoup plus facile avec de simples noms de tags. Prenons une fonction simple pour construire une liste des cinq derniers articles:

add_action( 'wpse_69446_post_list', 'wpse_69446_post_list' );
function wpse_69446_post_list()
{
    $output = '';
    $posts  = get_posts();

    if ( ! $posts )
        return;

    foreach ( $posts as $post )
    {
        $tags      = get_the_tags( $post->ID );
        $tag_names = array ();
        $tag_data = '';

        if ( $tags )
        {
            foreach ( $tags as $tag )
            {
                $tag_names[] = $tag->name;
            }
            $tag_data = json_encode( $tag_names );
        }

        $output .= sprintf(
            '<li data-tags=\'%1$s\'><a href="%2$s">%3$s</a></li>',
            $tag_data,
            get_permalink( $post->ID ),
            get_the_title( $post->ID )
        );
    }
    print "<ul class='wpse_69446_post_list'>$output</ul>";

    // you have to enqueue jQuery first.
    // This is just as oversimplified demonstration.
    add_action( 'wp_footer', 'wpse_69446_js' );
}

Appelez-le dans vos fichiers de thème avec

do_action( 'wpse_69446_post_list' );

Maintenant nous avons besoin du script pour le pied de page:

function wpse_69446_js()
{
    ?>
<script>
jQuery( function($) {
    $('.wpse_69446_post_list li').each( function( i, item ) {
        var li = $(item).find( 'li' );
        console.info( 'item li:', li );
        // an array or undefined if there are no tags
        console.info( 'itemtags:', $(item).data( 'tags' ) );
    });
});
</script>
    <?php
}

Les itemtags sont un tableau maintenant ou undefined (vide).

console output

Maintenant, vous pouvez parcourir ce tableau et faire quelque chose de génial. :)

1
fuxia