メインクエリでループするブログページなどをエディタで編集可能にするには？

著者 Nora

日付 2019/04/17

カテゴリーカスタマイズ

タグアーカイブページ,グーテンベルグ,ブログページ

ブログページなどをエディタで編集可能にするのは、ちょっと面倒なカスタマイズかもしれません。

ワードプレスにはフロントエンドの基本的なページの種類として以下のような形になっています。

ホーム（「設定」->「表示設定」->「ホームページの表示」にて最新の記事（標準）にしている場合）
フロント
ブログ
単一（投稿ページや固定ページなど）
アーカイブ
その他

その他はまぁエラーページやカスタム投稿タイプで生成するものなど、少し例外的なページがありますが、これらを除けば基本的にこのような形です。

ホーム、ブログ、アーカイブのページには一般的に投稿リストが表示されていて、フロント、単一のページではコンテンツとなる記事などを扱います。

今回紹介するカスタマイズ方法は、投稿リストなどを表示する前者です。

基本的にはテンプレートを適用することで自動生成されることが多いので、ユーザーが自分で外観をカスタマイズするには、一般的にテンプレートファイルを編集する必要があります。

ただ、これではコードに疎い一般的なユーザーには少しハードルが高くなるでしょう。

そこでテーマなどで設定を施すことによって、これらの投稿リストページをユーザーが自分で編集を加えることができるような方法についてです。

当サイトのブログページもデモになっていますので、１ページ目と２ページ目以降で変化があることが分かると思います。

ブログページに設定されたページも編集可能

テーマ「Ace」に施した機能の１つなので、当サイトでデモを確認可能ですが、エディタページと比較するとこのような形になります。

エディタがGutenbergになってからかもしれませんが、ブログページに設定したページのコンテンツもブロックで編集可能となっています。

ブログページにクラシックエディタでの設定が残っている場合は、Gutenbergが起動しないかもしれませんが、一度新規で固定ページをGutenbergで編集したページを新たにブログページとして設定してしまうと、Gutenbergでのコンテンツ編集が可能となります。

テンプレートファイルでの必要な処理

エディタで編集したブログページのコンテンツを使用するにはブログページに設定した投稿IDを取得する必要がありますので、以下の方法を使用します。

$blog_page_id = intval( get_option( 'page_for_posts' ) );

これで取得したIDがブログページに設定されたページのIDとなります。

このIDによりコンテンツなどのデータを取得し、テンプレートファイルに直接投稿リストのループ処理をするのではなく、ブログページのコンテンツを以下のようにコンテンツを出力するように書き換えます。

$blog_page = get_post( $blog_page_id );
echo apply_filters( 'the_content', $blog_page->post_content );

これでショートコード部分にのみメインクエリを使用した投稿記事一覧が表示されるようになります。

テンプレートに条件を設置

ユーザーによっては最初の１ページ目にのみコンテンツを適用させたかったり、テーマに用意された標準的なテンプレートを使用したい方もいると思います。

そもそも紹介しているカスタマイズは、テンプレートファイルに直接設定するものではなく、ユーザーが自由にブロックで編集できるようにするためのものです。

自分だけが扱うものであれば、直接テンプレートファイルのHTMLを書きましょう。

というわけで、投稿メタを使用してカスタムブログページを使用するフラグにする場合は、前の項目で紹介した「$blog_page_id」を使用すれば取得できます。

また、現在のページを条件にする場合はグローバル変数「$wp_query」などを使用します。

global $wp_query;
$paged = absint( $wp_query->query['paged'] );

こうすると、「$paged」がページナンバーとなります。

あとは任意で条件を設けるのに使用するだけです。

global $wp_query;
$paged = absint( $wp_query->query['paged'] );
if ( 1 === $paged ) {
  $blog_page = get_post( $blog_page_id );
  echo apply_filters( 'the_content', $blog_page->post_content ); 
}

といった感じです。

投稿記事一覧用のブロックを作成

注意する点は、メインクエリを扱ったループが必要になることです。

投稿記事一覧を取得して生成するのではなく、本来ブログページやアーカイブページなどで割り当てられる投稿リストを使用しますので、クエリなどを自分で定義する必要がない分作成するのは非常に簡単です。

ただ、投稿一覧を更新に伴って表示させる必要がありますので、静的にHTMLで保存してはいけませんので、ショートコードを生成して、該当する投稿一覧を出力する関数をコールするようにしましょう。

ショートコードを作成

作成方法は非常に簡単です。


add_shortcode( 'your_post_list', 'add_your_shortcode' );

function add_your_shortcode( $atts ) {

  $atts = shortcode_atts( array(
    'attr' => '',
  ), $atts );

  if ( have_posts() ) { 
    while( have_posts() ) {

      the_post();

      // 各記事の出力

    }
  }

}

これでメインクエリを使用した投稿記事一覧を表示することができます。

ショートコードは以下の一行で、これをページのコンテンツ内に書くだけです。