【wordpress】wordpressプラグインをフレームワークでさくっと作ってみる【サイト構築】

久しぶりの更新はwordpressプラグインをさくっと作ってみるやり方。う、うまくできるかな。。

とりあえずやってみます。

wordpressプラグインをさくっと作ってみる

プラグインを作成する。なんだかとっても敷居が高く感じますね。

しかし、手順を覚えてしまえばそんなことありません。
今日は慣れてみるためにjQueryプラグインをさくっとプラグインとして管理画面からUIで操作できる簡単なプラグインを作ってみましょう!

用意するもの

ちょっと用意するものがあります。

あ、ちなみに今日この記事で完成を目指すjQueryプラグインはこちらです。

jQuery Content Slider | Responsive jQuery Slider | bxSlider


シンプルなレスポンシブスライダーです。
ちなみにこのプラグインはユニークなライセンスのWTFPLを使用しているので著作権はご心配なく。

用意するもの

  • bxSlider本体
  • sunrise – wordpress plugin framework –

    こちらはプラグインを少しでも楽に作るために使用するプラグイン作成用のフレームワークです。
    他にも結構種類ありますので、自分のスキルにあわせて他のものを使用してもいいでしょう。
  • 開発環境

    XAMPやMAMPでローカル環境構築してもいいですし、Bitnamiを使用してさくっと作るもよしです。

    ちなみにBitnamiはインストール型のアプリケーションなんですが、すっごく簡単にローカル環境構築できます。
    他にもCMSのいろんなパッケージがありますので試してみてください。

まぁ、他にもテキストエディタなどいりますがそこは各自使いやすいものを用意してください。

まずは「sunrise」プラグインをインストール

まずはsunrise からダウンロードしてきたプラグインをインストールしてみましょう。

また、プラグイン検索で「sunrise」と検索しても一番上にでてきます。


スクリーンショット_2013-04-14_20.53.08

最初は名無し状態ですね。では早速プラグインの名前から変えてみます。

プラグイン名やらなんやらを設定するのは/sunrise.phpです。
もちろんフォルダ名やらファイル名、クラス名なども変更することができますのでお時間がある方は制作してみてください。(手抜き…)
[tabs style=”1″]
[tab title=”変更前”]
[php]
add_settings_page( array(
‘parent’ => ‘options-general.php’,
‘page_title’ => $sunrise->name,
‘menu_title’ => $sunrise->name,
‘capability’ => ‘manage_options’,
‘settings_link’ => true
) );

// プラグインのアクションファイルをインクルード
require_once ‘inc/plugin-actions.php’;

// Make plugin meta translatable
__( ‘Author Name’, $sunrise->textdomain );
__( ‘Vladimir Anokhin’, $sunrise->textdomain );
__( ‘Plugin description’, $sunrise->textdomain );
?>
[/php]
[/tab]
[tab title=”変更前”]
[php]
add_settings_page( array(
‘parent’ => ‘options-general.php’,
‘page_title’ => $sunrise->name,
‘menu_title’ => “bxSlider”,
‘capability’ => ‘manage_options’,
‘settings_link’ => true
) );

// Include plugin actions
require_once ‘inc/plugin-actions.php’;

// Make plugin meta translatable
__( ‘Author Name’, $sunrise->textdomain );
__( ‘Vladimir Anokhin’, $sunrise->textdomain );
__( ‘Plugin description’, $sunrise->textdomain );
?>
[/php]
[/tab]
[/tabs]

すると….
スクリーンショット_2013-04-14_20.56.30

ちゃんとプラグイン情報が反映されました。
最初はこれだけで感動的だったんですがねー。
数々の経験で僕の心はあらされてしまいました。。

bxsliderのファイルをあるべきところに納める

次はbxsliderのコアファイルをsunriseのプラグイン内に移動させます。

基本どこでもいいんですが(カスタマイズさえできれば)、今回はassetsフォルダ内にコピーします。
まずはbxSliderからダウンロードしてきたzipファイルを解凍しましょう。
するといろんなファイルが出現しますが、移動するべきファイルはjquery.bxslider.jsjquery.bxslider.css
その2つのファイルをそれぞれ「sunrise」フォルダ内の「assets/js」「assets/css」にコピーします。

スクリーンショット_2013-04-14_21.13.55

次は管理画面を見てみます

下準備はここまで。いよいよphpでファイルを作成していきます。

今回使用している「sunrise」というプラグインはものすごい便利なフレームワークです。
もう最初から画像をアップロードしたりだとか、セレクトボックスだとかを管理画面に出力させる仕組みが構築されています。
phpに恐怖を覚えている方でも大丈夫。気軽にいってみましょう

