MENU

【SANGO】カテゴリーページに目次をつける方法

sango-category-toc

本記事はSANGOのカテゴリーページに目次をつけるカスタマイズの方法を紹介しています。

ブログ中級者以上向けのカスタマイズです。

難しい場合は是非、お問い合わせください。

目次

【SANGO】カテゴリーページに目次をつける方法

Easy Table of ContentsとTable of Contents Plusの2種類のやり方を紹介します。

Easy Table of Contentsの場合

※Easy Table of Contentsのバージョン1系の場合のカスタマイズになります。

カテゴリーページに本文とサイドバーに目次を表示する方法をまとめました。

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

先に前置きを。

子テーマは使いません。

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

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

あとは、基本的な注意。

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

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

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

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

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

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

// 追尾サイドバーを表示するかどうか
if (!function_exists('is_active_fixed_sidebar')) {
  function is_active_fixed_sidebar() {
    global $post;
    return ( is_singular() || is_category() // or カテゴリーページ // 投稿 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にして、カテゴリーページのコンテンツとサイドバーの高さを揃えてあげます。

本文に合わせてサイドバーの高さを揃えましょう。

あとはヘッダーのナビメニューの位置が変わってしまうので修正しています。

以上で、カテゴリーページに追尾サイドバーが使えるようになります。

@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');

あとは追従サイドバーにテキストウィジェットを挿入

ショートコードを記述しましょう

このままだと全ページに表示されてしまうので、プラグイン「Widget Options」にて

「Hide on checked pages 」にPsot Typesの表示させたくない箇所にチェックを入れればOKです。(下記画像参照)

目次のプラグインによって対応が異なります。

またコードはCode Snippetsのプラグインから入力する前提で記述しております。

Table of Contents Plusの場合

つづいてTable of Contents Plusのプラグイン場合のカスタマイズです。

本文の目次表示

プラグインエディターからコードの一部を変更します。

table-of-contents-plus/class-toc-plus.php

プラグインのコードの変更 1453行目のis archiveを削除。

	( in_array( get_post_type( $post ), $this->options['auto_insert_post_types'] ) && $this->show_toc && ! is_search()  && ! is_front_page() ) ||

これによって、カテゴリーページでも目次が表示されるようになります。

カテゴリー用サイドバー目次

追尾サイドバーを表示。

is_category()を追記。

オーバーライドしてSANGOの設定を変更します。

// 追尾サイドバーを表示するかどうか
if (!function_exists('is_active_fixed_sidebar')) {
  function is_active_fixed_sidebar() {
    global $post;
    return ( is_singular() || is_category() // or カテゴリーページ // 投稿 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') // トップページ用固定ページでない
            );
  }
}

Table of Contents Plusはカテゴリーページの説明欄から目次を取得する機能はないのでWidget Optionsのプラグイン等で、投稿・固定記事以外は表示しないように設定しましょう。

カテゴリーページのサイドバーに目次の表示

JSで本文(説明欄)の目次をコピーして、サイドバーに表示させます。

ついでに目次名も変更。

function toc_cat_side() {
if ( is_category() ) { 
	$str=<<<eot
	<script>
	var toc = document.getElementById('toc_container').outerHTML;
	document.write(toc);
	</script>
	eot;
		return $str;	
	}
}
add_shortcode('toc_cat', 'toc_cat_side');

add_action( 'wp_footer', function () { ?>
<script>
try{
	var elm = document.getElementsByClassName('toc_title')[1];
  elm.textContent = 'タップできる目次';
}catch(e){}
</script>
<?php } );

最後にはサイドバーの範囲の指定と目次の見た目を整えます。

add_action( 'wp_head', function () { ?>
<style>
@media only screen and (max-width: 768px) {
    .wrap {
            display: block!important;
    }
}
.wrap {
    display: flex;
}
div#inner-header {
    display:block;
    text-align:center; 
}

#fixed_sidebar #toc_container {
    background-color: #FFF;
}	
#fixed_sidebar #toc_container {
    border-color: #ffffff!important;
}	
#fixed_sidebar #toc_container  ul li a {
    padding: 0px;
}	
#fixed_sidebar #toc_container ul li ul li a {
    padding: 0px 7px 0px 13px;
}

#fixed_sidebar #toc_container .toc_title {
    background: #1e73be;
}
</style>
<?php } );

【SANGO】カテゴリーページに目次をつける方法まとめ

実はSWELLやTHE SONICなどの新しいテーマではカテゴリーページの記事化はデフォルトで用意されています。

JINやSANGOなど少し古いテーマの場合はそれなりにカスタマイズが必要です。

どうしても設定したい場合は是非、デザノマでご相談ください。

  • URLをコピーしました!

SANGO関連まとめ

すいみん

SANGO関する記事をまとめました。

SANGO関連まとめ

この記事を書いた人

すいみんのアバター すいみん フリーランスデザイナー

技術的なことが好きなデザイナー。
ブログが好きで月間20万PVの技術ブログを運営。
デザインからカスタマイズ、高速化、SEO対策など色々できます。
ご依頼はこちらから!

この記事も読まれてます

目次
閉じる