【THE THOR】追尾(追従)する目次を表示させるカスタマイズ方法。

コーディング

どうも、じょにーでっぷん（＠じょにーでっぷん）です。

今回の内容は、プラグイン無しで追従する目次を表示させる方法です。

THE TOHRのアップデートによるバグ回避の為、THE THORの機能本体には触らず、jQueryを使って、記事内の目次をコピーする形で実装してみました。

TOC(Table Of Contents)等のプラグインをできるだけ入れたくないという方におすすめです。

記事ページに、追尾型の目次を付けたい方のお役に立てると幸いです。

1 【THE THOR】追従する目次をサクっと作成！
- 1.1 参考動画
2 【コピペＯＫ】追従する目次のソースコード
3 CSSでデザインを整える

【THE THOR】追従する目次をサクっと作成！

今回目指すデザイン

参考動画

【コピペＯＫ】追従する目次のソースコード

まずは、FTPソフトやサーバーのコントロールパネルから、wp-content＞themes＞the-thor-childを開きます。

そして、the-thor-childフォルダの中にside_outline.php

という名前で、新しくファイルを作成します。

side_outline.php

が作成できたら、その中に以下のソースを丸々コピペしてください。

<?php if ( is_single() ) : ?>
  <div id="side_outline">
　</div>

<script type="text/javascript">
	jQuery(document).ready(function ($) {
		window.onload = function() {
                 $('.outline').clone().appendTo('#side_outline');
                 
                 $("#side_outline .outline__toggle").remove();

            }
	});
	
</script>
<?php else: ?>
もし、記事ページ以外の場所に、何かを表示させたい場合には、こちらに記述してください。
<?php endif; ?>

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

　</div>

jQuery(document).ready(function ($) {

window.onload = function() {

$('.outline').clone().appendTo('#side_outline');

$("#side_outline .outline__toggle").remove();

}

});

</script>

<?php else: ?>

もし、記事ページ以外の場所に、何かを表示させたい場合には、こちらに記述してください。

<?php endif; ?>

コピペ出来たら、次は

wp-content＞themes＞the-thor-child

の中に

functions.php

というファイルを新規で作成してください。

もし、元々子テーマの中にfunctions.phpがある方は、そのファイルをそのまま使ってください。

作成できたら、そのファイルの中に、以下のソースをコピペしてください。

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

add_filter( 'widget_text', function( $ret ) {
	$php_file = 'side_outline';

	if( strpos( $ret, '[' . $php_file . ']' ) !== false ) {
		add_shortcode( $php_file, function() use ( $php_file ) {
			get_template_part( $php_file );
		});

		ob_start();
		do_shortcode( '[' . $php_file . ']' );
		$ret = ob_get_clean();
	}

	return $ret;
}, 99 );

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

add_filter( 'widget_text', function( $ret ) {

$php_file = 'side_outline';

if( strpos( $ret, '[' . $php_file . ']' ) !== false ) {

add_shortcode( $php_file, function() use ( $php_file ) {

get_template_part( $php_file );

});

ob_start();

do_shortcode( '[' . $php_file . ']' );

$ret = ob_get_clean();

}

return $ret;

}, 99 );

ここまでできたら、後もう少しです。

ワードプレスのカスタマイズ画面を開き

追従サイドバーエリアに、カスタムＨＴＭＬのウィジェットを設置します。

設置できたら、カスタムHTMLに

[side_outline]

という記述を追加します。

以上で、追尾型の目次が設定できました！

CSSでデザインを整える

目次が追加できたら、最後はCSSでデザインを整えていきましょう。

以下のソースを丸々、wp-content＞themes＞the-thor-child＞style-user.cssにコピペしてください。

/*-------------------------
Thor専用目次のデザイン変更【サイドバー用】
------------------------*/

#side_outline .outline{
    padding-left: 20px;
    border: 2px dotted #D8D8D8;
}

#side_outline .outline ul li {
    padding-bottom:1.2em;
}
#side_outline .outline ul{
    padding:1.2em;
    padding-bottom:0;
}
#side_outline .outline__title{
    display: inline-block;
    width: 100%;
    text-align: center;
}
#side_outline .outline__number {
    color: #999;
    margin-right: 4px;
    width: 1em;
    line-height: 1em;
    text-align: center;
    padding: 0;
}
#side_outline ul ul .outline__number {
    display: none;
}
.outline__list-4 {
    display: none;
}
#side_outline .outline a:hover {
    font-weight: 400;
    color: #999;
}

/*-------------------------

Thor専用目次のデザイン変更【サイドバー用】

------------------------*/

#side_outline .outline{

padding-left: 20px;

border: 2px dotted #D8D8D8;

}

#side_outline .outline ul li {

padding-bottom:1.2em;

}

#side_outline .outline ul{

padding:1.2em;

padding-bottom:0;

}

#side_outline .outline__title{

display: inline-block;

width: 100%;

text-align: center;

}

#side_outline .outline__number {

color: #999;

margin-right: 4px;

width: 1em;

line-height: 1em;

text-align: center;

padding: 0;

}

#side_outline ul ul .outline__number {

display: none;

}

.outline__list-4 {

display: none;

}

#side_outline .outline a:hover {

font-weight: 400;

color: #999;

}

これで全ての工程は終了です！

お疲れさまでした！

わからないことがあれば、Twitter(＠じょにーでっぷん)で、お気軽にご相談ください。

THE THORのカスタマイズ一覧はこちら！