様式化されたカスタムWordPressログイン画面を設計します

このガイドは、カスタムCSSと小さなPHP関数を使用して、いくつかの簡単な手順でWordPressログイン画面を劇的にカスタマイズする方法を示しています。 簡単なロゴの変更を超えて、完全にブランドのログインエクスペリエンスを作成します。

（クリックしてフルバージョンを表示）このチュートリアルで使用されている背景画像をダウンロードしてください：

このチュートリアルはセクションに分割されているため、必要な側面のみをカスタマイズできます。 微妙な微調整や完全なオーバーホールが必要な場合でも、このガイドではカバーしています。 ステップ1：変更

を変更します

まず、テーマの

ファイルにコードを追加して、WordPressにログイン画面にカスタムスタイルシートを使用するように指示する必要があります。 次のコードをfunctions.phpファイルに貼り付けます：

このコードはfunctions.phpアクションに接続され、functions.phpファイルが含まれています。 関数と

の両方が含まれていることを確認してください。 CSSファイルへのパスは、テーマのディレクトリに関連しています。 必要に応じて調整します。

<code class="language-php">function stylized_login() {
  echo '<link rel="stylesheet" type="text/css" href="'%20.%20get_bloginfo('stylesheet_directory')%20.%20'/stylized-login.css">';
}
add_action('login_head', 'stylized_login');</code>

ステップ2：作成login_headstylized-login.cssを作成します add_actionテーマのディレクトリ（

と同じフォルダー）に

という名前のファイルを作成します。 これは、すべてのカスタムCSSを追加する場所です。stylized-login.css

ステップ3：ログイン画面をカスタマイズ（CSS）

stylized-login.cssさあ、style.cssファイルにCSSを追加しましょう。 次のコードは包括的なカスタマイズを提供しますが、必要な部品のみを選択的に使用できます。

や

などのプレースホルダーを、画像の実際のファイル名に置き換えることを忘れないでください。 ロゴは理想的には247x63ピクセルである必要があります。

ステップ4：ロゴリンクを変更（オプション）

ロゴに関連付けられているリンクを変更するには、これをfunctions.phpファイルに追加します：

<code class="language-php">function stylized_login() {
  echo '<link rel="stylesheet" type="text/css" href="'%20.%20get_bloginfo('stylesheet_directory')%20.%20'/stylized-login.css">';
}
add_action('login_head', 'stylized_login');</code>

これにより、ロゴがサイトのホームページにクリックされます。

これらの変更を行った後、ブラウザのキャッシュをクリアし、カスタマイズされたログイン画面をテストします。コードを変更する前に、常にWebサイトをバックアップすることを忘れないでください。

以上が様式化されたカスタムWordPressログイン画面を設計しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。