【jQuery】 jquery.simplePopup 書き直し

【2015年8月26日 ver2.0.9 更新】

仕事で使うために作ったプラグイン。

リンク先の画像などをブラウザ・ウィンドウ内にポップアップ表示するJavascriptライブラリはたくさんありますが、数が多すぎてどれがいいのか分からないのと、本体以外にCSSファイルや画像が必要であったりとややこしい。

最低限、一つのファイル(プラグイン本体のJSファイル)で設置できて、自分にとって使い勝手がいいものを勉強がてら作ってみよう、というのが4年前に作り出したきっかけ。

ドキュメント作成・備忘録も兼ねてアップ。
リンク先をウィンドウ内にポップアップ表示するjQueryプラグイン

jQuery.simplePopup-【jQueryプラグイン】

WORDPRESSプラグインのテンプレート

私的記録。

WordPressのテーマやプラグインは便利ですよね。
既存のプラグインを組み合わせて使うと、あら不思議、それなりにWEBシステムが出来てしまうではありませんか(^_^;)

あまりにも便利なので、自分でも足りない機能を作ってしまいたい、と思うのは当然でしょう。

というわけで、プラグインをすぐ作れるようにスケルトン的なテンプレートを記録。

Add Html Code

このスケルトン・プラグインは、wp_head,wp_footerのアクションを登録するプラグインである。
要するにテーマのヘッダとフッタに好きなHTMLコードをインジェクトするプラグイン。

このスケルトンは4つのファイルで構成されています。

■プラグイン本体 (addhtml.php) まずはこれがないと。

<?php
/*
Plugin Name: Add HTML code for WordPress
Description: Add head or foot html code
Version: 1.0
Author: Kenji Nakagawa
License: none
*/

//start up!
require_once(dirname( __FILE__ ) .'/addhtml-common.php');

if(is_admin())
{
  require_once(dirname( __FILE__ ) .'/addhtml-setting.php');
  AddHtmlCodeSetting::register(plugin_basename(__FILE__));
}
else
{
  require_once(dirname( __FILE__ ) .'/addhtml-doaction.php');
  AddHtmlCode::register();
}

?>

以下、これまで散々関数名のバッティングに悩まされてきたので、片っ端からclass作って、staticメンバ関数に放り込んでます。

■共通変数と関数 (addhtml-common.php)

<?php
class AddHtmlCodeCommon
{
  protected static $options;

  protected static function unescape($str)
    {
      $str = str_replace("\\\"","\"",$str);
      $str = str_replace("\\'","'",$str);

      return $str;
    }
}

?>

■設定管理ページ (addhtml-setting.php)

<?php
class AddHtmlCodeSetting extends AddHtmlCodeCommon
{
  private static $plugin_file;

  public static function register($pfile)
    {
      self::$plugin_file = $pfile;
      // addon check
      if ( !function_exists( 'add_action' ) )
        {
          echo "I'm just a plugin, not much I can do when called directly.";
          exit;
        }

      add_action('admin_menu', __CLASS__.'::option');
      add_filter( 'plugin_action_links', __CLASS__.'::action', 10, 2 );
    }

  public static function action( $links, $file )
    {
      if($file !== self::$plugin_file)
        return $links;
      
      array_unshift( $links, '<a href="options-general.php?page=addhtmlcode">設定</a>');
      return $links;
    }
  
  public static function option()
    {
      add_option('addhtmlcode');
      add_options_page('Add Html Code設定', 'Add Html Code', 10, 'addhtmlcode', __CLASS__.'::options_page');
    }

  public static function options_page()
    {
      // フィールドと設定項目名のための変数
      $opt_name = 'addhtmlcode';
      self::$options = get_option($opt_name);

      // ユーザが何かの情報を投稿したかどうかをチェックする
      // 投稿していれば、このhiddenフィールドの値は'Y'にセットされる
      if($_POST['action'] === 'update')
        {
          // 投稿された値を読む
          self::$options = array();
         
          self::$options['header']  = $_POST['header'];
          self::$options['footer']  = $_POST['footer'];

          // データベースに値を設定する
          update_option( $opt_name, self::$options);

          // 画面に更新されたことを伝えるメッセージを表示
          echo '<div class="updated"><p><strong>設定が保存されました。</strong></p></div>';
        }

      self::$options['header'] = self::unescape(self::$options['header']);
      self::$options['footer'] = self::unescape(self::$options['footer']);

      // 設定変更画面を表示する
?>
<div class="wrap">
<div id="icon-options-general" class="icon32"><br></div>
<h2>Adding HTML Code</h2>
<p>
 ※ヘッダー、フッターに任意のHTMLコードを挿入します。<br>
 このプラグインを適用させるには、テンプレートヘッダ(header.php)・フッター(footer.php)にそれぞれ、
 wp_head(),wp_footer()を記述する必要があります。
</p>
<form name="form1" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
<?php wp_nonce_field('update-options'); ?>

<h3 class="text-box-title">ヘッダー&nbsp;<span>&lt;head&gt;タグ内に挿入されます。</span></h3>
<textarea name="header" class="text-box"><?php echo self::$options['header']; ?></textarea>

<h3 class="text-box-title">フッター&nbsp;<span>&lt;/body&gt;直前付近に挿入されます。</span></h3>
<textarea name="footer" class="text-box"><?php echo self::$options['footer']; ?></textarea>

<p class="submit">
<input type="hidden" name="action" value="update">
<input type="hidden" name="page_options" value="header,footer">
<input type="submit" name="Submit" value="設定を更新する">
</p>

</form>
</div>
<style type="text/css"><!--
form { padding: 1em; margin-top: 1em;}
.text-box { display: block;width: 80%; height: 10em; margin-bottom: 3em;padding: 0.5em;}
.text-box-title { margin-bottom: 5px;}
.text-box-title span { font-size: 80%; color: green;}
--></style>
<?php
    }
}

?>

■実際の出力 (addhtml-doaction.php)

<?php
class AddHtmlCode extends AddHtmlCodeCommon
{
  public static function register()
    {
      // addon check
      if ( !function_exists( 'add_action' ) )
        {
          echo "I'm just a plugin, not much I can do when called directly.";
          exit;
        }
      
      self::$options = get_option('addhtmlcode');
      
      add_action('wp_head', __CLASS__.'::add_header');
      add_action('wp_footer', __CLASS__.'::add_footer');
    }

  public static function add_header()
    {
      echo self::unescape(self::$options['header']),"\n";
    }

  public static function add_footer()
    {
      echo self::unescape(self::$options['footer']),"\n";
    }
}

?>