WordPressループの説明：それは何であり、どのように機能するか

公開: 2022-03-12

ループはWordPressの中心的な部分です。これがないと、WordPressのWebサイトにコンテンツが表示されません。記事がブログページとアーカイブに表示され、静的コンテンツが単一ページに表示されるようにする責任があります。

あなたがテーマデザイナーであるならば、あなたはそれを使う方法を学ぶことを回避することはありません。ただし、カジュアルなWordPressユーザーとしては、WordPressが存在することに気付かない場合もあります。

これを軽減するために、この投稿では、WordPressループについて詳しく説明します。それが何であるか、それがどのように機能するか、そしてWordPressのどこにあるかを見ていきます。また、独自の作成方法を学び、WordPressループの例をいくつか見て理解を深めます。

WordPressループとは何ですか（そしてどこにありますか）？

WordPressループとは何かを簡単に説明すると、WordPressWebサイトのページのコンテンツをフェッチして出力するのは単にマークアップです。それが静的ページ、投稿、ブログページ、アーカイブのいずれであっても、WordPressがデータベースからコンテンツを取得してページに表示する場所であればどこでも、ループが関係します。

しかし、そもそもなぜループと呼ばれるのでしょうか。

繰り返し実行されるためです。さらに、以下に示すように、文字通りPHPループで構成されています。

WordPressループはどのくらいの頻度で実行されますか？

表示するものがなくなるまで。静的ページでも、利用可能なコンテンツをループします。ただし、この場合、1回のパスで停止します。

WordPressループはどのように見えますか？

私たちが話していることをより明確にするために、例を見て、それを段階的に見ていきましょう。単純なWordPressループがどのように見えるかの例を次に示します。

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

PHPをすでに知っているか、WordPress開発者である場合は、問題なくPHPを理解できます。ただし、他のすべての人のために、ピースを1つずつ見ていきましょう。

if ( have_posts() ) ：—これはhave_posts（）関数を使用しているifステートメントです。プログラミングでステートメントが一般的である場合、それらは単に「次の条件が当てはまる場合は続行する」と言います。この場合、条件はhave_posts()です。これは、表示できる投稿が存在するかどうかを確認するだけです。
while ( have_posts() ) ：—この行はwhileループであり、WordPressループの開始を示します。条件が真である限り、含まれているコードを実行します。繰り返しになりますが、条件はWordPressに投稿があるかどうかです。 trueが返される頻度は、管理インターフェースのWordPress設定で設定された投稿の数によって決まります。
the_post(); —これはループが実行するコードです。これは、次の投稿に使用できるすべてのデータを呼び出して保存し、表示できるようにするWordPress関数です。そのために、以下で説明するテンプレートタグがたくさんあります。
// Display content here —ここに、コンテンツのどの部分をどのように表示するかを決定するマークアップを配置します。これは通常、PHPとHTMLの組み合わせです。より複雑であるため、ここでは示していません。後で説明します。
endwhile; —必要な処理を実行した後、 whileループを閉じるコード。
endif; —上記と同じですが、 ifステートメント用です。

したがって、基本的な構造は次のとおりです。投稿が存在するかどうかを確認し、データベースから必要なデータを取得して事前に決定された方法で表示し、表示する有効な投稿がある限りこれを繰り返します。

代替構文

簡単なことですが、次のように書かれたループが表示されることもあります。

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

これは上記の例とまったく同じですが、PHPの構文が異なります。どちらを使用するかは、実際にはあなた次第です。一貫性を保つために、最初のバリエーションを続行します。

WordPressループはどこにありますか？

コンテンツがページに表示されるときはいつでもループが常に機能しているという事実は、WordPressループを見つける場所にすでに答えています。答えは、コンテンツを表示するテーマのすべてのテンプレートファイルにあります。

または、テーマアーキテクチャによっては、テンプレート部分に含まれている場合もあります。これらは、頻繁に使用されるコード部分（ループなど）を含むテンプレートファイルです。毎回同じコードスニペットを再利用する代わりに、他のファイルにプルすることができます。

