クライアント向けに管理画面の上部にメッセージを表示させたいと思い、いろいろ調べてみました。
やりたいこと：管理画面に情報を通知させたい
ワードプレスを使っていると、管理画面の各ページ上部にメッセージが表示されることがあります。
ログインしている人が通知を受け取れる仕組みですよね。
僕の場合は、何かアクションを起こした時にメッセージを表示させるのではなく、常に表示させたいんです。というか、そこまで複雑なことできませんし。
管理画面にメッセージを表示させてみよう
調べてみたら、数件ほどレクチャーしている記事があったので助かりました。とりあえず、function.phpに書き込めば、管理画面のすべてのページに反映されます。
|
1 2 3 4 |
function echo_message() { echo '<div class="message error"><p>ここに表示させたいメッセージを書く。</p></div>'; } add_action( 'admin_notices','echo_message' ); |
参考 WordPress の管理画面に簡単なメッセージを表示するバシャログ。
ただ、これだと管理画面のページすべてに表示されてしまうんですよね。ちょっとウザいかも…。
なので、特定のページに表示させるために、下記を追加します。
|
1 2 3 4 |
global $pagenow; if ( $pagenow != 'index.php' ) { return; } |
できたのがこちら↓
|
1 2 3 4 5 6 7 8 |
function echo_message() { global $pagenow; if ( $pagenow != 'index.php' ) { return; } echo '<div class="message error"><p>ここに表示させたいメッセージを書く。</p></div>'; } add_action( 'admin_notices','echo_message' ); |
【index.php】っていうのが、管理画面のダッシュボードページです。どのページに表示させたいかは、下記を参考にしてください。
参考 $pagenowWordPress私的マニュアルちなみに…
<div class=”message error”>の「message error」部分を「updated」にすると、メッセージボードの左端が赤色から緑色に変わります。
せっかくなので、メッセージボードをかっこ良くしたい
上のやつでも十分ですし、むしろワードプレスと同じデザインなので溶け込むんですが…CSSでいじりたいと思います。
最終的なのがコレ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* 管理画面ダッシュボードメッセージ ---------------------------------------------------------- */ function echo_message() { global $pagenow; if ( $pagenow != 'index.php' ) { return; } echo '<div class="messageboard"><h2>個別のお知らせ</h2><p>現在お知らせはありません。</p></div> <style> .messageboard{ padding: 0.5em 1em; margin: 2em 0; color: #5d627b; background: white; border-top: solid 5px #5d627b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); } .messageboard p { margin: 0; padding: 0; } .wrap h1{ display:none; } </style> '; } add_action( 'admin_notices','echo_message' ); |
CSSのスタイルは安定のサルワカさんから頂いてます。
参考 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30サルワカ | サルでも分かる図解説明マガジンあと、スタイルシートの中に「wrap h1」がありますが、これはダッシュボードページ上部の「ダッシュボード」の文字が邪魔だったので、無理やり消してるだけです。これはお好みで。
追記：marginとか少し手直し必要かも
CSSのスタイルをネットでコピペして貼り付けただけじゃ、キレイに表示されないですね。具体的には、枠が左側だけびょーんと伸びてしまいます。PCで見た時にはそんなに気にならないけど、スマホだとスタイルががっつり崩れています（笑）
調べてみたら、「wrap」と「各メッセージ」でサイズを合わせていて、なおかつスマホ・タブ用に782px以下で少し数値が変わっています。
取り急ぎですが、下記に変更して落ち着きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.messageboard{ padding: 5px 10px; /*管理画面の枠に合わせるため必須*/ color: #5d627b; background: white; border-top: solid 5px #5d627b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); margin: 45px 20px 15px 2px; /*管理画面の枠に合わせるため必須*/ } @media screen and (max-width: 782px){ .messageboard { clear: both; margin-right: 12px; margin-left: 0; } } .messageboard p { margin: 0; padding: 0; } |
ポイントはサルワカさんからコピペしたCSSのpaddingを少し直したところ、marginを他の管理画面のメッセージに合わせたとこと、スマホタブ用に値を変えたところです。
スマホタブ用に数値が変わるのは、サイドバーが上部に移動して幅が変更されるからっぽいです。よく知りませんが。
正規版メッセージボードは「wrap」の中に書かれているので、もう少し記述が少なく済みます。一緒に中に入れたかったんですが、やり方が分からないので…（笑）これで良しとします。
