【WordPress】最新のコメントidへ移動するリンクをJavaScriptで実装

当サイトはWordPressを利用しています。
サイトに関する更新履歴を固定ページにコメントで記録しているのです。
コメントは時間順にしていますので、最新のものが一番下になります。

編集画面では最新が最上に来るのでよいのですが。。

更新履歴では最新のものが見たいはずです。
ということで、最新のコメントにページ内でジャンプする方法を考えました。

最新のコメントへジャンプ

結果として、JavaScriptでシンプルに実現できるではないかということになりましたので、コードを載せておきます。
ここからもう少し、JQueryを活かすなどアレンジしようと考えています。まずは動いたので備忘録です。
JavaScriptを使わない環境への配慮がありませんね。。

WordPress環境での前提

プログラムのイメージ

デフォルト状態を前提とします。テーマによっては変わっている可能性もありますので、ソースは個別に確認が必要です。

コメントは、olタグで書かれています。
olタグには、「comment-list」というclass名が指定されています。

個別のコメントはliタグでの羅列です。
liタグには、固有の「id」属性と、複数のclass名が指定されています。
固有の「id」属性は、自動で振られています。 これは、投稿も固定ページも跨ぐものです。
そのため、1つのページ内のコメントには、飛び飛びのユニークなIDが書かれているのです。

class名は、共通のものと個別のものがあります。

なお、コメントは上から日付順です。(最新が一番下です。)

考え方

WordPressの環境をフル活用する方針です。
テーマは編集しません。(やりたくないのでw)

HTMLの基本タグとJavaScriptを使います。
ページ内移動の指定先に、「id」属性を指定(デフォルトを利用)できるからです。

コンセプト

最新のコメントのIDが何になっているか分からないので、コメント数の最大値から、対象コメントの「id」属性を取得し、そこへ飛ぼうというコンセプトです。

コメントのid属性が自動採番になっているためです。

実現のために

以下をJavaScriptで書きました。

  1. ol属性の子(li)の個数を調べる(= コメント数)
  2. 最後のコメントの「id」属性を取得する
  3. 対象の「id」属性へ移動する

対象の特定には、クラス名を探す方法を採用しています。

実装

書き終わってしまえば大したことありません。
久しぶりにJavaScriptを書いて、ちゃんと動かなかったので焦りましたw

動きだしは、アンカー(<a>~</a>)から、「onClick」で呼んでいます。
HTMLの動きを止める記載(void(0)のところ)をお忘れなく。(ここでだいぶハマりましたw)

実際に書いたコード

リスト部分はデフォルメです。
そもそも、コメントはWordPressが組んでくれている部分で、今回の記述範囲外です。

JavaScript

<script type='text/javascript'>
function jumpToLatest() {
    var logSect = document.querySelector('ol.comment-list');
    var logMxcs = logSect.childElementCount;
    var logElmt = document.querySelectorAll('li.comment');
    var logIDnm = logElmt[logMxcs - 1].id;
    window.location.href = '#' + logIDnm;
    return false;
}
</script>

HTML

<p><a href="javascript:void(0);" onClick="jumpToLatest();">Jump</a></p>

HTML(参考)

ここは書いたわけではなく、参考です。

<ol class="comment-list">
    <li id="comment-010" class="comment">こめんと01</li>
    <li id="comment-121" class="comment">こめんと02</li>
    <li id="comment-232" class="comment">こめんと03</li>
    <li id="comment-343" class="comment">こめんと04</li>
    <li id="comment-454" class="comment">こめんと05</li>
</ol>

特記

「oi.comment-list」の子要素数を扱う時に、1減(-1)しないと動きませんでした。

今回記載分は、コメント数が0や1の場合のことは考慮されていないコードです。
すでに数件のコメントがある状態で書いたためです。

実際に書いてあるページは以下です。

wnkhs.netの更新履歴
当ブログの更新履歴を記録するためのページです。

もう少し発展させたいこと

ホームページ改修 01
諸々改善中です。

まずは、0件(1件も)対応と、JavaScriptを許可されていない環境からのアクセス対応です。
QRコードの件ではJS可否対応を実装できている(と思っている)ので、同じように対応する予定です。
HTMLを書き換える形にすればよいのだと考えています。

そして、オフセット対応を真剣に考えようと思います。
当サイトでは、PC表示の時にはメニュー位置を画面上部に固定しています。
半透明化しているとはいえ、ページ内移動の際にはオフセットが必要でしょう。
今のままではちょっとカッコ悪いですね。。

それから、スクロールにアニメーション属性を加えるかどうかを考えています。
この場合にはJQueryとなるわけで、未知の領域でもあるのです。
せっかくなので新しいことに足を踏み出していこうではありませんか!

この投稿を書いたのは・・・
Blog Admin

ガジェットが大好きで、ほぼ毎月何かしら調達しております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Admin」をフォローしてみる
ブログ関連
「Blog Admin」をフォローしてみる

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました