新年あけましておめでとうございます、@nihimoto です。
今年はよい年になるといいですね。
–
さて、Wordpressをクライアントワークに使っていると、管理画面のロゴにクライアントのロゴを入れたくなると思います。
しかし、たったそれだけのためにやたらと高度な管理画面のカスタマイズ用プラグインを導入するのもいささか面倒くさい。それに、プラグインでロゴを変えてしまうと、DB側にその情報が保存されるのでテスト環境から本番に持って行ったときに設定をやり直したりする必要が出てきて、これもまた面倒くさい。
ということで、今回はプラグインにたよらずにテンプレ側からロゴを書き換える手段をご説明しようと思います。これならテンプレを本番環境に入れるだけで管理画面のロゴも変わってくれるのでらくちんです。
さて、管理画面の左上のロゴはHTML内で id=”site-title” でマークアップされています。
ということはCSSで#site-titleと書けばロゴ画像などのスタイルの上書きができるということです。ただ、単純にテンプレのCSSに書いても、管理画面側ではそれは読み込まれないので、管理画面側に書いたCSSを埋め込まれるようにしなければいけません。
ということで下記のコードをテンプレートフォルダ内のfunctions.phpに追加します。
これにより管理画面が表示された際に、footerの後ろに下記の<style>タグが埋め込まれて、既存のCSSが上書きされ好きなロゴを設置することができます。
※ *〜〜*の所は適宜適切なものに置き換えてください。
function add_admin_style () {
$style = <<<___END___
<style type='text/css'>
#site-title {
display: block;
text-indent: -1000px;
background-image: url(../wp-content/themes/*テンプレ名*/*ロゴファイル名*);
background-repeat: no-repeat;
width: *ロゴの横幅*;
height: *ロゴの縦幅*;
}
/* ヘッダの余計なモノを消す */
#header-logo, #privacy-on-link { display: none; }
</style>
___END___;
echo $style;
}
add_action('admin_footer', 'add_admin_style');
ついでにログイン画面にあるロゴも変えてしまいましょう。
ログイン画面のロゴは #login h1 a で指定できるので、下記のコードをfunctions.phpに追記することで上書きが可能です。
function add_login_style () {
$style = <<<___END___
<style type='text/css'>
#login h1 a {
background-image: url(wp-content/themes/*テンプレ名*/*ロゴファイル名*);
width: *ロゴの横幅*;
height: *ロゴの縦幅*;
}
</style>
___END___;
echo $style;
}
add_action('login_footer', 'add_login_style');
</code>
ということで、お手軽にテンプレ側からロゴを書き換える方法のご説明でした。
なお、原理的には footerにstyleタグを加えているだけですので、ロゴ以外のCSSも当然書き加えることができます。文字色を変えたり余計なものをdisplay:noneで消したりと、応用範囲は広いと思います。管理画面のCSSをいじりたくなったら、ぜひこの方法を思い出してみてください。
ではでは、@nihimoto でした。
何かご質問等などあればtwitterまでお気軽にどうぞ。
P.S.
それにしても、プラグインの保存先が基本的には全部DBなのはなんとかならないものでしょうかね。
全プラグインで統一的なフォーマットで設定値を吐き出せるような処置があれば、テスト環境から本番環境への移行を気にして、無理やりテンプレ側にデータを記載する必要がなくなるのですが・・
