ワードプレス

WordPressのログイン画面をプラグインなしで簡単に変更する方法【functions.php】

ログイン画面をプラグインなしで簡単に変更する方法

WordPressサイトを複数所有している場合、ログイン画面が全く同じだとURLを確認しないと直感でどこのサイトなのかがわからない。

納品後のWebサイト数が増えれば定期更新もしていく上で、ログイン画面を頻繫に開くため、ロゴ画像で判断が付くよう変更する方法について解説します。

変更前
変更前
変更後
変更後

ファビコンのアイコンを使うのも良いでしょう。ファビコンの作成方法については下記記事をご確認ください。

ファビコンアイコン
【2022年版】favicon(ファビコン)の設定と作り方【コード編集あり】HTML・CSS・wordpressの知識が少しあって、ファビコンの設定を全ブラウザ、各端末を完璧に設定したい方向けに設置方法とファビコンの役割を紹介。ファビコン(favicon)とは、ブラウザの(タブ、ブックマークバー、履歴など)に表示される小さな画像のことで、Web サイトの「ブランド」を視覚的に表しユーザーが検索結果を見た際に、一目でサイトを見分けられることを促します。ファビコンの役割と設置方法と設置事例を紹介します。...

functions.phpにコードを記述

子テーマのfunctions.phpに記述するコードになります。子テーマについて詳しく解説した記事は下記をご確認ください。

子テーマアイキャッチ画像
子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです。ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説。...

画像のサイズは既存の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
functions.php

差し替えたい画像のファイル階層はfunctions.phpファイルがある所から始まるので、wp-contentthemesテーマ名imgiconファイル名となっています。

FTP階層
FTP階層

一度ログアウトして、ロゴが指定した画像に変わっていたら設定は完了です。

変更後
ロゴ変更後

ログイン画面のログインボタンの色変更

ログインボタン
ログインボタン

ログイン画面のログインボタンの色も変更可能でstyleの間にCSS追加します。

styleに追記
styleに追記
.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サイトに飛ぶようになっていますが、ここも自身のサイトに変更することができます。

https://ja.wordpress.org
https://ja.wordpress.org

functions.phpに下記コードを入力し保存することで自身のサイトURLを取得し、ロゴクリック後はトップページに飛ばすことができます。

//ログイン画面のロゴURLをサイトトップに変更
function custom_login_logo_url() {
	return get_bloginfo( 'url' ); //サイトURLを取得
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

↓おススメ本 エンジニアのためのWordPress開発入門

エンジニアのためのWordPress開発入門 (Engineer's Library)
エンジニアのためのWordPress開発入門 (Engineer’s Library)

▪PHPプログラマがWordPressで開発する際に必要な基礎知識から、現場で役立つ具体的なカスタマイズ手法や開発のポイントについて詳しく解説されています。WebエンジニアがWordPressに初めて触れたとき、その独特のアーキテクチャやシステムの構成に戸惑いを感じることがありますがWordPressは、それらを補ったうえにさらに強力なメリットを持ち合わせています。

book
created by Rinker
¥3,278 (2022/10/04 22:01:13時点 楽天市場調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA