WordPressログイン画面のロゴや背景を変える方法

WordPressログイン画面のロゴや背景を変える方法

WordPressを使ってブログを運用していると、毎日のようにログイン画面を見ます。そのログイン画面はグレーの背景にWordPressのロゴマークだけのシンプルなデザインです。私はシンプルなデザインが好きなのでとくに気になりませんが、人によっては独自性の高いログイン画面にカスタマイズしたいと思うことがあるようです。

WordPressログイン画面

そこで今回は、WordPressのロゴ画像と背景を変更する方法をまとめてみました。

【お知らせ】WordPress5.0で検証しました

事前準備

まずはログイン画面を変更したいWordPressサイトを用意して、管理画面にアクセスできることを確認します。

そして次に、ログイン画面に表示したいロゴ画像や背景画像を用意します。用意した画像ファイルは、事前に管理画面でメディアにアップロードしておきます。アップロード後、メディアライブラリ画面で画像ファイルのURLをコピーなどして控えておいてください。

メディアライブラリでURLをコピーしておく

ログイン画面のロゴと背景を変更する

カスタマイズする方法としては、functions.phpを編集する方法とプラグインで切り替える方法の2つあります。

functions.phpファイルを編集する方法

【詳しい人はこちら】FTPソフトでWordPressがインストールされたサーバーにアクセスしてから、下記functions.phpの修正をしてください。

まずWordPressの管理画面にログインします。

次にメニュー内から「外観」→「テーマの編集」をクリックします。

テーマの編集

次に画面右側のテーマのための関数(functions.php)をクリックします。

テーマのための関数

すると、選択したファイルの内容:として画面中央にfunctions.phpファイルの中身が表示されます。

選択したファイルの内容

この編集画面で、一番下に下記のコードを追加します。

【注意】コードはコピーしてそのまま貼り付けるとエラーになる場合があります。貼り付けるときにはプレーンテキストとして貼り付けてください。

function loginpage_edit() {?>

<style>
/* ロゴを変更する場合は以下5行分を貼り付けます */
.login #login h1 a {
background-image: url(★ここに画像ファイルのURLを入力します。★);
width: ▲▲px;
height: ■■px;
}

/* 背景画像を変更する場合は以下4行分を貼り付けます */
.login {
background-image: url(★ここに画像ファイルのURLを入力します。★);
background-size: cover;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'loginpage_edit' );

★部分には、事前準備で控えておいた画像ファイルのURLを入力します。▲及び■部分にはロゴ画像のサイズを入力します。

最後に一度ログアウトして、ログイン画面が変更されていることを確認します。下記の画像のようにロゴや背景が変わっていれば作業完了です。

カスタマイズ後のログイン画面

プラグインを使う方法

次にプラグインを使ってログイン画面のロゴや背景をカスタマイズする方法をお伝えします。

プラグインは下記のものを試してみました。

Admin Custom Login

メニューや項目は英語表記ですが使い方は簡単でした。こんな感じになります。

プラグインでログイン画面をカスタマイズ

少し高機能ですが、かんたんな操作でカスタマイズができるのでさすがプラグインだなぁと思います。

まとめ

このようにログイン画面のカスタマイズは意外とかんたんにできます。気分転換にあなたのWordPressログイン画面もカスタマイズしてみてはいかがでしょうか?

【参考情報】プラグインをインストールするとサーバー側でその分の動作が増加します。そのため、プラグインを増やしすぎるとページの表示速度が遅くなってしまう原因になりますのでご注意ください。
プラグインを使うよりはfunctions.phpを編集する方法をおすすめします。

Category: Webサイト作成

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × 1 =