サロンのホームページ制作

WordPressのウィジェットで、投稿タイプの絞り込み表示

WordPressには、本当に便利なプラグインがたくさんありますね。

ただ、その中でも、自分なりにカスタマイズしたかったり

自分のテーマにだけ欲しい機能を追加するには

多少なりとも知識が必要になってきます。

 

今回、実装したかったのは

  1. 特定のカスタム投稿タイプの時だけ
  2. 特定のカスタム投稿タイプのリストを
  3. 指定した列数で表示する

 

というもの

 

例えばこのサイトの場合は

「制作実績」のカスタム投稿タイプの時だけ

「制作実績」のリストを、4列で表示したい

という感じ

スクリーンショット 2015-07-06 6.28.55

 

スクリーンショット 2015-07-06 5.56.49

組み合わせ的には

「イベント」のカスタム投稿タイプの時だけ

「店舗」のカスタム投稿タイプの

「関東」のカテゴリーと

「イベント」のタグがついた投稿

だけ表示する、なども可能


 

class My_CustomList_Widget extends WP_Widget{
    /**
     * CustomList Widgetを登録する
     */
    function __construct() {
        parent::__construct(
            'my_customlist_widget', // Base ID
            'カスタムリスト', // Name
            array( 'description' => 'リストアップ', ) // Args
        );
    }
 
    /**
     * 表側の Widget を出力する
     *
     * @param array $args      'register_sidebar'で設定した「before_title, after_title, before_widget, after_widget」が入る
     * @param array $instance  Widgetの設定項目
     */
    public function widget( $args, $instance ) {
        global $query , $post;
        
        $post_type_name=isset($instance['post_type_name']) ? $instance['post_type_name']: null;
        $display_type_name=isset($instance['display_type_name']) ? $instance['display_type_name']: null;
        
        $category_name=isset($instance['category_name']) ? $instance['category_name']: null;
        $tag_name=isset($instance['tag_name']) ? $instance['tag_name']: null;
        $col_md_num =isset($instance['list_col']) ? $instance['list_col']: '4';
        
        $list_type = 'gridList';
        
        
        
        
        if ( isset ($post_type_name) && isset($display_type_name)  ){
            $post_type = get_post_type();
            
            
            if(  $post_type == $post_type_name  ){

ここまでで、投稿タイプによって分岐させる

 

$listargs = array(
                'post_type' => $display_type_name,     /* 投稿タイプ */
                'post_status' => 'publish',  /* 公開している */
                'order' => 'DESC',    /* 昇順に並び替え  */
                'posts_per_page' => -1,
            );
        
            if( $category_name ){
                $cat = array(
                     'category_name' => $category_name,
                );
                $listargs = wp_parse_args( $cat, $listargs );
                
            }else if( $tag_name ){
                $tag = array(
                     'tag' => $tag_name,
                );
                $listargs = wp_parse_args( $tag, $listargs );
            };
            
            $query = new WP_Query( $listargs );

こんな感じで、ウィジェットで設定した投稿タイプをWP_Queryに渡す

渡したクエリーを使って、投稿表示のループを回す

 

** Widget管理画面を出力する
     *
     * @param array $instance 設定項目
     * @return string|void
     */
    public function form( $instance ){
※このあたり、全くわからず見よう見まねなので、不要なタグがあるかも
        $post_type_name=isset($instance['post_type_name']) ? $instance['post_type_name']: null;
        $display_type_name=isset($instance['display_type_name']) ? $instance['display_type_name']: null;
        
        $category_name=isset($instance['category_name']) ? $instance['category_name']: null;
        $tag_name=isset($instance['tag_name']) ? $instance['tag_name']: null;
        $list_col=isset($instance['list_col']) ? $instance['list_col']: null;
        
        //------------
        
        $post_type_tag_name = $this->get_field_name('post_type_name');
        $display_type_tag_name = $this->get_field_name('display_type_name');
        
        $category_tag_name = $this->get_field_name('category_name');
        $tag_tag_name = $this->get_field_name('tag_name');
        $list_col_tag_name = $this->get_field_name('list_col');
        
        //カスタム投稿タイプのリスト
        $post_type = array(
            array("","",""),
            array("投稿ページ","post",""),
            array("固定ページ","page",""),
・・・カスタム投稿の数だけ配列を書く

		 );

 

こんな感じ

で、最後にウィジェットの処理を書く

function update($new_instance, $old_instance) {
        if(!filter_var($new_instance['post_type_name']) && ($new_instance['display_type_name'])  && ($new_instance['category_name']) && ($new_instance['tag_name']) && ($new_instance['list_col'])  ){
            return false;
        }
        return $new_instance;
    }
}
 
add_action( 'widgets_init', function () {
    register_widget( 'My_CustomList_Widget' );  //WidgetをWordPressに登録する
} );

 

 

こんな感じ。

自分はほぼ、PHPがかけないので、まったく見よう見まね(汗)

なので、不要なタグとかがかなり入っているカモです。

 

 

分岐処理を、テーマファイル自体に書いてもいいんだけれど

それだと、複数の条件に対応できないなぁーと思い

ウィジェットで実装することに・・

 

同じことをする人はすくないかもですが

何かの参考にしていただけたら幸いです

 

ちなみに、このWordPressの管理画面は

カスタム投稿タイプまみれになっています・・・

スクリーンショット 2015-07-06 6.33.34

 

参考にした記事

『WordPressのWidget(ウィジェット)を自作する方法』
http://liginc.co.jp/web/wp/112370

 

見出し
テキスト
こんなブログも読まれています
mautic is open source marketing automation