JSで最新投稿を強調表示する方法

JSで最新投稿を強調

    <p>WordpressのHPで投稿一覧を画面に表示するのはWPデフォルトやプラグインのウィジェット配置したりテーマ自体に強調機能入ってるものも多いです。</p>

今回は最新の投稿の強調表表を画面に埋め込むJS（＋CSS）で実装します。

JS（＋CSS）で作ったのは、下記の理由からです。

諸事情で権限的にphpファイルにアクセスできない
使っているテーマの強調表示が最新N件、といった指定方法で期間指定（投稿日からN日以内）ができない

また、この記事のコードは以下を前提としています。

固定ページ内に投稿一覧を表示しようとしている
「Shortcodes Ultimate」を使ってページに投稿一覧を埋め込んでいる

まずは以下のコードをページに埋め込みます。処理の内容は大体コメントで記載していますがやってることはざっくり以下です。

ページ内の一覧の各投稿をListで取得
投稿へのリンク（aタグ要素）からURLを取得
URLに投稿日付が含まれているので取得
ページを表示した日が投稿日からN日以内かチェック（コードは30日の例）
30日以内の場合インライン要素で文字列とCSSのクラスを追加

        <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-javascript'>function postsBlink() {
/** 投稿一覧を取得 */
const postsList = document.getElementsByClassName('su-post');
/** 各投稿のIDを取得 */
const idList = Array.prototype.map.call(postsList, function(postsList){ return postsList.id; })
/** 日付と強調表示期間（30日） */
const today = new Date();
const term = 30;
/** 投稿から30日以内のものをピックアップ */
const newIdList = idList.map((id)=&gt;{
    let aTagElement = document.getElementById(id).firstElementChild;
    /** URLから投稿日を抽出（正規表現で「0000/00/00」の形式を抽出） */
    let href = aTagElement.href;
    const datePattern = '[0-9]{4}/[0-9]{2}/[0-9]{2}';
    const postDateString = href.match(datePattern)[0];
    /** 投稿日と投稿日から30日後の日付を算出 */
    const postDate = new Date(postDateString);
    let postDateLimit = new Date(postDateString);
    postDateLimit.setDate(postDate.getDate() + term);
    /** 投稿日から30日以内の投稿であれば強調表示*/
    if(postDate &lt;= today &amp;&amp; today &lt;= postDateLimit) {
        /** 追加要素（インライン要素）生成 */
        const newElement = document.createElement(&quot;span&quot;);
        const newContent = document.createTextNode(&quot;　　NEW!&quot;);
        newElement.appendChild(newContent);
        /** 文字が点滅するCSSクラスを追加 */
        newElement.classList.add('blink');
        /** ニュース項目（aタグ要素）にインライン要素を追加 */
        aTagElement.appendChild(newElement);
    }
});

} / 画面描画後に処理を実行 / window.onload = postsBlink;

JSはあくまでクラス付与してるだけなので

CSSで以下のように強調表示するようにスタイルの定義を行います。

        <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-css'>.blink {
color: red;
-webkit-animation: blink 1s ease-in-out infinite alternate;
animation: blink 1s ease-in-out infinite alternate;

} @-webkit-keyframes blink { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes blink { 0% {opacity: 0;} 100% {opacity: 1;} }

JSとCSSが効いていれば以下のように表示されます。

（以下は常に強調表示させたいので日数制限外してます。）

他にも少し処理とスタイルを変えることでリンク自体を点滅表示させたりできるので必要に応じてカスタマイズできます。

今回は以上です。

JSで最新投稿を強調

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル