【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";
    }
}

?>

jQuery.simplePopup 更新

http://hw001.spaaqs.ne.jp/k-nakagawa/jquery.plugins/SimplePopup/

ひさしくほったらかしていたjQueryプラグインを更新。ほとんど部分を書き直し・・・。修正しながら、Deferedオブジェクトの便利さを知って他のスクリプトの修正をやったりとか、packer(.NET版)のUIに手を加えたりと、本来の目的以外のことをやり出して脱線しまくり。

一番めんどくさかったのが、iPadでちゃんと表示できるようにすること。結局iframeでスクロールができない問題が残ってしまった。
でも、タッチデバイスを完璧とは言わないまでも、少なくともjavascript+jQueryでハンドリングする手順をマスターできたのでまぁ、いいか。