web-dev-qa-db-ja.com

カスタムフィールドを含む列でカスタム投稿のテーブルを並べ替える方法

laptop、CPU、OSなどのカスタムフィールドを持つRAMというカスタム投稿タイプがあり、Advanced Custom Fieldsプラグインを使用して作成されています。

私はラップトップのテーブルを表示しています。テーブルヘッダーはカスタムフィールドの行で、それに続く各行はラップトップの名前で、対応する各列のセルのカスタムフィールドの値です。

カスタムフィールド名を含むテーブルTHセルをクリックしてテーブルをソートできるようにしたいです。

私はACFサポートによって メタクエリ節 を指摘されてきましたが、私はそれらについて深く理解していません。

各TH要素のカスタムフィールド名をラップアラウンドするためのURLを生成するのに役立つことを本当に感謝します。

custom-post-typescustom-fieldadvanced-custom-fieldssort
3
Steve

@ rock3tのコメントをフォローアップするには、ユーザーが列ヘッダーをクリックしたときにバックエンドを照会する必要がありますか？

JQuery テーブルソート の使用を検討しましたか？これにより、エンドユーザーはDOM操作を行ってHTMLテーブルをソートできます。

私はこれをWPプロジェクトで使用したことは一度もありませんが、私が構築した他のプロジェクトでこれを広く使用したことがあり、うまく機能します。それは非常に設定可能なので、きっとあなたのニーズを満たすでしょう。

tablesorterは、WP Coreに含まれているjQueryプラグインの1つですではありません。それで、あなたはそれを（上記のリンクから）ダウンロードし、あなたのプラグイン/テーマのどこかにそれを含めそしてそれをエンキューする必要があります。次に、次のような単純なJSファイルをエンキューします。

(function ($) {
    $(document).ready (function () {         
        $('#id_of_your_table').tablesorter ({widgets: ['zebra']}) ;     
        }) ;
})(jQuery) ;

tablesorter()メソッドへの他のさまざまなパラメータを含む、 docs でtablesortの使い方の詳細を読むことができます。

1
Paul 'Sparrow Hawk' Biron

この参照で簡単： https://codex.wordpress.org/Class_Reference/WP_Query

orderbyはmeta_valueであるべきです

'meta_value' - 'meta_key = keyname'もクエリに存在する必要があることに注意してください。

キー名は、CPU、OS、RAM ...のいずれかになります。

WP_Meta_Queryクラスも考えられます。 https://codex.wordpress.org/Class_Reference/WP_Meta_Query

更新

私はこの結果を得ました

    Array
(
    [0] => WP_Post Object
        (
            [ID] => 3233
            [post_author] => 1
            [post_date] => 2016-11-19 12:51:43
            [post_date_gmt] => 2016-11-19 12:51:43
            [post_content] => abc
            [post_title] => Mac Air Pro 9G
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => mac-air-pro-3
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2016-11-19 12:52:19
            [post_modified_gmt] => 2016-11-19 12:52:19
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://steve.com/laptop/mac-air-pro-1-copy/
            [menu_order] => 0
            [post_type] => laptop
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

    [1] => WP_Post Object
        (
            [ID] => 3232
            [post_author] => 1
            [post_date] => 2016-11-19 12:46:50
            [post_date_gmt] => 2016-11-19 12:46:50
            [post_content] => abc
            [post_title] => Mac Air Pro 8G
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => mac-air-pro-2
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2016-11-19 12:52:47
            [post_modified_gmt] => 2016-11-19 12:52:47
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://steve.com/laptop/mac-air-pro-1-copy/
            [menu_order] => 0
            [post_type] => laptop
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

    [2] => WP_Post Object
        (
            [ID] => 3231
            [post_author] => 1
            [post_date] => 2016-11-19 12:12:38
            [post_date_gmt] => 2016-11-19 12:12:38
            [post_content] => abc
            [post_title] => Mac Air Pro 4G
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => mac-air-pro-1
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2016-11-19 12:52:57
            [post_modified_gmt] => 2016-11-19 12:52:57
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://steve.com/?post_type=laptop&p=3231
            [menu_order] => 0
            [post_type] => laptop
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

)

これがsingle-laptop.phpファイルの内容です。

<?php
/**
 * The template for displaying all single posts.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package microformats
 */

get_header(); 


// WP_Query arguments
$args = array (
    'post_type'              => array( 'laptop' ),
    'post_status'            => array( 'published' ),
     //'s'                      => 'atom', // only if you need that
    'nopaging'               => true,
    'posts_per_page'         => '-1',
    'ignore_sticky_posts'    => true,
    // order
    'orderby'                => 'meta_value', 
    'meta_key'               => 'ram',
    'order'                  =>'DESC',
    /* you will need this only if
    'meta_query'             => array(
        array(
            'key'       => 'ram', // or os, or cpu
            'value'     => '4', // meaning 4G of ram
            'compare'   => '>',  // meaning only biggar
            'type'      => 'NUMERIC',
        ),
    ),
    */
);


// The Query
$query = new WP_Query( $args );
print_r($query->posts);


?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'template-parts/content', 'single' ); ?>

            <?php
                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
            ?>


            <hr class="fat" />              

        <?php endwhile; // End of the loop. ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>
0
prosti