1,156 views

この記事は最終更新から 2236日 が経過しています。

前回の (25) WordPressで設定画面付きプラグインを作成 では、任意のパラメータを WordPressの DB(wp_optionテーブル)に保存する方法を学習した。
今回はこれを応用し、少しだけ実用的なプラグインを作ってみる。

■やりたいこと

今までは 「外観」－「テーマの編集」に独自CSSを追記していたが、これだとテーマを変えたときに設定が引き継がれない。
「外観」－「カスタマイズ」－「追加CSS」もあるが、こちらは編集欄が狭い上にテーマを変えたときに設定が引き継がれない。

すなわち、テーマの編集とは別のところで独自CSSを設定したい。

■プログラム

wp_head()をフックし、このタイミング（＝</ head>出力直前のタイミング）で独自CSSを出力する。
設定データはDBの wp_optionテーブルに my_add_cssという名前で保存する。
他のフック関数よりも後でCSS出力させるために priorityを大きめ(999)にしている。

<?php
/* Plugin Name: AddCSS */
////////////////////////////////////////////////////////////////////////
if (class_exists('AddCSS')) {
  $obj = new AddCSS();
}
////////////////////////////////////////////////////////////////////////
class AddCSS {
  //////////////////////////////////////////////////////////////////////
  public function __construct() {
    add_action('wp_head',    array($this,'proc_my_add_css'), 999);
    add_action('admin_menu', array($this,'proc_create_menu'));
    register_activation_hook(  __FILE__, array($this, 'proc_plugin_activate'));
    register_deactivation_hook(__FILE__, array($this, 'proc_plugin_deactivate'));
  }
  //////////////////////////////////////////////////////////////////////
  public function proc_plugin_activate(){
    add_option('my_add_css', '');
  }
  //////////////////////////////////////////////////////////////////////
  public function proc_plugin_deactivate(){
    delete_option('my_add_css');
  }
  //////////////////////////////////////////////////////////////////////
  public function proc_my_add_css() {
    $my_add_css = esc_attr(get_option('my_add_css'));
    if(FALSE !== $my_add_css){
echo <<< EOM
<style>
{$my_add_css}
</style>
EOM;
    }
  }
  //////////////////////////////////////////////////////////////////////
  public function proc_create_menu() {
    add_menu_page('AddCSS Settings', 'AddCSS Settings', 'administrator', __FILE__, array($this, 'proc_display_settings_page'));
    add_action('admin_init', array($this, 'proc_register_settings'));
  }
  //////////////////////////////////////////////////////////////////////
  public function proc_register_settings() {
    register_setting('AddCSS-settings-group', 'my_add_css');
  }
  //////////////////////////////////////////////////////////////////////
  public function proc_handle_sanitization($txt) {
    return sanitize_text_field($txt);
  }
  //////////////////////////////////////////////////////////////////////
  public function proc_display_settings_page() {
    $my_add_css = esc_attr(get_option('my_add_css'));
?>
<div class="wrap">
<h2>AddCSS 独自CSSの追加設定</h2>
<form method="post" action="options.php">
  <?php settings_fields('AddCSS-settings-group'); ?>
  <?php do_settings_sections('AddCSS-settings-group'); ?>
  <textarea name="my_add_css"><?php echo $my_add_css; ?></textarea>
<?php
  submit_button();
?>
</form>
</div>
<?php
  }
}     // end of class
?>

■プラグイン登録

前回の (25) WordPressで設定画面付きプラグインを作成 を参照のこと。

できた！

たったこれだけのプラグインだけれども、個人的にはとっても満足です。

後でやること…

textareaの中でタブキー入力が使えない。
JavaScriptを使えば簡単に実現できるので、後で組み込む。