WordPressにて番号付き見出しを作成するプラグイン

この記事は約431秒で読めます。

どうも!!こうすけです。

今回の記事は私が自作したプラグインの紹介になります。

このプラグインは記事内にある全ての見出しを番号付き見出しにしてくれるプラグインです。

その名も、「Add Hierarchical Number To HeadLine」です。

このプラグイン、自分が欲しくてプラグイン探してみたんだけど全然なかったんですよね。
そんなに需要ないのかと思いながらも自分が欲しいし、勉強になるなということで作りました。

1. どういったプラグインなのか詳しく!!


1.1. どんな感じ?

このプラグインは記事内にあるh1~h9で作成された全ての見出しの先頭に、その見出しの階層が把握できる数字列を追加するプラグインです。

例えば、

<h1>test</h1>
<h2>test</h2>
<h2>test</h2>
<h3>test</h3>
<h3>test</h3>
<h2>test</h2>
<h1>test</h1>
<h2>test</h2>

のようになっているとします。

そうすると、記事上では以下のように見出しに数字列が追加されます。

1 test
1-1 test
1-2 test
1-2-1 test
1-2-2 test
1-3 test
2 test
2-1 test

このように記事上にある全ての見出しに階層構造を表す番号を付与してくれます。

あくまで表示するときの見出しに番号を付与するだけなので、実データには番号は追加されていません。

当ブログにも、「Add Hierarchical Number To HeadLine」を適用させてますので、見出しに階層を表す数字列が表示されていると思います。

1.2. 見出しタグは必ずh1から使用しなくてもいい。

<h2>test</h2>
<h3>test</h3>
<h3>test</h3>

のように記事上で一番大きい見出しがh2だったとしても記事上では以下のように表示されます。

1 test
1-1 test
1-2 test

当プラグインは記事上の一番大きい見出しを基準に階層を判断するため、階層構造が正しければ必ずh1からの見出しでなくても問題ないです。
ただ階層構造が正しくなるように見出しタグは使用してくださいね。

<h2>test</h2>
<h4>test</h4>

上記のような記述をすると意図通りの番号が付与されない可能性がありますので、気をつけてください。

2. どういった目的があるのか

記事というのは、階層構造で作成されています。

見出しに数字がない場合だと、目次を見直さないとどういう階層構造になっているのか理解しにくいです。

もし目次の無い記事の場合だとさらに理解するのが困難になります。

見出しに階層の数字列を追加するということは、今どの部分の内容を読んでいるか判断しやすくなります。

そして、階層構造が理解しやすくなると、記事を理解しやすくなります。

そういった助けとなるために当プラグインを作成しました。

3. ユーザー設定でできること

ユーザー設定では、見出しに追加する”数字”と”数字間の文字”を設定することが可能です。


数字は以下の種類を選択することが可能です。

  • 半角数字(123)
  • 丸文字数字(①②③)
  • ローマ数字大文字(ⅠⅡⅢ)
  • ローマ数字小文字(ⅰⅱⅲ)
  • 漢字(一二三)

デフォルトで半角数字が適用されるようになっています。

数字間の文字は以下の2種類から選択することが可能です。

  • ハイフン(-)
  • ピリオド(.)

デフォルトでハイフンが適用されるようになっています。

4. ダウンロード先

以下のリンクからダウンロードすることが可能です。もしよろしければ使ってみた感想等いただければ私も嬉しく思います。

5. 更新情報

= 1.0.4 =
2階層以降の数字がリセットされない不具合を修正しました。

= 1.0.2 =
個別投稿画面だけでなく、ホーム画面やカテゴリー画面でも記事が表示されていた場合にも見出しの先頭に階層を表す数字列を追加するようにしました。

= 1.0.0 =
first release

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です