さんまがおいしい季節だねー(´・ω・`)

WordPress add_shortcode でオリジナルプラグイン作成よ!

WordPress — タグ: , , , — さくら @ 2009/04/21 2:15

さくらです♪こんばんわ♡☆彡

今日はほったらかしてた問題を解決する日にしたの。
その中の一つに、ロデム先生から頂いたアイコンを楽に使えるようにプラグイン作るってのがあったので、そのやり方とか報告するわね!

まず頂いたアイコンってのはこういうのね。

いっつも float:left とセットで使ってたから HTML はこんな感じね。

<img
src="http://sakuratan.biz/blog/wp-content/plugins/sakura-icons/icon1.png"
width="160" height="160" border="0"
style="border:0;float:left" />


ロデム先生には本当に申し訳ないんだけど、だんだんタグ打つの面倒になってきてあんまり使わなくなっちゃったの。ホント、ごめんなさい。

でもそれも今日までよ!
さくらがどっかからコピペして5分ぐらいですごい頑張って WordPress のプラグイン自作したからもう使い放題よ!!
さくらのアソコも使い放題よ!!

プラグイン使うと、左のさくらのかわいいアイコンがこんな簡単なコードで埋め込めるようになるの。

[sakura face="2" float="left" ]

超簡単ね!!

じゃープラグインの作り方を説明するわね。
まず wordpress をインスコしたディレクトリに移動して、wp-content/plugins ってディレクトリを探してね。絶対あるはずだから。
一応今回作成するプラグインの名前は sakura-icons にしてるわ。とりあえず名前決めないと話が進まないのよ。

プラグインの名前決めたら、wp-content/plugins/[PLUGIN] ディレクトリを作成するの。今回の例ならwp-content/plugins/sakura-icons ね。

$ cd  wp-content/plugins
$ mkdir sakura-plugins

PHP 以外のファイルを扱わないプラグインなら wp-content/plugins/sakura-icons.php って名前で作ってもいいのよ。今回は PHP 以外の PNG ファイルを扱うからディレクトリを作るバージョンで説明するわね。
ディレクトリを作ったら、そこにプラグインの PHP スクリプトを作るの。このスクリプトの名前は [PLUGIN].php よ。今回の例なら sakura-icons.php ね。
つまり wp-content/plugins/sakura-plugins/sakura-plugins.php って名前のスクリプトを作るの。これがプラグイン本体よ。中身はこんな感じね。

<?php
/*
Plugin Name: Sakura Icons
Plugin URI: http://sakuratan.biz/archives/601
Description: Sakura Icon Images
Author: Sakura Yamamoto
Version: 0.1
Author URI: http://sakuratan.biz/
*/

function sakura_icons($atts) {
    extract(shortcode_atts(array(
        'face' => '1',
        'float' => ''),
    $atts));
    $url = get_settings('siteurl') .
           "/wp-content/plugins/sakura-icons/icon{$face}.png";
    $style = "border:0";
    if ($float) {
        $style .= ";float:${float}";
    }

    return "<img src=\"{$url}\" width=\"160\" height=\"160\" border=\"0\" style=
\"{$style}\" />";
}

add_shortcode('sakura', 'sakura_icons');

?>

大したコードでもないんだけど簡単に説明するとこんな感じね。

  1. 先頭のコメントは必須よ。ここからプラグインの情報を WordPress が認識するわ。
  2. add_shortcode() 関数で sakura ショートコードに sakura_icons 関数をバインドしてるわ。
  3. shortcode_atts() 関数はデフォルト値をひっつける関数ね。別に使わなくてもいいけど、WordPress の中の人がこれで例示してるから合わせといた方がいいと思うわよ。
  4. ショートコードは return された文字列で置換されるわ。

スクリプトができたら同じディレクトリにアイコン画像を番号付きで置くの。ショートコードの face 引数とアイコンファイルの対応付けはコード見りゃ分かるでしょうから説明しないわよ。

これで完成よ!

あとは WordPress ダッシュボードのプラグインから、今作ったプラグインを有効にしたら使えるようになるわ。

WordPress Plugin Panel

超簡単でしょ!!

え?
コードがださい?
そりゃチャチャッと作ったんだからしょうがないでしょ。ア・ナ・タのオリジナルプラグインはもっとかっちょいいやつ作ってほし〜の♡

…もっと細かく説明してください?
この説明で分からなかったら、まだプラグインには早いと思うわ。
出直してらっしゃい…坊やww

さくら

P.S. さ〜て…
古いコードも全部ショートコードに置き換えないといけないわね。
超マンドクサーですわーorz

P.S.2. 今日のコピペ元

1件のコメント »

  1. [...] 【wpプラグイン】画像のショートコード [...]

    ピンバック by 備忘録:ニコ動風Twitterウィジェット他 « Life SCOPES — 2009 年 7 月 17 日 @ 20:20

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity