WordPress

管理画面にスタイルシート(CSS)を使ってみる(埋め込み):【66日目】WordPress1日1プラグイン

更新日:

ようこそのお運びで、厚く御礼申し上げます。
66日目です。今回は、プラグインの作成ではなくプラグインを作る上でCSSを書くときに必要かなー。
ということを書いてみます。

2014.3.26更新:admin_print_stylesはあまり使わない方が良い。

参照元:WordPress Codex:admin_print_stylesにも書いていますが、安全上あまり使わない方が良さそうです。代わりにadmin_enqueue_scriptsを使います。

新たに使い方を書いたので、こちらの記事を参照してください。

※admin_print_stylesの使い方についてのこの記事は残しておきます。

function.phpやプラグインファイルにスタイルシート(CSS)を書いて、管理画面にスタイルシート(CSS)を設定してみる。

管理画面でスタイルシートを使ってみます。今回は、外部スタイルシートではなく、直接ヘッダーに書き出す埋め込み式を、例に書いてみます。

※今回はtipsなので詳しく知りたい方は、admin_print_stylesadmin_print_scriptsを調べてくださいね。

まずは、functions.phpに書いてみます。

では、functions.phpに書いてみます。
プラグインファイルでも同じなので、今回はそのまま仕えるような感じで書く・・・努力をします。

admin_print_stylesをアクションフックして書いていきます。

add_action('admin_print_styles', '自分で作成した関数');

サンプルの目次

今回、紹介するサンプルのレジュメです。

  • 管理画面全体にスタイルシート(CSS)を埋め込む
  • 管理画面で「特定のページ」にスタイルシート(CSS)を埋め込む
  • {$hook_suffix}を調べたいけど・・・という場合
  • 管理画面の「自分で作成したメニュー」ページにスタイルシート(CSS)を埋め込む
  • 「自分で作成したメニュー」ページのクラス全体を書いてみます。

管理画面全体にスタイルシート(CSS)を埋め込む

add_action('admin_print_styles', 'paka3_admin_css');
function paka3_admin_css() {
   echo <<< EOS
      <style type="text/css"><!--
      body{background:#f00}; -->
EOS;
}

管理画面で「特定のページ」にスタイルシート(CSS)を埋め込む

admin_print_styles-{$hook_suffix}というようにフックします。
例えば、「新規追加画面」と「編集画面」だけCSSを設定する場合は

//ページ毎にスタイルを変える
//新規
add_action('admin_print_styles-post-new.php', 'paka3_admin_css2');
//編集
add_action('admin_print_styles-post.php', 'paka3_admin_css2');

function paka3_admin_css2() {
   echo <<< EOS
      <style  type="text/css">
          body{background:#f00};
      --></style>
EOS;
}

また「ダッシュボード」にだけCSSを設定する場合は

add_action('admin_print_styles-index.php', 'paka3_admin_css2');
function paka3_admin_css2() {
   echo <<< EOS
      <style type="text/css"><!--
          body{background:#f00};
      --></style>
EOS;
}

{$hook_suffix}を調べたいけど・・・という場合

以下のコードをfunction.phpに記入して管理画面を見てください。

//$hook_suffixを画面に表示
add_action( 'admin_notices', 'wps_print_admin_pagehook');
function wps_print_admin_pagehook(){
    global $hook_suffix;
    if( !current_user_can( 'manage_options') )
      return;
    echo <<< EOS
         <div class="error">
            hook_suffix =
             <b style="color: red;">{$hook_suffix}</b></div>
EOS;
}

実行結果:管理画面を見てみると
140324-0004

「admin_print_styles-post-new.php」という感じで、
赤い文字で表示している部分をコピペしてあげてください。
ちょっと雑かもしれませんが、まずはこれで確認してみてください。

管理画面の「自分で作成したメニュー」ページにスタイルシート(CSS)を埋め込む

こちらはそのまま、アクションフックですね。
自分で作成した関数にはCSSを出力(echo)してあげます。
以下のようにadd_submenu_pageやadd_menu_pageの「返り値」を「admin_print_styles-{$hook_suffix}」にあてはめます。

$page = add_submenu_page("options-general.php", ・・・・);
add_action( 'admin_print_styles-'.$page,array($this,'paka3_post_css'));

「自分で作成したメニュー」ページのクラス全体を書いてみます。

実際に簡単なクラスを書いてみます

new Paka3_Admin;
class Paka3_Admin{
  function __construct() {
    //管理メニュー
    add_action('admin_menu', array($this, 'adminAddMenu'));
   }

  //管理メニューの設定と分岐
  function adminAddMenu() {
    $page = add_submenu_page("options-general.php", '自メ', '自作メニューだよー',  'edit_themes', 'paka3hoge', array($this,'paka3_page'));
    add_action( 'admin_print_styles-'.$page,array($this,'paka3_post_css'));
  }

  //出力
  function paka3_page() {
    echo <<< EOS
       <div class="paka3class">
          ここにメッセージを書いたよ。
       </div>
EOS;
  }

  //適用するCSSを定義
  function paka3_post_css($headers){
         echo <<<EOS
         <style  type="text/css">
            div.paka3class{
	        padding:30pt 0;margin:30pt 0;
                background :#999;color:#eee;
            }
         </style>
EOS;
   }
}

今回のまとめ

簡単なコードを書いているとスタイルシートを別ファイルにするのがちょっと面倒だったので、今回は私の使い勝手も含めこの記事を書いてみました。意外とハマる部分でもあるのでメモ書きは必要ですね。

2014.3.26更新:admin_print_stylesはあまり使わない方が良い。

参照元:WordPress Codex:admin_print_stylesにも書いていますが、安全上あまり使わない方が良さそうです。代わりにadmin_enqueue_scriptsを使います。

新たに使い方を書いたので、こちらの記事を参照してください。

 

-WordPress
-, , ,

Copyright© アルパカ@ラボ , 2019 All Rights Reserved Powered by AFFINGER5.