Amazon Music 3か月無料で音楽聴き放題!

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

eyecatch-wordpress-category-customize
すいみん

すいみん

こちらのCGメソッドの記事ではカテゴリーページを記事ページ化するカスタマイズまとめを紹介します!

ある程度WordPressのカスタマイズできる人向けで、テーマに手を加えているので自己責任でお願いします!

要バックアップ!

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

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

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

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

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


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

注意点

SANGOの親テーマを編集します!

理由としてはfunctions系のファイルは子テーマに入れても反映されないからです!

※オーバーライド(上書き)することもできるらしいので、そのほうが安全なので検証次第追記します!

あとは、基本的な注意。

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

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

  1. FPTにてsng-functions.php (library/functions/sng-functions.php)をダウンロードします。
  2. 517行目に1行追記します(★の箇所「 || is_category() 」)
/*******************************
 * 追尾サイドバー
 *******************************/

// 追尾サイドバーを表示するかどうか
if (!function_exists('is_active_fixed_sidebar')) {
  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" />

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

こちらのプラグインでカテゴリーページの説明文の画像挿入やOGPタグの挿入が楽になります。

OGPタグの注意点

「CategoryTinymce」のOGPの入力欄ですが、SANGOテーマのOGPと重複して負けるので、
親テーマのhead.php (library/functions/head.php)の198行目あたりのコードを編集する必要があります。(こちらもFunction系で子テーマに反映されない)

  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() ) : ?>

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

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

関連記事