h2見出しの下に、小さい目次を作る方法ってありますか?

2017/11/27 18:24

普段、「Table of Contents Plus」プラグインを使って、記事の上部に目次を表示させています。

h3見出し以上を目次に出してしまうと、目次がすごく長くなってしまうことがあるので、出来るなら、「h2見出しの下に、小目次としてh3見出しのリストを出したいなー!」と思っています。

今のところ、「h3見出しにアンカーを付けて、そこにリンクを貼って飛ばす」という地道な方法しか思いつかないのですが、他に何か良い方法があったら教えてください~!

記事上に戻って目次を見る人もいないと思う(たぶん)し、長い記事の時に、読んでいる方が迷子にならないよう、他の方法でも皆さんが工夫されていることがあったら、お知恵を貸していただきたいです😊

HTML
WordPress
2017/11/27 18:24

コメント

@kautakkuのアイコン画像
@kautakku

tocの設定で1度、ぜんぶの見出しを出して『実際に公開したブログの目次:プラグインが出力するHTML』をコピペすれば簡単に行けそうです。

※やりかた
要素の検証を使ってElement(エレメント)って書いてるトコロにある目次のHTML
<div id="toc_container" class="toc_white no_bullets">
コレを右クリックしてChromeならCopy Element でコピー。

該当ブログのWordPressのテキストエディタにペースト。

ビジュアルで目次大見出しh2リスト内の沢山の小見出しh3タグ部分を切り取る

実際見出しh2タグの下にコピペ。(divで囲んで装飾しないとただのリストになるかも?です)

そのページの目次出力をTOC側で止める。記事IDか何かの指定をしたらTOC設定あたりから記事毎の出力停止できたように思います。←できる事を確認して、HTMLコピペなどやるのが良さそうだと思います❦

@kautakkuのアイコン画像
@kautakku

TOC側でページ毎の出力停止は出来なかったやww

代替案として…超簡単に済ませるなら

記事単位のTOC目次をCSSで消す消すときの指定は.toc_white no_bulletsを指定
コピペした<div id="toc_container" class="toc_white no_bullets"> を<div id="toc_container"> に変更

とかですかね。

@kautakkuのアイコン画像
@kautakku

やっぱイケますね!

https://dublue.com/plugins/toc/#Help

上記を引用翻訳
> あなたは[no_toc]コンテンツのどこかにいますか?これにより、現在の投稿、ページ、またはカスタム投稿タイプのインデックスが無効になります。

ショートコード[no_toc] 詳しく見てないけど、イケるみたい❦良かったぁ簡単で^^

@okutani_tのアイコン画像
@okutani_t

CSSでむりやり非表示にしてしまってはどうでしょう?

こちらと同じ方法で、h2の見出しへのリンクを非表示にすればできそうな気がします。。!

Table of Contents Plusで任意のページだけもくじ番号を非表示にする方法 | vdeep http://vdeep.net/wp-toc-no-number

@kautakkuのアイコン画像
@kautakku

@okutani_t

多分、設定を変えると他のページにも影響があるので、もしCSSで変更するならこの場合・・・

→WordPressがbodyに記事単位の属性を出力してるので、そこを指定する必要がありそうかと思われます。

あとはCSSの優先順位があるんで、divを囲むid・class属性など使って指定しないと厳しそうです。

ある記事を例に(テーマが付けてる属性もあるんですが。)※チョット分かりにくくて申しわけないです・・・

<body class="post-template-default single single-post postid-4582 single-format-standard logged-in admin-bar categoryid-81 customize-support" itemscope="" itemtype="http://schema.org/WebPage">

ホゲホゲいろんなタグと記載
</body>

WordPressが出力すると思う、 postid-4582 記事単位・固有のクラス指定です。

.postid-4582 項目を消す場所 {display:none;}スタイルが効かない場合、#mainなど冒頭に付けるのが良さそうです。

あとCSSで消すのは便利ですが、もし簡単にHTMLが消せるのであれば、例えばショートコード[no_toc]でHTMLから消したほうが良い気もしたり。っと思ったりもします。※CSSで消してもソースを見れば記載がある・変な見方をすれば、検索エンジンにはHTMLは読む・その上でCSSで消してるのもわかる。

