목차
制作个性化的WordPress登陆界面的实例教程,wordpress实例教程
php教程 php手册 制作个性化的WordPress登陆界面的实例教程,wordpress实例教程

制作个性化的WordPress登陆界面的实例教程,wordpress实例教程

Jun 12, 2016 pm 04:30 PM
wordpress 로그인 로그인 인터페이스

制作个性化的WordPress登陆界面的实例教程,wordpress实例教程

个性化登陆界面的方法有两种,第一种是替换登陆背景,这个算是小型个性化吧:

在/wp-admin/images找到login-bkg-tile.gif和login-bkg-bottom_new.gif两张图片,用自己定制的图片(大小最好相同)替换就行了。

当然这个不能改变登陆框的布局,显然对于追求完美的处女座来说是不够的,于是第二种方法出现了:

首先在functions.php中添加一个函数:

// custom login for theme
// folder themes/theme_name/custom-login/
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />';
}
add_action('login_head', 'custom_login');

로그인 후 복사

通过一个简单的“勾子”,现在你的主题已经可以开启个性化登陆界面了,接下来要做的,是为你的登陆界面写css样式,命名为custom-login.css,然后再把css文件放到主题文件夹里就行了。

以下是本站的css,供大家参考(由于我的custom-login.css是放在主题文件夹的子文件里,所以background里的url要写成如../images/login-bg-body.jpg的形式,熟悉MCS的人就会知道 ".." 代表上一级目录)

/* 页面css */
html,body,#wpbody,.form-table .pre{background: #ffffff url("../images/login-bg-body.jpg");&#63; font-size: 13px; font-family: 微软雅黑,宋体;}
a{text-decoration: none;}
body.login,body{border: none;}
h1 a{display: none;}

/* 登陆框主体部分css */
#login{background: url("../images/login-bg.jpg") no-repeat;&#63; width: 650px;&#63; height: 500px;&#63; position: relative; margin: 50px auto;}
#loginform {padding-left: 110px;&#63; float: right;&#63; border-left: 2px solid #e3e3d3}
#loginform #user_login , #loginform #user_pass {border: 2px dotted #666666}
form{width: 280px;&#63; height: 166px;&#63; padding: 45px 0px 0px 0px;&#63; background: url() no-repeat; margin: 60px 0 0 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
#user_pass,#user_login,#user_email{width: 190px; height: 20px; margin-bottom: 10px;}

/* 登陆框各组成css */
label {font-size: 13px; color: #fff;}
form .forgetmenot label {font-size: 13px;&#63; color: #666666;}
.login #nav a{color: #666666 !important;}
input.button-primary, button.button-primary, a.button-primary{background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family: 微软雅黑,宋体;}
form .submit input {color: #666666;}
input.button-primary: active, button.button-primary: active, a.button-primary: active {background: none;}

/* 其他 */
#nav{margin: 0; padding: 0; position: absolute; text-shadow: none;}

로그인 후 복사

送上效果图

看到效果后就会发现,虽然我们不能改变页面的html元素,但包括登陆框结构在内的整个登陆页面都可以自定义,只要你知道每个部分的css选择器名称即可。所以只要用firebug等工具查看所有css的id或class,就可以制作出一个完全自己作主的登陆界面。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PHP 대 Flutter: 모바일 개발을 위한 최고의 선택 PHP 대 Flutter: 모바일 개발을 위한 최고의 선택 May 06, 2024 pm 10:45 PM

PHP 대 Flutter: 모바일 개발을 위한 최고의 선택

WordPress에서 페이지 너비를 변경하는 방법 WordPress에서 페이지 너비를 변경하는 방법 Apr 16, 2024 am 01:03 AM

WordPress에서 페이지 너비를 변경하는 방법

WordPress 기사는 어느 폴더에 있나요? WordPress 기사는 어느 폴더에 있나요? Apr 16, 2024 am 10:29 AM

WordPress 기사는 어느 폴더에 있나요?

WordPress에서 제품 페이지를 만드는 방법 WordPress에서 제품 페이지를 만드는 방법 Apr 16, 2024 am 12:39 AM

WordPress에서 제품 페이지를 만드는 방법

WordPress에서 저자를 검색하는 방법 WordPress에서 저자를 검색하는 방법 Apr 16, 2024 am 01:18 AM

WordPress에서 저자를 검색하는 방법

어떤 WordPress 버전이 안정적인가요? 어떤 WordPress 버전이 안정적인가요? Apr 16, 2024 am 10:54 AM

어떤 WordPress 버전이 안정적인가요?

워드프레스 템플릿 파일은 어디에 있나요? 워드프레스 템플릿 파일은 어디에 있나요? Apr 16, 2024 am 11:00 AM

워드프레스 템플릿 파일은 어디에 있나요?

WordPress를 개발하는 데 어떤 언어가 사용됩니까? WordPress를 개발하는 데 어떤 언어가 사용됩니까? Apr 16, 2024 am 12:03 AM

WordPress를 개발하는 데 어떤 언어가 사용됩니까?

See all articles