Kaffee

[ad_tag id=”1828″]

WordPressで任意の場所に日付や現在時刻をショートコード で表示させたい!

WordPressの記事内に自動的に今日の日付を取得して挿入したくなることはありませんか?
プラグインを探しても見当たらず、ネットで検索すると、記事や固定ページにブロック挿入するものではなく、PHPを記述する方法ばかりが紹介されます。
「いやいや そうじゃないんだよな・・・」
もっと手軽に、簡単に、現在時刻を表示したいのですよ。

ことの発端は、とあるリゾート系サイトのトップページ制作のできごと。
ファーストビューのメインビジュアルに、閲覧時の現地の気象情報を掲載したいとのリクエストがありました。

天気ウィジェットのプラグインは、デザイン的にも、設定できる地域の細かさ的にも、満足できる物がありません。
特に、設定できる地域の区分が、せめて市区町村レベルで欲しい。
もっと言えば、山ひとつ挟んだ北側と南側のリアルタイム気象情報を掲載したい!とのこと。

答えは…  無理!

何その限定エリア!気象庁発表とか天気ニュースのソースのレベルじゃないじゃん!
いまからそんなモノ開発して納期に間に合うわけないじゃん!
そもそも、誰か現地で気象データ取ってるの? 

というわけで、インバウンド対応のために選定した海外製のWordPressテーマに、年・月・日を自動表示させることになりました。

問題はその方法。

使えそうなプラグインがないので、直接phpコードを記述するのが手っ取り早いのですが、テーマのアップデートで動作しなくなる可能性が高い上に、設置した当人以外、どこに何を記述すれば良いのか判らなくなる問題が…。

そこで、テーマの「functions.php」へ日付・現在時刻取得とショートコード 化の追加記述をし、日付を入れたい場所に、ショートコードで現在時刻を表示をさせる方法を採用しました。

メリット

  • ショートコード でどこにでも入れられる。

デメリット

  • 「functions.php」にphpコードを記述するため、テーマのアップデート時や変更時に機能しなくなる。(「functions.php」に再記述しなければならない。)

[ad_tag id=”1832″]

方法

上記のメリット、デメリットを検討の上で、下記の要領で実装してみてください。

日本語表記で表示する

まずは日本語表記のコードから紹介します。

「functions.php」に記述するコード

基本的なphpはこちら。

/* 今日の日付を呼び出すショートコード */
function shortcode_today() {
    return date_i18n("Y年n月j日(D) G:i s");
}
add_shortcode('today_date', 'shortcode_today');

「return date_i18n(“Y年n月j日(D) G:i s”);」で現在時刻を取得。

「add_shortcode(‘today_date’, ‘shortcode_today’);」でショートコード [today_date]に設定しています。

functions.phpの場所

このスクリプトを「functions.php」に追記するわけですが、「functions.php」がどこにあるかわからなければ話になりません。

WordPressで編集

[外観]→[テーマの編集]→「functions.php」

または

FTPソフトで編集

[wp-content]→[themes]→[使用しているテーマのフォルダ]→「functions.php」

です。

実際に編集を始める前に、「functions.php」のコピーをとってくことを推奨いたします。

記事や固定ページに記述するコード

さらに、記事への挿入コードはこんな感じ。

<p>本日は[today_date]です。</p>

上記コードの[]は半角[]に置き換えてください。

実際の表記はこんな感じ。

本日は[today_date]です。

表記のカスタマイズ

目的に合わせた現在時刻の表記方法は様々ですよね。

表記方法によってphpのコードが変わりますのでご注意ください。

西暦の表記
phpコード
/* 今日の西暦を呼び出すショートコード */
function shortcode_today_year() {
    return date_i18n("Y");
}
add_shortcode('today_year', 'shortcode_today_year');
HTMLコード
<p>本日は[today_year]年です。</p>

※上記コードの[]は半角[]に置き換えてください。

実際の表示

本日は[today_year]年です。

月の表記
phpコード
/* 今日の月を呼び出すショートコード */
function shortcode_today_mon() {
    return date_i18n("n");
}
add_shortcode('today_mon', 'shortcode_today_mon');
HTMLコード
<p>本日は[today_mon]月です。</p>

