WordPressには管理画面にログインする為の画面が用意されています。
https://ドメイン/wp-login が、その画面です。
ログイン画面には のロゴが表示されています。
このロゴをオリジナルのロゴに変更してみましょう。
ロゴの仕組みを分析する
ブラウザでログイン画面のソースを確認してみましょう。
<body class="login js login-action-login wp-core-ui locale-ja">
<script type="text/javascript">
/* <![CDATA[ */
document.body.className = document.body.className.replace('no-js','js');
/* ]]> */
</script>
<div id="login">
<h1><a href="https://ja.wordpress.org/">Powered by WordPress</a></h1>9行目のh1タグがロゴになります。
さらにh1タグのCSSを確認確認してみましょう。
.login h1 a {
background-image: url(../images/w-logo-blue.png?ver=20131202);
background-image: none,url(../images/wordpress-logo.svg?ver=20131107);
background-size: 84px;
background-position: center top;
background-repeat: no-repeat;
color: #3c434a;
height: 84px;
font-size: 20px;
font-weight: 400;
line-height: 1.3;
margin: 0 auto 25px;
padding: 0;
text-decoration: none;
width: 84px;
text-indent: -9999px;
outline: 0;
overflow: hidden;
display: block;
}background-imageでロゴの画像を指定していることが分かります。
この画像を変更することでログイン画面のロゴを変更できます。
ロゴを変更する
分析の結果、.login h1 a の background-image を変更すれば良いことが分かりましたので、ログイン画面にCSSを追加してみましょう。
WordPressではログイン画面を表示する際、login_headアクションが実行されています。この login_head をカスタマイズして任意のコードを実行させます。
カスタマイズする独自の関数は functions.php に記載します。
// ログイン画面のロゴ変更
function custom_login_logo() {
echo '<style type="text/css">';
echo '.login h1 a {';
echo ' background-image: url(▲▲)';
echo ' width:●●px;';
echo ' height:◆◆px;';
echo ' background-size:●●px ◆◆px;';
echo '}';
echo '</style>';
}
add_action('login_head', 'custom_login_logo');12行目の add_action関数 によって、login_headアクションで custom_login_logo関数 を実行するようになります。
custom_login_logo関数の内容は、2～11行目の通りです。
echo関数によって styleタグとCSSを出力しています。
CSSでは、ロゴを変更する為に background-image を指定し、width（●●）、height（◆◆）、background-size によって画像の大きさを指定しています。
これによって▲▲で指定した任意の画像に変更することができます。
画像のURL
画像のURLを指定する方法は、主に２つあります。
１つ目は、WordPress管理画面のメディアにアップロードした画像を使用する方法です。
// ログイン画面のロゴ変更
function custom_login_logo() {
$upload_dir = wp_upload_dir();
echo '<style type="text/css">';
echo '.login h1 a {';
echo ' background-image: url('.$upload_dir['baseurl'].'/logo.png)';
echo ' width:●●px;';
echo ' height:◆◆px;';
echo ' background-size:●●px ◆◆px;';
echo '}';
echo '</style>';
}
add_action('login_head', 'custom_login_logo');3行目でアップロードフォルダのURLを取得し、6行目で画像のファイル名と結合してbackgroud-imageを指定します。
２つ目は、テーマフォルダに保存した画像を使用する方法です。
// ログイン画面のロゴ変更
function custom_login_logo() {
$upload_dir = get_stylesheet_directory_uri();
echo '<style type="text/css">';
echo '.login h1 a {';
echo ' background-image: url('.$upload_dir['baseurl'].'/logo.png)';
echo ' width:●●px;';
echo ' height:◆◆px;';
echo ' background-size:●●px ◆◆px;';
echo '}';
echo '</style>';
}
add_action('login_head', 'custom_login_logo');3行目でテーマフォルダのURLを取得しています。他は同じです。
ロゴ画像をどこに保存するかによって、保存先のフォルダ指定がことなりますが、ロゴ画像のURLをフルパスで指定できればOKです。
ロゴのタイトルを変更する
ログイン画面のソースコードを確認して分かるように
<h1><a href="https://ja.wordpress.org/">Powered by WordPress</a></h1>「Powerd by WordPress」の文字が出力されています。
この文字はCSSによって非表示（text-indentをマイナス値にすることで画面外へ出力）となっています。
text-indent: -9999px;せっかくなので、この文字も変更します。
この文字は login_headertitle関数 によって取得・出力されていますので、login_headertitleをカスタマイズして別の文字に変更します。
// ログイン画面のロゴタイトル
function custom_login_logo_url_title() {
return 'ここに表示する文字列';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );5行目のadd_filterで login_headertitle関数 の戻り値を強制的に変更します。
上記例では「ここに表示する文字列」に置き換えていますが、
// ログイン画面のロゴタイトル
function custom_login_logo_url_title() {
return get_bloginfo('name');
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );get_bloginfo関数によってサイト名を出力するようにしても良いでしょう。
ロゴのリンク先を変更する
ログイン画面のソースコードを確認して分かるように
<h1><a href="https://ja.wordpress.org/">Powered by WordPress</a></h1>aタグによって、ロゴクリック時に https://ja.wordpress.org/ へ遷移するようになっています。
このリンクをトップページへのリンクに変更します。
ログイン画面のロゴのリンク先URLは login_headerurl関数 によって取得・出力されていますので、login_headerurlをカスタマイズして別のリンク先に変更します。
// ログイン画面のロゴURL
function custom_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );5行目のadd_filterで login_headerurl関数 の戻り値を強制的に変更します。
home_url関数は、トップページのURLを取得する関数です。
まとめ
今回は、WordPressログイン画面のロゴをカスタマイズする方法を紹介しました。
ロゴ画像は、login_headでCSSを書き換え、タイトル文字はlogin_headertitle関数の戻り値を変更、リンク先URLはlogin_headerurl関数の戻り値を変更することで、自分好みのログイン画面に変更できます。
ウェブサイト制作を請け負ったとき、ログイン画面や404ページなど普段目にしない画面のデザインも統一することで、依頼者の満足度も向上すると思いますので、ぜひお試しください。
