让我们自定义WordPress登录屏幕并更改设计

wp-login-thumbnail

WordPress的登录屏幕的设计是否与初始状态相同?如果您保持初始状态,请趁此机会坚持登录屏幕的设计。

这次,我将在学习如何自定义Wordpress登录屏幕的同时,说明如何更改登录屏幕的设计。

WordPress的登录屏幕组件

WordPress的默认登录屏幕

WordPress的的默认登录屏幕是

  • 背景(正文)
  • 商标
  • 用户名输入栏
  • 密码输入栏
  • 登录按钮
  • “忘记密码了吗?”文本
  • “返回”文字

它包括。基本上无需修改核心文件即可自定义Wordpress登录屏幕。您可以通过在主题文件的functions.php中编写自定义的标准描述来自定义它。

参考网址
自定义登录表单| WordPress的 Codex

自定义登录屏幕徽标

让我们更改WordPress登录屏幕上最显眼的徽标。

徽标的源代码被h1标记包围,链接目标仅是官方的Wordpress日语页面,并且该图像已作为背景图像加载。

使用login_enqueue_scripts钩子来更改徽标。添加以下描述以更改functions.php中徽标部分的背景图像。

function my_login_logo() { ?>

.login h1 a {
background-image: url(/images/site-login-logo.png);
}

<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

根据徽标的大小,可能需要指定背景图像的大小和高度,但是可以通过将其添加到上述代码中来覆盖它。另外,对于徽标图像的路径,请适当地指定放置图像的路径。

结果,登录屏幕将如下更改。

WordPress的登录屏幕徽标更改

更改徽标链接目标和标题文本

另外,要更改徽标的链接目标和标题,请在functions.php中添加以下描述。

function my_login_logo_url() { // リンク先変更
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() { // タイトル変更
return 'サイト名';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

直接指定链接目标时返回‘home_url()’; の代わりにreturn ‘http://…’;输入。请重写标题的网站名称部分。

CSS和JavaScript的外部文件,用于自定义登录屏幕

实际上,在外部文件中管理徽标的背景,表单,按钮以及徽标的CSS和JavaScript更改实际上更加方便。如果您在主题文件中创建样式表和JS文件以自定义登录屏幕,并在functions.php中编写以下代码,则不必每次都在functions.php中弄乱。

function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-login.css' );
wp_enqueue_script( 'custom-login', get_template_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

此后,如果您为外部文件中的每个元素指定自定义描述,则可以。您可能不需要非常自定义JavaScript,但是请记住,可以像这样将其作为外部文件读取。

自定义登录屏幕时可以使用的选择器列表

Codex有您可以指定的CSS选择器列表。我已经添加了关于哪个选择器用于哪个元素的注释。

body.login {} /* ログイン画面の背景 */
body.login div#login {} /* ログインフォームの幅、デフォルトでは320pxに指定 */
body.login div#login h1 {} /* ログイン画面のロゴを囲む、指定されているのはtext-align: center;のみ */
body.login div#login h1 a {} /* 商标画像変更、ロゴに関するCSSはこのセレクタを使用 */
body.login div#login form#loginform {} /* ログインフォーム全体のセレクタ */
body.login div#login form#loginform p {} /* フォーム入力欄のlabelとinputを囲むpタグ */
body.login div#login form#loginform p label {} /* フォーム入力欄のラベル */
body.login div#login form#loginform input {} /* フォーム入力欄とログインボタン */
body.login div#login form#loginform input#user_login {}  /* 用户名输入栏のみのセレクタ */
body.login div#login form#loginform input#user_pass {} /* パスワード入力欄のみのセレクタ */
body.login div#login form#loginform p.forgetmenot {} /* ログイン状態を保存するチェックボックスとテキストを囲むpタグ */
body.login div#login form#loginform p.forgetmenot input#rememberme {}  /* 「ログイン状態を保存する」テキスト */
body.login div#login form#loginform p.submit {} /* 登录按钮を囲むpタグ */
body.login div#login form#loginform p.submit input#wp-submit {} /* 登录按钮 */
body.login div#login p#nav {} /* 「パスワードをお忘れですか」を囲むpタグ */
body.login div#login p#nav a {} /* 「パスワードをお忘れですか」のaタグ */
body.login div#login p#backtoblog {} /* 「~へ戻る」を囲むpタグ */
body.login div#login p#backtoblog a {} /* 「~へ戻る」のaタグ */

如果使用它们并在样式表中进行描述,则登录屏幕将发生很大变化。

示例1:更改背景图像

如果要更改背景图像

body.login {
background: url('../images/my_login_bgd.jpg') no-repeat center center;
background-size: cover;
}

图像放置在主题文件的图像文件夹中,并指定了路径。背景图像会根据屏幕尺寸自动放大/缩小。

当然,您可以仅指定背景色,而不使用图像。

示例2:隐藏表格下方的文本

另外,如果要隐藏“忘记密码?”和“返回至”

body.login div#login p#nav {display: none;} /* 「パスワードをお忘れですか」を囲むpタグ */
body.login div#login p#backtoblog {display: none;} /* 「~へ戻る」を囲むpタグ */

去做。如果可以看到源代码,则将访问链接目标,但是如果要从源代码中删除它,请直接编辑核心文件wp-login.php。 (*由于它是重要文件,我们不建议直接编辑wp-login.php。请您自担风险。)

登录屏幕定制示例

仅通过为登录屏幕指定CSS选择器,即可在10分钟内完成以下登录屏幕。

Wordpress登录屏幕示例

即使背景图像和徽标发生变化,气氛也会发生巨大变化。通过充分利用伪元素作为应用程序之前和之后,还可以添加其他文本而不篡改核心文件。

最后

登录到使用WordPress构建的网站后,只要保存了登录状态,就没有机会看到登录屏幕。但是,如果未保存登录状态,则会定期看到登录屏幕。

如果该站点由您自己操作,则默认登录屏幕可能很好。但是,如果您运行的Wordpress会员网站是由多人甚至不指定人数登录的,则第一印象仍然很重要。

自定义登录屏幕非常容易,因此请尝试一下。

撰写本文的人

ケイタ

潜伏在东京的一位网络工程师。我做各种各样的事情,例如生产/运营/数据分析。 応援は@keitaoriginal请从。