Hatena::ブログ(Diary)

しばそんノート

2009-06-12

WordPressプラグインの作り方 〜フィルタ編〜

以下の記述は WordPress 2.8 日本語版 を前提としています。

WordPressプラグインの作り方メモ、その1。

WordPressで記事を書く際も「はてな記法」的な独自記法を使いたい…というような要望は、記事本文へフィルタをかけるプラグインを作成することによって簡単に実現できます。*1

こんな感じ。

<?php
/*
Plugin Name: My Content Filter
Plugin URI: http://d.hatena.ne.jp/shibason/20090612/1244781801
Description: 記事本文ではてな記法ライクな独自記法を使用できるようにします。
Version: 1.0
Author: shibason
Author URI: http://d.hatena.ne.jp/shibason/
*/

function my_content_filter($content) {
  /* 小々見出し記法 */
  $patterns[] = '/(^|\n)\*\*\*([^\r\n]*)/';
  $replacements[] = '$1<h5>$2</h5>';
  /* 小見出し記法 */
  $patterns[] = '/(^|\n)\*\*([^\r\n]*)/';
  $replacements[] = '$1<h4>$2</h4>';
  /* 見出し記法 */
  $patterns[] = '/(^|\n)\*([^\r\n]*)/';
  $replacements[] = '$1<h3>$2</h3>';

  /* リンク記法(タイトルあり) */
  $patterns[] = '/\[(http:|https:)([^:\]]*):title=([^\]]*)\]/';
  $replacements[] = '<a href="$1$2" target="_blank">$3</a>';
  /* リンク記法(タイトルなし) */
  $patterns[] = '/\[(http:|https:)([^\]]*)\]/';
  $replacements[] = '<a href="$1$2" target="_blank">$1$2</a>';

  return preg_replace($patterns, $replacements, $content);
}
add_filter('the_content', my_content_filter, 9); 
?>

正直はてな記法とは比較するのもおこがましいようなシンプルなフィルタですが、そこはまぁサンプルですのでご勘弁を。*2

ポイントは add_filter 関数に渡す第三引数です。ここにはそのフィルタの優先度を指定します。この優先度が小さいフィルタほど先に適用されます。

第三引数を渡さなかった場合、デフォルトの 10 が優先度として使われるのですが、そうするとWordPress組み込みのデフォルトフィルタが先に適用されてしまい、改行が br タグに変換されてしまったりと、正規表現をかける上で色々面倒な状態になってしまいますので、明示的に10より小さい値を指定して先にフィルタをかけてやる必要があります。

こいつを my-content-filter.php とかなんとか適当な名前で保存して、 wordpress/wp-content/plugins ディレクトリに放り込み、「プラグインの管理」画面で有効化。

すると

f:id:shibason:20090612132701p:image

こんな感じに入力した記事本文が

f:id:shibason:20090612132702p:image

こんな感じで表示されるようになります。

めでたしめでたし。

参考

WordPressプラグインの作り方 〜アクション編〜

以下の記述は WordPress 2.8 日本語版 を前提としています。

WordPressプラグインの作り方メモ、その2。

今回は、WordPressに用意されている2種類のフックのうちのもう一方、アクションを利用したプラグインを作成します。アクションフックを利用すると、任意の場所で任意の文字列を出力したり、他にも色々できたりします。

作成するプラグインですが、少し前にIE6で閲覧すると「アナログ」と表示するCSSが話題になりましたね。あれをパクって…そのままというのもアレなので、せっかくですから「アナログ」の代わりに「アナロ熊」を表示するようにしてみます。

こんな感じ。

ie6-analoguma.php
<?php
/*
Plugin Name: IE6 Analoguma
Plugin URI: http://d.hatena.ne.jp/shibason/20090612/1244799460
Description: IE6でアクセスされた際に、ページ右上にアナロ熊を表示します。
Version: 1.0
Author: shibason
Author URI: http://d.hatena.ne.jp/shibason/
*/

function add_analoguma_css() {
  $url = get_bloginfo('wpurl') . '/wp-content/plugins/ie6-analoguma/style.css';
  ?>
  <link rel="stylesheet" type="text/css" href="<?php echo $url; ?>" />
  <?php
}
add_action('wp_head', add_analoguma_css);

function add_analoguma_js() {
  $url = get_bloginfo('wpurl') . '/wp-content/plugins/ie6-analoguma/script.js';
  ?>
  <script type="text/javascript" src="<?php echo $url; ?>"></script>
  <?php
}
add_action('wp_footer', add_analoguma_js);
?>
script.js
if (/*@cc_on!@*/false && !window.XMLHttpRequest) {
  window.attachEvent('onload', function() {
    var div = document.createElement('div');
    div.setAttribute('id', 'analoguma');
    div.innerHTML = '      ┼╂┼<br />' +
        '    ∩_┃_∩<br />' +
        '    | ノ      ヽ<br />' +
        '   /  ●   ● |<br />' +
        '   |    ( _●_)  ミ<br />' +
        '  彡、   |∪|  、`\  <2011年7月24日までに<br />' +
        '  / __ ヽノ /´,>  )   IE6も停波しろクマー<br />' +
        ' (___)   / (_/<br />' +
        '  |       /<br />' +
        '  |  /\ \    アナロ熊<br />' +
        '  | /    )  )<br />' +
        '  ∪    (  \<br />' +
        '        \_)';
    document.body.appendChild(div);
    div.style.top = document.documentElement.scrollTop + 'px';
    window.attachEvent('onscroll', function() {
      div.style.top = document.documentElement.scrollTop + 'px';
    });
  });
}
style.css
@charset "utf-8";

div#analoguma {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  line-height: 1.125;
  margin: 0;
  padding: 1em;
  border: 5px solid #174415;
  background-color: #4DE849;
  color: #000000;
  font-family: "MS Pゴシック","MS PGothic","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
  font-size: 3em;
  text-align: left;
  filter: alpha(opacity=50);
}

メインのPHPファイル・JavaScriptファイル・CSSファイルの三部構成となっています。CSSファイルはトップJavaScriptファイルはボトムで読み込むのが良い、なんていう話もありますのでそんな感じで。

ちなみに、この add_action 関数にも優先度を指定することができるのですが、今回は読み込み順を考慮しなくていいので特に指定していません。

正直この程度の小ネタでいちいちファイルを分割するのは面倒ですが、そこはそれ、あくまでもサンプルということで。

これらのファイルをまとめて ie6-analoguma という名前のディレクトリにぶち込んで、そいつを wordpress/wp-content/plugins に放り込み、「プラグインの管理」画面で有効化します。

IE6で閲覧すると、

f:id:shibason:20090612180127p:image

うっすらと出てきます。右上っていうかほとんど全画面ですね。

しかも、

f:id:shibason:20090612180128p:image

スクロールしてもついてきます。

うぜぇ…。

参考

*1:記法の処理そのものの難易度は別として。

*2:ちなみに、もっときちんとしたはてな記法を使いたい方は、既にプラグインが存在しますので、そちらをお使いください。