WordPressの記事中にプラグインなしで目次を追加しました。SorairoSorairoAboutiPhoneWordPressWEBStationeryLifestylehomeWordPressWordPressの記事中にプラグインなしで目次を追加しました。WordPressの記事中にプラグインなしで目次を追加しました。2018WordPressTwitterFacebookGoogle+PocketはてなブックマークLINEFeedlyRSSテーマを自作してからも少しづつ機能を追加しているんですが、今日は、記事中にプラグインなしで目次を追加しましたので参考にした記事とともにご紹介します。今回の完成形は以下の画像の通りです。目次を作成するにあたって実装したかった機能がいくつかありました。見出しタグ(h2やh3など)から自動的に作成するページ内リンクはスムーススクロールさせたい過去記事にも自動的に挿入したい(新たに編集する必要がないようにしたい)以上のイメージでググってみた結果、いくつか参考になりそうな記事が出てきました。参考にした記事その中で実際に参考にしたのは以下の記事です。Plusers【WordPress】見出しから目次を自動生成。詳細は上の記事を読んでいただくとして、当ブログでの実装方法を記しておきます。jQuery最初にjQueryファイルを作成します。ファイル名はtoc.jsとしました。contentsの頭文字を取った略字ですね。中身は以下の通りです。h6",this).each(function(){なんですが、ここで見出しタグのh2やh3を指定する際に、当ブログでは.post_body内にある見出しタグだけを拾いたいので、見出しタグの前に.post_bodyを付しています。この辺はご自身のサイトに合わせて拾うべき見出しタグの指定を行ってください。下の方にはスムーススクロール等の記述があります。このファイルを保存し、サーバーにアップします。当ブログではテーマディレクトリのjsフォルダ内にアップしました。HTML続いては、先ほどアップしたtoc.jsをHTMLで呼び出します。任意の場所に以下を追加します。?>/js/toc.js"></script>もちろんjQuery本体も呼び出しといてください。ここまで順調にいけば、もう少しです。最後は記事中に以下のようにコードを記載すればその箇所に自動的に目次が表示されます。class="toc"></div>CSSご参考までに当ブログで指定しているCSSを記載しておきます。".";}入れ子リストの番号表示の指定ってCSSでできるんですね。カラクリ.jp最初のh2直前に自動的に表示させるここまででも十分なんですが、上記のままだと今後もそうですが過去記事も一つ一つ編集を加えないといけませんので大変です。そこでWordPressの万能神であるfunctions.php様に以下のように追加します。$the_content;}add_filter('the_content','toc_in');これだけで、記事中の最初に出てくるh2タグの直前に目次を自動的に表示してくれますので、過去記事も編集なしでオッケーです。最後にいかがでしたでしょうか。ショートコードを使って自分の好きな位置に挿入する方法でもいいんですが、それだと挿入し忘れたりするのでやっぱり全自動がいいですよね。あと欲を言えば表示、非表示のボタンを付けたいかなと思っています。これもできそうっちゃできそうなので時間があればやってみます。※H30.7.7追記ボタンは付けてないけど開閉式にしました。「CONTENTS」の部分をクリックすることで開いたり閉じたりします。分かりにくいけど果たしてそこまで開閉式が必要かなとも思い始めたので、あえて分かりにくくしました(笑)実装方法は別記事でご紹介します。posts私のブログ更新作業環境まとめ。2015WordPressブログを書く環境って大事ですよね。継続することの難しさはその環境のせいもあるかもしれません。テーマを自作する〜その2〜アイキャッチ画像に関するあれこれの1回目。2014WordPressテーマを自作するシリーズの第2回目は、WordPressでアイキャッチ画像を使えるようにするために必要なことについて調べてみました。テーマを自作する〜その3〜アイキャッチ画像に関するあれこれの2回目。2014WordPressWordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。2015WordPress新しいテーマに変更しましたので、ついでにカテゴリーも見直してみました。テーマを自作する〜その1〜投稿日などの日付表示を英語表記にする方法。2014WordPressWordPressのテーマを自作するにあたり、色々な壁にぶつかります。その解決法について自分の忘備録も兼ねてシェアしていきたいと思います。jQueryプラグインのLightboxを導入しました。2018WordPress画像を表示するときにフワッと拡大表示させるjQueryプラグインのLightboxを実装しました。2015WordPress初めて有料のWordPressテーマを購入しました。有料なだけあってデザインもいいし機能満載でブログ執筆意欲を掻き立てられます。2015WordPress色んな所で言われていることですが、少しでもカスタマイズするならやっぱり子テーマは作るべきですね、簡単ですし。2018WordPressプラグインは便利ですけど重たくなる場合があるためできるだけそれに頼らずテーマ作成を行いました。WordPressのオリジナルテーマを自作しました。2018WordPressテーマを変えたら自分でも作りたくなったので作ってみました。Sorairotwitterinstagram。