WordPress 簡単なウィジェットを作ってみる part1 クリスマスまでのカウントダウン

別にウィジェットでしないとできないわけでもないんですが、ウィジェットなら時期が過ぎれば外せばよいですし、必要な時に必要なだけ、任意の場所に入れられると言うことでウィジェットでクリスマスまでのカウントダウンを表示するものを海外のサイトから拾ってきました。

今回はそれらをちょっと解説と言うことで。

ソースはこれだけです。

まず最初にadd_actionから。
add_actionはどういう時にウィジェットを登録するかみたいな感じです。add_filterでも同じことですが、actionとあると直感的にわかりやすいです。つまりは、上記スクリプトであれば、widgetがinit、つまり初期化された時にchristmas_countdown_widgetを動作させるという感じになります。

christmas_countdown_widgetは、次にある、function christmas_countdown_widget()で書かれていますが、register_widgetというのでウィジェットの登録をします。登録するということですが、実行する一覧に追加するという感じですかね。

christmas_countdown_widgetは、PHPのclassというオブジェクト指向なスクリプトな書き方で、wordpressが元々持っているWP_Widgetと言うのを継承して作ります。継承ってのは説明が難しいですけれども、例えば何かしらの請求フォームがあって、会社名やら電話番号やらをその会社ごとに作っていては大変なので、ひな形みたいのを作っておいて、一部修正を加えて作るというような意味合いです。

ここで言うひな形(テンプレート)がWP_widgetで、修正を加える処理がclass Christmas_Countdown_Widget extends WP_Widgetと理解すれば分かり良いかも知れません。

class ウィジェット extend WP_Widget

は、親に当たるWP_Widgetを継承してChristmas_Countdown_Widgetを作りますぜと言う宣言をしています。これらは先ほど書いたようにオブジェクト指向なスクリプトなので、オブジェクトを作りますが、何ぞそれって事になりますよね。よく世間では「部品」と言われます。けど、部品ってなんだよってなりますよね。

先ほどの請求フォームで言えば、どこに何をどのようにするかを処理させるということなんですが、例えば○○株式会社というのもあれば、株式会社○○というのもあったり、株式会社でない会社や、個人商店などもあります。元々のひな形には○○株式会社と入っている部分を部品と見立てて、こういう時はこんな部品にしようってのが、その意味合いです。

作成するclass Christmas_Countdown_Widgetは3つのパートで作られています。
ひとつはコンストラクタ、そして、そしてwidgetです。それぞれが関数になっており、処理を書いて行きます。通常のWidgetにはここにupdateというのが加わります。

コンストラクタ部分

コンストラクタは初期設定と言う感じです。つまり、これから作る部分のおおよその内容といいますか、概要を書きます。parent::__constructは親になるWP_Widgetのコンストラクタを使うぜって感じです。jQueryのプラグインで言う所のデフォルトのプラグインオプション(ユーザーが変更せずとも有効になっているオプション。つまりはデフォルト値)を作るみたいな感じです。

codexによると、

こんなふうに書かれていますが、なんのこっちゃかわかりません。そこで、そもそもの親のWP_widgetはどのように書かれているかがこれになります。
wordpressの/wp-include/widget.phpがそれにあたります。

こんな感じで書かれています。__constructの引数には、$id_base, $name, $widget_options = array(), $control_options = array()とあるのでこれらを設定すれば良いことになります。これら引数は、__construct以前に書かれているのでどういう値が必要なのかはそれぞれのコメントでわかります。基本的に、引数に何も記載がない場合はfalseが入るので必要なものだけ入れれば良い感じになりそうです。

Christmas_Countdown_Widgetのコンストラクタ部分では、

こんな感じで書かれていますが、つまり、base_IDが「christmas_countdown_widget」でnameが「Christmas Countdown Widget」更にwidget_optionsが「A simple Christmas countdown」にするという感じです。これらのnameとdescriptionはWordpressのウィジェット画面でのフォームに表示される部分です。何かで読んだ気がしますが、base_idの部分は基本小文字だったかと思います。

フォーム部分

次にformの部分ですが、先程も書いたように、Wordpressのウィジェット画面に表示される部分です。通常のウィジェットはタイトルはもちろん、どういう操作をするかの項目が入っています。text widgetなら、textareaが入っていて、文字を入力できるようになっているでしょうし、カテゴリウィジェットなら「ドロップダウン表示・投稿数を表示・階層を表示」などにチェックを入れてそれぞれの項目の有効・無効の設定ができるようになっています。
フォームの部分は、基本これら設定画面を作るという感じです。作ったものを何と言う変数に入れておくか、等の設定も必要になると思います。ここらの細かな作り方は他のウィジェットの作成を説明されているサイトか書籍に任せます。なんせ今回のchristmas_countdown_widgetでは値は何も入力しませんので単純にformを用意して、コンストラクタで作った名前とその説明を表示するだけとなっています。

