WordPress の管理ページへのログイン画面のカスタマイズ方法
WordPress の管理ページへのログイン画面のままでは納品がしづらいので、デザインのカスタマイズについて。
目次
前提
テーマ以外の部分、と言うか WordPress のコアには手を付けない。
ここ絶対！
何しろ WordPress が更新される度にデザインに手を入れるとかあり得ないです。
やり方
じゃぁどうするか、ですが、HTML 構成の変更は前提条件からできないので、CSS の差し替え、もしくは上書きで対応します。ファイルそのものを対象にしていませんよ。
今回は後者のスタイルを上書きする方向で考えてみます。
基本的な流れとしては、上書き用の CSS を用意、ログイン画面表示時にその CSS を読み込む、です。
具体的に
1. 上書き用 CSS の用意
場所はどこでも良いですが、今回は次の中に入っているという前提で。
パス：/wp-content/uploads/themes/＜テーマ＞/css/login.css
2. ログイン画面表示時に CSS の読み込む
WordPress の add_action() を使って、login_head イベント時に CSS を読み込む head タグを書き出します。
下記のコードでは、add_login_header() 関数を定義し、それをコールバック関数として呼び出しています。
これらのプログラムを functions.php に記述します。
パス：/wp-content/uploads/themes/＜テーマ＞/functions.php
[code lang=’php’] function add_login_header() {echo ‘‘;
}
add_action(‘login_head’, ‘add_login_header’);
[/code]
以上。
カスタマイズの例としてロゴを変更してみる
上記で login.css が読み込まれるようになりましたので、とりあえず WordPress のロゴを自分で用意したものに差し替えてみます。
記述する内容は次の通り。
[code lang=’css’] #login h1 a{background:url(path/to/image.png) no-repeat;
width:Mpx;
height:Npx;
}
[/code]
functions.php によって、元々のデザインである「wp-admin/css/wp-admin.css」よりも優先順位が高い状態で login.css は読み込まれていますので、通常のスタイルシートを記述すれば良いですね。
もしより優先順位を高くしたいのであれば、次の様に「!important」を指定してあげれば良いでしょう。
[code lang=’css’] background:url(path/to/image.png) no-repeat!important;[/code]
まとめ
WordPress の関数呼び出し構造を知っていればそこまで難しい作業ではないですね。
今回の方法ですと、HTML のタグ構造を変えられるわけではないので、カスタマイズの自由度はデザイン力に依存します。
自分はとりあえずしかできないので、外注方向で・・
10年集客し続けられるサイトを、ワードプレスで自作する9つのポイント プレゼント
あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい！と思ったことはありませんか？
私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。
それは、「先を見越してサイトを構築していないこと」です。
Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。
しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。
そこで今回、期間限定で
『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』
について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。
・ワードプレスを使いこなせるコツを知りたい！
・自分にピッタリのサーバーを撰びたい！
・無料ブログとの違いを知りたい！
・あとで悔しくならない初期設定をしておきたい！
・プラグイン選びの方法を知っておきたい！
・SEO対策をワードプレスで行うポイントを知りたい！
・自分でデザインできる方法を知りたい！
という方は今すぐ無料でダウンロードしてください。
期間限定で、無料公開しています。
※登録後に表示される利用条件に沿ってご利用ください
