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

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

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

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

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

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

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

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

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

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

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

  • Table of Contents

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

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

Gutenbergでのブログページの編集1
Gutenbergでのブログページの編集1

Gutenbergでのブログページの編集2
Gutenbergでのブログページの編集2

ブログページ(2019/04/17)
ブログページ(2019/04/17)

エディタが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 );

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

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

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

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

自分だけが扱うものであれば、直接テンプレートファイルの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();

      // 各記事の出力

    }
  }

}

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

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

[your_post_list]

オプションを用意する場合は任意でお願いします。

ブロックが使用可能なページを制限

ブロック使用における注意点についてです。

プレビューできますから敢えて制限する必要もないのかもしれませんが、使えないブロックを使用可能なリストとしてなるべく表示したくはないと思います。

ですので、メインクエリを使用するブロックは、使用可能なページを選ぶようにした方がいいですよ、というだけの話です。

通常の単一ページで使用しても、クエリにはその1ページ分しかデータが含まれていませんので、ほとんど意味がありませんしね。

ホームやアーカイブページに適用するには?

ブログページは固定ページのエディタを直接使用することが可能ですので、その難易度が低いことは分かると思いますが、問題はこれを標準的なホームやアーカイブページに適用する場合です。

これらのページにはそもそもGutenbergでの編集ができませんので、クラシックエディタを使用してショートコードを直接入力する必要が出てきますが、カラムやテーブルなどのレイアウトを設定したい場合はちょっと面倒に思えそうです。

これらに適用させるテンプレートとなるカスタム投稿タイプを用意することが柔軟に対応する方法なのかもしれません。

また、オプションやタクソノミータームのメタ値で適用するテンプレートを選択できるようにしておく必要がありますので、少し複雑な処理が必要になります。

考えられるのは、テンプレートにタームの詳細を引用するに当たって、ブロックを作成するなどの手間が要されます。

直接編集しない場合の処理は中々面倒ですよね。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください