多くのWordPressサイトではログインページの重要性ログインページユーザーにとってウェブサイトとの最初のやり取りです。WordPressのカスタムログインページのデフォルトやデザインが悪いと、ユーザーエクスペリエンスが低下します。
デザイン性の高いログインページは、顧客に好印象を与えるだけでなく、セキュリティの強化にもつながります。この記事では、WordPressのログインページをカスタマイズする効果的な2つの方法、functions.phpファイルの変更とカスタムCSSの適用をご紹介します。
![图片[1]-如何自定义和保护 WordPress 登录页面：简单有效的方法](https://www.361sale.com/wp-content/uploads/2024/12/20241228095140476-image.png)
なぜWordPressのログインページをカスタマイズする必要があるのですか？
ログインページのカスタマイズは、特にタスクのリストがすでに長い場合、時間を投資する価値があるのか疑問に思う人もいるでしょう。この最適化にはいくつかの理由があります：
ウェブサイトのブランディングとデザイン
ログインページはユーザーの第一印象であり、ウェブサイト全体のルック＆フィールと一貫している必要があります。これはカスタムカラー、フォント、ロゴ歌で応えるオープニングこれにより、ユーザー（特にロイヤルカスタマー）に統一されたブランド体験を提供することができます。
ユーザーエクスペリエンスの向上
優れたデザインのログインページはユーザー体験を向上させます。シンプルで使いやすいインターフェイスはユーザーを惹きつけますが、ごちゃごちゃしたわかりにくいページはユーザーを遠ざけてしまう可能性があります。ログインエクスペリエンスの最適化に時間を投資することで、ユーザーの満足度を大幅に向上させることができます。
ウェブサイトのセキュリティ向上
ウェブサイトのセキュリティは非常に重要です。ログインページのカスタマイズは、デフォルトのWordPressログインページを非表示にし、URLを変更することで、ウェブサイトが攻撃される可能性を減らす効果的なセキュリティ対策です。これにより、不正アクセスを減らすだけでなく、ウェブサイトに対するユーザーの信頼を高めることができます。
デフォルトのwp-login.phpページをカスタマイズする方法
WordPressのログインページを変更する方法はいくつかあります。独立したページを作成したくない場合、ここでは2つの簡単なカスタマイズ方法を取り上げます：
functions.phpファイルによるwp-login.phpページのカスタマイズ
テーマのfunctions.phpファイルを使用します。WordPressのデフォルトログインページを変更する場合は、オンラインサイトの正常な動作に支障をきたさないよう、最初にテスト環境を作成することをお勧めします。
正確な手順は以下の通りです：
- テスト環境へのアクセス
SSH 経由で新しいアプリケーションにアクセスし、現在使用されているテーマを確認します。この例では にじゅうよじ トピックス - テーマカタログを探す
サブジェクトディレクトリは通常/ホーム/マスター/アプリケーション/アプリケーション名/public_html/wp-content/themes/twentytwentyfour - functions.phpファイルを編集します。
テキストエディタで開く functions.php ファイルの最後に必要なコードを追加してください。
銘記: functions.phpファイルを直接編集するのは危険です。以下のようにサブテーマテーマが更新されたときに問題が発生しないように、カスタムコードを分離します。
![图片[2]-如何自定义和保护 WordPress 登录页面：简单有效的方法](https://www.361sale.com/wp-content/uploads/2024/12/20241227170923906-image.png)
以下は functions.php です。ファイルのコード：
// ログインページにカスタムCSSを追加します。
関数 custom_login_styles() {
関数 custom_login_styles() {<style
body.login {
background-colour: #1414; /* 暗い背景*/
color: #ffffff; /* 白いテキスト色 */
font-family: 'Arial', sans-serif; /* フォントスタイル */。
}
.login h1 a {
background-image: url('/images/logo.png'); /* 必要であればあなたのロゴ */ } .login h1 a { background-image: url('<?
background-size: contain; background-repeat: no-repeat; /* 必要に応じてあなたのロゴ */。
height: 80px; /* 高さを調整します */
display: block; margin: 0 auto; /* 高さを調整 */
margin: 0 auto; }.
}
ログインフォーム
background-color: rgba(255, 255, 255, 0.1); /* 少し透けた白背景 */
padding: 40px; border-radius: 10px
border-radius: 10px; /* 角丸 */
box-shadow: 0 0 20px rgba(0, 0, 0, 0, 0.5); /* 奥行きを出すためのシャドウ */
margin: 0 auto; /* フォームを中央寄せ */ max-width: 400px; /* フォームを中央寄せ */
max-width: 400px; /* フォームの最大幅を設定します。
}
.login ラベル {
color: #ffffff; /* ラベルテキストを白にします */ } .login label { }.
}
.login input[type="text"], /* ホワイトラベルテキスト */ }.
.ログイン input[type="password"] {
border: 1px solid #ffffff; /* 入力用の白枠 */ } .login input[type=text], /* 白ラベルテキスト */ } .login input[type="password"] {
border-radius: 5px; /* 角を丸くする */
padding: 10px; /* 入力用のパディング */
width: 100%; /* フル幅 */
margin-bottom: 20px; /* 入力間のスペース */
background-color: rgba(255, 255, 255, 0.2); /* 全幅 */ margin-bottom: 20px; /* 入力と入力の間のスペース */
color: #ffffff; /* 白の文字色 */。
}
.ログイン #wp-submit {
background-color: #e50914; /* 赤 */ }
border: none; /* 枠線を消す */ } .login-submit { background-colour: #e50914; /* 赤 */
color: #ffffff; /* 白の文字色 */
cursor: pointer; /* ホバー時のポインタ */
padding: 10px; /* ボタンのパディング */
width: 100%; /* 全幅 */
border-radius: 5px; /* 角を丸くする */ }.
}
.ログイン #wp-submit:hover {
background-color: #f40612; /* カーソルを合わせると赤色になります。
}
#nav {
text-align: center; /* ナビゲーションリンクを中央に配置 */
font-size: 12px; /* フォントを小さくする */
margin-top: 20px; /* リンクの上にスペース */ }
}
#nav a {
color: #e50914; /* レッド */ text-decoration: none; //
text-decoration: none; /* アンダーラインを取り除く */
}
#nav a:hover { { #nav a:hover {
text-decoration: underline; /* ホバー時にアンダーライン */
}
</style
<?php
}
add_action('login_head', 'custom_login_styles')；提供されたコードはログインページのデフォルトの外観を変更します。希望する効果を得るためにCSSをカスタマイズすることができます。
![图片[3]-如何自定义和保护 WordPress 登录页面：简单有效的方法](https://www.361sale.com/wp-content/uploads/2024/12/20241227171050873-image.png)
カスタムCSSでwp-login.phpを修正します。
WordPressのログインページは、wp-login.phpファイルにカスタムCSSを注入することで高度にカスタマイズすることができます。WordPressのコアファイルを直接修正すると、特にCSSやWordPressの開発に慣れていない場合、問題が発生する可能性があるため、この方法は慎重に使用する必要があります。
この方法を安全に試すには、テスト環境を作ることをお勧めします。
具体的な手順は以下の通り：
試験場の準備
テストサイトを作成したら、wp-login.phpファイルの正確なパスを確認してください。通常、このファイルはWordPressのルートディレクトリにあります。
オリジナルファイルのバックアップ
変更の前にまずwp-login.phpファイルをバックアップします。この名前は次のように変更できます。 wp-login-original.php の名前です。
テストの修正
オンラインサイトに適用する前に、テスト環境で変更を徹底的にテストし、問題がないことを確認してください。
銘記コアファイルの直接変更のリスクが高い、このメソッドを使用する前に、慎重に計量するだけでなく、変更されたサイトの機能と通常の操作のスタイルを確認することをお勧めします。
![图片[4]-如何自定义和保护 WordPress 登录页面：简单有效的方法](https://www.361sale.com/wp-content/uploads/2024/12/20241227171940814-image.png)
次に、アプリケーションの パブリック_html フォルダに保存されます。ここに wp-login.php ドキュメンテーション
![图片[5]-如何自定义和保护 WordPress 登录页面：简单有效的方法](https://www.361sale.com/wp-content/uploads/2024/12/20241228093412733-image.png)
提供されたコードを直接 wp-login.php ドキュメンテーション <head> タグを開始タグと終了タグの間に記述します。通常、このコードはファイルの一番上に記述します。
![图片[6]-如何自定义和保护 WordPress 登录页面：简单有效的方法](https://www.361sale.com/wp-content/uploads/2024/12/20241228093826625-image.png)
見つける wp-login.php 論文 <head> セクションを完全に新しいコードに置き換えます。
これがコードです：
?><!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php echo includes_url('css/login.css'); ?>" type="text/css" />
<style>
body.login {
background-color: #ffffff; /* Complete background white */
font-family: Arial, sans-serif; /* Change font */
}
.login h1 {
text-align: center; /* Center the logo */
margin-bottom: 20px; /* Space below the logo */
}
.login h1 a {
background-image: url('<?php echo get_stylesheet_directory_uri(); ?>'); /* Add your logo as required */
background-size: contain;
background-repeat: no-repeat;
width: 100%; /* Make the logo full width */
height: 80px; /* Adjust height */
display: block;
}
.login form {
background-color: #d3d3d3; /* Grey background for the form */
padding: 26px;
border-radius: 5px; /* Rounded corners */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */
margin: 0 auto; /* Center the form */
max-width: 400px; /* Set a maximum width for the form */
}
.login label {
font-weight: bold; /* Bold labels */
color: orange; /* Change label color to orange */
}
.login input[type="text"],
.login input[type="password"] {
border: 1px solid #ddd; /* Border for inputs */
border-radius: 3px; /* Rounded corners */
padding: 10px; /* Padding for inputs */
width: 100%; /* Full width */
}
.login #wp-submit {
background-color: #007cba; /* Button color */
border: none; /* Remove border */
color: #fff; /* Text color */
cursor: pointer; /* Pointer on hover */
padding: 10px; /* Padding for button */
width: 100%; /* Full width */
}
.login #wp-submit:hover {
background-color: #006ba1; /* Darker button on hover */
}
.custom-message {
color: orange; /* Change custom message font color to orange */
text-align: center; /* Center the message */
margin-bottom: 20px; /* Space below the message */
}
#nav {
text-align: center; /* Center the navigation links */
font-size: 12px; /* Make the font smaller */
margin-top: 20px; /* Space above the links */
}
#nav a {
color: #007cba; /* Change link color */
text-decoration: none; /* Remove underline */
}
#nav a:hover {
text-decoration: underline; /* Underline on hover */
}
</style>
</head>提供されているコードは、ウェブサイトのログイン ページ用の基本スタイルを生成します。さまざまな CSS プロパティや値を試して、お好みの外観や雰囲気を実現することができます。
![图片[7]-如何自定义和保护 WordPress 登录页面：简单有效的方法](https://www.361sale.com/wp-content/uploads/2024/12/20241228094241207-image.png)
WordPressログインページの保護
ログインページをカスタマイズする際には、セキュリティも優先する必要があります。ここでは、WordPressのログインページのセキュリティを確保するためのヒントをいくつかご紹介します：
- ログイン試行回数の制限プラグインを使用して、1つのIPアドレスに対するログイン試行回数を制限します。
- 二要素認証の有効化セキュリティのレイヤーを追加することで、不正アクセスを防ぐことができます。
- ログインURLの変更プラグインを使って、デフォルトのログインURLを
/wp-login.php別の住所に変更
概要
この記事では、別のページやリダイレクトを作成する複雑さなしにWordPressのログインページをカスタマイズする2つの方法について説明します。修正 functions.php ファイルやカスタムCSSを適用することで、WordPressのログインページをウェブサイトのブランディングに合わせ、全体的なユーザーエクスペリエンスを向上させることができます。
| お問い合わせ |
|---|
| 記事が読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！ |
| ① 電話：020-2206-9892 |
| ② QQ咨询：1025174874 |
| 三 Eメール：info@361sale.com |
| ④ 勤務時間: 月～金、9:30～18:30、祝日休み |
この記事へのリンクhttps://www.361sale.com/ja/32073この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。
![表情[xiaojiujie]-光子波动网 | 专业WordPress修复服务，全球范围，快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/xiaojiujie.gif)
コメントなし