ブログ運用

【ワードプレス】記事上に現在の年齢を表示させる方法【ショートコード】

8月 14, 2021

この記事は約8分で読めます。

この記事をおすすめする方

  • ワードプレスを利用している方
  • ショートコードを使って記事に「現在の年齢」を表示させたい方
  • ウィジェットなどのサイドバーやプロフィールでも「現在の年齢」を表示させたい方

当記事では、ワードプレスの記事やプロフィールなどにショートコードで「現在の年齢」を表示するためのプログラムの書き方をご紹介します。


ワードプレスには、現在の年齢を表示させるものがデフォルトで実装されていないので、自分自身で実装する必要があります。


※ワードプレスのテーマによっては実装されているものもあるようです。

ショートコードとは?

まず初めに、「ショートコード」について簡単に説明させていただきます。

(知ってるよという方は、この項目は飛ばしてください。)


ショートコードとは [ と ] で囲まれたもので構成されており、記事の中など任意の場所に挿入することで簡単に記事装飾などを行うことができる機能です。


ワードプレスの中では、「プラグインの機能」や「テーマ独自の機能」などを利用する際に「ショートコード」を使うことで簡単に実装したり装飾が出来る便利なものです。

例:下の「ショートコード」はワードプレステーマ「Affinger5」の「ブログカード」のショートコードです。「url=""」の「""」内にURLを記載することで、そのサイトの「ブログカード」を表示させることができます。

[st-card-ex url="" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore=""]

(情報量が多いように見えますが、ショートコード自体はワンクリックで挿入できますし、入力するものはURLだけです。)



ただ、ショートコードを利用する際には、実行するための「プログラム」を別に用意する必要があります。


普段「プラグイン」や「テーマ」独自の装飾などの機能がショートコードで使えるのも、プラグインやテーマ内に実行するための「プログラム」があるからです。


ですので、「プラグイン」の場合は、「無効化」したり「削除」してしまうと、「プラグイン」内のプログラムが実行されなくなってしまうため、「プラグイン」のショートコードの機能も使えなくなってしまいます。


また、ワードプレスの「テーマ」独自のショートコードを利用している場合も、別のワードプレスの「テーマ」に切り替えてしまうと、「テーマ」を構成するプログラムも変わってしまうため、「テーマ」独自の機能(ショートコード)も利用できなくなってしまいます。


今回ご紹介するショートコードに関しても、現在利用している「テーマ」内にプログラムを記載するため、別のワードプレスの「テーマ」に切り替えると使えなくなってしまいます。


そのため、別の「テーマ」に切り替えた後も利用したい場合は、同じようにプログラムを記載しなければショートコード(機能自体)が使えなくなってしまうのでご注意ください。

(一度記載したテーマは、「子テーマ」であれば基本的には再度記載する必要はありません。「親テーマ」の場合は「テーマ」のアップデートが行われると削除されてしまう可能性がありますので「子テーマ」に記載することをおすすめします。)

導入方法


さっそくですが、導入方法を説明したいと思います。


やるべきことは次の2点です。


  • 一つは「現在の年齢を計算するための処理」を書いたプログラムを「functions.php」に貼り付ける。
  • 二つ目は、「現在の年齢」を表示するために記事内にショートコードを貼り付ける。


というわけで、次の項目から導入方法の詳細説明をさせていただきます。

「現在の年齢を計算するための処理」を書いたプログラムを「functions.php」に貼り付ける。

「functions.php」 にはテーマにとって重要なことが書かれているファイルです。
元々書いてあるプログラムを消してしまうと、最悪不具合が起きてしまう可能性がありますので、不安な方は事前にバックアップを取っておくことをおすすめします。
今回説明する内容は、 「functions.php」 の一番下にプログラムを一つコピペするだけの作業なので、そこまで難しくはないのですが、不安な方はバックアップをお願します。


まずは「functions.php」にプログラムを貼り付ける作業の説明をさせていただきます。


ワードプレスの管理画面を表示している段階から話を進めさせていただきますので、ワードプレスの管理画面を開いてください。


そして、ワードプレスの管理画面の左側のメニューから「外観」⇒「テーマエディター」をクリックしてください。

テーマのアップデートの際にプログラムが消えてしまう可能性があるので、「親テーマ」ではなく、出来れば「子テーマ」に書くことをおすすめします。


次に「テーマエディター」を開いたら、右側のメニューから「functions.php」を探してクリックしてください。

テーマによってメニューの並び方が若干違うと思いますが、どこかに「functions.php」はあると思います。


「functions.php」をクリックしたら、画面中央のエディタをスクロールして一番下まで移動させてください。

※一番下に記載したほうが分かりやすいためです。

エディタの一番下までスクロールさせたら、下のコードをコピーして貼り付けて下さい。


