2016／06／19
- WordPress
WordPressカスタマイズ ログイン画面の背景とロゴの変更方法
WordPressのログイン画面を顧客に合わせてロゴや背景などを変更したい場合があると思います。そんな場合の変更方法をご紹介します。
ログイン画面の背景とロゴの変更方法
デフォルト → カスタマイズ後
デフォルトのログイン画面から「functions.php」を使ってオリジナルのログイン画面へ変更します。
背景とロゴを変更
ページ全体の背景、WordPressのロゴ、入力周りの色ををスタイルシートで変更します。
「functions.php」に以下のコードを記述。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//ログインページ背景・ロゴ変更 function custom_login() { ?> <style> //背景の変更 .login { background: url(<?php echo get_stylesheet_directory_uri(); ?>/img/back.jpg) no-repeat center center; background-size: cover; } //ロゴの変更 .login #login h1 a { width: 任意のサイズ; height: 任意のサイズ; background: url(<?php echo get_stylesheet_directory_uri(); ?>/img/logo.svg) no-repeat 0 0; } //入力を囲んでいる部分の背景色の変更 .login #loginform { background-color: rgba(0,0,0,0.4); } </style> <?php } add_action( 'login_enqueue_scripts', 'custom_login' ); |
ロゴのリンク先を変更
「functions.php」に以下のコードを記述。
デフォルトではwordpress.orgへ設定されているので任意のリンク先へ変更する。
「get_bloginfo( ‘url’ )」でWordPressのトップページを指定。
|
1 2 3 4 5 |
//ログイン画像のURL function custom_login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'custom_login_logo_url' ); |
または
「return ‘http://任意のリンク先.com/’;」で任意のURLを指定。
|
1 2 3 4 5 |
//ログイン画像のURL function custom_login_logo_url() { return 'http://任意のリンク先.com/'; } add_filter( 'login_headerurl', 'custom_login_logo_url' ); |
顧客先によって企業のロゴやコーポレートカラーがあると思うのでそのような場合に使用できると思います。
関連記事
コメントを残す