【WP】カテゴリーページを投稿ページを使って作成する。～ワードプレス～

ワードプレスでカテゴリーページを編集しようとすると、固定ページ・投稿ページとは違うので使いにくかったので、投稿ページで作成してそれをカテゴリーページで表示する方法があったので、その備忘です。

プラグインの「Shortcodes Ultimate」を使う
プラグインを使わない方法
結論としてはプラグインを使うのが一番おすすめです。

プラグインの「Shortcodes Ultimate」を使う

「Shortcodes Ultimate」というプラグインを使います。

大まかな手順は次の通りです。

プラグインの「Shortcodes Ultimate」をインストールする。
投稿ページでカテゴリーページを作成する。
カテゴリーページに「Shortcodes Ultimate」を使って投稿ページのコンテンツを表示させる。

プラグインの「Shortcodes Ultimate」をインストール

メニューのプラグインの「新規追加」から「Shortcodes Ultimate」と検索して、「WordPress Shortcodes Plugin — Shortcodes Ultimate」というプラグインをインストールして有効化します。

投稿ページでカテゴリーページを作成

投稿ページで普段通りの操作でカテゴリーページに表示したい内容を作っていきます。

作ったページは下書きのままで大丈夫です。公開する必要はありません。

作成したら、ショートコードで使うため投稿の一覧から記事のIDを確認しておきます。

カテゴリーページに投稿ページの内容を表示させる

表示させるカテゴリーページの編集画面で本文の上の「ショートコードを挿入」のボタンでShortcodes Ultimateのショートコードが挿入できます。

そこで
・投稿データを選択
・フィールド：Post content(Filtered)を選択
・ID：投稿ページのIDを入力
すると投稿のコンテンツをカテゴリーページで表示できます。

画面のハードコピーで順を追っていきます。
まず表示させたいカテゴリーページの編集画面で「ショートコードを挿入」ボタンを押します。

ショートコードの一覧が表示させるので、その中から、「投稿データ」を選びます。

フィールドのプルダウンから「Post content(Filterd）」を選択します。
似た選択肢で「Post content(Raw）」がありますが、（Raw）を選ぶとCSSなしのHTMLだけの引用として表示されますので、レイアウトなどが投稿ページと変わりますので、（Filtered）を選択します。

投稿IDの欄に作成した投稿ページのIDを入力します。

これで一番下の「ショートコードを挿入する」ボタンを押すと次のようなショートコードが挿入されます。

最後に、カテゴリーの編集ページの一番下の「更新」ボタンで完了です。

プラグインを使わない方法

プラグインを使わずに、テーマファイルエディターでショートコードを作成する方法もあります。

しかし、この方法だと、CSSが反映されないHTMLだけの引用となるので、投稿ページとレイアウトが変わるため、別途追加CSSなどでレイアウトの調整が必要となることがあります。

プラグインを使わない場合の手順は以下の通りです。

投稿内容を表示するショートコードを用意する。
投稿ページでショートコードを使う場合にはショートコードの入れ子ができるショートコードを用意する。
投稿ページでカテゴリーページを作成する。
カテゴリーページにショートコードで作った投稿ページのコンテンツを表示させる。
必要に応じてCSSを調整する。

投稿内容を表示するショートコード

テーマファイルエディターでショートコードを用意します。

function.phpに以下のコードを追加します。

//投稿ページの内容を表示する。カテゴリーページで利用すると便利
//　で利用できる。
function includepost_insert_func($atts) {
  $atts = shortcode_atts(array(
    'id' => 0,
  ), $atts);
  $id = $atts['id'];
  $mypost = get_post($id);
  if( !(empty($mypost)) ){
    $html = $mypost->post_content;
    return $html;
  }
}
add_shortcode( 'includepost', 'includepost_insert_func');

これで、カテゴリーページで

で記事の内容が表示できるようになります。

なお、この方法ではCSSは投稿ページから引き継がれないので、レイアウトが投稿ページと変わりますので必要に応じてCSSの調整が必要です。

ショートコードの入れ子ができるショートコードを用意する。

投稿ページでショートコードを使って、それをカテゴリーページで表示しようとする場合に必要となります。なお、Shortcodes Ultimateと使う場合には不要です。

投稿内容を表示するショートコードをfunction.pho に追加した場合には投稿ページでショートコードを使った場合には、ショートコードが機能せずに、[ショートコード]の文字列として表示されてしまいます。

そこで、ショートコードの入れ子ができるショートコードを用意することになります。

下記ページが参考になりますが、カテゴリーページで使う場合には、少しコードを修正する必要があります。

WordPressのショートコードの中でショートコードを実行し展開する | タルト株式会社

WordPressのショートコードの中でショートコードを入れ子的に実行し展開するこの記事では「WordPressのショートコードの中でショートコードを入れ子的に実行し展開する方法」について解説します。デフォルトのWordPressの設定では、投稿や固定ページの本文の中で使っているショートコードが展開されたあとの文字列に...

リンク先のコードを一部改造します。リンク先のコードは「投稿ページ」用のため、カテゴリーページで使用するために、コードの5行目（コード本体の1行目）
add_filter(‘the_content‘, function ($text){・・・・
の the_content を the_category_content に変更します。

/*************************************************************
 * ショートコードの中でショートコードを実行する
 ************************************************************/

add_filter('the_category_content', function ($text){ //the_category_contentga
カテゴリーページの本文

	if(
		is_single() //投稿ページのみ
		&& !is_admin() //管理画面は出さない
		&& $text != null //テキストが空でない
	){
		$text = do_shortcode($text); //テキスト中のショートコードを展開
		return $text;
	}

}, 100); // 11よりも大きければ本文のショートコード展開の後に実行される