function getAge($birthday)
{
		
	extract(shortcode_atts(array('birthday' => date('Ymd'),), $birthday));

	$now = date('Ymd');
	
	if (is_numeric($birthday) == 1 && 0 <= $birthday && strlen($birthday) >= 5 ) { //数値が0以上かつ5桁以上であれば現在の年齢を返す
		
		return floor(($now-$birthday)/10000);	
	
	}else{
		
		return "NA";	//それ以外の数値であれば"NA"を返す。
		
	}
	
}
add_shortcode('age', 'getAge');

参考

コードの流れを簡単に説明すると、自分が記載した「生年月日」を取得し、「現在の年月日」から引いて10000で割ったものを記事に表示させています。

「生年月日を記載する場所」と「現在の年齢を表示させる場所」は後程説明するショートコード側になります。


上の画像の①のようにコードを貼り付けたら、左下の「ファイルの更新」をクリックして保存してください(上の画像の②)。

貼り付けたプログラムの上の行に


「/*↓これは現在の年齢を計算するためのプログラムです。*/」


という感じでコメントアウトしておくと、何のプログラムか分かりやすいのでおすすめです。

メモ

「/*」と「*/」の間に任意の文字列を書くと「コメントアウト」になります。

(「/」(スラッシュ)と「*」(アスタリスク)を組み合わせます。)

コメントアウトとは、プログラムの実行に影響しない「メモ書き」のようなものです。


下の画像のように「ファイルの編集に成功しました。」という表示がされれば大丈夫です。


以上で完了です。

※↓補足説明のために再度プログラムを表示させていただきます。

function getAge($birthday)
{
		
	extract(shortcode_atts(array('birthday' => date('Ymd'),), $birthday));

	$now = date('Ymd');
	
	if (is_numeric($birthday) == 1 && 0 <= $birthday && strlen($birthday) >= 5 ) { //数値が0以上かつ5桁以上であれば現在の年齢を返す
		
		return floor(($now-$birthday)/10000);	
	
	}else{
		
		return "NA";	//それ以外の数値であれば"NA"を返す。
		
	}
	
}
add_shortcode('age', 'getAge');


補足ですが、「14行目の"NA"は生年月日以外の文字列、もしくは未記入の場合には「現在の年齢」を『NA』と表示させる」という処理を行っています。

もし、空白で表示させたい場合はNAを削除して""のみに変えてください。

また、「NA」以外の文字列で表示したい場合は「NA」を任意の文字列に変更してください。


それから、10行目に関してですが、現在のプログラムのままだと「現在の年齢の数字のみ(例:26)」を表示させることになります。

もし仮に、「現年齢26歳」など前後に文字列を付け足して表示させたい場合は、

return "現年齢".floor(($now-$birthday)/10000)."歳";


という形に変更すれば解決します。

参考

※"任意の文字列"と.(ピリオド)で文字列を前後に付け足して表示させることが出来ます。

記事などに表示するためにショートコードを貼り付ける。

最後に、表示させたい箇所にショートコードを貼り付ければ完了です。

メモ

貼り付けられる場所は、投稿ページ、固定ページ、後はウィジェットなどです。

(ウィジェットは、ワードプレスの管理画面から【外観】⇒【ウィジェット】です。)


ここでは、投稿ページに貼り付ける形で説明させていただきますので、


ワードプレス管理画面から【投稿】より、現年齢を表示させたい記事を開いてください。


貼り付けるショートコードは

[age birthday = '生年月日の数値のみをここに記入する']


です。


''の間に生年月日の数字のみを記載します。


年は和暦ではなく西暦で入力する必要があります。


例えば西暦2000年8月20日が生年月日であれば「20000820」という形ですね。

月や日が1月や8日など一桁の場合は0を付け足す必要があるので気を付けてください。 ※例「8月⇒08、3日⇒03」


記載したショートコードが以下のようになります。(例:2000年8月20日の場合)

[age birthday = '20000820']


「クラシックエディタ」の場合、このショートコードをビジュアルエディタ側で記事内に直接貼り付けて下さい。

「ブロックエディタ」の場合も、同じく記事内に直接ショートコードを貼り付けて下さい。

下の画像は「クラシックエディタ」で貼り付けています。


プレビューを確認すれば下の画像のような結果になるはずです。

(ただし、「現在の年月日」によって結果が変わるので、あくまで参考としてご覧ください。)


以上で全て完了です。

まとめ

というわけで、記事などに現在の年齢を表示させるための説明をさせて頂きました。


ショートコードで表示するので、基本的に投稿ページはもちろん、サイドバーのプロフィールなどでも利用することが可能です。


是非利用してみてください。


閲覧ありがとうございました。

-ブログ運用
-, ,