➡ ENDOO VLOGで紹介したものはコチラ ⬅

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

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

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

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

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

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

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

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

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

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

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

できたのがこちら↓

【index.php】っていうのが、管理画面のダッシュボードページです。どのページに表示させたいかは、下記を参考にしてください。

参考 $pagenowWordPress私的マニュアル

ちなみに…

<div class=”message error”>の「message error」部分を「updated」にすると、メッセージボードの左端が赤色から緑色に変わります。

せっかくなので、メッセージボードをかっこ良くしたい

上のやつでも十分ですし、むしろワードプレスと同じデザインなので溶け込むんですが…CSSでいじりたいと思います。

最終的なのがコレ。

CSSのスタイルは安定のサルワカさんから頂いてます。

参考 【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30サルワカ | サルでも分かる図解説明マガジン

あと、スタイルシートの中に「wrap h1」がありますが、これはダッシュボードページ上部の「ダッシュボード」の文字が邪魔だったので、無理やり消してるだけです。これはお好みで。

追記:marginとか少し手直し必要かも

CSSのスタイルをネットでコピペして貼り付けただけじゃ、キレイに表示されないですね。具体的には、枠が左側だけびょーんと伸びてしまいます。PCで見た時にはそんなに気にならないけど、スマホだとスタイルががっつり崩れています(笑)

調べてみたら、「wrap」と「各メッセージ」でサイズを合わせていて、なおかつスマホ・タブ用に782px以下で少し数値が変わっています。

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

ポイントはサルワカさんからコピペしたCSSのpaddingを少し直したところ、marginを他の管理画面のメッセージに合わせたとこと、スマホタブ用に値を変えたところです。

スマホタブ用に数値が変わるのは、サイドバーが上部に移動して幅が変更されるからっぽいです。よく知りませんが。

正規版メッセージボードは「wrap」の中に書かれているので、もう少し記述が少なく済みます。一緒に中に入れたかったんですが、やり方が分からないので…(笑)これで良しとします。