【JavaScript】SWELLでコピーライトを自動で最新年に変更してみた

ワードプレステーマのSWELLで、コピーライトの年を自動で最新年に変更する方法を解説します。

本来はサーバーサイド言語のPHPで変更したほうが良いと思いますが、SWELLでは無理そうでしたので、今回はJavaScriptを利用した方法で行います。

この記事で解説している方法はSWELL限定の方法ですので、他テーマでの動作は保証できません。

前提

SWELLの子テーマの準備が出来ていない人は、先に子テーマの反映と子テーマのJavaScript読み込み設定が完了している必要があります。

以下の記事が参考になるかと思います。

SWELL子テーマの反映

EDiT.

【実録】WordPress初心者が、人気テーマ「SWELL」をインストールしてみた！ | EDiT.

子テーマのJavaScript読み込み設定

WEMO

WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解して…

$timestamp_js = date('Ymdgis', filemtime(get_stylesheet_directory() . '/js/script.js'));
wp_enqueue_script('child_script', get_stylesheet_directory_uri() . '/js/script.js', [], $timestamp_js, true);

最新年に変更する方法

先に完成版のコードを貼っておきます。

!(function () {
  const $copyright = document.querySelector('.copyright'); // コピーライトの要素を取得
  const latestYear = new Date().getFullYear(); // 最新年を取得

  $copyright.innerHTML = '<p class="copyright"><span lang="en">©</span> ' + latestYear + ' サイト名 </p>';
})();

コード量は少ないですが、順番に解説していきます。

書き換え対象の要素を取得

const $copyright = document.querySelector('.copyright'); // コピーライトの要素を取得

今回の方法では、コピーライトのHTMLを取得して、取得した個所をまるっと上書きして置き換えるという方法をとっているので、まずは書き換え対象の要素を取得します。

.copyrightで書き換えたい対象要素をクラスで指定し、変数$copyrightに代入しています。

仮にidで取得したい場合はここが#copyrightのようになります。

最新年を取得

const latestYear = new Date().getFullYear(); // 最新年を取得

あまり深く考える必要はないですが、DateオブジェクトからgetFullYear()でそのページが表示されたときの西暦を取得できます。

getFullYear()以外にも月や日、時間なども取得できるので、興味が湧いたら自分で調べてみて下さい！

ここでは取得した最新年をlatestYearという変数に格納しています。

コピーライトを上書きする

$copyright.innerHTML = '<p class="copyright"><span lang="en">©</span> ' + latestYear + ' サイト名 </p>';

$copyright.innerHTMLは１行目で取得したコピーライトの中の要素という意味です。

=の右側は実際に表示したいHTMLが書かれています。

右側で取得した最新年や表示したいサイト名を記載します。

コピーライトの表示を変更したいときは、ここをお好みで変更して下さい。

次回以降コピーライトを変更したいときは、少し手間ですがここから変更しなければいけません。

まとめ

全体を囲っている!(function(){})();は即時関数といって、定義と同時に実行させたいときに使用します。

頭の!はJavaScriptが圧縮（minify）されたときに隣り合う関数などのコード同士で意図しないプログラムが実行されないようにつけておきます。

以上JavaScriptでコピーライトを自動で最新年に変更する方法でした。