Wordpress용 사용자 지정 로그인 페이지 스타일 만들기

우리는 최근 호주 통신 인프라 제공업체UCG(및 New Zealand)를 위한 새로운 웹사이트를 개설했습니다. 우리는 약간의 사용자 지정 CSS와 Wordpress functions.php 파일의 후크를 사용하여 직원이 웹 사이트에 들어갈 수 있는 멋진 로그인 페이지를 만드는 간단한 방법을 원했습니다.

테마의 functions.php 파일에 다음을 추가하십시오.

function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/custom-login-styles.css" />';
}
add_action('login_head', 'my_custom_login');

`function my_login_logo_url() {
return get_bloginfo( 'url' );
}

// changing the logo link from wordpress.org to your site
function mb_login_url() {  return home_url(); }
add_filter( 'login_headerurl', 'mb_login_url' );


function my_login_logo_url_title() {
return 'Your Page Title';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

function login_error_override()
{
    return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );

이제 로그인 페이지의 스타일을 지정할 수 있는 사용자 지정 CSS 파일에 대한 링크가 생겼습니다. 해당 파일은/custom-login-styles.css이므로 이 이름으로 빈 파일을 만들어 자식 테마에 추가합니다.

이제 스타일을 지정할 수 있습니다. UCG를 위해 우리가 실행하고 있는 것은 다음과 같습니다.

body.login {
  background: #252525 url(/logo.svg) no-repeat center center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.login h1 a {
  padding: 20px!important;
  background-size: 60% autoimportant;
  height: auto!important;
  width: auto!important;
}

.login #nav, .login #backtoblog a, .login #nav a { color: #999; }
.login #backtoblog a:hover, .login #nav a:hover { color: #fff!important; }

이제 우리는 플러그인 없이 Wordpress용 맞춤형 브랜드 로그인 페이지를 갖게 되었습니다.

우리는 그것을 사용하고 있습니다:
Print Miami
Monster Tees
Sales Tax USA
Dark Fibre
HFC
FTTB
SFP