【snow monkey】投稿ページに目次を入れる方法【プラグインなし】

投稿日 2023年3月2日
更新日 2023年3月25日
著者ホエルお🐳
カテゴリー snow monkey

Snow Monkey使ってるけど目次ってどうやっていれるの？
できれば自動で目次が入るようにしたいな。

snow monekyに簡単に目次を入れるのにはSnow Monkey Blocksの「目次ブロック」を使えば簡単に挿入できます。

ただ、この方法だと記事毎にいちいちブロックを追加する必要があってちょっとめんどくさいんですよね。

なのでこの記事では投稿記事に目次を自動挿入する方法を説明します。

コードを入れる必要がありますが、コピペだけでできるので簡単にできますよ！

この記事でわかること↓

・自動で目次を入れる方法
・表示・非表示をする方法

それでは解説していきます！

ちなみに↓のような目次が作れます。

コードで自動出力する

Snow Monkeyの投稿ページに目次を自動で挿入するためには下記のコードをMy snow monkeyに記載してください。

/*目次*/

add_filter(
	'snow_monkey_display_contents_outline',
	function( $display ) {
		if ( is_front_page() ) {
			return false;
		}
		
		if ( is_single() ) {
			return true;
		}

		
		//固定ページには目次を入れない
		if ( is_page() ) {
			return false;
		}
	

		return false;
	}
	);

これを記載するだけで自動で目次が挿入されます。

My snow monkeyにコードを組み込むことで、文章中に含まれる見出しを自動的に抽出して目次を作成することができます。

これにより、「目次ブロック」を使わなくても、簡単かつ素早く目次を作成することができるので、めちゃくちゃ便利ですね！

あんまり使わないかもしれませんが、固定ページに目次を入れたい場合は下記を”false”→”true”へ変更すればOK。

//固定ページにも目次を入れたい場合
		if ( is_page() ) {
			return true;
		}

これ、やってみるとわかりますが本当に便利です。

これは本当に便利だね！ブロック入れるとかすぐ忘れそうだもんなぁ。
あと気になったのが、目次が多くなると目次だけでズラーって表示されてなんか見にくくなるんだよね。
なんとかならないの？

そうなんですよね。
Snow Monkeyの目次はそのままだと開いたまま表示されます。
表示・非表示の機能もないので、目次が多くなると記事が読みにくくなりがち。

目次に表示・非表示機能をつける

この状態だと目次は入るんですけど、目次が開きっぱなしなんですよね。

記事によっては目次だけズラ〜っと並んで見栄えも悪い。

なのでボタンで表示・非表示をつけられないかな〜と思っていたらこちらの方がとても丁寧に書かれていました。

ほぼ同じコードではありますが、備忘録としてコードだけ残させていただきます。

僕の場合は常に非表示にしていたいので、常に非表示Ver.を記載しておきます。

下記のコードをMy snow monkeyの中のJsファイルに貼り付けます。

jQuery(function($){
  var flg = 'closed'; //デフォルトの設定：表示='opened'、非表示='closed'
　$('.wpco__title').append('<span class="toc-toggle-label">[<a class="toc-toggle-link">表示</a>]<span>'); //デフォルトの開閉リンク文字列
  $('.toc-toggle-link').on('click', function() {
    $('.contents-outline').slideToggle('fast');
    if(flg == 'closed'){
      $(this).text('非表示'); //表示状態のリンク文字列
      flg = 'opened';
    }else{
      $(this).text('表示'); //非表示の状態のリンク文字列
      flg = 'closed';
    }
  });
});

僕の場合はcssなども一緒に読み込ませているので、Jsを読み込ませるコードはこんな感じです。

add_action('wp_enqueue_scripts', 'msm_enqueue_style_script');
function msm_enqueue_style_script()
{

	/* css読み込み */
	wp_enqueue_style(
		'msm_style',
		MY_SNOW_MONKEY_URL . '/styles/style.css',
		[],
		filemtime(MY_SNOW_MONKEY_PATH . '/styles/style.css')
	);

	/* js読み込み */
	wp_enqueue_script(
		'msm_scripts',
		MY_SNOW_MONKEY_URL . '/scripts/main.js',
		['jquery'],
		filemtime(MY_SNOW_MONKEY_PATH . '/scripts/main.js'),
		true
	);
}

/* エディター用のCSS読み込み */
add_action(
	'after_setup_theme',
	function () {
		add_editor_style('/../../plugins/my-snow-monkey/styles/style.css');
	}
);

さらにcssで調整を行います。