Cocoonで記事の読んでいる位置に対応した目次の見出しがマークされる、サイドバースクロール追従の目次を作成します。
１．ウィジェットのサイドバースクロール追従エリアに目次を追加
２．Javascriptを追加
３．CSSを追加
です。
順を追って説明します。
１．ウィジェットのサイドバースクロール追従エリアに目次を追加
WordPressの管理メニューの
「外観」「ウィジェット」をクリックします。
「[C]目次」ウィジェットをサイドバースクロール追従へ追加します。
「[C]目次」をドラッグ＆ドロップします。
２．Javascriptを追加
以下のJavascriptのソースコードをCocoon子テーマの
「javascript.js」へテーマエディタで追加編集します。
ソースコード
// ---------------------------------------------------------------------
// 目次上に読んでる項目をマーク
//
$(function() {
// ナビゲーションリンクを設定
var navLink = $('#toc-2 li a');
// コンテンツの位置情報の配列作成
var contentsArr = new Array();
for (var i = 0; i < navLink.length; i++) {
// コンテンツIDを取得
var targetContents = navLink.eq(i).attr('href');
// 外部リンクを削除します
if(targetContents.charAt(0) == '#') {
// サイトの上部からコンテンツ i の始まりまでの距離
var targetContentsTop = $(targetContents).offset().top-20;
// サイトの上部からコンテンツ i の終わりまでの距離(暫定)
var targetContentsBottom = null;
// 配列として格納
contentsArr[i] = [targetContentsTop, targetContentsBottom];
// コンテンツの下部の位置を調整します
if(i>0){
// 前のコンテンツの下部の位置 = 今のコンテンツの上部の位置 - 5
contentsArr[i-1][1] = targetContentsTop-5;
}
}
};
// footerの始まり位置を取得
var footerTop = $("footer").offset().top-20;
// 最後のコンテンツの終わり位置をfooterの始まり位置-5
contentsArr[i-1][1] = footerTop - 5;
// 現在位置を確認してコンテンツ位置に対応
function currentCheck() {
// 現在位置を取得
var windowScrolltop = $(window).scrollTop();
//
navLink.removeClass('current');
navLink.parent().removeClass('current');
if(contentsArr[0][0] <= windowScrolltop &&
contentsArr[contentsArr.length - 1][1] >= windowScrolltop){
// 現在位置はコンテンツ群の範囲内
for (var i = 0; i < contentsArr.length; i++) {
if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop){
// 現在位置は、コンテンツiの範囲内
// class = "current"をナビゲーションに設定
navLink.eq(i).parent().addClass('current');
navLink.eq(i).parent().parent().prev().addClass('current');
break;
}
}
}
}
// ロードまたはスクロールした時の処理
$(window).on('load scroll', function() {
currentCheck();
});
// 目次をクリックした時のスムーズスクロール
navLink.click(function() {
$('html,body').animate({
scrollTop: $($(this).attr('href')).offset().top-18
}, 150);
return false;
})
});
WordPressの管理メニューの
「外観」「テーマエディター」をクリックします。
テーマの編集ページで
編集するテーマを選択：
Cocoon Child
テーマファイル：
javascript.js
ここへ先程のソースコードをコピペします。
コピペ出来たら、下の
「ファイルを更新」をクリックします。
３．CSSを追加
以下のCSSのソースコードをCocoon子テーマの
「スタイルシート(style.css)」へテーマエディタで追加編集します。
(javascriptと同じ要領で)
ソースコード
/* -----------------------------------------
目次上に読んでる項目をマーク
------------------------------------------*/
#toc-2{
width:95%;
}
/* 読んでる項目を明示 */
li.current {
position: relative;
padding-left: 1.2em; /*アイコン分のスペース*/
line-height: 1.4;
background-color: #F8F8FF !important;
}
li.current:before {
font-family: "FontAwesome";
content: "\f0a4"; /*アイコンのユニコード*/
position: absolute; /*絶対位置*/
font-size: 1em; /*サイズ*/
left: 0; /*アイコンの位置*/
top: 0; /*アイコンの位置*/
color: #BBBBFF; /*アイコン色*/
}
/* 読んでる親項目を明示 */
a.current {
background-color: #EEEEFF !important;
}
WordPressの管理メニューの
「外観」「テーマエディター」をクリックします。
(２．のJavascriptを追加でテーマ編集ページがすでに開いてる場合は、省いてください）
テーマの編集ページで
編集するテーマを選択：
Cocoon Child
テーマファイル：
スタイルシート
(style.css)
「子テーマ用のスタイルを書く」の部分へ
先程のCSSソースコードをコピペします。
コピペ出来たら、下の
「ファイルを更新」をクリックします。
動作について
ブラウザで記事をスクロールして読んでるときに、現在どこを読んでいるのか目次の上の項目にアイコンとバックカラーで明示します。
Cocoon記事のスクロールに連動して見出しがマークされる目次のまとめ
読んでる時に、目次が表示されないとまったく意味がありません。
スマホ画面は、サイドバーが常時表示されないので無意味となります。
正常に動作しない場合、サイドバーの目次のIDが「toc-2」でない可能性があります。
違う場合は、javascript, CSS内の「#toc-2」を変更してください。
