categories - ADD DYNAMIC attribute for category to accordion

admin管理员组

文章数量:1388110

i try to do category's accordion dynamic for show article with loop in WordPress i do it with static HTML and JQuery but i cant understand how i can add attr like data-class="" and pass it to items

    <ul class="s3_accordion">
       <?php
    $categories = get_categories( array(
        'orderby'   => 'name',
        'order'     => 'DESC'
    ) );
    $cat_array = array();
    foreach( $categories as $category ) {
        $category_link = sprintf( 
            '<li class="artical_options" data-class=".%2$s" alt="%2$s">%3$s</li>',
            esc_url( get_category_link( $category->term_id ) ),
            esc_attr( sprintf( __( '%s', 'textdomain' ), $category->slug ) ),
            esc_html( $category->slug )
        );
        echo sprintf( esc_html__( '%s', 'textdomain' ), $category_link );
        $cat_array[] = $category->term_id;
    }
 ?>
</ul>

And Here The accordion Body :

<div class="col-lg-4 s3_shuffle_image">
                <div class="card">
                    <?php the_post_thumbnail() ?>
                    <div class="card-body">
                        <h5 class="card-title"><a class="artical_options" href="<?php the_permalink(); ?>"> <?PHP the_title(); ?> </a></h5>
                        <p class="card-text"> <?php echo wp_trim_words(get_the_content(), 100); ?> </p>
                        <div class="s3_shuffle_date">
                            <p>4 week ago | <a class="artical_options" href="<?php the_author_link() ?>"><?php the_author_nickname() ?> <i class="far fa-comment"></i></a></p>
                        </div>
                    </div>
                </div>
            </div>

and here JQuery code :

$('.s3_accordion li').on('click', function () {
   $(this).addClass('s3_accordion_active').siblings().removeClass('s3_accordion_active');
        if($(this).data('class') === '.uncategorized') {
            $('.s3_shuffle_image').fadeIn();
        } else {
            $('.s3_shuffle_image').fadeOut();
            $($(this).data('class')).fadeIn();
        }
    });

all me need to know how i can use the_category() function or something else to add attr and pass it beside s3_shuffle_image class.

Thanks Tony for your awesome solution.

i try to do category's accordion dynamic for show article with loop in WordPress i do it with static HTML and JQuery but i cant understand how i can add attr like data-class="" and pass it to items

    <ul class="s3_accordion">
       <?php
    $categories = get_categories( array(
        'orderby'   => 'name',
        'order'     => 'DESC'
    ) );
    $cat_array = array();
    foreach( $categories as $category ) {
        $category_link = sprintf( 
            '<li class="artical_options" data-class=".%2$s" alt="%2$s">%3$s</li>',
            esc_url( get_category_link( $category->term_id ) ),
            esc_attr( sprintf( __( '%s', 'textdomain' ), $category->slug ) ),
            esc_html( $category->slug )
        );
        echo sprintf( esc_html__( '%s', 'textdomain' ), $category_link );
        $cat_array[] = $category->term_id;
    }
 ?>
</ul>

And Here The accordion Body :

<div class="col-lg-4 s3_shuffle_image">
                <div class="card">
                    <?php the_post_thumbnail() ?>
                    <div class="card-body">
                        <h5 class="card-title"><a class="artical_options" href="<?php the_permalink(); ?>"> <?PHP the_title(); ?> </a></h5>
                        <p class="card-text"> <?php echo wp_trim_words(get_the_content(), 100); ?> </p>
                        <div class="s3_shuffle_date">
                            <p>4 week ago | <a class="artical_options" href="<?php the_author_link() ?>"><?php the_author_nickname() ?> <i class="far fa-comment"></i></a></p>
                        </div>
                    </div>
                </div>
            </div>

and here JQuery code :

$('.s3_accordion li').on('click', function () {
   $(this).addClass('s3_accordion_active').siblings().removeClass('s3_accordion_active');
        if($(this).data('class') === '.uncategorized') {
            $('.s3_shuffle_image').fadeIn();
        } else {
            $('.s3_shuffle_image').fadeOut();
            $($(this).data('class')).fadeIn();
        }
    });

all me need to know how i can use the_category() function or something else to add attr and pass it beside s3_shuffle_image class.

Thanks Tony for your awesome solution.

