WordPressでイベント情報などをカスタム投稿タイプで管理するプラグインの作り方

2013-09-12 WordPress

アーティストの公式サイトや、イベントごとを多く行う会社など、イベント情報を頻繁に更新するサイトをWordPressで構築する場合、カスタムポストタイプで構築するのが凄く便利です。

運用時の説明で楽をするために、カスタム投稿を使いたい。
カレンダーから日付を選択する形になっていれば、操作が楽。

このあたりをクリアするため、投稿タイプを作るかなあと思っていたところ、WebOpixelさんが、さらに細かく解説されている記事を発見！

webOpixel
WordPressのカスタム投稿タイプでイベント情報ページを作ってみる

実際に使わせていただいたところ、非常に使いやすかったのですが、この機能を使う案件が結構ありそうだったこともあり、自分用にプラグイン化してみましたので、cssやjsの絡むWordPressプラグインの作り方を紹介します！

実際にfunctions.phpやcss、jsや画像などの設定を、WebOpixelさんの記事の通り実装してある事を前提としています。

プラグインの名前など、基本情報を決める

管理画面で有効化したり、フォルダ名を決めるためにも、基本情報を決定しなくてはいけません。
あくまで自分用なので、適当に「WP Event Post Type Manager」としました。

まずはテスト環境上に構築したWordPressの wp-content/plugins ディレクトリに、今回作るプラグイン用ディレクトリ、「wp-event-posttype-manager」を作りましょう！

プラグイン情報を設定する

wp-event-posttype-managerディレクトリの中に、event-post-type.php というファイルを作りました。
その中に、

<?php
/*
Plugin Name: WP Event Post Type Manager
Plugin URI: http://90zbear.com/
Description: WebOpixelさんの記事をもとに作られた、イベント情報を管理するプラグイン
Author: 90zbear
Version: 0.1
Author URI: http://90zbear.com/
*/
&#91;/php&#93;

こんな感じで設定情報を入力しましょう。テーマを作る時のstyle.cssみたいな感じなので、テーマを作った事のある人なら戸惑わないのではないでしょうか。

この状態で、WordPressのプラグイン一覧を見ると

<img class="alignnone size-full wp-image-572" src="http://vm-me5cr6vfix.sova.bz/wp-content/uploads/2013/09/event-posttype-1.png" alt="event-posttype-1" width="1390" height="140" />

こんな感じでプラグインが追加されます！
<h1>functions.phpの内容をごっそり移植する</h1>
まだ、設定情報だけで何も実行しない状態なので、中身を作ります。
イベント情報を作るために記述したfunctions.phpの中身をごっそり、設定情報のコメントアウトの後ろにコピー＆ペーストで追加します。

その後、functions.phpのコピー元となった部分をまとめてコメントアウトするなり、削除するなり、そもそもファイル名を変えてしまうなりして、無効化しましょう。

無効化することにより、イベント投稿タイプが使用できなくなっていることを管理画面上で確認してからプラグインを有効化すると、イベント投稿タイプが復活します！
<h1>jsとcssディレクトリを設定する</h1>
これで、プラグインとして使用できるようにはなっていますが、まだjsやcss、画像ファイルがテーマディレクトリから呼び出されるようになっていますよね。

まずは、wp-event-posttype-managerの中に、設定したcssディレクトリとjsディレクトリをごっそりコピーして、移動したファイルは、ちゃんと移動先から読めているか確認するため、テーマファイルから削除。

この状態では投稿画面で日程を選択しようとしても、cssやjsのパスが通っていないので、datepickerは起動しませんよね。

<img class="alignnone size-full wp-image-573" src="http://vm-me5cr6vfix.sova.bz/wp-content/uploads/2013/09/event-posttype-2.png" alt="event-posttype-2" width="1228" height="356" />

そこで、WebOpixelさんの記事で設定した、jsやcssのディレクトリを設定している部分にある

[php]
wp_enqueue_style('ui-datepicker', get_bloginfo('template_url') . '/css/jquery-ui-1.10.3.custom.min.css');
wp_enqueue_script('ui-datepicker', get_bloginfo('template_url') . '/js/jquery.ui.datepicker.min.js');
wp_enqueue_script('datepicker-ja', get_bloginfo('template_url') . '/js/jquery.ui.datepicker-ja.js');
wp_enqueue_script('myjs', get_bloginfo('template_url') . '/js/myjs.js');

このあたりの設定を変更しましょう。

「get_bloginfo(‘template_url’)」をごっそり全部「plugin_dir_url( __FILE__ )」に書き換え。
多分実行速度なんかでは、直接パスを設定した方が良いんだろうとは思いますが、汎用性を持たせるために、こうしておきました。

event-posttype-3