WordPress | 特定カテゴリの投稿を３カラムレイアウトにする

普段は２カラムレイアウトだけど、特定のカテゴリは３カラムレイアウトにしたい
という場合の備忘録です。

今回実装する方法では、固定ページを使用して３カラム目を追加します。

次の方法はSimplicity2のテーマに行いました。編集自体は子テーマに行います。

概要

大まかな手順

固定ページに３カラム目の内容を記載（非公開）
header.php に、”あるカテゴリ”の場合は、”固定ページの内容を３カラム目として追加”と指定します。
※ header.php はSimplicity2テーマのものをコピーして使用します。

ファイルの構成

使用するファイル・固定ページは、以下の４つになります。

・固定ページ（新規作成）
・left-sidemenu.php（新規作成）
・left-sidemenu.css（新規作成）
・header.php（Simplicity2のテーマからコピーして使用）

それぞれの関連は、次のようになります。

固定ページ（新規作成）
３カラム目に追加する内容（HTML）を定義します。

left-sidemenu.php（新規作成）
固定ページの内容を取得するために使用します。

left-sidemenu.css（新規作成）
３カラム構成にした際の、CSSを定義します。
例えば、「サイドメニュー自体のスタイル」や、３カラムにすることによりページの横幅が増えるので、「ページ全体のレイアウトの調整」などに使用します。

header.php（Simplicity2のテーマからコピーして使用）
特定のカテゴリの場合に、left-sidemenu.php と left-sidemenu.css を読み込む処理を追加します。

詳細

１．固定ページの作成

固定ページは、ステータスを「非公開」として保存します。
例えば、メニューリンクを３カラム目として追加する場合は、以下のようにします。

<ul>
  <li><a href="https://〜">リンク１</a></li>
  <li><a href="https://〜">リンク２</a></li>
  <li><a href="https://〜">リンク３</a></li>
</ul>

<ul>

</ul>　　　　　　　　　　　　　　

２．left-sidemenu.php の作成

固定ページの内容を取得します。

<div id="left-sidebar" role="complementary">

<?php
  $page_data = get_page_by_path('固定ページのスラッグ');
  $page = get_post($page_data);
  $content = $page -> post_content;
  echo $content;
?>

</div>

<?php

$page_data = get_page_by_path('固定ページのスラッグ');

$page = get_post($page_data);

$content = $page -> post_content;

echo $content;

</div>

３．left-sidemenu.css の作成

３カラム目のスタイルや、３カラムに合わせた全体のスタイルの定義を行います。

４．header.php（Simplicity2のテーマからコピーして使用）

あるカテゴリの場合に、left-sidemenu.php と left-sidemenu.css を読み込むようにします。

まず、left-sidemenu.css については、</head>タグ直前に読み込む処理を追加します。

<head>
・・・
<?php if(in_category('カテゴリ名') ): ?>
  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/left-sidemenu.css" type="text/css" />
<?php endif; ?>
</head>

<head>

・・・

<?php if(in_category('カテゴリ名') ): ?>

<?php endif; ?>

</head>

続いて、left-sidemenu.php を読み込む処理を追加します。
header.php の下部には、もともと次のようなコードがあります。

get_template_part('before-main'); //メインカラムの手前に挿入するテンプレート（3カラム作成カスタマイズ時などに）

1	get_template_part('before-main'); //メインカラムの手前に挿入するテンプレート（3カラム作成カスタマイズ時などに）

ここに少々手を加えて次のようにします。

<?php
  if(in_category('カテゴリ名')) {
    get_template_part('left-sidemenu');
  }else{
    get_template_part('before-main'); //メインカラムの手前に挿入するテンプレート（3カラム作成カスタマイズ時などに）
  }
?>

<?php

if(in_category('カテゴリ名')) {

get_template_part('left-sidemenu');

}else{

get_template_part('before-main'); //メインカラムの手前に挿入するテンプレート（3カラム作成カスタマイズ時などに）

}

※元々のコードの記載にあるように、「before-main.php」を直接編集して、３カラム構成にすることもできます。今回はカテゴリ別に分かりやすいように、「left-sidemenu.php」を作成して３カラム構成にしています。

５．サーバーに資材をアップロード

ここまで編集を行ったファイルを、子テーマフォルダ（simplicity2-child）にアップロードします。
これで、３カラムレイアウトが適用されます。