option.phpで管理画面への出力を操る

さて、まずは管理画面への出力はどうすればいいのって話ですね。

sunriseではassetsincclasseslanguagesというフォルダが内包されています。

このフォルダ名は結構いろんなプラグインでも命名されていることが多いです。

assets
直訳で「財産」って意味です。プラグインで使用するcssやjs、imageファイルを保存する場所です。
inc
「include」の略です。この中のphpファイルを組み込んでいってプラグインを構築していきます。
classes
ここにはプラグインのコアとなるファイルが保存されています。
怖いもの見たさで下手にいじってはいけませんが、もっとカスタマイズする際は手を出さなければ行けません。
languages
フォルダ名から想像する通り、.moや.poなどの言語ファイルが保存してあります。
多言語化を考えた作りになっています。

[browser-shot url=”http://web-layman.com” width=”600″]

他のプラグインやwordpressテーマの中にはこういった命名がされていることが多いので、覚えておくと便利かも知れません。

では早速プラグインを本格的に制作していきます。

まずは、「inc/sunrise/option.php」から見ていきましょう。

[tabs style=”1″]
[tab title=”変更前”]
[php]
__( ‘about’, $this->textdomain ),
‘type’ => ‘opentab’
),
array(
‘type’ => ‘about’
),
array(
‘type’ => ‘closetab’,
‘actions’ => false
),
array(
‘name’ => __( ‘Standard fields’, $this->textdomain ),
‘type’ => ‘opentab’
),
array(
‘name’ => __( ‘Text input’, $this->textdomain ),
‘desc’ => __( ‘Text input description’, $this->textdomain ),
‘std’ => ‘Default value’,
‘id’ => ‘text’,
‘type’ => ‘text’
),
array(
‘name’ => __( ‘Textarea’, $this->textdomain ),
‘desc’ => __( ‘Textarea description’, $this->textdomain ),
‘std’ => ‘Default value’,
‘id’ => ‘textarea’,
‘type’ => ‘textarea’,
‘rows’ => 7
),
array(
‘name’ => __( ‘Checkbox’, $this->textdomain ),
‘desc’ => __( ‘Checkbox description’, $this->textdomain ),
‘std’ => ‘on’,
‘id’ => ‘checkbox’,
‘type’ => ‘checkbox’,
‘label’ => __( ‘Checkbox label’, $this->textdomain )
),
array(
‘name’ => __( ‘Radio buttons’, $this->textdomain ),
‘desc’ => __( ‘Radio buttons description’, $this->textdomain ),
‘options’ => array(
‘option1’ => __( ‘Option 1’, $this->textdomain ),
‘option2’ => __( ‘Option 2’, $this->textdomain ),
‘option3’ => __( ‘Option 3’, $this->textdomain )
),
‘std’ => ‘option1’,
‘id’ => ‘radio’,
‘type’ => ‘radio’
),
array(
‘name’ => __( ‘Select’, $this->textdomain ),
‘desc’ => __( ‘Select description’, $this->textdomain ),
‘options’ => array(
‘option1’ => __( ‘Option 1’, $this->textdomain ),
‘option2’ => __( ‘Option 2’, $this->textdomain ),
‘option3’ => __( ‘Option 3’, $this->textdomain )
),
‘std’ => ‘option1’,
‘id’ => ‘select’,
‘type’ => ‘select’
),
//省略

array(
‘type’ => ‘closetab’
),
);
?>
[/php]
[/tab]
[tab title=”変更後”]
[php]
“このプラグインについて”, //name:タブの名前
‘type’ => ‘opentab’ // view/opentab.phpをinclude
),
array(
‘type’ => ‘about’ // view->about.phpをinclude
),
array(
‘type’ => ‘closetab’, // view/closeyab.phpをinclude
‘actions’ => false
),
//タブ1終了

//タブ2スタート
array(
‘name’ => “スライダー設定”, //name:タブの名前
‘type’ => ‘opentab’ // view/opentab.phpをinclude
),
array(
‘name’ => “スライダー名”, //name:項目の名前
‘desc’ => “スライダーの名前を入力してください。”, //項目の説明
‘std’ => ‘bxSlider’, //デフォルト値
‘id’ => ‘text’, //フロントエンドで呼び出す際に使用します。必ず被らないようにしましょう。
‘type’ => ‘text’ // view/text.phpを呼び出す
),
array(
‘name’ => “画像1枚目”,
‘desc’ => “1枚目の画像をアップロードしてください。”,
‘std’ => ‘Default value’,
‘id’ => ‘image01’,
‘type’ => ‘upload’,// view/upload.phpを呼び出す
),
array(
‘name’ => “画像2枚目”,
‘desc’ => “2枚目の画像をアップロードしてください。”,
‘std’ => ‘Default value’,
‘id’ => ‘image02’,
‘type’ => ‘upload’,
),
array(
‘name’ => “画像3枚目”,
‘desc’ => “3枚目の画像をアップロードしてください。”,
‘std’ => ‘Default value’,
‘id’ => ‘image03’,
‘type’ => ‘upload’,
),
array(
‘name’ => “アニメーション”,
‘desc’ => “アニメーションを選択してください。”,
‘options’ => array(
‘fade’ => “フェード”,
‘horizontal’ => “水平方向”,
‘vertical’ => “垂直方向”
),
‘std’ => ‘horizontal’,
‘id’ => ‘select01’,
‘type’ => ‘select’
),
array(
‘type’ => ‘closetab’
),
//タブ2終了
);
?>
[/php]
[/tab]
[/tabs]