• categories
• menus
• javascript

Share Improve this question edited Apr 16, 2020 at 8:32 Tony Djukic 2,27744 gold badges1919 silver badges3434 bronze badges asked Apr 14, 2020 at 23:17 Long WayLong Way 722 bronze badges 5

• Can you show the code where you generate the HTML for the lists? – Tony Djukic Commented Apr 14, 2020 at 23:24
• yes i had edit the post to more explain, thanks for replay – Long Way Commented Apr 14, 2020 at 23:32
• It still doesn't show how you generate the <li> tags. If you show us the query and how it generates the mark-up we can help you get the category slug into the data-class attribute. – Tony Djukic Commented Apr 15, 2020 at 1:51
• thanks Tony, actually I'm new in WordPress world i try with that. i put it in the post – Long Way Commented Apr 15, 2020 at 11:00
• Long Way, I answered for you. I actually tested this on my own test site and it worked perfectly. :-) – Tony Djukic Commented Apr 15, 2020 at 14:37

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Ok, you were basically almost there, all you had to do was output the slug value in two places in the sprint().

Answer edited/added to:

<ul class="accordion">
<?php
    $categories = get_categories( array(
        'orderby'   => 'name',
        'order'     => 'DESC',
        'offset'    => 1
    ) );
    $cat_array = array();
    foreach( $categories as $category ) {
        $category_link = sprintf( 
            '<li><a href="%1$s" data-class=".%2$s" alt="%2$s">%3$s</a></li>',
            esc_url( get_category_link( $category->term_id ) ),
            esc_attr( sprintf( __( '%s', 'textdomain' ), $category->slug ) ),
            esc_html( $category->slug )
        );
        echo sprintf( esc_html__( '%s', 'textdomain' ), $category_link );
        $cat_array[] = $category->term_id;
    }
?>
</ul>

    <?php
    global $post;
    if( !empty( $cat_array ) ) :
        foreach( $cat_array as $cat ) :
            $category = get_term( $cat, 'category' );
            $cat_slug = $category->slug;
            echo '<div class="col-lg-4 s3_shuffle_image ' . $cat_slug . '">';
            $postslist = get_posts( array(
                'posts_per_page'    => 3,
                'cat'               => $cat,
            ) );
            if( $postslist ) :
                foreach( $postslist as $post ) :
                    setup_postdata( $post ); ?>
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <?php the_excerpt(); ?>
                <?php
                endforeach; 
                wp_reset_postdata();
            endif;
            echo '</div>';
        endforeach;
    endif;
    ?>

So in the line where you return the <li> formatted string (sprint()), you are simply adding your data-class attribute and repeating the token (%2$s) to the second item your returning.

You did also have an error on this line where you placed a period outside of the quotes so PHP tried to execute it instead of treating it as part of the string.

esc_attr( sprintf( __( '%s',. 'textdomain' ), $category->slug )),

Please note that you should also match all instances of the generic textdomain with the actual textdomain of your theme... if you look in your style.css at the top you should see something like this:

/*
Theme Name: The Name of the Theme
Theme URI: http://domain
Author: your name or some other developer's name
Author URI: http://domain
Description: A description for the theme.
Version: 1.0 (updated version number)
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: make a custom text domain if there isn't one
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready
*/

If the Text Domain: is there, make sure you're using that when you write other functions, if it's not there, add it and make it something unique. Fill out all those lines with something unique and accurate to your theme, keep the version number updated, etc.

To explain the edit/addition, what we're doing is, as we run the for each on all of the categories that were returned, we're adding them to an array we created before the for each: $cat_array = array();. The last item in the foreach() now ads each category's ID to at the array: $cat_array[] = $category->term_id;

Then, inside the s3_shuffle_image div, we run a foreach() on the array we just created. Within that foreach we run a `get_posts()' function that calls for the 3 most recent posts of each category based on the ID.

Then, if that get_posts() query returns any results, we run another foreach and spit out the content/data from each of the returned posts inside of the accordion div.

There are two issues I see. $cat_array is an array of IDs, not objects, so the ‘cat’ query arg should just be 'cat' => $cat, The other is when you use setup_postdata( $post ), you must explicitly declare global $post;

本文标签： categoriesADD DYNAMIC attribute for category to accordion