はじめに

WordPressのカスタム投稿。 今回は固定ページに表示されているカスタム投稿一覧をクリックするとページ遷移ではなく、カスタム投稿に登録した内容をモーダルとして表示させるTipsです。 WPのプラグインは使わずに実装していきます。

DEMO

静的なページになってしまいますが、どんな動きになるかデモをご覧ください。 DEMO

必要なファイルの読み込み

カスタム投稿一覧とモーダルとして表示させるアイテムの紐付けを楽にしたい。ということで、jQuery依存のモーダルプラグイン『Remodal』を使用していきます。8Kバイトと軽量です。 以下から必要なファイルをダウンロードしておきましょう。必要なファイルは「remodal.min.js」、「remodal.css」、「remodal-default-theme.css」の３つです。 Remodalをダウンロードする 必要なファイルが揃ったところでそれぞれ読み込んでいきます。 jQueryのコアファイルはGoogleのCDNにホストされている物を利用していきます。「remodal.min.js」よりも先に記述しましょう。パスは適宜変更してください。

<link rel="stylesheet" href="remodal.css">
<link rel="stylesheet" href="remodal-default-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="remodal.min.js"></script>

実装していく

カスタム投稿とカスタム分類の作成

まずはカスタム投稿とカスタム分類を作成していきます function.php に以下のコードを記述していきます。 ▼function.php

add_action('init', 'demo_init');
function demo_init(){
  $labels = array(
    'name' => _x('デモ用', 'post type general name'),
    'singular_name' => _x('デモ用', 'post type singular name'),
    'add_new' => _x('新規追加', 'demo'),
    'add_new_item' => __('新しくデモページを追加する'),
    'edit_item' => __('デモページを編集'),
    'new_item' => __('新しいデモページ'),
    'view_item' => __('デモページを見る'),
    'search_items' => __('デモページを探す'),
    'not_found' =>  __('デモページはありません'),
    'not_found_in_trash' => __('ゴミ箱にデモページはありません'),
    'parent_item_colon' => ''
  );
  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'query_var' => true,
    'rewrite_withfront'=> true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => 5,
    'show_in_rest' => true, //カスタム投稿でgutenberg有効化する場合はtrue
    'supports' => array('title','editor','thumbnail','page-attributes'),
    'has_archive' => true,   
  );
  register_post_type('demo',$args);
    
  /* カスタム分類を作成 - エリアの追加 */
  register_taxonomy(
    'demo_kind',
    'demo',
    array( 
    'hierarchical' => true, 
    'label' => 'デモの種類',
    'labels' => array(
      'all_items' => 'デモページの種類一覧',
      'add_new_item' => 'デモの種類を追加'
    ),
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => true,
    'singular_label' => 'デモの種類'
    )
    /* カスタム分類の作成はここまで */ 
  );    
}

これでWPの管理画面に'デモ用’というカスタム投稿ができます。

固定ページへカスタム投稿一覧を表示する

続いて固定ページへカスタム投稿一覧を表示するための。記述するファイルはそれぞれの環境に合わせてください。

<?php
  $catlists = get_categories( $catargs );
?>
<?php query_posts('post_type= demo'); ?>
  <?php if (have_posts()):?>
    <?php
      // itemを出力
      foreach( $catlists as $cat ) :
        $args = array(
          'post_type' => 'demo',
          'posts_per_page' => -1,
        );
        $my_posts = get_posts( $args );
        if ( $my_posts ) {
          foreach ( $my_posts as $post ) :
          setup_postdata( $post );
          //『item-カテゴリー名』といったクラス名をつけるための記述
          echo '

 	
';
          // モーダル表示させるボックスとIDを合わせるために今回は記事IDを取得
          echo '';
          echo '
';
          $image = get_post_meta($post->ID, '_thumbnail_id', true);
          echo wp_get_attachment_image($image, 'medium_large');
          echo "
";
          echo '

';
          echo the_title();
          echo '

';
          echo '';
          echo "

";
          endforeach;
        }
        wp_reset_postdata();
      endforeach;	 
    ?>
  <?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>

モーダルを用意する

最後にモーダル用の記述です。

<?php query_posts('post_type= demo'); ?>
  <?php if (have_posts()):?>                               
  <?php
      foreach( $catlists as $cat ) :
        $args = array(
          'post_type' => 'demo',
          'posts_per_page' => -1,
        );
        $my_posts = get_posts( $args );
        if ( $my_posts ) {
          foreach ( $my_posts as $post ) :
          setup_postdata( $post );
          echo '<div class="remodal" data-remodal-id="'.$post->ID .'" data-remodal-options="hashTracking:false">';
          echo '<button data-remodal-action="close" class="remodal-btn1 _trigger">
            <span></span>
            <span></span>
          </button>';
          echo '<h1 class="remodal-ttl">';
          echo the_title();
          echo '</h1>';
          echo '<p class="remodal-image">';
          $image = get_post_meta($post->ID, '_thumbnail_id', true);
          echo wp_get_attachment_image($image, 'medium_large');
          echo "</p>";
          $content = get_the_content();
          echo '<p class="remodal-lead">'. $content . '</p>';
          echo '<button data-remodal-action="close" class="remodal-btn2">
            <span class="remodal-btn2-in">閉じる</span>
          </button>';
           echo "</div>";
          endforeach;
        }
        wp_reset_postdata();
      endforeach;
    ?>                                                              
  <?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>

これでデモの動きがWPで実装できました。

さいごに

今回のこの機能、WPプラグインを使えばすぐに実装できると思ったのですが、クライアント様の要望通りの動きをしてくれるものがなかったので作成しました。 改善点などありましたらご指摘いただけると嬉しいです。

参考ページ

https://yumegori.com/wordpress-custom-post20191005 https://oku-log.com/blog/grid-layout/