Sort Wordpress posts with Jquery or meta_key and meta_value

Question

Sort Wordpress posts with Jquery or meta_key and meta_value

Navigation

#1 by (0 votes)

-1

I intend to use the code below to sort and group by section posts from my Wordpress website. This would be applied to Home Page and Categories, where each post would count with the css class according to its section (secoo_1, secoo_2 or secao_3), with the parent div of these elements would be the id #content. The question I ask is: to what extent could this detract from the site's performance on loading? Also, would it be ideal to add the code inside the HEAD tag so that the loading is (from the visual point of view of the elements) faster? Another detail, each page would have 30 posts.

    var array = ['secao_1', 'secao_2', 'secao_3'];

    $.each(array,function(index,value){
       $('#content').append($('.'+value));
    });

After testing with Jquery, I'm trying to get to what I want through meta_key and meta_value of fields created with the ACF plugin, where I'm using the loops below. The 1st and 2nd loop look for the meta_values secoo_1 and secoo_2, respectively. The 3rd loop displays the posts that do not have any section.

My question is whether this code can be improved. Also, H2 tags end up appearing on page 2 of the category, even if there are no posts in their respective sections, how to avoid this?

<?php
global $query_string; parse_str( $query_string, $my_query_array ); 
$paged = ( isset( $my_query_array['paged'] ) && !empty( $my_query_array['paged'] ) ) ? $my_query_array['paged'] : 1;
$multi_type = array('post','post2');

// The Query
$query1 = new WP_Query(array(
    'paged'             => $paged,
    'post_type'         => $multi_type,
    'meta_key'          => 'sec_especial',
    'meta_value'        => 'secao_1',
    'category_name'     => 'featured'
));

// The Loop

echo '<h2>Seção 1</h2>';

    while ( $query1->have_posts() ) {
        $query1->the_post();
        get_template_part( 'content', get_post_format() );  
    }

    // Restore original Post Data
    wp_reset_postdata();

/* The 2nd Query (without global var) */
$query2 = new WP_Query(array(
    'paged'             => $paged,
    'post_type'         => $multi_type,
    'meta_key'          => 'sec_especial',
    'meta_value'        => 'secao_2',
    'category_name'     => 'featured'
));

// The 2nd Loop

echo '<h2>Seção 2</h2>';

    while ( $query2->have_posts() ) {
        $query2->the_post();
        get_template_part( 'content', get_post_format() );
    }

    // Restore original Post Data
    wp_reset_postdata();

/* The 3nd Query (without global var) */
$query3 = new WP_Query(array(
    'paged'        => $paged,
    'post_type'    => $multi_type,
    'category_name'=> 'featured',
    'meta_query'   => array(
        'relation'     => 'OR',
        array(
            'key'      => 'sec_especial',
            'value'    => false,
            'type'     => 'BOOLEAN'
        ),
        array(
            'key'      => 'sec_especial',
            'compare'  => 'NOT EXISTS'
        )
    )
));

// The 3nd Loop

echo '<h2>Seção 3</h2>';

    while ( $query3->have_posts() ) {
        $query3->the_post();
        get_template_part( 'content', get_post_format() );
    }

    // Restore original Post Data
    wp_reset_postdata();

    twentyfourteen_paging_nav();
?>

php javascript jquery css wordpress

asked by anonymous 09.11.2015 / 20:05

1 answer

how to save a post in the variable on the same page Error using outputPanel with autoupdate = true on primefaces

score 0 · Answer 1

I do not know if I understand your question right, but come on:

How much would it hurt to load your website?

In my opinion, the difference will be minimal. Remember that any statement that will run on the client side (in your case, JavaScript ) will have a cost, however small it is. In the case of 30 posts, and the way you built the jQuery statement, it will not be so costly. I would particularly avoid this cost by doing this server-side assignment. If I understand correctly, you want to give a class to <div> that contains the post according to its category. The method in_category() checks if a post (within a loop) belongs to a category. Generically:

if (have_posts()){
    while(have_posts()){
        the_post(); ?>

        <div class="content <?php if(in_category('minha_categoria')) echo 'minha_classe');?>">
            <?php the_content(); ?>
        </div>
    }
}

In this way, you assign the class according to the category of the post directly within the loop, without burdening the client side.

In addition, would it be ideal to add the code inside the HEAD tag so that the load is (from the visual point of view of the elements) faster?

"Fast" loading involves a lot, not just the presence of the code in the header. The number of requests is basically what can cause you problems (besides, of course, poorly written code). WordPress has a method to include .js scripts which is wp_enqueue_script() . The following line, in its functions.php

wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );

It includes the script example.js that is in the js directory, which in turn is inside the folder of your theme. It also directs the version of the script to 1.0.0 , and I include the script in the footer. Here a discussion about where scripts should be placed on your code.