日々の忘備録とリファレンス

PHPマニア

HTML・CSS・PHP・jQuery・Mysql・Linuxの総合情報サイト

HTML・CSS・PHP・jQuery・Mysql・Linuxの情報サイト

自作WPの記事ページにWordpressプラグイン風の目次機能を作成

記事に目次があればとても便利

Wordpressの目次とは
自作WPの記事ページに目次を作りたくなった。
Wordpressサイトによくあるアレ(笑)
あれは恐らくプラグインだけど分かりやすいしカッコいいですよね!

こんな感じのやつです!
…って他サイトをサンプルに撮ってスクショをアップしようかなと思いましたが、よくよく考えれば、作っちゃったのでこのページのようなやつです(笑)
見てやってください(笑)

これ、もちろんわざわざ目次を打ち込んで作ってるわけではなく、本文を入力したら自動で目次が表示されるわけです。
なので目次を作る手間が省けるんですね!

記事ごとに毎回目次を作っていたら、それはもうかなり面倒すぎます。そういうために、自動目次はすごく便利なんです!

Wordpressの目次プラグイン
Wordpressでは「Table of Contents Plus」ってプラグインらしいですね!

Table of Contents Plus
一応こちらにリンクしておきます!


思い付いたらすぐ行動に移すタイプなので、その朝思い付いて2時間くらいで午前中にさらっと出来ちゃいました(笑)


※ちなみに、このサイトはWordpressではありません。笑
自分でデータベースとプログラミングで作っている管理画面付き独自CMSになります。なのでWordpress風の目次って書いています(笑)

さて、では仕組みはどのようになってるんでしょうか。 


Wordpress風の目次の仕組み

本文からの解析
これは私独自のやり方なので、これがWordpressのプラグインと同じやり方かどうかはわかりません。

私は記事内はh4以降を使うので、まずは記事に書かれた文字からh4やh5を解析して抽出します。

そしてそのh4やh5の文字部分を抜き取り、順序を組み立て、目次として表示させているんですね!

とても簡単です(笑)

目次からのリンクについて
そしてリンクはというと、JavaScriptでやっています。
同じページにリンクを飛ばすためにはhtmlではidを付けて「a href="#id"」みたいにする方法がありますが、本文のh4やh5に毎回idを付けるというダサいことはもちろんしたくないので、これをJavaScriptで操作しています。

毎回記事にidなんか付けるのは手間ですからね。笑

ではどうやってるかというと、上述した並び替えた目次の順番に対する順番の本文のh4やh5の位置を取得して、jQueryのanimateでその位置まで移動しています。

そうすることによって、わざわざ記事にidを付けなくても、そのh4やh5の位置まで飛ばすことができます。

もうこれができれば自動で目次が表示されちゃいます。笑
ちなみにh4がなければ目次は何も表示されません。

Wordpressのプラグインについて

Wordpressはプラグインが大量にあるから便利ですね!
ただプラグインを使い過ぎると、プラグイン同士や、はたまたテーマなどと競合してうまく動作しなくなるというのはよく聞く話です。

プラグインを使うのもWordpressの大きなメリットの一つですが、私のようにPHPが大好きでたまらない人は、プラグインを使わずに自作で作ってみるのもいいかもしれません。笑

[カテゴリ]

関連記事

正規表現の先読み後読み何回使っても忘れるのでメモ。...

2020年05月17日 11時33分

正規表現の先読み後読み何回使っても忘れるのでメモ。...

2020年05月17日 11時33分

Copyright© 2019-2020 php-mania.com All Rights Reserbed.

当サイトに掲載している文章、画像などの無断転載を禁止いたします。