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

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

今回は、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 PGothic","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
  font-size: 3em;
  text-align: left;
  filter: alpha(opacity=50);
}