では、設定画面を開いてみます。

スクリーンショット 2013-04-15 23.20.22

サイドメニューの「設定」 -> 「bxslider」にはすでにプラグインの設定画面が構築されました。
今回はあまり時間もなかったので、3枚の画像をアップロードさせる機能とアニメーションの設定に限定します。
これで管理画面側の準備は整いました。
inc/viewフォルダ内のphpファイルは今回使用した意外にもたくさん用意されていますのでいろいろ試してみてください。

では次のステップへ。フロントエンドへの出力をやっていきます。

plugin-action.phpをいじる

フロントエンドへ出力する方法はいろいろありますが、今回は簡単にfunctionで関数を定義して、テーマ内のテンプレートの好きな場所で呼び出すということをやってみたいと思います。(てぬk

[tabs style=”1″]
[tab title=”変更後”]
[php]
get_option(‘option.phpで設定したid名’)で管理画面で保存したデータを出力できます。
$output .= ‘

‘.$sunrise->get_option(‘text’).’

‘;
$img01 = $sunrise->get_option(‘image01’); //メディアの場合は保存場所のurlが出力されます。
$img02 = $sunrise->get_option(‘image02’);
$img03 = $sunrise->get_option(‘image03’);
$output .= ‘

‘;
echo $output;
}
?>
[/php]
[/tab]
[/tabs]

汚いコードですがご了承ください。

これでindex.phpなどに[php][/php]と書き込めばそこに出力されます。

ですが、このままではjsファイルやcssを読み込んでいません。また、アニメーションの設定・jQueryの呼び出しもまだなので

次は「inc/sunrise/assets.php」を編集します。

[tabs style=”1″]
[tab title=”変更前”]
[php]
slug . ‘-backend’, $this->assets( ‘css’, ‘backend.css’ ), false, $this->version, ‘all’ );
wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( $this->slug . ‘-backend’, $this->assets( ‘js’, ‘backend.js’ ), array( ‘jquery’ ), $this->version, false );
}

// Enqueue frontend assets
else {
wp_enqueue_style( $this->slug . ‘-frontend’, $this->assets( ‘css’, ‘frontend.css’ ), false, $this->version, ‘all’ );
wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( $this->slug . ‘-frontend’, $this->assets( ‘js’, ‘frontend.js’ ), array( ‘jquery’ ), $this->version, false );
}
?>
[/php]
[/tab]
[tab title=”変更後”]
[php]
slug . ‘-backend’, $this->assets( ‘css’, ‘backend.css’ ), false, $this->version, ‘all’ );
wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( $this->slug . ‘-backend’, $this->assets( ‘js’, ‘backend.js’ ), array( ‘jquery’ ), $this->version, false );
}

// フロントエンドのCSS,jsを呼び出す
else {
wp_enqueue_style( $this->slug . ‘-frontend’, $this->assets( ‘css’, ‘jquery.bxslider.css’ ), false, $this->version, ‘all’ ); //jquery.bxslider.css
wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( $this->slug . ‘bxslider’, $this->assets( ‘js’, ‘jquery.bxslider.js’ ), array( ‘jquery’ ), $this->version, false ); //jquery.bxslider.js
//wp_head()内に以下のコードを追加
add_action(‘wp_head’, ‘bxSliderScript’, 9);
function bxSliderScript() {
global $sunrise; ?> //$sunriseをグローバル化

        });
        </script>
    <?php }
}

?>
[/php]
[/tab]
[/tabs]

よし….これでスライダーが表示されるはずです。

スクリーンショット 2013-04-15 23.52.10

(出来栄えはともかくとして)プラグインが完成しました!

もちろんもっと作りこめばそこら辺のプラグインに遜色ないものが出来上がりますよー。

なんかこれはこうした方がいいなんてことがあったら教えて下さい。

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です