でもやり方は沢山あるって事もわかったので、実装するのはやりやすそう!^^
とか思います❦

@kon_guutaraのアイコン画像
@kon_guutara

お二人とも、ありがとうございます!

あぁぁ、説明不足でした、ごめんなさい😥
「h2見出しごとに」小目次を出したい、が主な目的です。

「toc+」を使うと、1ページに1つしか目次を出せないですよね…?
やってみたけど、1つしか表示されなくて。
複数表示できれば、お二人の言うように消したり非表示にしたりで調整できる気がするのだけど…。

こんなイメージ↓ですが、伝わるでしょうか…。
(リストになっている部分を、それぞれのh3へのリンクにしたい)

------------------------------------------
<h2>もずくについて</h2>
・もずくの捕り方
・もずくの食べ方

<h3>もずくの捕り方</h3>
本文

<h3>もずくの食べ方</h3>
本文

<h2>おにく何が好き?</h2>
・鶏肉
・豚肉
・牛は最近もたれる

<h3>鶏肉</h3>
本文

<h3>豚肉</h3>
本文

<h3>牛は最近もたれる</h3>
本文

@orangeのアイコン画像
@orange

効率は判りませんが、functions.phpに以下のような処理を書けば、実現はできそうな気がします。

---
1.add_filter で the_content にフィルタを追加
2.投稿ページとかで条件分岐
3.正規表現でh2見出しの数と内容を取得(preg_match_all)
4.h2がヒットしたらヒットした数だけ以下をループ(for)

~h2ループ~
5.対象のh2(h2[0][i])から次のh2(h2[0][i+1])までの文字列を取得(mb_substrとmb_strpos)
 ※対象が最後のh2だった場合は最後まで
6.取得した文字列からh3の数と内容を取得(preg_match_all)
7.h3がヒットしたらヒットした数だけ以下をループ(for)

~h3ループ~
8.取得したh3の内容をリスト・リンクに整形
9.h3作業用変数に連結して格納
~h3ループここまで~

10.the_contentの対象h2を後ろにh3作業用変数を連結した形に置換(str_replace)
~h2ループここまで、次のh2へ~
---
11.ページ出力後、CSSで装飾
---

アンカーはTOC+に振ってもらうとかすれば良いですかね。
実際に書いたわけではないので多分です。

@okutani_tのアイコン画像
@okutani_t

> 「toc+」を使うと、1ページに1つしか目次を出せないですよね…?

ほんとだ。。!ひとつしか出ないですね ><

そうしたら、ふつうに一つひとつリンクのボックスを作って、表示したいところに入れてあげるのが一番お手軽でいいかなぁと思います。僕だったらそうするかも。プラグインひとつ作るぐらいの労力が必要な気がします。。!

@kautakkuのアイコン画像
@kautakku

私F12キーでtoc目次HTMLをコピーして、記事下にも目次を付けてますよ。

https://bibabosi-rizumu.com/http500-internalservererror/

目次6章 としてるのが 2ページの目次です。
HTMLは<div id="toc_container-1" class="toc_white no_bullets">として記事内にid属性は1つだけ。ってルールをまもってid="toc_container"に -1とか付け足して。

2ページ目の見出しを変更する気はないから、HTMLをコピーしてそのまま貼り付けたかんじです。

@kautakkuのアイコン画像
@kautakku
@kon_guutaraのアイコン画像
@kon_guutara

@orangeさん

ありがとうございます!
なるほど…それは私には難しい、ということだけわかりました(´o`;)

@okutani_tせんせ
プラグインひとつ作るぐらい!
それは…とても大変なことだということが、わかりましたww

@kautakku かうちゃん
なるほど!目次を出した後に動かす、という発想は無かった!
試してみます(’-’*)記事もありがとう~!

@kon_guutaraのアイコン画像
@kon_guutara

あ…

@付けるの失敗した( ◞‸◟ )

@okutani_tのアイコン画像
@okutani_t

ちょっと手間かかりますけど、@kautakku さんの方法が楽チンでいいかもですね!記事も分かりやすくて参考になりました :)

@orange さんもありがとうございます!PHP使った場合の流れが分かりやすかったです :)


するとコメントを残すことができます。