1サルワカさんをよく利用されている方は気付いていると思いますが、記事をスクロールして読み進めていくと、「今読んでる章の見出し」が画面上にずーっとくっついてきますよね?あれを付けたいなーと前から思っていたので、実践してみました。完成後の動作イメージはこんな感じ。https://kojikalog.com/wp-content/uploads/2018/08/2018-08-27_20h36_48.mp4もくじコピペ用コード1.途切れずなめらかに切り替わるバージョン2.ふわっと切り替わるバージョンカスタマイズ方法FTP経由の場合WordPressの管理画面から直接編集コードの解説さいごにコピペ用コードまず最初に全体のコードをご紹介しますね。SANGO子テーマPORIPUどちらかのテーマのfunctions.phpにコピペするだけで実装可能です。試してないので何とも言えませんが、対応するクラスやIDを適宜変更すれば、他テーマでも流用できると思います。functions.phpには、必ずどちらか1つだけ書き込むようにしてください。両方書き込まれているとブログ表示がぶっ壊れます!おすすめ情報!僕が開発しているSANGO専用WordPressプラグイン「SANGOサポーター」に、このカスタマイズを一発で完了できる機能があります!1.途切れずなめらかに切り替わるバージョン最初に公開したバージョン。ラベルが途切れず、中身の文字だけ変化します。}}2.ふわっと切り替わるバージョンサルワカさんのように、ふわっと表示が切り替わります。}}現在当ブログでは、こちらを利用しています。全体のコードだけご紹介しましたが、カスタマイズの流れが知りたい方はここから少しだけお付き合いください。カスタマイズ方法カスタマイズ方法は大きく2通りあります。FTPソフト等でファイルを編集してアップロードするWordPressの管理画面上から直接編集するどちらで行っても問題はありませんが、次の注意事項をよくご確認の上、安全に作業してください。ご注意こちらのカスタマイズは、テーマのfunctions.phpを編集します。書き方を間違えるとブログの表示が真っ白になったり、壊れてしまう危険があります。何かあった時に元に戻せるよう、作業前には必ずバックアップをとっておきましょう。編集するファイルはfunctions.phpの1つだけです。FTP経由の場合FTPソフトでサーバーに接続し、ご利用中のテーマのフォルダ直下にあるfunctions.phpをダウンロードします。ダウンロードできたらファイルを開き、適当な位置に冒頭のコードをまるごとコピペして保存しましょう。[テーマの編集]を開きます。右側のファイル一覧から[テーマのための関数(functions.php)]を選択して、画像にあるエリアのお好きな位置にコピペしましょう。そのまま保存したら終了です!コードの解説それぞれの関数の動きについて、”なめらかに切り替わるバージョン”をモデルにちょっとだけ解説します。ページが読み込まれて最初に実行される関数fixed_headlineの中身を見てみましょう。++;});この中では「entry-content」というクラスを持つh2からh6までのタグを一つずつ探し、それぞれの始まりの位置をposArrayという配列に格納していきます。ついでにそれぞれの見出しタイトルを取得して、上部に固定するラベルの要素もblockという変数に追加しています。jQuery('.article-footer').offset().top;その後、同じように「article-footer」クラスの始点の位置を変数footerに格納。article-footerは下部のフォローカードなどを表示している部分なので、ここまでスクロールしたら見出しラベルを非表示にする動作のためにこの処理が必要になります。'</div>');ここで、さっき作っていたラベル要素をDOMにぶら下げます。footerクラスの要素のあとに、after()を利用してねじ込ませるイメージですね。この時点で全ての見出しラベルは画面上部に隠れているわけです。fixed_headlinejQuery(window).scroll(headline_scroll).trigger('scroll');ここまでで、見出しラベルを表示するための前準備はできあがっています。画面がスクロールされた時にheadline_scroll関数を発火させるスクリプトです。このheadline_scroll関数は何者なのか?続いて見ていきましょう。}}ここでは、上部にガサッと量産した見出しラベルたちの表示/非表示の切り替えの処理を行っています。このカスタマイズのキモのような関数ですねw発火条件である「スクロール」が行われるたびに現在の位置と各見出しの位置をif文で比較して、その条件によってラベルを表示させたり消したり......。よめねこくどい!はるしか切り替えてくれるんだよ(投げやり)表示と非表示の部分で、また新しい関数が出てきました。hidden()とvisible(i)ですね。"hidden"});}ここはぶっちゃけ切り分ける必要もなかったのですけど、自分でわかりやすくする為にあえて関数化しました。やっていることは単純で、それぞれ「kjk_fixed_headline_blockクラスを持つ要素(ラベルのこと)のスタイルに、表示/非表示の値を付与する」だけ。これらの関数が組み合わさって、スクロールされた時に今現在読んでいる章の見出しのラベルのみ表示する動作が実現しているのです。さいごに今回のカスタマイズは”ほぼ”すべてJavascriptでの処理になります。phpはJavascripstを吐き出す為だけに動いているイメージですね。専用のjsファイルとcssファイルを作って読み込ませることでも再現できるカスタマイズです。この記事では「誰でもコピペでできる」ことを重視して、functions.phpに記述するかたちでご紹介しました。:WordPress関連記事たちこの記事を書いた人はるしか雑食系サラリーマンゲーム・漫画・アニメ・クルマ・ガジェットなど多趣味な雑食系で、わからないこと・気になることがあればすぐ調べないと気が済まないタイプ。集めた知識を独自の観点でお伝えしていきます。2018はるしかさん初めまして。雑食ブログのカスタマイズ参考にさせていただいてます。知識のない自分には大助かりです。此方の記事なのですが、書いてあるコードをコピペしてみたのですが何故か表示されませんでした。どのような原因が考えられますでしょうか?お手すきの時にでも一考いただければ幸いです。2018ぱいよんさん、当ブログのカスタマイズ記事を参考にしていただき、ありがとうございます!コードをコピペしても表示されないとのことですが、状況を知りえる手段がなく、あまり具体的なアドバイスができないかもしれません。考えられる原因としては、キャッシュが残っている、jQueryが読み込まれていない、コピペが不完全、などがありますね。農耕なのはキャッシュが残っている状態ですが、高速化のためにキャッシュ系プラグインなど利用されてませんでしょうか?ご確認ください。親と子テーマ(デモ版ではない方)を入れて、まっさらな状態でやりましたが表示されませんね。テーマのための関数(functions.php)に間違いなく入れたし、入れる場所も間違っていません。コピペミスもありません。スーパーリロードしても変わりませんね...どうしたものか。2018実装してみたところ、最初表示されなかったものの表示されました。表示されない方は、jQueryが読み込まれていない可能性が高いです。head内でhttps://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.jsなどの1行でjQueryを読み込んでみると、表示されるようになるかと思います。2018こんにちは!こちら、実装できて大変助かっております。2018chesさん、コメントありがとうございます。当カスタマイズをご利用いただけて嬉しいです!見出しのラベルを中央寄せにしたい場合、以下のコードを追加css、もしくはstyle.cssに追記いただければ実現可能かと思われます。*/お試しください!現在コメントは受け付けておりません。