【WordPress】カテゴリーページを記事ページ化するカスタマイズまとめ[SANGO]

eyecatch-wordpress-category-customize

すいみん

こちらのCGメソッドの記事ではカテゴリーページを記事ページ化するカスタマイズまとめを紹介します!
ある程度WordPressのカスタマイズできる人向けで、テーマに手を加えているので自己責任でお願いします!要バックアップ!

ねむいねこ

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

カスタマイズするWordPressの環境と内容

以上の環境での作業ログになります。
別テーマでも似たようなことはできると思います。

カテゴリーページで拡張したことは下記の5点です。

  • 追従サイドバーを表示する
  • サイドバーに目次を入れる
  • 説明文に目次を入れる
  • OGPのmetaタグを入れる
  • データ構造を入れる

カテゴリーページに追尾サイドバーを表示する方法


カテゴリーページにも追従するウィジェットを表示できるようにします。

注意点
オーバーライド(上書き)します。子テーマfunctions.phpを先に読み込ませて、親テーマの関数は読み込まない様にします。

理由としてはfunctions系のファイルは子テーマに入れても反映されないからです!
参考 【SANGO】functions系のファイルを子テーマに複製しても反映されない取得できませんでした

あとは、基本的な注意。

注意点
ダッシュボードからも実は編集できますが、ミスるとコードがすべて消えるので、FTPでデータをダウンロード&バックアップをとりつつ差し替えしましょう!

追尾サイドバーを表示する方法

  1. FTPにて子テーマのfunctions.phpに下記のコードを追記します。

    ※「is_category()」を追加しただけです

    ※元データの記述は親テーマのsng-functions.php (library/functions/sng-functions.php)517行目あたりにあります。

// 追尾サイドバーを表示するかどうか
  function is_active_fixed_sidebar() {
    global $post;
    return ( is_singular() // 投稿 or 固定ページ
             || is_category() // or カテゴリーページ
             && !wp_is_mobile() // PC表示
             && is_active_sidebar('fixed_sidebar') // 固定サイドバーがアクティブ
             && !get_post_meta($post->ID, 'one_column_options', true) // 1カラムオプションでない
             && !is_page_template('page-1column.php') // 1カラムの固定ページでない
             && !is_page_template('page-forfront.php') // トップページ用固定ページでない
            );
  }
 

以上です。
しかしこのままだとウィジェットが表示されても追従はしません!

追従サイドバーが追従しない問題

下記のCSSを入れるとサイドバーの領域をボーダーで囲えます。

div#sidebar1 {
    border: 1px solid red;
}

やってみるとわかるのですが、
記事ページは本文と同じ領域なのにたいして(画像:青色)
カテゴリーページはウィジェットの領域までしか囲われません。(画像:赤色)

ということで、カテゴリーページの領域をCSSで拡大してあげます。

本文に合わせてサイドバーの高さを揃える方法

PCページの時はFlexにして、カテゴリーページのコンテンツとサイドバーの高さを揃えてあげます。

パターン1:本文に合わせてサイドバーの高さを揃える

media only screen and (min-width: 768px) {
  .wrap {
    display: flex;
  }
}

.wrap {
    display: block;
}

nav.desktop-nav.clearfix {
   margin-left: auto;
}

パターン2:本文に合わせてサイドバーの高さを揃える

@media only screen and (max-width: 768px) {
    .wrap {
            display: block!important;
    }
}
.wrap {
    display: flex;
}

div#inner-header {
    display:block;
    text-align:center; 
}

あとはヘッダーのナビメニューの位置が変わってしまうので修正しています。
以上で、カテゴリーページに追尾サイドバーが使えるようになります。

カテゴリーページ説明文(本文)に目次を表示する方法

まずは本文に目次「Easy Table of Contents」を表示させてます。

easy-table-of-contents/easy-table-of-contents.phpのコードの1133行目の「 ||is_archive()」を消してやるとカテゴリーページでも目次が表示されます。

// bail if feed, search or archive
if ( is_feed() || is_search() ) {
    return $content;
}

以上でカテゴリーページの説明文に見出しのHTMLタグを入れれば、目次が自動表示されます。

注意点
※「Easy Table of Contents」のバージョン1系に限る。最新の2系はNG

カテゴリーページの追従サイドバーに目次を表示する方法

「Easy Table of Contents」のウィジェットの目次のコードは
class.widget-toc.php(easy-table-of-contents/includes/class.widget-toc.php)に当たるので、
ここを改造すれば一番スマートです。

