WordPress管理画面にかっこ良くメッセージを表示させたい

クライアント向けに管理画面の上部にメッセージを表示させたいと思い、いろいろ調べてみました。

やりたいこと：管理画面に情報を通知させたい

ワードプレスを使っていると、管理画面の各ページ上部にメッセージが表示されることがあります。

ログインしている人が通知を受け取れる仕組みですよね。

僕の場合は、何かアクションを起こした時にメッセージを表示させるのではなく、常に表示させたいんです。というか、そこまで複雑なことできませんし。

管理画面にメッセージを表示させてみよう

調べてみたら、数件ほどレクチャーしている記事があったので助かりました。とりあえず、function.phpに書き込めば、管理画面のすべてのページに反映されます。

function echo_message() {
    echo '<div class="message error"><p>ここに表示させたいメッセージを書く。</p></div>';
}
add_action( 'admin_notices','echo_message' );

function echo_message() {

echo '<div class="message error"><p>ここに表示させたいメッセージを書く。</p></div>';

}

add_action( 'admin_notices','echo_message' );

参考 WordPress の管理画面に簡単なメッセージを表示するバシャログ。

ただ、これだと管理画面のページすべてに表示されてしまうんですよね。ちょっとウザいかも…。

なので、特定のページに表示させるために、下記を追加します。

global $pagenow;
	if ( $pagenow != 'index.php' ) {
		return;
	}

global $pagenow;

if ( $pagenow != 'index.php' ) {

return;

}

できたのがこちら↓

function echo_message() {
global $pagenow;
	if ( $pagenow != 'index.php' ) {
		return;
	}
    echo '<div class="message error"><p>ここに表示させたいメッセージを書く。</p></div>';
}
add_action( 'admin_notices','echo_message' );

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でいじりたいと思います。

最終的なのがコレ。

/* 管理画面ダッシュボードメッセージ
---------------------------------------------------------- */
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' );

/* 管理画面ダッシュボードメッセージ

---------------------------------------------------------- */

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以下で少し数値が変わっています。

取り急ぎですが、下記に変更して落ち着きました。

.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;
}

.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」の中に書かれているので、もう少し記述が少なく済みます。一緒に中に入れたかったんですが、やり方が分からないので…（笑）これで良しとします。