※上記コードの[]は半角[]に置き換えてください。

実際の表示

本日は[today_mon]月です。

日の表記
phpコード
/* 今日の日を呼び出すショートコード */
function shortcode_today_day() {
    return date_i18n("j");
}
add_shortcode('today_day', 'shortcode_today_day');
HTMLコード
<p>本日は[today_day]日です。</p>

※上記コードの[]は半角[]に置き換えてください。

実際の表示

本日は[today_day]日です。

曜日の表記
phpコード
/* 今日の曜日を呼び出すショートコード */
function shortcode_today_week() {
    return date_i18n("D");
}
add_shortcode('today_week', 'shortcode_today_week');
HTMLコード
<p>本日は[today_week]曜日です。</p>

※上記コードの[]は半角[]に置き換えてください。

実際の表示

本日は[today_week]曜日です。

時の表記
phpコード
/* 今の時を呼び出すショートコード */
function shortcode_today_hour() {
    return date_i18n("G");
}
add_shortcode('today_hour', 'shortcode_today_hour');
HTMLコード
<p>今は[today_hour]時です。</p>

※上記コードの[]は半角[]に置き換えてください。

実際の表示

今は[today_hour]時です。

分の表記
phpコード
/* 今の分を呼び出すショートコード */
function shortcode_today_minu() {
    return date_i18n("i");
}
add_shortcode('today_minu', 'shortcode_today_minu');
HTMLコード
<p>今は[today_minu]分です。</p>

※上記コードの[]は半角[]に置き換えてください。

実際の表示

今は[today_minu]分です。

秒の表記
phpコード
/* 今の秒を呼び出すショートコード */
function shortcode_today_sec() {
    return date_i18n("s");
}
add_shortcode('today_sec', 'shortcode_today_sec');
HTMLコード
<p>今は[today_sec]秒です。</p>

※上記コードの[]は半角[]に置き換えてください。

実際の表示

今は[today_sec]秒です。

[ad_tag id=”1836″]

まとめ

いかがでしょうか?

「functions.php」に追加記述する方法は、ある程度WordPressやPHPについての理解が必要にはなりますし、定期的な管理が必要になりますが、「デザイン上どうしても現在時刻を表記したい!」という時に使ってみてはいかがでしょうか?

英語表記に関しては、別記事で紹介します。

最後に、当記事に関連して記述しているコードをまとめたものを記載しておきます。

/* 今日の日付を呼び出すショートコード */
function shortcode_today() {
    return date_i18n("Y年n月j日(D) G:i s");
}
add_shortcode('today_date', 'shortcode_today');

/* 今日の西暦を呼び出すショートコード */
function shortcode_today_year() {
    return date_i18n("Y");
}
add_shortcode('today_year', 'shortcode_today_year');

/* 今日の月を呼び出すショートコード */
function shortcode_today_mon() {
    return date_i18n("n");
}
add_shortcode('today_mon', 'shortcode_today_mon');

/* 今日の日を呼び出すショートコード */
function shortcode_today_day() {
    return date_i18n("j");
}
add_shortcode('today_day', 'shortcode_today_day');

/* 今日の曜日を呼び出すショートコード */
function shortcode_today_week() {
    return date_i18n("D");
}
add_shortcode('today_week', 'shortcode_today_week');

/* 今の時を呼び出すショートコード */
function shortcode_today_hour() {
    return date_i18n("G");
}
add_shortcode('today_hour', 'shortcode_today_hour');

/* 今の分を呼び出すショートコード */
function shortcode_today_minu() {
    return date_i18n("i");
}
add_shortcode('today_minu', 'shortcode_today_minu');

/* 今の秒を呼び出すショートコード */
function shortcode_today_sec() {
    return date_i18n("s");
}
add_shortcode('today_sec', 'shortcode_today_sec');
<p>本日は[today_date]です。</p>

<p>本日は[today_year]年です。</p>

<p>本日は[today_mon]月です。</p>

<p>本日は[today_day]日です。</p>

<p>本日は[today_week]曜日です。</p>

<p>今は[today_hour]時です。</p>

<p>今は[today_minu]分です。</p>

<p>今は[today_sec]秒です。</p>

[ad_tag id=”1839″]