【苦戦しました…】wordpressの見出しに自動的に章番号・段落番号を入れる方法

こんばんわ!管理人のひよこんです。

タイトルの件、苦戦の末に見出しに自動採番することが出来ましたので、情報を共有致します。(Table of Contents plus[TOC]プラグインをインストールして目次を作るところまでは順調にいったのですが…、見出し番号付けカスタマイズにはかなり時間を取られました。プラグインも探してみましたが、見当たりませんでした。cssで定義するのが一般的なようです。)

この記事はスタイルシートの編集が出来る方が対象になります。(他ページとの兼ね合いにより、コピーガードがかかっています。「右クリック→ページのソースを表示」や、「javascriptの無効化」等で、ソースコードをコピーしてください。)

スタイルシートに自動採番の定義を追加

style.cssに定義を追加してください。もし、投稿ページや、固定ページのみに反映させたい場合はcustom.cssなどを作って定義すると良いです。custom.cssの導入方法については「WordPressの記事ページのみにカスタマイズCSSを適応させたい」のページが大変参考になりました。

/* Yk St 見出しに自動で番号を振る*/

/* Yk St 見出しに自動で番号を振る*/

body {
  
  /* bodyタグ発生時に見出し1のカウントリセット */
  counter-reset: midashi1; 
}

/* h1タグ発生時に見出し1のカウントリセット */
/* ただしtwentyseventeenテーマでは、タイトルがclass定義付きh1タグなので.
class定義有を除外したh1のみに実施 */
h1:not([class]) {
  
  counter-reset: midashi2; 
  
}

/* twentyseventeenテーマではh2~h6もクラス定義付きで使用している可能性があるので、
class定義有は全て除く */
h2:not([class]) {
  counter-reset: midashi3;
}
h3:not([class]) {

  counter-reset: midashi4;
}
h4:not([class]) {
  counter-reset: midashi5;
}
h5:not([class]) {
  counter-reset: midashi6;
}

h1:not([class])::before {
  
  counter-increment: midashi1;
  content: counter(midashi1) ". ";
  
}

h2:not([class])::before {
  
  counter-increment: midashi2;
  content: counter(midashi1) ". "counter(midashi2) ". ";
  
}

h3:not([class])::before {
  
  counter-increment: midashi3;
 
  content: counter(midashi1) ". "counter(midashi2) ". "counter(midashi3)". ";
}

h4:not([class])::before {
  counter-increment: midashi4;
  content: counter(midashi1) ". "counter(midashi2) ". "counter(midashi3)". "counter(midashi4) ". ";

}

h5:not([class])::before {
  counter-increment: midashi5;
  content: counter(midashi1) ". "counter(midashi2) ". "counter(midashi3)". "counter(midashi4) ". "counter(midashi5) ". ";

}

h6:not([class])::before {
  counter-increment: midashi6;
  content: counter(midashi1) ". "counter(midashi2) ". "counter(midashi3)". "counter(midashi4) ". "counter(midashi5) ". "counter(midashi6) ". ";

}
/* Yk End */

 

コメント欄は自由に使ってね!ほどよく返信もします!

メールアドレスが公開されることはありません。