ワードプレスのループとクエリループブロックを効率的に使用して、ウェブサイトのコンテンツプレゼンテーションを最適化する方法

WordPressループとは何ですか?

WordPressループは、投稿やページのコンテンツを表示するためにWordPressで使用される主なPHPコード構造です。これは、投稿やページ、その他の種類のコンテンツをデータベースから取得し、WordPress ウェブサイトに表示するために使用される PHP コードのブロックです。

画像[1]-ワードプレスのループとクエリループブロックを効率的に使ってウェブサイトのコンテンツ表示を最適化する方法 - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

WordPressのループの仕組み

WordPressのループは、訪問者がウェブサイトを閲覧する際に投稿やページの内容を確認できるようにするコア機能です。このループは、タイトル、公開日、本文、その他の関連データなど、ウェブサイトのデータベースから投稿情報を自動的に引き出します。

以下にWordPressのループの例を示します:

WordPressのウェブサイトにアクセスすると、サイトに表示される投稿やページのコンテンツは、一連の機能を通して表示されます。これらの機能にはそれぞれ固有のタスクがあるので、それぞれの役割を見てみましょう:

  • get_header() 歌で応える get_footer()この2つの関数は、それぞれウェブページにヘッダーとフッターを追加する役割を果たします。ヘッダーには通常、サイトのナビゲーションメニューやロゴが含まれ、フッターには連絡先や著作権表示などが含まれます。
  • if (have_posts())この判定は、表示する記事があるかどうかをチェックするために使われます。記事があれば、ループが記事の表示を開始できるようにtrueを返し、記事がなければ、記事の内容がWebページに表示されないようにfalseを返します。
  • while (have_posts())これはすべての記事が表示されるまで実行されるループです。これによって、サイトが各記事を次々に表示することができます。
  • the_post()この関数は、現在の記事を表示するためのデータを準備します。the_title()もしかしたらthe_post_thumbnail()この情報を入手し、正しく提示することができます。
  • the_title(), the_author(), the_post_thumbnail()これらの関数は、記事のタイトル、著者、サムネイルを表示するために使われます。ウェブページでは、これらは通常、美的にフォーマットされた表示のためにHTMLコードでラップされます。
  • 最終ステートメント 一方 歌で応える エンディフこれらは、直前のループや判断を閉じ、コードのロジックが正しく閉じられていることを確認するために使用されます。

注目してください:デフォルトでは、ループは各投稿に対してthe_title()そしてthe_time()歌で応えるthe_category() WordPressのテンプレートタグです。
あるいは、WordPressのループには以下のPHPコード構文を使用してください。関数や要素は同じですが、構文の書式が異なります。以下は、別の構文で書かれた WordPress ループの例です:

endwhile; endif; get_footer(); ?

WordPressのループの使い方

画像[2] - ワードプレスのループとクエリループブロックを効率的に使い、ウェブサイトのコンテンツ表示を最適化する方法 - フォトンゆらぎネットワーク|WordPressの専門修理サービス、グローバルスコープ、迅速対応

ループを使って記事タイトルにハイパーリンクを作成する方法

WordPressでは、投稿のタイトルにハイパーリンクを追加して、タイトルをクリックすると直接その投稿の詳細ページにジャンプできるようにするにはthe_permalink()関数を使用します。この関数は、現在の投稿のパーマリンク(URL)を取得して出力します。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
           <h2><a href="/ja/</?php the_permalink(); ?>"><?php the_title() ;?></a></h2>

コンテンツ、著者、日付、カテゴリーを循環させるWordPressの使い方

投稿に作者、日付、カテゴリー、内容を含めたい場合は、以下のWordPressコードを適用します:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
           <h2><?php the_title() ;?></h2> 
           &lt;?php the_author(); ?

条件タグはWordPressの特別な機能のセットで、テーマ開発者が異なるページタイプや状況に基づいてウェブサイトのコンテンツを表示する方法を決定するのに役立ちます。これらの機能により、ウェブサイトの表示ロジックを非常に柔軟に制御することができ、異なるページに異なるコンテンツを表示することができます。

例えば、特定のコンテンツをトップページだけに表示させたい場合は is_home() 関数を呼び出します。この関数は現在のページがブログのトップページかどうかをチェックし、トップページであれば特定のコンテンツを表示するための適切なコードを実行します。記事の別のページに何かを表示したい場合は is_single() 関数です。この関数は、現在のページが単一の投稿であるかどうかを判定するために使用されます。

