【WordPress】投稿記事内で時限を仕込むショートコード

WEB

ワードプレスの投稿ページや、固定ページ等のエディタ内で、一部を特定の期間だけ表示したいと思ったことはありませんか?

丁度そんな仕様が必要になったので、時限を仕込むショートコードを作成してみました。

コピペするだけで使用できるので、ぜひご覧ください。

ショートコード本体と仕様

まずはショートコードの中身をそのまま紹介します。

中身はこんな感じです。

今回の仕様として、

・特定の日時に表示、そこから出続ける
・すぐ表示され、特定の日時に消える
・特定の期間中だけ表示

この3パターンに対応しています。

これで網羅できてますよね。。?笑

使い方と使用例

まず、前述のコードをテーマフォルダにあるfunctions.phpに追記します。

次にエディタの中でショートコードを書くのですが、今回は囲み型のショートコード なので、時限を仕込みたい箇所をコードで囲みます。

そして、設定したい期間をY-m-d H:iの形式で引数に当てる、といった感じなのですが、言葉で説明すると難しいので具体例を紹介します。

使用する際の注意が2点あるので、それを確認した上で使ってください。

日付のフォーマットが違うと正常に動作しないので、慣れていない方は入力例をコピペして日付部分を書き換える感じで使ってください。
月の部分は2桁のフォーマットなので、1月から9月までは「01」のようにゼロを含めた数字で入力してください。

特定の日時に表示させる場合

エディタに以下のように記述しましょう。
(見やすくするために改行していますが、そこはお好みで調整してください。)

startの中に表示したい日時を上記のフォーマットに合わせて記入します。

上記の場合の出力結果として、

2019年9月14日の12時まで

コードを入力することで
それまでは表示されません。

と出力され、2019年9月14日の12時から

コードを入力することで
ここだけ2019年9月14日の12時に表示されます。
それまでは表示されません。

と出力されます。

今回は終了日時は入力していないので、それ以降は出続けます。

特定の日時で非表示にする場合

エディタに以下のように記述しましょう。
(見やすくするために改行していますが、そこはお好みで調整してください。)

endの中に非表示にしたい日時を上記のフォーマットに合わせて記入します。

上記の場合の出力結果として、

2019年9月14日の12時まで

コードを入力することで
ここだけ2019年9月14日の12時に消えます。
それまでは表示されています。

と出力され、2019年9月14日の12時から

コードを入力することで
それまでは表示されています。

と出力されます。

今回は開始日時は入力していないので、それまではずっと出ています。

特定の期間中だけ表示する場合

エディタに以下のように記述しましょう。
(見やすくするために改行していますが、そこはお好みで調整してください。)

startの中に開始日時を、endの中に終了日時を上記のフォーマットに合わせて記入します。

上記の場合の出力結果として、

2019年9月14日の12時まで

コードを入力することで
それ以外の期間は表示されません。

と出力され、2019年9月14日の12時から2019年9月15日の0時まで

コードを入力することで
ここだけ2019年9月14日の12時から2019年9月15日の0時まで表示されます。
それ以外の期間は表示されません。

と出力されます。

さらに、2019年9月15日の0時を過ぎると

コードを入力することで
それ以外の期間は表示されません。

という出力に戻ります。

仕組みの解説

ここからは詳しい仕組みを解説していきます。

前述の内容をコピペするだけでも使用できるので、興味のある方はご覧ください。

ショートコードの宣言

まずはショートコードである宣言です。

今回の場合、実際に書くコードが引数を用いていること囲み型であることから、

$atts
$content = null

これらが1行目の引数として記述されています。

$attsコードに入力された引数を取得し、$content = nullコードに囲まれた項目を取得(デフォルトでは空の状態)します。

引数の属性名とデフォルト値の設定

今回、仕様として3パターン用意しているため、開始日時と終了日時が必ずしも入力されるとは限りません。

そのため、2〜5行目でコードの入力時に引数が入力されなかった場合のデフォルト値としてnullを設定しています。

そのついでに、コードの入力時にわかりやすくするために属性名を設定し、それを配列のキーとしています。

現在の日時を取得

時限を仕込むには、当然現在の日時がわからないといけません。

まず、7行目タイムゾーンを設定しています。

設定されていない場合、デフォルトのタイムゾーンであるUTCが適用され、9時間の時差が生まれてしまいます。

 

次に8行目現在の日時を取得しています。

Y-m-d H:iの形式で取得していますので、月は2桁時間は24時間表記のフォーマットとなります。

取得した日時は$todayの変数に格納しています。

日時のフォーマットの詳細は以下のページを参考にしてください。

引数startの日時に表示

10行目startの引数が入力されているかつendの入力が空の場合の条件分岐を記述しています。

これにより、開始日時だけが入力されている場合の処理を行います。

 

11行目で、$todayに格納された現在の日時が、startの引数以上の場合の時条件分岐を記述しています。

言い換えれば、「現在の日時がstartの日時に達した場合」という分岐になります。

ここでポイントなのが、「>」ではなく「>=」を使い、「以上」という分岐にしている点です。

これにより、startの日時に達した時点で発火するので、startは「表示させたい日時」にすることができます。

 

最後に12行目$contentを返すことにより、コードで囲まれたコンテンツが上記の期間で出力されることになります。

引数startからendまでの期間に表示

14行目startとendの引数どちらも入力されているの場合の条件分岐を記述しています。

 

15行目で、前述の「startの引数以上」の条件に加え、$todayに格納された現在の日時が、endの引数より小さい場合の条件を記述しています。

言い換えれば、「現在の日時がstartの日時より後で、endの日時より前の場合」という分岐になります。

ここでポイントなのが、今度は先ほどと逆に「<=」ではなく「<」を使い、「より小さい」という分岐にしている点です。

これにより、endの日時に達した時点で非表示になるので、endは「非表示にしたい日時」にすることができます。

ここで「<=」を使ってしまうと、endのタイミングではまだ表示されており、その1分後に非表示になってしまいます。

 

最後に16行目$contentを返すことにより、コードで囲まれたコンテンツが上記の期間で出力されることになります。

引数endまでの期間に表示

あとは応用です。

startと逆の分岐をし、前述の通り「<=」ではなく「<」を使う、という点に注意しながら同様に記述しています。

引数が何も入力されていない場合

22行目elseを使うことにより、引数に何も入力されなかった場合は、そのまま出力するようにしています。

基本は無い動きですが、万が一入力されなかった場合のエラーを防ぐために記述しています。

最後に

かなり長い記事になってしまいましたが、解説は以上となります。

これをコピペして不具合が出た場合や、応用してアレンジしたいけどアドバイスしてほしい、等があれば、お問い合わせフォームやTwitter等でお気軽にお声掛けください。

タイトルとURLをコピーしました