コンテンツ制作ブログ

デジタルマーケティング、コンテンツマーケティング、
データ分析などに関するお役立ち情報を発信

WordPress のデータにアクセスするための手段:ループ (loop)

2021年8月6日

こんにちは、サイト管理やサーバーの運用業務を担当するエンジニアのWestomです。

前回WordPressのカスタムフィールドを紹介しました。今回はカスタム投稿タイプとカスタムフィールドの機能を統合して、ループによりカスタマイズされたデータをWordPressに表示します。

目次

ループの基本構文

ループの説明については、さまざまなプログラミング言語のマニュアルで参照できます。ループについて詳しく分からない方は、W3schoolsのPHPループの紹介と実装方法を参考にして先に試してみることをお勧めします。

WordPressのデフォルトテーマ「Twenty Twenty」のindex.phpの81行目から見ると、WordPressのループが分かりやすいです。

/* index.php Line 81 */
while ( have_posts() ) {
   /* 今回の説明範囲を超えていので。82行目から85行目は省略します */
   the_post();
   get_template_part( 'template-parts/content', get_post_type() );
}

日本語で説明すると、次のとおりです。

現在のクエリにまだ記事がある場合、投稿を呼び出します。そして、template-parts/content-{コンテンツタイプ}.php を使用してHTMLの外観を表示します。

WordPressをインストールしたとき、ホームページは上記のループを経由して表示されました。

ループの高度なアプリケーション:WP_Queryを使用したカスタムクエリ

たとえば、スライドのスライドショーを表示する場合や、FAQをカスタマイズする場合など、ページの2番目のループを使用する場合はどうすれば良いのでしょうか?

答えは簡単です。新しいクエリを作成するだけです。 ただし、必要なものを正確に見つけるには、カスタムクエリにさまざまなキーワード(引数)を指定することが必要です。

カスタムクエリの基本的な構文は次のとおりです。

$args = array(
   '属性名'    => '属性値',
   '属性名 2'  => '属性値 2',
);
$my_query = new WP_Query( $args );
/* カスタムクエリループ */
if ( $my_query -> have_posts() ) {
   while ( $my_query -> have_posts() ) {
       $my_query -> the_post();
       /* ここでは、get_template_part を使用してテンプレートを取得するか、HTMLを直接記述できます。 */
       get_template_part( 'template-parts/content', get_post_type() );
   }
} else {
   /* データなしの場合 */
}
/* カスタムクエリを終了するたびに、予期しないエラーが表示されないようにクリアすることを忘れないでください。 */
wp_reset_postdata();

一般的に使用されるパラメータがいくつかあります。その他の詳細なパラメータについては、公式の<WP_Query>を参照してください。

引数引数値のタイプ說明
post_type文字列 stringカスタムコンテンツタイプの名前、記事の場合は ‘post’
posts_per_page整数 int各ページに表示されるコンテンツの数、デフォルト値は管理画面での[設定]の値です。 -1 に設定すると、すべてのコンテンツが表示されます。
p整数 intコンテンツIDを直接指定します。
post__in配列 array複数の特定のコンテンツIDを指定します。
post__not_in配列 array特定のコンテンツIDを除外します。
category_name文字列 stringカテゴリーのスラッグを経由して投稿を表示します。

実装:コンテンツタイプをカスタマイズしてスライドショーカルーセルを作成

カスタムコンテンツタイプを作成する (custom post type)

ままず、プラグインCPT UIを経由してスライドと呼ばれるカスタムコンテンツタイプを作成し、タイトルと画像のみを設定します。 または、テーマのfunctions.phpにカスタムコンテンツタイプのコードを追加することもできます。

カスタムフィールドを作成 (custom post type)

プラグインACFを使用してSlide Optionsというフィールドグループ(Field Group)を作成し、その中にURLというテキストフィールドを追加します。 また、コンテンツタイプ(Post Type)がスライダーの場合に表示することを選択します。

カスタムクエリを作成する

次に、テーマのindex.phpのコンテンツの先頭を見つけ(例としてTwenty Twentyに従って作成されたサブテーマを取り上げます)、20行目に次のコードを追加します。

/* index.php Line 20 */
<main id="site-content" role="main">
   <?php
   if ( is_front_page() ) { // 静的なTOPページに表示するだけです。
       $args = array(
           'post_type'       => 'slide',
           'posts_per_page'  => 3,
       );
       $my_query = new WP_Query( $args );
       if ( $my_query -> have_posts() ) { // スライドがある場合は、カルーセルが作成されます ?>
       <div class="slick-slider" id="home-slider">
       <?php
           while ( $my_query -> have_posts() ) {
               $my_query -> the_post();
               $url = get_field( 'url' ) ? get_field( 'url' ) : '#';
           ?>
           <div id="slide-<?php echo get_the_ID(); ?>">
               <a href="<?php echo $url; ?>" target="_self">
                   <?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>
               </a>
           </div>
           <?php
           }
       ?>
       </div><!-- .slick-slider -->
       <?php
       }
   }
   ?>
   /* 以下は元のコードです */
   <?php
   $archive_title    = '';
   $archive_subtitle = '';

jQueryを使用してスライドショーカルーセルを有効化

上記の準備が完了したら、JavaScriptライブラリを参照して、動的効果を有効にすることができます。

まず、テーマのfunctions.phpにアクセスして、Slickのライブラリを参照しましょう。

function eric_enqueue_slick() {
   if ( is_front_page() ) {
       wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery') );
       wp_enqueue_style( 'slick-default-style', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css' );
   }
}
add_action( 'wp_enqueue_scripts', 'eric_enqueue_slick' );

最後に、Slickのコードを有効にします。

function eric_slick_init() {
   if ( ! is_front_page() ) {
       return;
   } else {
   ?>
       <script>
           ( function( $ ){
               $( document ).ready( function() {
                   $( '.slick-slider' ).slick();
               });
           })( jQuery );
       </script>
   <?php
   }
}
add_action( 'wp_footer', 'eric_slick_init' );

おわりに

上記のアプローチから、カスタマイズは上記のさまざまな概念を1つの機能に結合することが分かりました。

また、WordPressにはすでに巨大なリソースがあるため、ほとんどのカスタマイズ機能に非常に実用的なプラグインが作成されています。したがって、Webサイトをカスタマイズするプロセスでは、さまざまなプラグインを試して、うまく他のプラグインと組み合わせることで、必要な機能を実現できます。

次回、WordPressの「ショートコード (shortcodes)」を使用して特定のプラグイン機能を拡張およびカスタマイズする方法について紹介します。

Westom

この記事を書いた人

Westom

サイト管理やサーバーの運用業務を担当するエンジニアのWestomです。これからは役に立つツールやプログラミングなどの技術情報を紹介しますので、どうぞよろしくお願いします!

CONTACT

お問い合わせ