WordPressで最も一般的な条件タグを紹介します:

  • is_front_page() - ウェブサイトのトップページに使用されます。
  • is_page() - WordPress ページ用。
  • is_category() - カテゴリーアーカイブ
  • is_tag() - アーカイブのラベリングに。
  • is_archive() - ページのアーカイブに使用します。
  • is_search() - 検索結果ページで使用されます。
  • is_author() - 著者ファイル
  • is_404() - は404ffページです。

使用したいページでは、" に設定してください。真の ".

のファイルを使用しています。if 文 is_front_page()マーカー、例参照:

<h2><?php the_title() ;?></h2>

WordPressユーザーは、上記のコードを使ってフロントページに投稿を表示することができます。

テンプレートファイルを使ってWordPressのループをカスタマイズする方法

WordPressサイトでの投稿の表示方法をカスタマイズするには、テーマフォルダ内のいくつかの主要なテンプレートファイルを編集します。これらのファイルにはアーカイブ(アーカイブページの表示に使用)、index.php(ホームページ)、カテゴリー.php(カテゴリページ)とタグ.php(タブページ)。

非ブロックWordPressテーマの場合、WordPressループが必要です。

WordPressループの例

WordPressでTwenty Twentyテーマを作る方法index.php異なるカテゴリの投稿を異なる表示スタイルにするためのコードがファイルに追加されます。この方法によって、読者は投稿の様々なカテゴリーをより簡単に区別することができます。

以下のWordPressのループコードを参照してください。各パーツが何を行っているかを理解するために、公式ドキュメントに従ってコメントされています:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div no numeric noise key 1011>
        <h2>
            <a href="/ja/</?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
        <p class="post-category">カテゴリー:</p>
        <?php if ( in_category(3) ) : ?>
            <div style="color: red;"> <!-- 这里设置特别样式 -->
                <?php the_content(); ?>
            </div>
        &lt;?php endif; ?endif; ?
    </div>
<?php endwhile; else : ?>
    <p>投稿が見つかりません。</p>
<?php endif; ?>

広告掲載

WordPress Loopを使用すると、記事に広告を挿入することができます。広告コードをお忘れなく一部を実際のコードに置き換えます。:

//広告コード
          

<a href="">

<a href="">

2つの日付の間の投稿を取得

より簡単にサイトを管理するために、2つの日付の間の投稿は、WordPressのループを使用して簡単にフィルタリングすることができます。

= '2024-01-01' AND post_date endwhile; ?

調整に注意してください。 2024-01-01および2024-05-01.

1年前の投稿を表示

1年前の投稿を表示したい場合は、以下のコードを使用してください:

endif; ?

今後の投稿一覧

今後の記事を掲載することで、ユーザーにブログを訪問してもらうことができます。

<h2><?php the_title(); ?></h2> 
    <span class="datetime"><?php the_time('j.F Y'); ?></span></p> 
<?php endwhile; 
else: ?><p>今後の投稿予定はありません。</p> 
<?php endif; ?>

最新のトップ記事を表示

最新のトップ記事だけを表示したい場合は、以下のコードを参考にしてください:

$sticky, 'caller_get_posts' => 1 ) );

if (have_posts()) :
    while (have_posts()) : the_post().
        the_title().
        the_excerpt();
    endwhile; endif; endif
endif; ?
?>endif; ?

アーカイブページの作成

アーカイブページとは、過去に公開した記事のコレクションです。ウェブ訪問者のために過去の人気記事を簡単に表示することができます。作成方法は以下のコードを参考にしてください:

<h2><?php $numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");
if (0 < $numposts) $numposts = number_format($numposts); ?>
<h2><?php echo $numposts.' recipes published since January 01, 2024'; ?>
  </h2>
  <ul id="archive-list">
    <?php
    $myposts = get_posts('numberposts=-1&');
    foreach($myposts as $post) : ?>
      <li>. <a href="/ja/</?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; ?>
  </ul>

WordPressのクエリループブロックについて

WordPressのループの最も重要なアップデートの1つは、クエリループブロックの導入です。それが何なのか、どのように使うのかを学びましょう。

画像[3] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|専門的なワードプレス修理サービス、グローバルなリーチ、迅速な対応

クエリ・ループ・ブロックとは

WordPress クエリループブロックは WordPress 5.8 で導入され、基本的なループ機能に強力な機能を追加しました。Gutenberg エディタでは、サイトの投稿を表示するためにこのブロックを使用します。

