WordPressにリリース日のカウントダウンを追加する

Advertisement

使用しているWordPressテーマのアップデートが来ていたのでちょちょいと修正をして移行してみました。

 

ブログを運営されているDTMerにもWordpressユーザーは多いですね。

用途に応じたテーマも非常にたくさんありますし欲しい機能を網羅できるくらい豊富なプラグインもあり、余程無茶な要求をしない限りはありものの組み合わせだけでも対応ができるのが強みです。

その反面少し込み入った事をしたい時や独自の機能拡張をしたい場合、階層化に隠匿されている機能に阻まれて思うように手を入れられないという難しさもあります。

実際のところコア部分に手を入れなければならないような状況はまずないのですが、テーマに不足している機能やデザインの変更、プラグインの持つ固有のデザインとの協調など「ままならない」と感じる部分は割と多いのではないでしょうか?

今回は音楽系ユーザー向けにリリース日のカウントダウンを実装するショートコードとWordPressで可能な限り手間をかけずに機能拡張やデザインの修正を行うためのポイントを紹介したいと思います。

話題が音楽関係じゃない?
コード書くの楽しいんだもの。
音楽ブロガー向けだからいいの!!

テーマの選択が最も重要

機能の拡張やデザインの修正などで最も重要になるのはテーマの選択です。

一見してすごく凝っている、素晴らしいデザインというテーマは目を引きますが、複雑すぎる内部デザインやCSSスプライトを使っているベースデザインの場合修正はほぼ絶望的と考えるべきです。

構造がシンプルでも自由度の高いデザインは存在しますし、デザインとロジックの分離が出来ている美しい設計のテーマを使用する方がSEO的にもメリットが大きくなります。

デザインとロジックの分離がしっかりできているテーマの場合ウィジェット間でCSSのクラス宣言に方言が発生していない事が多く、逆にテーマのウィジェット間でローカルなCSS宣言が多用されているテーマはウィジェットの配置で破綻したり修正に手間がかかる場合がありますので試用してから選択した方が良いです。

現在使っているMH Magazineは海外ベンダーのデザインテーマですが、非常に見通しの良い設計とコーディングで拡張性に優れています。
継続したメンテナンスやサポート体制もあり安心して使えるテーマだと思っています。
フリーのデモ版もあります。

WordPressのダッシュボードからも優れたテーマはたくさん見つける事ができますので使いやすいテーマを発掘してみてはいかがでしょう?

機能追加は子テーマ内で完結を目指す

テーマを決定したら修正する前に必ず子テーマを作成しておきます。
これは機能拡張に失敗したり、大きな改修が必要な際に一時的に機能制限運用を可能にするためにも必ずやっておくべき工程です。

オリジナルのデザインや機能の拡張を行う際には全て子テーマ内で処理を完結するつもりで分離を行う事で、後に別のテーマへ移行したい時にも子テーマのファイルを移行するだけで作業の大半を終了できるようになります。

子テーマのfunctions.phpとstyle.cssだけでもかなりパワフルな機能追加を行う事は可能ですし、プラグインの表示デザインをテーマに合わせて修正する程度であればstyle.cssの修正だけでも対応できてしまいます。

三種の神器でコードを操る

WordPressにおける三種の神器はフィルタ・アクション・ショートコードだと思います。

表示データを出力する前に呼び出される「フィルタ」、実行中のイベント毎に発生して処理を追加できる「アクション」、そして表示する情報をプログラマブルに処理にする「ショートコード」。

この三つと工夫があればそれだけ十分な機能を提供することができるようになります。

