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

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

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

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

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

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

WordPress環境での前提
考え方
- コンセプト
- 実現のために
実装
- 実際に書いたコード
- 特記
もう少し発展させたいこと

WordPress環境での前提

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

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

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

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

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

考え方

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

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

コンセプト

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

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

実現のために

以下をJavaScriptで書きました。

ol属性の子（li）の個数を調べる（＝コメント数）
最後のコメントの「id」属性を取得する
対象の「id」属性へ移動する

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

実装

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

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

実際に書いたコード

リスト部分はデフォルメです。
そもそも、コメントは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>