これは、作成したchristmas_countdown_widgetをサイドバーに入れたり、あるいは他のwidgetを挿入できる箇所に入れるための部品を「表示するため」だけのものです。

widget部分

次にwidget部分ですが、ここはwidgetの表示部分になります。つまり、wordpressの画面に表示する時にどのように表示するかの部分です。なので、「christmas_countdown_widget」では、

Time to Christmas: 3ヶ月

などと表示されることになります。さて3ヶ月の部分ですが、これはwordpressの関数で、human_time_diff()というのが利用されています。7日とかではなく1週間と言うような人間が使うような感じの単位で表示してくれるものです。

以前、別の内容で以下のブログカードみたいのを書きました。そこでも利用しています。

PHP 2つの日付の差から経過時間を求めてみる
前にWordpressで使用されていたhuman_time_diffと言う関数を利用して件名の内容を書いたことがあったんですが、引っ越しした...

って思ってたんですが、今ブログカードの記事を見たら使われてなかったという(笑)
まぁ色々と調べたり、いじくってみて下さい(投げやり

このwidgetの部分をうまく条件分岐して、仮にその当日前になったら、今日は「クリスマス・イブ」とか、当日になったら「Happy Merry Christmas!!」などと表示することができます。

human_time_diff()では、mktimeと言うのが使われてますが、ここのYearに当たる部分がdate(Y)になっていることから、その年の西暦がここに入るため、何もしなくてもこのカウンタは、クリスマスが過ぎた時に364(あるいは365?)日などと表示するだろうと思います(試してないんで知りませんけど)。つまり延々とクリスマスまでは何日かを表示し続けるわけです。

なので、条件の中に、その年の12/25よりも数値が大きくなったらと言う条件を付けて、echoで出力する部分全体に

としておき、cssで

を入れれば、次の表示の時まで消しておくことができます。動作は裏でずっとしてるんですけどね。それが嫌な場合は、ウィジェットの画面から取り外せばよいだけです。

本来はupdateもある

ウィジェット画面のformで何かしら入力されたり、条件があった場合、それに基づいて出力を変更する必要があったりします。たいていは入力された内容が問題ないかをチェックしたり、あやしい動作をしそうな部分からstrip_tags()などでタグをとったり色々とする部分がupdateです。

ここで更新された内容が、function widgetの部分で表示されます。もちろん表示されるための処理も必要ですけどね。

まとめ

こんな感じに、ウィジェットは作られて表示されます。オブジェクト指向な部分と、その考え方(継承とかオーバーライドとか)がわかりにくい部分でもありますが、wordpressはその機能として色々と便利な関数を持っているので、それらを駆使して便利なウィジェットができれば、サイトを飾る部品として有用に利用できるかと思います。

これらウィジェットを作成したりする場合は、是非一度wordpress関係の書籍を読んで、どういう構造になっていて、どうすれば思ったことができるのかをよく勉強しておく必要があるかと思います。しかも、wordpressの4.2だったか4.1だったかあるいは4.0かも知れませんけど、仕様が変わったところでもあるので、最新のwordpress本を読むのが良いかと思います。

web上のサイトは比較的古い情報が検索のトップに出てきがちです。SEOのせいなんですけどね(笑)
古い記事はGoogleでも期間指定で検索から除去できるのでその全てではありませんが、古い記事をそのまま鵜呑みにすると、気が付かないところでnoticeなどが出たりする原因になったりするので、WordPressの公式サイトcodex本家などから間違いなく現在のwordpressで利用できる書き方を調べてスクリプトを作っていくのが良いかと思います。

英語なんでアレなんですけどね。日本語のcodexもあるんですけど、知りたいことに限って翻訳されてなかったりするので。あと、PHPの7もそろそろ勉強するのが良いかも知れませんね。使い方自体は大きく変わってはいないと思うんですが仕様が変更されたりして、今までなら問題なかったものが問題が出たりすることがあったり、もっと便利な書き方があったりすることもあるかと思うので、そろそろ見とく方が良いかと思います。

スポンサーリンク

シェアする

フォローする