アクセスカウンター

  • 37本記事閲覧者数   👀💡:
  • 25今日の足あと    🦶💮:
  • 22112サイト訪問者数(累計)🦶💡:

プラグイン Wordpress

【WordPress】プラグイン無しで記事に目次をつけるー最新ー(※かんたん)

更新日:

 

どうも、solobochiです。

 

雑記系の記事はともかく、ナレッジ・ノウハウ系の記事、私でいうとプログラミング系の記事は目次があったほうが見やすいです。

っていうのを、最近いろいろなブログを見ていて思ったので、目次をつけることにしました。

で、いろいろ調べているとプラグイン(Table of Contents Plus)でカンタンにできるらしい。

けど、プラグインなくてもカンタンにできるらしい。

だったら、プラグイン無しで実装できた方がいいでしょう。
ということで、プラグイン無しで実装してみたら、本当にカンタンでした。

 

では、早速。

 

 

目次

  1. 目次部分のコード作成
  2. リンク先部分のコード
  3. プラスα

 



 

【やりたいコト】

  • 記事に目次をつけたい
  • プラグインを使わずに実装したい

 

 

参考にした記事:http://wispyon.com/tableof-contets-noplugin/

 

 

以下の2Stepで作成できます。

step
1
目次部分のコードを作成する

step
2
リンク先部分のコードを作成する

 

 

-

 

手順1:目次部分のコード作成

テキストエディタで目次部分を作ります。

 

以下のコードを貼り付ければOK。

 

 

〜全行解説〜

・<h2>目次</h2>
👉目次エリアを作ります

・<ol>〜</ol>
👉番号付きリスト
※番号無しリスト:ulタグ、番号付きリスト:olタグ
└番号なしリストを使う場合は、「ul」のボタン
└番号付きリストを使う場合は、「ol」のボタン

・<li>〜</li>
👉リストの中身を記載する部分

<li><a href="#title1">見出し1</a></li>
<li><a href="#title2">見出し2</a></li>
<li><a href="#title3">見出し3</a></li>
👉目次のリンク先を設定する

・<a href=xxx>〜</a>
👉リンクボタンを作成する
※参考:HTMLタグリファレンス

 

これで目次部分は完了。

 



 

手順2:リンク先部分のコード作成

テキストエディタで目次部分を作ります。

 

作成した目次と整合性が取れるようにして以下のようにコードを作成すればOK。

 

 

 

 

・<id="xxxxxx">

👉目次のリンク先に当たる、"xxxxxxが目次と合うようにする。

 

 

プラスα

特に無かったです。笑

 

 

 

以上。

カンタンですね。

これで1つ不要なプラグインのインストールを避けることができました。

 

 

 

 

⬇️他にもよく見られている記事⬇️

最も訪問者が多かった記事 10 件 (過去 7 日間)
  • この記事を書いた人
  • 最新記事
solobochi

solobochi

(名前):solobochi

(説明)
都内在住の独身アラサー男子

新卒で大手IT企業へ就職して気付けば10年。 このままではマズいという強烈な危機感から会社を休職

🔸使命に生きたい
🔸好きなひとと好きなことで生きていきたい

これを人生懸けて実現すべく、人生模索中の日々


(Like)
🔹最適化することが好き
🔹PDCAを回すのが好き


(当サイト)
日々思うことを徒然と発信
└(例)
・学びのアウトプット
・投資・資産運用
・プログラミング
・資格試験の対策
・セミナーのレビュー
・書評
etc...


詳しくは自己紹介記事にて。
・自己紹介①
詳しいプロフィール①

おすすめ記事

1

___________________________  【2018/12/16 作成】 【2020/02/12 更新】___________________________   どうも s ...

2

    どうも、solobochiです。   2019年に入ってからというもの、休日は割とpython触ってます。といってもまだ簡単なサンプルコードをなぞるだけですが。 ...

-プラグイン, Wordpress
-, ,

Copyright© そろボチ , 2020 All Rights Reserved Powered by AFFINGER5.