WordPress クエリループブロックを使用すると、特定の順序でコンテンツを表示する、複雑で視覚的に魅力的な WordPress 投稿フォーマットを作成できます。カテゴリ、タグ、日付など、さまざまなフィルタを適用できます。

WordPressでクエリループブロックを使う方法

クエリループブロックを追加するには、ブロックエディタで新しいWordPressの記事を開くか追加します:

画像[4] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|専門的なワードプレス修理サービス、グローバルなリーチ、迅速な対応

エディターで、ブロックを選択します。インサータ "+"アイコン

画像[5] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応

検索クエリクエリーをクリックしてください。

画像[6] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|専門的なワードプレス修理サービス、グローバルなリーチ、迅速な対応

新しいクエリ・ループ・ブロックが投稿に追加されます。ここで、カスタマイズのために以下のセクションをチェックしてください。

カスタムクエリループブロック

新しいクエリ・ループ・ブロックを追加すると、必ず2つのオプションが表示されます:

画像[7] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応

"選べ"オプションで様々なモードを選択できます。お好きなものをお選びください。

画像[8] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルリーチ、迅速な対応

各クエリループブロックは、投稿タイトルや抜粋など、さまざまなネストされたブロックで構成されています。クエリループブロックでどのブロックが使用されているかを知りたい場合は、ドキュメント概要ツールを開いてください。ここでは、すべてのネストされたブロックが表示され、ブロック間を移動することができます:

画像[9] - ワードプレスのループとクエリループブロックを効率的に使い、ウェブサイトのコンテンツ表示を最適化する方法 - フォトンゆらぎネットワーク|WordPressの専門修理サービス、グローバルスコープ、迅速な対応
  • 空白開始

ある空白開始オプションでは、様々なテンプレートが表示されます。好きなものを選んでください。この例では、投稿タイトルと抜粋を含むテンプレートを追加します:

画像[10] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応

ク エ リ ループブ ロ ッ ク を追加 し た ら 、 ブ ロ ッ ク ツールバーかブ ロ ッ ク 設定セ ク シ ョ ン を使っ てそれをカ ス タ マ イ ズす る こ と がで き ます。

  • ブロックツールバー

ブロックツールバーは、クエリブロックを含むWordPress上のあらゆるブロックをカスタマイズするためのメインツールです。

画像[11] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応

ここでは、クエリ・ループを列やグループ・ブロックに変換したり、エディタ内で移動させたり、配置を調整したり、デフォルト・ビューを変更したりすることができます。最も注目すべきオプションはディスプレイ設定歌で応える相互互換性::

画像[12] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|専門的なワードプレス修理サービス、グローバルなリーチ、迅速な対応

表示設定では、表示するWordPressの投稿数を選択したり、優先するコンテンツを表示する前にスキップする投稿数を設定することができます。

画像[13] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応

表示設定が表示されない場合は、「ブロック設定」で無効になっていることを確認してください。テンプレートからクエリオプションを継承します。

WordPressのもう一つの便利な機能は交換.これを使えば、現在のモードを他のモードに簡単に置き換えることができます:

画像[14] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応
  • セクター設定

その他の重要なブロック設定は、エディターの右上にある設定ボタンが見つかりました:

画像[15] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルリーチ、高速レスポンス

クエリループブロックは、投稿の表示レイアウトをカスタマイズしたり、フィルタを適用したり、カスタムCSSクラスを追加できるだけでなく、ページネーションもサポートしており、コンテンツが豊富なウェブサイトを管理する場合に特に便利です。

あなたのサイトに多数の投稿がある場合、クエリループブロックはページ分割によってこれらの投稿を複数のページに表示することができます。このような設定は、訪問者がページ番号を通してブログを簡単にナビゲートするのに役立ちます:

画像[16] - ウェブサイトのコンテンツ表示を最適化するために、ワードプレスのループとクエリループブロックを効率的に使用する方法 - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルリーチ、高速レスポンス

はんけつをくだす

WordPressのループは、ウェブサイトの投稿やページコンテンツを効果的に表示するための強力なツールです。基本的なループ構造と様々な条件タグを使用することで、開発者はページタイプや特定の条件に基づいてコンテンツの表示をカスタマイズすることができます。WordPress のループは、投稿の表示方法をアレンジすることで、訪問者のブラウジング体験を向上させ、あらゆるウェブサイトに利益をもたらします。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事を書いた人: Xiesong
終わり
好きなら応援してください。
クドス0 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし