WordPress
@ohuron
TECH PLAY女子部Day 17

【Wordpress】固定ページ一覧画面の絞り込み検索にテンプレートで検索する項目を設けてみた

WordPress

本記事はTECH PLAY女子部 Advent Calendar 2017に参加しています。

はじめに

こんにちは。
こちらのイベントに参加した際、お酒の勢いでAdvent Calendarにエントリーしたohuronです。
今回はWordpressの固定ページ一覧画面の絞り込み検索にテンプレートで検索する項目を設ける方法をご紹介します。フックをちょっといじれば固定ページだけじゃなく、カスタム投稿一覧画面にも適用できますし、応用すればいろいろな検索項目を設けることができますよ。

今回実装する機能について

本記事では以下の機能を一覧画面に実装します。

  • 絞り込み検索機能に「記事内で使用しているテンプレートによる絞り込み」機能を追加
  • 固定ページ一覧に使用したテンプレートを表示する項目を追加

以上２点を実装すると、一覧画面がこんな感じになります。

FireShot Capture 14 - 固定ページ ‹ おふろ研究所 —_ - https___www.ohuroro.com_ohuro-laboratory_wp-admin_edit.php.png

FireShot Capture 13 - 固定ページ ‹ おふろ研究所 —_ - https___www.ohuroro.com_ohuro-laboratory_wp-admin_edit.php.png

ソース

では早速、ソースコードを見ていきましょう。functions.phpに以下のコードを記載します。
詳細な解説は後述します。

functions.php
/**
    投稿一覧画面のカラムにテンプレート名を追加する
**/

    add_filter('manage_pages_columns','add_template_columns');

    function add_template_columns($columns){

        $new_columns = array();

        foreach($columns as $key => $value){
            if($key === 'author'){
                $new_columns['template'] = 'テンプレート';
            }
            $new_columns[$key] = $value;
        }

        return $new_columns;
    }

    add_action('manage_pages_custom_column','custom_template_column',10,2);

    function custom_template_column($column,$post_id){

        switch($column){

            case 'template':
                $templates = get_page_templates();   
                $current_temp = get_post($post_id)->page_template;
                $result =  __( 'Default Template' );
                foreach($templates as $temp_name => $file_name){

                    if($file_name === $current_temp){
                        $result =  $temp_name;
                    }
                }

                echo $result;
                break;
        }
    }

/**
    END
**/

/**
    投稿一覧画面にテンプレート検索の機能を追加する
**/


    add_action('restrict_manage_posts','add_template_dropdown');

    function add_template_dropdown(){

        $post_type = get_post_type();
        $args = array(
                    'posts_per_page'=>-1,
                    'post_type' =>'page',
                );
        $posts =  get_posts($args);


        for($i = 0;$i < count($posts);$i++){
            $value = get_post_meta($posts[$i]->ID,'_wp_page_template',true);
            $current_temp[$i] = $value;
        }

        // 重複した値を削除
        $current_temp = array_unique($current_temp);

        // キーを振りなおす
        $current_temp = array_values($current_temp);


        $template = get_page_templates();
        echo '<select name="template">';
        echo "<option value=\"\">テンプレートタイプ</option>";
        if(!empty($_GET['template']) && $_GET['template'] === 'default'){
            echo "<option selected value=\"default\">".__( 'Default Template' )."</option>";
        }
        else{
            echo "<option value=\"default\">".__( 'Default Template' )."</option>";
        }

        foreach($template as $temp_name => $file_name){

            for($i=0;$i < count($current_temp);$i++){
                if($current_temp[$i] === $file_name && !empty($_GET['template']) && $_GET['template'] === $file_name){
                        echo "<option selected value=\"{$file_name}\">{$temp_name}</option>";
                }elseif($current_temp[$i] === $file_name) {
                        echo "<option value=\"{$file_name}\">{$temp_name}</option>";
                }

            }

        }
        echo '</select>';
    }
/**
    END
**/

/**
    テンプレートを検索条件に加える
**/

    add_filter('query_vars','add_param');

    function add_param($vars){

        $vars[] = 'template';
        return $vars;
   }

    add_filter('posts_where','custom_post_where');

    function custom_post_where($where){

        global $wpdb;

        $template = get_query_var('template');

        if(!empty ($template)){

            $where .= $wpdb->prepare("AND EXISTS (SELECT * FROM {$wpdb->postmeta} as m WHERE m.post_id = {$wpdb->posts}.ID AND m.meta_key='_wp_page_template' AND m.meta_value = %s)",$template);
        }

        return $where;
    }
/**
    END
**/

投稿一覧画面のカラムにテンプレート名を追加する

カラムの追加とカラムの中身の追加処理をしています。
著者欄の左に表示したかったので、add_template_columnsのforeachでキー名が'author'の
配列を検索して、その前にキー名'template'の配列を追加しています。
特にこだわりがない場合は$columns['template'] = 'テンプレート';としてもよいと思います。