試しに139行目の「 ||is_archive()」を消してやると、カテゴリーページでも目次が表示されるようになります。

if ( is_404() ||  is_search() || ( ! is_front_page() && is_home() )  ) return;

が、その目次の項目がカテゴリー説明文のなかのHTMLタグではなく、カテゴリーに内包されている一番最新の記事の目次内容になってしまいます。

条件式をつけて、category_descriptionの内容から参照するようにすればよいのですが、今回は本文の目次からHTMLコードごと参照する方法を取りました。

「Easy Table of Contents」のエラー解消方法

このままサイドバーに目次を表示すると「Warning: Creating default object from empty value in」という警告がでるので、先にエラーを解消します。

easy-table-of-contents/easy-table-of-contents.phpの1157行目に1行コード「$post = new stdClass;」を追記します。

$post = get_post( get_the_ID() );
$post = new stdClass; //インスタンスの作成
$post->post_content = $content;

ちなみに警告対策は

if ( ! $post instanceof WP_Post ) return $content;

と書いてもよいのですが、今度はカテゴリーページの目次が表示されなくなってしまうので注意!

本文の目次コードを参照する方法

さきほど書いたように本文の目次部分のHTMLタグをサイドバーにも参照させます。

子テーマの「functions.php」に下記のコードを挿入

function contents_category() {

  //カテゴリー説明文
  $target_text =category_description();

  //参照したい目次部分のHTMLタグの前後
  $delimiter_start = "<nav>";
  $delimiter_end = "</nav>";

  $start_position = strpos($target_text, $delimiter_start) + strlen($delimiter_start);
  $length = strpos($target_text, $delimiter_end) - $start_position;
  $output = substr($target_text, $start_position, $length );
  return $output;
}
add_shortcode('toc_cat', 'contents_category');
  1. あとは追従サイドバーにテキストウィジェットを挿入
  2. ショートコード

    を記述しましょう
  3. このままだと全ページに表示されてしまうので、プラグイン「Widget Options」にて
    • 「Hide on checked pages 」に
    • Psot Typesの表示させたくない箇所にチェックを入れればOKです。(下記画像参照)

カテゴリーページの構造化データを挿入する方法


1. FTPで親テーマの/wp-content/themes/sango-theme/archive.phpをダウンロード

  1. 8行目に1行コードを挿入
    insert_json_ld(); // 構造化データ
  2. 子テーマへアップロード(親テーマと同じ場所に)
    /wp-content/themes/sango-theme-poripu/archive.php

以上です。
これでアーカイブページに「Article」のデータ構造が挿入されます。

カテゴリーページにOGPを指定する方法

アイキャッチ画像の指定が無いので、自分でタグを入れて指定します。

カテゴリーページの説明文のメタタグを入れればOKです。

<meta property="og:image" content="画像のURL" />
参考 【SANGO】カテゴリーページにサムネイル画像・OGPを設定する方法取得できませんでした

カテゴリーページの編集を拡張するプラグイン「CategoryTinymce」

こちらのプラグインでカテゴリーページの説明文の画像挿入やOGPタグの挿入が楽になります。
参考 CategoryTinymce – WordPress プラグイン | WordPress.org 日本語WordPress.org 日本語

OGPタグの注意点

「CategoryTinymce」のOGPの入力欄ですが、SANGOテーマのOGPと重複して負けるので、
親テーマのhead.php (wp-content/themes/sango-theme-poripu/functions.php)にコードを追加する必要があります。

  if (!is_category()) {
      $insert .= '<meta property="og:image" content="' . esc_url($ogp_img) . '" />' . "n";
  }

カテゴリーページで「【PORIPU】カテゴリ別人気記事」ウィジェットを表示する

テーマエディタを開いて

library/functions/prp_widget.php

の34行目のコメントアウトを取り除くと、表示できるようになります。

<?php if ( is_single() /*|| is_category() */) : ?>

<?php if ( is_single() || is_category() ) : ?>

カテゴリーページを記事ページと同じ幅に

SANGOのカテゴリーページは記事ページと違い少し、狭いので同じ幅に揃えました。

CSSを調整するだけです。

カテゴリーページを記事ページ化するカスタマイズまとめ

以上です。
カテゴリーページの記事化はトレンド?なので、できれば公式が対応していただけると助かります。
とりあえず、やってみたかったのでテーマにちょっと手を加えてみました。

以上、すいみん(@cg_method)でした!