この中でもっとも簡単に扱えるのはショートコードです。
ブラケット([)で囲んだミニコードにadd_shortcodeで処理を割り当てる事ができます。

カウントダウンを実装してみる

色々なサイトで例示はたくさんありますが、敢えて音楽的ブログ的な使い方を紹介すると作品リリースのカウントダウンなどを簡単に実装することができます。

function relese_countdown($atts, $content = null) {
$atts = shortcode_atts(	array(
'head' => '',
'tail' => '',
'relese' => 0
), $atts, 'relese_countdown' );
// タイムスタンプを取得
$today = date_i18n('U');
if ($relese = strtotime($atts['relese'])) {
// リリース日より前なら残り日数を表示する
if ($today < $relese) {
// 時間差を求める
$diff = ($relese - $today);
$date_interval = ceil($diff / (60 * 60 * 24));
// コメントを整形
$relese_coment = $atts['head'] . $date_interval . $atts['tail'];
return $relese_coment;
// リリース日を過ぎているならコメントを表示する
} else {
return $content;
}
}
// 日付のエラーは何もしないで終了する
return '';
}
add_shortcode('countdown', 'relese_countdown');

このコードをfunctions.phpに追加するとリリースまであと何日という表示を簡単に実装できます。

2017.06.07 – 訂正

サンプルコードを修正いたしました。
WordPressはUTC処理を基本とするため、time関数の値が時差分だけずれていました。
WordPressでの作法はdate_i18n関数からUNIXタイムスタンプを取得する方法になります。

使い方

[countdown relese='2017-07-01' head='リリースまであと ' tail=' 日!!']2017.07.01 RELESE!! 店頭へ急げ!![/countdown]

ショートコードをWordPressの記事内に書きこみます。
実際の動作は次の様になります。

2017.07.01 RELESE!! 店頭へ急げ!!

パラメーターは三つ。

relese :

リリース予定日、この日付になると自動的にショートコードに囲まれているリリース情報に表示が切り替わる。
中のテキストはリンク属性が付いていても反映される。

head / tail :

見ての通り。日付の前後に入れるテキスト。

現在の日時を参照する処理なので都度コード修正や記事の修正が不要になります。
装飾はWordPressのエディタ上で設定した通りに表示されます。
リリース日が来た時に表示されるコメントをdo_shortcodeに通してあげれば公開日になると画像や動画が表示されるようなアレンジも簡単にできます。

よく見かけるカウントダウンプラグインより単純な分非常に軽いです。

突っ込んでいけばいくらでも細かい事もできますが、WordPress自体が巨大なシステムなので過剰なコードは全体のパフォーマンスに悪影響を及ぼします。
プラグインを大量に投入しなくても短いコードで実装できる部分はショートコードを上手に使うことで欲しい機能を実装できないか検討してみると良いと思います。

プラグインの使い方

当サイトでも複数のプラグインを使用していますが、プラグインの組み合わせや使い方次第でも面白い事が可能になります。

DAWクラッシュレポートデータベースはContact Form 7 とContact Form DBだけで作ってあります。

Contact Form 7はメール問い合わせの作成が簡単にできる人気のプラグインで、Contact Form DBはContact Form 7で入力された情報をデータベースに保存することができるようになる拡張プラグインです。

これを組み合わせてContact Form 7で障害報告用のテンプレートを作成してContact Form DBでデータを記録。

Contact Form DBの出力機能を使用してカード形式のデザインにデータを出力してCSSでデザインを被せれば完成です。

これを応用すれば作品データベースや購入した機材や音源の管理リストなんかも簡単に作れます。

それでも改造しなければならないことも

子テーマのショートコード実装やプラグインの組み合わせなどではどうしても実現できない部分、それが「表示とテキスト」です。

WordPressの思想的にはプラグインに手を入れずにフィルタで処理できるように作ることが推奨されているのですが、そこまで美しく実装されているプラグインは少ないです。

むしろどうしても手を入れなければならずに蓋を開けるととんでもない事になっていることも少なくないので初心者にはオススメしたくありません。

また表示周りは極めて泥臭い対応を行う必要がある部分で、どんなに効率化しようとしてもベタ書きが一番早いなんてこともあるので一筋縄では行かなかったりします。

具体的にはWordPress popular postsプラグインの表示周りをテーマのデザインに合わせるため、ビュー・投稿日時・カテゴリーの部分にアイコンを設定するように直接コードを修正しています。

WordPress popular postsでは出力前にフィルタが設定されており最終的な出力をオーバーライドする方法は提供されているのですが、これをオーバーライドするという事は出力全体をパースして必要部分を書き換える操作が必要になり非常にコストがかかります。

こういったケースの場合、出力処理内にハードコーディングされているテキスト部分を直接書き換えてしまう方が手間もコストも低くすみますが、プラグインの更新で変更を失うという事でもあるので更新時に注意が必要です。
面倒さとパフォーマンスを秤にかけて選択していくのが望ましいと思います。

どんな変更も必ずバックアップを取ってから!!

レンタルサーバーではバックアップ環境がある事の方が珍しいかもしれませんが、修正時に失敗しても復元できるようにバックアップは必ず取っておくべきです。

いざという時はバックアップを書き戻してすぐに復帰できるようにするのが理想的です。

PHPは言語としては非常に簡単で気軽に扱う事ができますが、その分なんとなくで使ってしまうケースも割とあるように思います。
そういった気軽さがメリットでもありデメリットでもあるので、イージーミスでWordPress全体を止めてしまう事のないように機能を拡張するときは注意して実行してくださいね。

簡単な機能ならものの数分でどんどん追加できるのがWordPressの利点です。

ちょっとした工夫やアイディアで見る人を楽しませたりアナウンスへの活用をさらに進める事ができたりします。

PHPやJavascriptの知識が無ければ出来ないこともありますが、あんなことがしたい!!と思う事って意外と簡単にできちゃうものかもしれませんよ?

アイディアやご相談は大歓迎ですので是非コメントかTwitterまでお気軽にどうぞ。

Advertisement
みるくここあ
About みるくここあ 240 Articles
ウィンドシンセを片手に曲を作っています、演奏するのも聴くのも好き。 ゲームとITと変な情報を拾ってくるのが得意。 色々とやっているらしいけど詳細はヒミツ。 オリジナル曲を公開しています。 http://www.nicovideo.jp/mylist/31704203 作曲風景の生放送もしています。 https://rainbowsound.cafe/rainbow-sound-cafe-live/ 音楽やDTMに纏わる話題を色々と書きます。

あなたのコメントをお待ちしています

コメントをどうぞ

Your email address will not be published.