manage_pages_columnsー＞manage_{$post_type}_posts_columns、
manage_pages_custom_columnー＞manage_{$post_type}_posts_custom_column
と、することでカスタム投稿タイプに対応することができます。

fucntions.php
    add_filter('manage_pages_columns','add_template_columns');

    function add_template_columns($columns){

        $new_columns = array();

        foreach($columns as $key => $value){
            if($key === 'author'){
                $new_columns['template'] = 'テンプレート';
            }
            $new_columns[$key] = $value;
        }

        return $new_columns;
    }

    add_action('manage_pages_custom_column','custom_template_column',10,2);

    function custom_template_column($column,$post_id){

        switch($column){

            case 'template':
                $templates = get_page_templates();   
                $current_temp = get_post($post_id)->page_template;
                $result =  __( 'Default Template' );
                foreach($templates as $temp_name => $file_name){

                    if($file_name === $current_temp){
                        $result =  $temp_name;
                    }
                }

                echo $result;
                break;
        }
    }

投稿一覧画面にテンプレート検索の機能を追加する

絞り込み検索の部分に使用しているテンプレートのドロップダウンリストを追加します。
ドロップダウンリストには、現在使用されているテンプレートのみが表示される仕様です。

ドロップダウンリストの生成については、wordpressで用意されているpage_template_dropdown()の使用も考えましたが、検索後の一覧画面を表示する際、検索条件として選択した値にselectedを指定する処理がうまくできませんでした……。

fucntions.php
    add_action('restrict_manage_posts','add_template_dropdown');

    function add_template_dropdown(){

        $post_type = get_post_type();
        $args = array(
                    'posts_per_page'=>-1,
                    'post_type' =>'page',
                );
        $posts =  get_posts($args);


        for($i = 0;$i < count($posts);$i++){
            $value = get_post_meta($posts[$i]->ID,'_wp_page_template',true);
            $current_temp[$i] = $value;
        }

        // 重複した値を削除
        $current_temp = array_unique($current_temp);

        // キーを振りなおす
        $current_temp = array_values($current_temp);


        $template = get_page_templates();
        echo '<select name="template">';
        echo "<option value=\"\">テンプレートタイプ</option>";
        if(!empty($_GET['template']) && $_GET['template'] === 'default'){
            echo "<option selected value=\"default\">".__( 'Default Template' )."</option>";
        }
        else{
            echo "<option value=\"default\">".__( 'Default Template' )."</option>";
        }

        foreach($template as $temp_name => $file_name){

            for($i=0;$i < count($current_temp);$i++){
                if($current_temp[$i] === $file_name && !empty($_GET['template']) && $_GET['template'] === $file_name){
                        echo "<option selected value=\"{$file_name}\">{$temp_name}</option>";
                }elseif($current_temp[$i] === $file_name) {
                        echo "<option value=\"{$file_name}\">{$temp_name}</option>";
                }

            }

        }
        echo '</select>';
    }

テンプレートを検索条件に加える

ドロップリストを加えただけでは検索項目として機能しないので、パブリッククエリにtemplateを追加し、パブリッククエリtemplateに値が入っている場合のみ検索条件を追加する、という処理を追加します。

fucntions.php
add_filter('query_vars','add_param');

    function add_param($vars){

        $vars[] = 'template';
        return $vars;
   }

    add_filter('posts_where','custom_post_where');

    function custom_post_where($where){

        global $wpdb;

        $template = get_query_var('template');

        if(!empty ($template)){

            $where .= $wpdb->prepare("AND EXISTS (SELECT * FROM {$wpdb->postmeta} as m WHERE m.post_id = {$wpdb->posts}.ID AND m.meta_key='_wp_page_template' AND m.meta_value = %s)",$template);
        }

        return $where;
    }

さいごに

実装すると、こんな風にテンプレートで絞り込み検索ができるようになります！すごい！！

FireShot Capture 16 - 固定ページ ‹ おふろ研究所 —_ - https___www.ohuroro.com_ohuro-laboratory_wp-admin_edit.php.png
↓
FireShot Capture 17 - 固定ページ ‹ おふろ研究所 —_ - https___www.ohuroro.com_ohuro-laboratory_wp-admin_edit.php.png

使用したテンプレートで絞り込み検索をかけたい、ということはあまりないかもしれませんが、もし実装する必要がでてきたとき、この記事の存在を思い出していただけると幸いです。それでは皆様、よいクリスマス&wordpress管理画面カスタムライフを！！！

参考にした記事一覧

WordPress 管理画面の投稿一覧にカラムを追加してカスタムフィールドの値を出す
WordPressの投稿一覧からカスタムフィールドの絞り込み検索を追加するカスタマイズ。

Edit request
2