たとえば、Twenty Twenty-Oneテーマのpage.phpファイルを開くと、ここではループが部分に分割されていることがわかります。ファイル自体の内部から始まりますが、データの出力方法を決定するセクションは、 content-page.phpというテンプレート部分にあります。

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

WordPressテンプレート階層は、システムがどの種類のページを表示するために使用するファイルを決定し、各ファイルには、ループまたはそれを見つけることができる場所への参照のいずれかが含まれている必要があります。

また、ループは個々のファイル、つまりページごとに異なって見える可能性があることも意味します。たとえば、アーカイブでは投稿の抜粋のみを表示したい場合がありますが、メインのブログページでは投稿全体を表示したい場合があります（「続きを読む」リンクまで）。そのためには、さまざまな種類のマークアップが必要です。そのため、 home.phpとarchive.php内でループが同じように見えません。

ループを作成する方法

ループを作成するには、基本的に、上記で分析した単純なコードから始めることができます。それは本当に標準的なループです。ここに再びあります：

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

トリッキーな部分は、コンテンツの表示を決定する部分です。そのためには、前述のように、通常はHTMLとPHPを組み合わせて使用します。たとえば、カスタムクラスとID、 h1見出しとしてのタイトル、注目の画像とコンテンツを含む<article>タグでラップされた投稿を吐き出すようにWordPressに指示する方法は次のとおりです。

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

上で際立っていることの1つは、アンダースコアで書かれたタグがたくさんあることです。これらはWordPressテンプレートタグであり、コンテンツの一般的な部分を呼び出すためのショートカットを提供します。ここでは、投稿のタイトルを表示するためにthe_post_thumbnail() the_title()を使用し、注目の画像を表示するためにthe_content() （）を使用し、メインコンテンツを表示するためにthe_content（）を使用します。 the_excerpt()やthe_category() ）など、他にもたくさんあります。オプションのリストはここにあります。

WordPressループにとって重要なもう1つのことは、条件付きタグです。特定の条件下でのみ何かを表示するために、ループ関連のマークアップで多く使用されていることがわかります。たとえば、注目の画像が存在しない場合にWordPressがページに表示しようとしないように、 the_post_thumbnail()を条件付きステートメントにラップすることは非常に一般的です。

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

以下に他の例があります。条件付きタグの詳細については、WordPressCodexを確認してください。

WordPressループの例

このチュートリアルの最後の部分として、WordPressループの使用方法の例をいくつか見ていきます。

21のテーマ

Twenty Twenty-Oneテーマを見ると、最初に目立つのは、テンプレートパーツの多用です。 page.php 、 single.php 、さらにはindex.phpなどのすべての標準テンプレートファイルは、ファイル内でループを開始しますが、 get_template_partを使用してコンテンツ表示を他のファイルにオフロードします。この場合、それはそれぞれcontent-page.php 、 content-single.php 、およびcontent.phpです。例として、 single.phpの短縮バージョンを次に示します。

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

これは他のファイルにも表示されます。たとえば、ヘッダーとフッターにも独自のテンプレートパーツがあります。他の場所でループ内のそれらへの参照を見ることができます。たとえば、 content-single.phpを見ると、最後にauthor-bio.phpテンプレート部分への呼び出しがあります。

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

それを除けば、それは比較的標準的なフェアです：

カスタムIDとクラスを使用して<article> HTML要素を開きます
h1見出しでラップされたタイトルを出力し、TwentyTwenty-Oneにカスタムされた関数で注目の画像を表示する記事ヘッダー要素を作成します
続いて、 the_content()テンプレートタグを含むentry-content要素を使用して、単一投稿コンテンツを出力します。
ポストメタ情報を表示するための別のTwentyTwenty-One関数を使用して、ページ付けのマークアップとエントリフッターを含めます
最後に、独自のテンプレート部分に著者の略歴への前述の呼び出しがあります

二十十ワードプレスのデフォルトのテーマ

