本サイトのコンテンツには、プロモーションが含まれている場合があります。2024年4月22日SHAREポストシェアはてブLINEこんな悩みに答えますWordPressの記事に目次を挟みたい!プラグインなしで自作する方法ってありませんか?できればコピペですべて終わるものがありがたい!こんな悩みに答える記事になっています。このサイトも、以前はプラグインなしで目次を作っていました。クリックでその場所までジャンプできるような仕組みになっています。maipyonこんにちわ。maipyon(@maipyon8)です。今回の記事では、プラグインなしでコピペだけで目次を作成する方法を紹介します。記事の前半では自動で目次を生成する方法について。後半ではそのCSSについて説明していき、最後に目次の上に広告を入れ込む方法も解説します!目次があるだけでユーザーの求めている場所まですぐに飛ぶことができますし、以下のようにSEO的にも強くなれます。以下の検索結果のような感じ。下側に、各見出しへのリンクがありますが、目次があることでこのリンクも表示されます。その分クリック率も高くなるので、設置はもはや必須レベルかと思います。目次の完成品は以下の通り。CSSをいじれば、自動で番号を振ることももちろん可能ですのでそこはお任せしたいと思います。自動で番号を振る方法についても後程紹介します。余談:プラグインを使わないメリットプラグインはできるだけ使わないほうがいいと言われています。プラグインがありすぎるとサイトの速度が重くなる→上位に上がりづらくなるということにつながるから。プラグインの脆弱性からサイトを攻撃される恐れもあります。こればっかりは運ですが、できるだけプラグインは使わないということを目指したほうがよさそうです。maipyonまあテーマで推奨されている方法があれば、それを使うのが一番なんですが。目次を自動生成するコード目次を自動生成するコードは以下の通り。jQueryを使いプラグインなしで目次をWordPressの記事に自動追加するの記事を参考にしています。}});</script><!--目次追加ここまで-->これを、footerの</body>のすぐ上に追加します。外観テーマファイルエディターfooter.phpに</body>があると思います。フッターテーマの一番下は次のようになるはず。footer.php...</script><!--目次追加ここまで--></body></html>このコードではh2、h3までを拾って目次を作成します。h4以降を拾いたい場合は、参考元の記事をご確認ください。目次が必要な記事と必要でない記事があると思います。id='toc'></div>を書き込めばOKです。※クラッシックエディタの場合、ビジュアル状態ではなくテキストエディタ状態でやります。編集中は見た目が一切分かりませんが、プレビューで目次を確認できます。maipyonブロックエディタの場合、カスタムHTMLブロックに書き込みましょう!目次を綺麗に見せるCSS以下のCSSで目次を完成品のようにきれいに見せることが可能です。underline}色を変更したい場合は、コメントを入れている場所をいじることで簡単に変更可能です。5に対応するように2021/05/09に変更しました。マークを変更したいのであれば、「FontAwesome」から選んでみてください。目次の上に広告を追加したい場合ここまでできて、実際に追加して綺麗な目次ができていたら、「この目次の上に広告を追加したいんだけどなぁ」と思う方もいるかもしれません。目次の上に広告を置くのは、かなりクリック率がよく、ほぼ全員置いているように感じます。やり方としては、最初にfooterに追加したコードの一番下側の部分を以下を参考にして変更しましょう。Adsenseにてコピーしてきたコードを貼り付けます。(/*と*/は消してね)ここで、注意点が二つあります。改行を無くす</script>の部分を<\/script>にする改行があると、エラー判定になります。</script>の部分を<\/script>にすることで、きちんと広告コード全体を読み込ませることができます。(¥を入力でバックスラッシュになります)</script>は二か所あるはずですので、どちらにも追加しましょう!不安になりますが、実装後に数十分置いて、プレビュー画面に広告が表示されればOKです。プラグインなしで目次の作り方まとめ目次を設けることで自分の探している答えがページ内にあるかどうかがすぐにわかるため、ユーザにとって良いページになります。この記事を参考にして、きれいな目次を作成してユーザに優しいページ作りをしていきましょう!また、今回のような「プラグインを使わなくても簡単に機能を作ることができる」ようなものに関しては、できるだけプラグインを使わないよう心掛けるのがオススメ。以下の記事で、「それプラグインなしで実装できるよ」というものを紹介していますので、参考にしてみてください。WordPressブログのおすすめ・必須のプラグインってどれ?ブログ初心者はプラグインでどれを入れるべきか悩みがちですが、9つくらいに絞ってOK。プラグインなしでも実装可能な機能についてもまとめました。今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。け】WordPressのカスタマイズ方法の基礎を解説【手順紹介】WordPressのテーマ変更を崩れることなくする方法【100記事でも乗り換え可】チェックボックスをCSSで装飾してWordPress記事内で使おう【コピペでOK】この記事を書いた人maipyonWebクリエイターWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。雑記お問い合わせmaipyonWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。