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

WP-Login-Thumbnail

WordPress.登录屏幕设计留下初始状态?如果您留在初始状态,请让我们这样做这个时机的登录屏幕设计。

这一次,我们将解释如何在学习如何自定义WordPress登录屏幕时更改登录屏幕设计。

WordPress.登录屏幕组件

WordPress.默认登录屏幕

WordPress.的默认登录屏幕是

  • 身体身体
  • 商标
  • 用户名输入字段
  • 密码输入字段
  • 登录按钮
  • “忘记了密码”文字
  • “回到〜”文字

它包括。基本上没有必要将手添加到核心文件以自定义WordPress登录屏幕。您可以自定义主题文件函数.php以及自定义自定义。

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

登录屏幕徽标自定义

让我们在WordPress登录屏幕上更改最受证实的徽标。

徽标源代码括在H1标签中,链接目的地是WordPress日语官方页面,并且图像被读取为背景图像。

使用login_enqueue_scripts挂钩更改徽标。将徽标部分的背景图像更改为函数.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.登录屏幕徽标更改

徽标链接和标题文本更改

另外将以下描述添加到函数.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

背景和表单,按钮和更多来自CSS和JavaScript的更改,实际上是方便地组织成外部文件。登录屏幕为主题文件中的自定义和JS文件创建样式表,并在函数中写下以下代码.Php需要搞定每个函数.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中运行,第一印象仍然很重要。

登录屏幕的自定义很容易,所以请尝试。

给这篇文章的人

ケイタ

隐藏在东京的网络工程师。我们做了广泛的生产/操作/数据分析。 応援は@KeitaInginal.请。