最初のWordPressのデフォルトテーマであるTwentyTenに戻り、Subversionリポジトリを使用してバージョン1.0のファイルを確認すると、ループファイルとテンプレートファイルの処理が時間の経過とともにどのように進化したかを確認できます。当時、テンプレートファイルの多くには、再利用可能なテンプレートパーツにアウトソーシングするのではなく、独自の完全なWordPressループが含まれていました。これは、テーマのpage.phpではっきりと確認できます。

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

同じことがonecolumn-page.phpにも表示されます。これは、テーマが提供するカスタムページテンプレートを制御するファイルです。また注目に値するのは、当時1行で記述されていたループへの古い呼び出しを使用していることです。

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

最近のテーマでは、コードの可読性を高めるために、前に見たように、それが数行に広がっているのが最も一般的です。

Twenty Tenテーマにはスタンドアロンのloop.phpファイルもありますが、これは長すぎて、単語の制限を超えずにここに含めることはできません。これは、いくつかのタイプの投稿（画像ギャラリー、 Asidesカテゴリの投稿、その他すべての投稿）の表示を制御する3つの部分に分かれています。これらのそれぞれは、アーカイブや検索ページなどのさまざまなケースを説明するために、 ifステートメントとelseステートメントによってさらに分類されます。

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

全体にかなり複雑なロジックが含まれているため、かなり長く複雑になります。今日、これらを処理する他の方法があることをうれしく思います。エミュレートしたくないWordPressループの例を確認するためにそれを確認することをお勧めします。

ちなみに、当時から私が開発者に対して厳しすぎると思われる場合は、ご安心ください。彼らは私の評価に同意します。 loop.phpがループを閉じる開発者のコメントを見てください。

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

WordPressクエリループブロック

は比較的新しいグーテンベルクの機能であるため、気付いていないかもしれませんが、ブロックエディター（さらにはフルサイト編集）にもWordPressループを含むブロックがあります。これはクエリループブロックと呼ばれ、他のブロックと同じようにサイトに追加できます。最も簡単な方法は、スラッシュを追加し、その名前を/queryloopのように入力することです。 Enterキーを押すと、ページに表示されます。

このブロックを使用すると、コードを記述せずにPHPループを作成できます。サイトの最新の投稿が自動的に表示されます。それに加えて、いくつかのカスタマイズオプションがあります。まず第一に、ブロックにはいくつかのプリセットレイアウトが付属しています。矢印を使用してそれらを循環するか、[グリッド]オプションをクリックしてすべてを一度に表示できます。

好きなものを選択するか、お気に入りのオプションに到達した場合は[選択]をクリックして、選択を確定します。レイアウトはブロックパターンで構成されているため、単一のブロックのグループが事前に配置されていることに注意することが重要です。これはまた、必要に応じてそれらを異なる方法で配置できることを意味しますが、それらはまだ通常のブロックです。矢印を使用するか、[ドラッグ]オプションをクリックして押したままにして、矢印を目的の場所に移動します。

さらに、各ブロック（および多くの場合各ブロックグループ）には、メインエディター画面とサイドバーに通常のオプションがあります。ここでは、色、フォントサイズ、形式などを変更できます。

満足したら、ページを公開またはプレビューすると、カスタムのWordPressクエリループが表示されます。したがって、WordPress開発者でなくても、PHPを理解していない場合でも、ループが提供する機能を利用できます。

一言で言えばWordPressループ

ループは、WordPressの専門家なら誰でも知っている必要があるものです。ただし、よりカジュアルなユーザーであっても、それがどのように機能するかを理解することは悪い考えではありません。必要に応じて、問題のトラブルシューティングやカスタムページテンプレートの作成が簡単になる場合があります。

この投稿では、ループとは何か、ループが存在する場所について説明し、詳細に説明しました。また、デフォルトのテーマと新しいクエリブロックから独自のループと例を作成する方法についても見てきました。これで、WordPressループを作成およびカスタマイズするために必要なすべてを理解できました。

WordPressループのお気に入りの使い方は何ですか？ 以下のコメントであなたの考えを共有してください！

画像：Jonny Gios / Unsplash、Tine Ivanic / Unsplash