---------2018年:現在に至る2017年:フリーランスとして2社目の常駐案件で某IT企業の新領域開発部門のフロントエンド開発を担当。合計3つのプロジェクトに参加。2016年:フリーランスエンジニアとして独立。個人的な思いとしてはキャリアの再スタート。某旅行関連サイトのフロントエンド開発を担当。2009年:友人と起業。営業代理店やイベント事業等を取締役として経営。UI/UX目次wordpressで目次を実装こんにちは。フロントエンドエンジニアのキヨシ太夫です今日はwordpressの記事に目次を実装する手順を備忘録として残します。ちなみにプラグインなしで,jQueryで実装します。今回は、wordpressの目次実装です。当初はプラグインでサーバー側で実装しようかと思ったのですが、ざっとプラグインを見るとフロント側で完結しそうなロジックだったので、javascriptでやっちゃおうと。そもそも僕フロントエンドエンジニアだったし。条件としては以下になります。以下の条件が揃ってない場合は条件を揃えてから実装してください。目次にする見出しのhtmlタグが全て統一されていること$を使えるようにしておく。$」とかでググってください。アイコンとかはfontawesome使ってます。こちらもわからない方は、ググってください。モバイルやタブレットは適宜宜しくです。デモwordpress用目次作成。基本要件ページを読み込むタイミングで、目次のHTML要素を生成して表示する目次の表示は記事ページのみに表示する邪魔な場合もあるので、目次部分は開閉可能にする(=アコーディオンにする)せっかくなんで、見出しをクリックしたら該当箇所にウィーンってスクロールするようにするロジックざっとjavascriptの1行目から見ていきます。HTMLに関しては、目次を常時させたいテンプレートファイルに追加してください。基本記事用のテンプレートファイルってことですね。};});まず、ページの読み込み時にイベントの発火を設定します。その後に目次用の要素があるのかないのかを判定します。この判定はwordpressの記事用のテンプレートかを判断すれば良いので、サーバーサイドで最初から判定していても良いかもですね。$(".js-indexList").append(addList)});目次に使うテキストを取得して、”.js-indexList”の配下にHTMLとして追加していきます。いうのをページ内の”__h2′′の数だけ繰り返します。これで目次の基本は完成。false;});生成した目次をクリックするとスクロールしてページ内リンクに移動するようにします。ページ内のリンク先は12行目で既に設定済みなので、スクロールのアニメーションだけ実装します。注意点としては、通常の目次の見出し要素のクリックイベントではなく、documentに対してのクリックイベントにして、引数に各見出しを設定していることjQueryでは後から追加した要素に対して通常のクリックイベントは設定できません。×該当要素をクリックしたらスクロールする○クリックした要素が該当要素だったらスクロールするなんです。}});ここはもう説明することなしwボタンをクリックしたら、閉じたり開けたりするやつ最後にとりあえず簡単に実装しました。まあ今回は必要ないのだけど、この実装だと、見出しは作れても小見出しとかが作れないのが残念。目次の項目が一つだった場合に、目次とか表示する意味がないので、その場合は非表示にする処理を追記しました。javascriptの8行目と50〜52行目です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Reserved.-。