WordPressサイトを複数所有している場合、ログイン画面が全く同じだとURLを確認しないと直感でどこのサイトなのかがわからない。
納品後のWebサイト数が増えれば定期更新もしていく上で、ログイン画面を頻繫に開くため、ロゴ画像で判断が付くよう変更する方法について解説します。
ファビコンのアイコンを使うのも良いでしょう。ファビコンの作成方法については下記記事をご確認ください。
functions.phpにコードを記述
▪子テーマのfunctions.phpに記述するコードになります。子テーマについて詳しく解説した記事は下記をご確認ください。
画像のサイズは既存のWordPressロゴの大きさだと大体高さと幅90px前後ですので、このサイズの画像を用意しましょう。
外観→テーマファイルエディター→テーマのための関数(functions.php)に下記コードを記述して保存。
※background-image:の部分は階層を変更する必要があります。
<?php
function theme_login_style() { ?>
<style>
body.login div#login h1 a {
background-image: url("<?php echo get_stylesheet_directory_uri(); ?>/img/icon/design-pull-icon.png");
background-size: contain;
height: 90px;
width: 90px;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'theme_login_style' );記述参考例として下記の画像のように記述します。
差し替えたい画像のファイル階層はfunctions.phpファイルがある所から始まるので、wp-content→themes→テーマ名→img→icon→ファイル名となっています。
一度ログアウトして、ロゴが指定した画像に変わっていたら設定は完了です。
ログイン画面のログインボタンの色変更
ログイン画面のログインボタンの色も変更可能でstyleの間にCSS追加します。
.wp-core-ui .submit .button-primary {
background: #e33a3a;
border-color: #e33a3a;
}下の画像のように色が変更されていれば設定完了です。
補足画像やスタイルシートを読み込むタグ
親テーマ
▪親テーマ内にある画像やスタイルシートを読み込むとき。
<?php echo get_template_directory_uri(); ?>
タグには【https://ドメイン/wp-content/theme/テーマ名】が入っています。
<!-- スタイルシートを読み込むには下記のように記述 -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/○○○.css">
<!-- img内の画像を指定する -->
<img src="<?php echo get_template_directory_uri(); ?>"/img/○○○.png">子テーマ
▪子テーマを使用している場合に画像やスタイルシートを読み込むとき。
<?php echo get_stylesheet_directory_uri(); ?>
タグには【https://ドメイン/wp-content/theme/子テーマ名】が入っています。
<!-- 子テーマディレクトリでcss内のスタイルシートを読み込む -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/○○○.css">
<!-- 子テーマディレクトリでimg内の画像を指定する -->
<img src="<?php echo get_stylesheet_directory_uri(); ?>"/img/○○○.jpg">ログイン画面のロゴURLをサイトトップに変更
デフォルトではロゴをクリックすると、https://ja.wordpress.orgのWordPressサイトに飛ぶようになっていますが、ここも自身のサイトに変更することができます。
functions.phpに下記コードを入力し保存することで自身のサイトURLを取得し、ロゴクリック後はトップページに飛ばすことができます。
//ログイン画面のロゴURLをサイトトップに変更
function custom_login_logo_url() {
return get_bloginfo( 'url' ); //サイトURLを取得
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );↓おススメ本 エンジニアのためのWordPress開発入門
▪PHPプログラマがWordPressで開発する際に必要な基礎知識から、現場で役立つ具体的なカスタマイズ手法や開発のポイントについて詳しく解説されています。WebエンジニアがWordPressに初めて触れたとき、その独特のアーキテクチャやシステムの構成に戸惑いを感じることがありますがWordPressは、それらを補ったうえにさらに強力なメリットを持ち合わせています。
