The post WordPressで目次をプラグインなしで表示…具体的手順を解説 first appeared on Fukuro Press.
]]>
WordPressでの目次表示。
普通はTOC+プラグインを使うと思います。
※ TOC = Table of Content
でも自分で目次表示したい人もいます。
- 極力プラグインを使いたくない
- 目次程度なら自力で表示したい
そういう変わった人のために、
プラグインなしで目次表示の方法を解説します。
ここで行う目次実装の概要と注意点
大まかな手順はこのようになってます。
- 記事内の各見出しに自動でidを割り振る
- その見出し＋idを元に目次を自動生成
- 目次内から見出しにスクロールもできる
こういう実装を目指すことにします。
当たり前だけど初心者向けではありません。
ギリギリ中級者向けかなという程度の内容です。
だから次の人は試さないでください。
- WordPressの仕組みを理解してない
- PHPコードを読めない書けない
そういう人がこの記事に手を出すと、
間違いなくトラブルの原因になります。
もし目次表示のカスタマイズが必要なら…
▼ こういうサービスもあるのでご相談を
警告しておきました（念押し）
１．使用中テーマのfunctions.phpを開こう
ここでは使用中テーマを編集していきます。
具体的にはfunctions.phpに対する編集作業です。
▼ 外観 ⇒ テーマファイルエディタを開く
▼ テーマファイル ⇒ functions.php を開く
これは本当に重要なファイルです。
この内容を編集して構文エラーが起きたなら、最悪ブログがダウンします。もっとも最近のワードプレスなら更新前に警告してくれますが…
だからここからは慎重に作業してください。
ここまでで２回も念押ししました。
２．見出しに自動でidを振るコード追加
見出しとはh2～h6タグまでのこと
その見出しに自動生成したidを割り当てます。
具体的にはfunctions.phpに以下を追加します。
▼ このようなPHPコード追加
function auto_id_to_headings( $content ) {
$content = preg_replace_callback(
'/(\<h[1-6](.*?))\>(.*)(<\/h[1-6]>)/i', function( $matches ) {
if ( ! stripos( $matches[0], 'id=' ) ) {
/// 見出しにidがないなら自動生成
$matches[0] = $matches[1] . $matches[2]
. ' id="' . sanitize_title( $matches[3] )
. '">' . $matches[3] . $matches[4];
}
return $matches[0];
}, $content );
return $content;
}
add_filter( 'the_content', 'auto_id_to_headings', 10 );ポイントは見出しのタイトルから自動的にidを設定していることです。連番とか使う方法もあるけど、ここではこの方法を採用しました。
具体的には sanitize_title() によりタイトルから無効文字を除外し、idに使っても問題ない形式にしてます（参考記事 : https://elearn.jp/wpman/function/sanitize_title.html）
例えばこういう感じになるはず
<h2>Hello, I'm h2 tag</h2>
↓ 変換後 ↓
<h2 id="hello-im-h2-tag">Hello, I'm h2 tag</h2><h2>こんにちは、見出しです</h2>
↓ 変換後 ↓
<h2 id="%e3%81%93%e3%82%93%e3%81%ab%e3%81%a1%e3%81%af%e3%80%81%e8%a6%8b%e5%87%ba%e3%81%97%e3%81%a7%e3%81%99">こんにちは、見出しです</h2>※ 日本語はエンコードされる
自動でタイトルからidが割り振られます。
３．目次(TOC)を自動生成・表示するコード追加
いよいよ目次(TOC)を生成・表示してみます。
ここでは最初の見出し前に表示してみました。
▼ その具体的なPHPコード
function collate_toc_row($depth, $anchor, $heading) {
$level = substr($depth, 1);
if ( $anchor ) {
return ["<a href='#{$anchor}' class='{$depth} toc-link'>{$heading}</a>", $level];
} else {
$slug = sanitize_title($heading);
return ["<a href='#{$slug}' class='{$depth} toc-link'>{$heading}</a>", $level];
}
}
function add_toc_before_1st_heading( $content ){
/// 目次を自動生成して最初の見出し前に表示
preg_match_all('/<(h\d*)(?: id="(.*?)")?>((.*?))</',$content,$matches);
$levels = $matches[1];
$anchors = $matches[2];
$headings = $matches[3];
if ( $headings ) {
/// 見出しが１つ以上あるなら目次表示
$toc = '<div class="toc_container">';
$toc .= '<div class="title">Table of Contents</div>';
$collated = array_map('collate_toc_row', $levels, $anchors, $headings );
$previous_level = 2;
$toc .= '<ol class="toc-list">';
foreach ($collated as $row) {
$current_level = $row[1];
if ( $current_level == $previous_level ) {
$toc .= '<li>' . $row[0];
} else if ( $current_level < $previous_level ) {
$toc .= str_repeat('</ol>', $previous_level - $current_level) . '<li>'. $row[0];
} else {
$toc .= '<ol><li>' . $row[0];
}
$previous_level = $row[1];
}
$toc .= str_repeat('</ol>', $previous_level) . '</li></ol>';
$toc .= '</div>';
$content_parts = preg_split("/(<h\d*)/", $content, 2, PREG_SPLIT_DELIM_CAPTURE);
$content = $content_parts[0] . $toc . $content_parts[1].$content_parts[2];
}
return $content;
}
add_filter( 'the_content', 'add_toc_before_1st_heading', 11);長すぎるから細かな解説はしません。
記事内のすべての見出し（h1～h6）をスキャンし、それを元に目次を自動生成。最初の見出しの前にTOCを挟み込んでるだけです。
見出しが１つもない記事には目次表示されません。
４．目次のレイアウト用にCSSを追加
できあがった目次は質素な見た目です。
だからレイアウトを整えます。
具体的には次のようなCSSコードを追加しました。
▼ 目次に適用したCSSコード例
.toc_container{
overflow: auto;
padding: 10px;
background: #f9f9f9;
border: 1px solid #aaa;
}
.toc_container .title{
text-align: center;
padding-top: 10px;
}
.toc-list{
list-style: none;
font-size: 20px !important;
margin: 0;
padding: 10px;
float: left;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.toc-list ol{
list-style: none;
}
.toc-list a{
font-size: 16px;
}ここまで読み進められる人なら「このCSSどこに追加すればいいの？分からないよ～(泣」なんてバカなことは言わないはずです。
好きなようにCSSは改変してください。
こんなビジュアルの目次ができた！
できあがった目次はこんなビジュアルです。
見てわかる通り、レイアウトは完全にTOC+プラグインのそれです。あと目次リンクをクリックすると各見出しにスクロールもしてくれます。
まだ未完全だけど目次としては機能してます。
WordPressでプラグインなしでの目次の作り方は以上。
チャレンジ精神のある人は試してみてください。
The post WordPressで目次をプラグインなしで表示…具体的手順を解説 first appeared on Fukuro Press.
]]>The post WordPressで目次をサイドバーに固定表示させる手順【TOC+】 first appeared on Fukuro Press.
]]>
WordPressでの目次表示と言えば TOC+ を使っている方は多いと思います。
実はこのプラグインはウィジェット表示にも対応していて、それを使えばサイドバーなどにも目次表示が可能です。
そこでこの記事ではTOC+目次をサイドバーに固定表示させる手順についてまとめました。
目次をサイドバーに固定表示する利点
まずWordPressサイドバーに目次を固定表示する利点について少し説明
これから紹介する手順ではTOC+の目次ウィジェットを使って目次表示させます。例えば次がサイドバーに表示した目次の例
画像だと分からないですが同じ場所に固定され続けるタイプの目次なので、PCで記事を見ると常に目次表示し続けられます。
こういう固定表示される目次は次のような点で便利です。
- サイドバーの空きスペースを活用できる
- 常に目次を表示し続けることができる
- 読者にとって記事が読みやすくなる
こういう風にサイドバーに目次表示すれば空きスペースの活用にもなるし、読者にとって記事を読みやすくできます。正に一石二鳥ですよね。
ではTOC+目次を固定表示する手順を紹介していきます。
目次を固定表示する手順
TOC+ウィジェットを使ってサイドバーに目次を固定する手順は次の通りです。
１．Q2W3ウィジェットのインストール
まず固定表示はTOC+の機能にはありません。なのでウィジェットを固定表示できる専用プラグインをインストールします。
それが次記事でも紹介した Q2W3 Fixed Widget というプラグイン
このプラグインをまずはインストール・有効化してください。一応その手順を説明しておくと次の通りです。
まずメニューから「プラグイン」ー＞「新規追加」をクリック
新規追加画面が開いたら「q2w3」とキーワード検索
すると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。
インストールが完了したら「有効化」ボタンを押すのも忘れずに
これでウィジェットを固定表示できるようになりました。
２．TOC+ウィジェットをサイドバーに設置
そうしたら次はTOC+のウィジェットと今インストールしたQ2W3プラグインを使って目次を固定表示させてみます。
まずWordPressメニューから「外観」ー＞「ウィジェット」をオープン
そして利用可能なウィジェット一覧から「TOC+」というウィジェットを探してサイドバー領域にドラッグ＆ドロップ
↓TOC+ウィジェットをドラッグしている様子
この時の注意点はTOC+ウィジェットをサイドバーの一番下に設置するということ。もし真ん中や上に置くと表示が変になる（他のウィジェットが隠れる）ので要注意です。
そうしたらTOC+ウィジェットの設定を開き、タイトルを入力
↓タイトル項目に「目次」と入力
上画像みたいに「目次」など分かりやすい名前をつけておけばOKです。
そうしたら「Fixed widget」にチェックを入れてウィジェットを固定
↓必ずこの項目をチェック！
あとは「保存」ボタンを押せば目次がサイドバーに固定表示されるようになったはずです。もちろんスクロールしてもずっと追従してきます。
以上がTOC+ウィジェットを固定表示させる手順
TOC+だけだとウィジェットの設置しかできないので、Q2W3プラグインの力を借りて固定表示するというのがポイントです。
補足：特定ページでだけ目次非表示にするには
TOC+は目次の固定表示もできて便利ですが、たった１つ不便なところがあります。
それは特定ページで目次を非表示にできない、ということ
記事によっては冒頭の目次とか今紹介したサイドバー固定の目次を表示したくないことも当然あると思います。
でも投稿画面を探してみても「このページでは目次を非表示にする」みたいなオプションは全く見つかりません。
私自身、「そういうオプションがあれば便利なのにな～」と思ってましたが、実はある方法を使えば非表示にできるみたいです。
その方法とは次のショートコードを記事内に書くこと
[no_toc]
この [no_toc] というショートコードを記事内のどこかに書けばOKです。書く場所は記事の最後当たりにすると編集の邪魔になりにくいかもしれません。
そして投稿を保存すれば目次が表示されなくなります。
ただし、[no_toc] で非表示にされるのは記事内の目次だけです。
サイドバーなどウィジェット表示した目次を非表示にする手順は別の方法を試す必要があります。そのやり方を簡単に説明すると次の通りです。
１．目次非表示にする記事のIDを調べる
まず目次を非表示にしたい記事のIDを調べないといけません。
調べ方は非表示にしたい記事の投稿画面を開き、ブラウザのURL欄に表示されている「post=xxxx」の xxxx という数字部分をメモしてください。
例えば次は記事IDが 10020 の投稿画面URL例
https://example.com/wp-admin/post.php?post=10020&action=edit
上の例みたいに「post=10020」みたいな部分が必ず見つかるので、それを手がかりに記事IDは簡単に分かります。
２．Widget Logic のインストール
お次は記事IDでウィジェット非表示にするプラグインをインストールします。
それが次記事で紹介した Widget Logic というプラグイン
使い方については上記事で詳しく紹介したのでご覧ください。インストール・有効化の手順についても書いたのでここでは省略します。
３．記事IDで目次ウィジェットを非表示
では調べた記事IDと Widget Logic を使って特定記事で目次を非表示にしてみましょう。その手順は次の通りです。
まずウィジェット画面でTOC+ウィジェットを開き、「ウィジェットのロジック」という設定項目を探してください。
↓下画像のオレンジ枠で囲った項目
ここにウィジェットの表示条件（ここでは記事IDで非表示する条件）を入力します。
例えば非表示にしたい記事が３つあるとしましょう。
そしてそれぞれの記事IDが 130、190、201 の場合は次の条件式を入力すればOK
! is_single( 130, 190, 201 )こういう風に記事IDをコンマ（ , ）で区切ったものを is_single という関数に渡す条件を書けば機能します。
あとはウィジェットを保存すれば記事IDに当てはまる記事でのみ目次が表示されないようになったはずです。
以上が特定記事で目次を非表示にする方法
非表示にする手順は記事内かウィジェットかどうかで次のように違います。
- 記事内目次を非表示にする場合
投稿画面で記事内のどこかに [no_toc] というショートコードを記入
- 目次ウィジェットを非表示にする場合
記事IDを調べる ⇒ Widget Logic プラグインをインストール ⇒ 目次ウィジェットに非表示にする条件式を書く
まあ目次を非表示にする機会はそれほど多くはないと思います。基本的に表示していて困ることは少ないですよね。
ただ「どうしても非表示にしたい！」という場合は上の手順を試してください。もし手順について分からないこと・質問があるならコメント欄からどうぞ
まとめ
以上、WordPressでTOC+目次を固定表示させる方法でした。
もしサイドバーに何も表示していないけど何か有効活用したい、という場合は目次表示すると記事が読みやすくなるはずです。
ちなみにTOC+のカスタマイズについては次記事でも色々紹介しています。
基本コピペOKなのでCSSの知識もあまり必要ありません。もし記事冒頭の目次を見栄え良くしたいという方は是非こちらの記事もご覧ください。
The post WordPressで目次をサイドバーに固定表示させる手順【TOC+】 first appeared on Fukuro Press.
]]>The post 丸々コピペOK！Table of Contents Plusのカスタマイズ術 first appeared on Fukuro Press.
]]>
WordPressでの目次表示に Table of Contents Plus を使っている方は多いと思います。
自動的に記事の最初に目次を表示できるのが便利ですよね。
ただ細かいデザインを変えようとするとCSSの知識が無いと少し難しいです。
そこでここでは・・・
コピペでできるTOC+目次のカスタマイズテクニック を紹介していきます。
丸々コピペOKなので誰でも簡単、是非お試しください！
TOC+をカスタマイズする前に・・・
TOC+をカスタマイズするには、今使っているテーマの「styles.css」を編集します。
これはどのテーマにもあるファイルなので、
ここにオリジナルのCSSコードを追加すれば目次も自由にカスタマイズ可能です。
もしWordPress内で編集するなら 「外観」ー＞「テーマの編集」を開けばOK
自動的に今使っているテーマのstyles.cssの編集画面が開きます。
あとはここにCSSを追加していくだけですが、１つ注意点があります。
それはテーマがアップデートされると変更が全て消さること
当然 styles.css に追加したCSSもアップデートで全て消えてしまいます。
なのでテーマファイルを編集するときは子テーマを作っておきましょう。
次の記事で紹介したようにプラグインを使えば簡単に作れます。
特にWordPress公式で配布されているようなテーマの場合、
アップデートの影響を受けやすいので必ず子テーマは作っておいてください。
TOC+目次のカスタマイズCSSがコチラ！
それでは目次をカスタマイズするCSSコード、いくつか紹介していきます。
CSSコードは丸丸コピでそのまま styles.css に貼り付ければOKです。
１．目次を左寄せから中央寄せに
目次はデフォルトの状態だと左寄せして表示されます。
設定から「中央寄せできないかな～」と探してみても、目次位置を変更するオプションは見つかりません。
それなら次のCSSを styles.css に追加すれば中央寄せになります。
#toc_container{
margin: 0 auto;
}これを追加＆保存すれば目次が横に中央寄せされたはず。
もし見た目が変わらない、という場合はブラウザのキャッシュをクリアしてみてください。
２．目次項目を横中央に寄せる
例えば目次の幅を「375px」などのように固定している場合・・・
次のように目次項目が全て左に寄ってしまいます。
目次としての機能はあるものの・・・なんか不格好ですよね？
しかもTOC+の設定画面には中央寄せするオプションもないみたいです。
そんなときは次のCSSを styles.css に追加すればOK
.toc_list{
float:left;
position:relative;
left:50%;
transform: translateX(-50%);
}
.toc_list > li{
position:relative;
left:-50%;
transform: translateX(50%);
}このCSSについては本当に何も変更する必要はありません。
ただそのままコピペして貼り付けるだけです。
これで次のように目次項目が中央寄せで表示されるようになります。
目次を幅固定をしているなら、こっちの方が見た目が良くなるのでおススメ
３．PCとスマホで目次幅を切り替えする
目次幅を固定した場合、PCでもスマホでもその幅で表示されてしまいます。
でもスマホとPCで目次幅を切り替えたいこともあるはず
その場合もCSSだけで切り替えすることが可能です。
例えばつぎは PCの場合は幅を500px、
それ以外の スマホの場合は幅100%に切り替えするCSS
/** PCでは幅500pxに固定 */
#toc_container{
width: 500px;
}
/** スマホなどでは幅100%に固定 */
@media screen and ( max-width: 750px){
#toc_container{
width: 100%;
}
}厳密にいうとこれは端末ごとではなく、画面の横幅で切り替えしています。
ただスマホは画面幅が小さいので 画面幅で切り替えしても問題ありません。
またここでの画面のサイズですが・・・
- パソコンの場合 : 幅500ピクセル
- スマホの場合 : 幅100%
↑ こういう風にしてますが、そこはお好きな横幅で置き換えてください。
まとめ
TOC+は設定画面から細かなカスタマイズできないのが少し不便。
ここで紹介したCSSを追加すれば、位置調整や大きさのカスタマイズも自由自在です。
以上、TOC+をCSSでカスタマイズするテクニックでした！
The post 丸々コピペOK！Table of Contents Plusのカスタマイズ術 first appeared on Fukuro Press.
]]>The post WordPressでの目次表示に便利な Table of Contents Plus の使い方 first appeared on Fukuro Press.
]]>
長い記事だとスクロールして記事を読んでいかなくてはならないため、本当に欲しい情報にたどり着くのに時間がかかってしまいます。
その時に「目次」を表示しておくと読者はどこにどんな内容があるのか一目でか分かるので記事を読んでもらいやすくなるはずです。
ここではその目次を記事内に設置できる「Table of Contents Plus」プラグインの導入・使い方についてまとめました。
目次を表示するメリット
今回紹介するプラグインを使うと次のようにh2やh3タグで作られた見出しを次のように目次として一覧表示してくれます。
このような目次を表示するメリットは次のような点です。
- 全ての見出しが一覧表示されるので記事の内容を大まかに把握できる
- 目次から読者が知りたい情報を見つけやすくなる
- 見出しの下にどのような小見出しがあるか階層表示されて分かりやすい
長い記事だと読者にとって知りたい情報がなかなか見つからないので途中で離脱されてしまう可能性もありますが、目次を表示しておけばすぐに知りたい情報に飛ぶことができるので途中で離脱ということが少なくなります。
これが記事のトップに目次を表示するメリットです。
プラグインのインストール
では目次を表示するために「Table of Contents Plus」をインストールして有効化しましょう。
まずメニューから「プラグイン」ー＞「新規追加」を選んで開きます。
そしてプラグインの新規追加画面で「table of contents」などのキーワードで検索すると検索結果の中に次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。
検索結果には似たようなプラグインがいくつか表示されることもあるので間違えてインストールしないように注意した方がいいかもしれません。
またこのプラグインは次のプラグインページからダウンロードして使うことも可能です。
https://ja.wordpress.org/plugins/table-of-contents-plus/
そしてインストールが終わったら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化するのを忘れないようにしましょう。
目次の設定
プラグインを有効化したらプラグインから目次の基本設定をしていきます。
目次の基本設定をするにはメニューから「設定」ー＞「TOC+」を開いてください。
すると次のようなプラグインの設定画面が表示されます。
この画面では目次の表示や表示条件について次のような設定ができます。
目次の位置
目次をどこに表示するかは「位置」と書かれた項目にあるドロップダウンメニューから選択します。
上の画像のように次の４つの場所から選ぶことが選べます。
- 最初の見出しの前(デフォルト)
タイトルを含まない一番最初に出現する見出しタグのすぐ前に目次を表示
- 最初の見出しの後
タイトルを含まない一番最初に出現する見出しタグのすぐ後に目次を表示
- 上
記事タイトルのすぐ下に目次を表示
- 下
記事の一番下に目次を表示
目次の場所は好みで変えてください。
表示条件
目次をどのような条件で表示する条件は「表示条件」の横にあるドロップダウンメニューから選べます。
デフォルトでは「４つ以上見出しがあるとき」に目次を表示する設定になっていますが、短い記事にも対応できるように「２つ以上見出しがあるとき」を選んでおくといいと思います。
目次を表示する投稿タイプ
目次をどのような投稿タイプの記事で表示するかは「以下のコンテンツタイプを自動挿入」という項目の横にあるチェックボックスから設定できます。
初期状態では「page(固定ページ)」にチェックが付いていないので、固定ページでも目次を表示したい場合はそれにもチェックを入れてください。
目次タイトル
目次の上に表示されるタイトルは「見出しテキスト」と書かれた項目の横にある「目次の上にタイトルを表示」チェックボックスの下にあるテキスト欄から入力できます。
デフォルトでは「Contents」となっているので「目次」などの分かりやすい名前に変更しましょう。
番号振りの有無
デフォルトでは目次の各項目の左には次のように番号が振られます。
もしこの横の番号を表示したくなければ次のように「番号振り」のチェックを外してください。
チェックを外すと次のように番号がなく見出しタイトルだけの目次が表示されます。
スムーススクロールの設定
スムーズスクロールとは目次に含まれるリンクをクリックしたときに自動でスクロールしながら各見出しの上まで移動する機能です。
この機能を有効にするには「スムーズ・スクロール効果を有効化」というチェック項目にチェックをつけてください。
ジャンプだと移動したことが分かりにくいのでスムーズスクロール効果をつけておくのがおススメです。
ここまでの基本設定をしたら下の方にある「設定を更新」ボタンを押して変更を保存してください。
目次の位置の変更
目次の基本設定を済ませると記事内に目次が表示されますが、１つ問題があります。
それは次のように目次が左寄りで表示されてしまうことです。
これを中央寄りにしたくても基本設定には中央寄りにする設定はありません。
そこで今使っているテーマのstyle.cssに目次を中央寄せするためのカスタムCSSを追加します。手順は次の通りです。
まずメニューから「外観」ー＞「テーマの編集」をオープン
そしてテーマの編集画面からstyle.cssを開き、最後の方に次のCSSを追加してください。
#toc_container{
margin: 0 auto;
}
このCSSを追加すると次のように目次が中央寄せになったはず
もし反映されない場合はブラウザのキャッシュをクリアしてみてください。（特にChromeブラウザなら Clear Cache という拡張機能を入れるのがおススメ）
ちなみにCSSを使ったTOC+のカスタマイズ術は次記事でも紹介しました。
ほとんどコピペでできるので目次の微調整したい場合に是非お試しを！
まとめ
目次があると読者が記事の大まかな内容を把握でき、知りたい情報にすぐに進むことができるので利便性が高くなります。
ですがタグ直打ちで目次を作ろうとすると結構大変です。
そのムダな手間を省ける便利なプラグイン「Table of Contents Plus」をここでは紹介しました。導入すれば目次表示がきれいで楽になること間違いなしです。
The post WordPressでの目次表示に便利な Table of Contents Plus の使い方 first appeared on Fukuro Press.
]]>