로그인 화면은 워드프레스 대시보드로 접근하는 게이트입니다. 웹사이트 관리를 위해 꼭 한번은 거쳐야하는 페이지이죠. 잠깐 거쳐가는 페이지라 크게 신경을 안쓰는 경우도 있지만 로그인 화면에 접근하는 사람들이 많은 사이트에서는 로그인 페이지도 웹사이트와 동일한 느낌으로 꾸며서 일관성을 유지하는 것이 좋습니다.
워드프레스 로그인 폼 커스터마이징
워드프레스 기본 로그인 폼은 위와 같이 워드프레스 로고, 아이디, 패스워드, 패스워드 분실, 그리고 홈으로 가기 링크가 있습니다. 아무래도 로그인 페이지에서 가장 먼저 바꾸고 싶은 것이 워드프레스 로고가 아닐까 싶습니다.
로그인 페이지 로고 변경하기
1. 먼저 로고 이미지를 준비해야겠죠. 로고 이미지는 스타일 변경에 따라 사이즈를 변경할 수 있지만 기본틀에 맞추기 위해서는 323px X 67px 이내가 적당합니다.
HwangC의 착한 워드프레스 로고 사이즈를 줄여서 207px X 67px (login-logo.png)로 만들어보았습니다. 이미지는 테마/images/ 폴더 아래에 저장해두었습니다.
2. 이제 워드프레스 훅을 활용해서 로그인 로고에 훅을 걸어볼 차례입니다. 훅의 이름은 login_enqueue_scripts이며 이 훅을 활용하여 위에서 준비한 이미지로 워드프레스 이미지를 대체합니다. 아래의 코드를 테마의 functions.php에 삽입합니다.
/**
* my custom login logo
*/
function hwangc_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/login-logo.png);
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'hwangc_login_logo' ); |
로그인 페이지를 새로고침하면 로고 이미지가 변경된 것을 볼 수 있습니다.
3. 하지만 로고에 마우스를 올리면 “powered by wordpress”가 나타나고 클릭하면 wordpress.org로 이동합니다. 먼저 링크를 홈화면으로 변경해보겠습니다. 아래의 코드는 login_headerurl 훅을 이용하여 로고 url을 변경한 것입니다. 아래의 코드를 functions.php파일에 붙여넣기 하세요.
/** * login logo link */ function hwangc_login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'hwangc_login_logo_url' ); |
아래의 코드는 login_headertitle 훅을 이용하여 로고 이미지 제목을 변경한 것입니다. ‘HwangC의 착한 워드프레스’대신 여러분의 로고 제목을 입력하세요.
/** * login logo title */ function hwangc_login_logo_url_title() { return 'HwangC의 착한 워드프레스'; } add_filter( 'login_headertitle', 'hwangc_login_logo_url_title' ); |
이제 여러분의 로고가 달린 로그인 페이지가 완성되었습니다.
더 많은 로그인 페이지 스타일 변경하기
더 많은 로그인 페이지 스타일을 변경하기 위해서는 CSS에 대한 기본지식이 필요합니다. 먼저 변경을 원하는 영역을 선택하고 그 영역에 대한 스타일 컨셉을 잡습니다. 컨셉이 잡혔다면 그 컨셉에 맞춰 CSS코드를 작성하면 되겠죠.
위에서 로고 이미지 변경을 위해서 body.login div#login h1 a 요소의 백그라운드 이미지를 변경했고 CSS를 직접 함수에 작성했습니다. 만일 더 많은 로그인 페이지 스타일을 변경하기 원하신다면 로그인 페이지 CSS파일을 생성하고 그 파일에 모든 스타일을 정의하는 것이 편리합니다. 로그인 페이지의 각 영역에 대한 요소는 아래와 같습니다.
body.login {} body.login div#login {} body.login div#login h1 {} body.login div#login h1 a {} body.login div#login form#loginform {} body.login div#login form#loginform 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 {} body.login div#login form#loginform p.forgetmenot input#rememberme {} body.login div#login form#loginform p.submit {} body.login div#login form#loginform p.submit input#wp-submit {} body.login div#login p#nav {} body.login div#login p#nav a {} body.login div#login p#backtoblog {} body.login div#login p#backtoblog a {} |
1. 예를 들어 로그인 이미지 스타일 변경과 함께 텍스트 링크의 색상을 변경하고자 한다면 테마 폴더에 hwangc-login.css 파일을 생성하고 아래의 코드를 파일에 붙여넣습니다.
body.login div#login h1 a { background-image: url(images/login-logo.png); padding-bottom: 30px; } body.login div#login p#nav a, body.login div#login p#backtoblog a { color: #0c0 !important; /* Your link color. */ } |
2. 이제 functions.php파일에 아래 코드를 붙여넣어 훅을 걸면 로그인 페이지에서 hwangc-login.css 파일을 불러와 원하는 스타일 변경이 됩니다.
function hwangc_login_stylesheet() { ?>
<link rel="stylesheet" id="hwangc_wp_admin_css" href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/hwangc-login.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'hwangc_login_stylesheet' ); |
위에서 로고만 변경할 때는 스타일을 직접입력했지만 변경할 스타일이 많다면 css파일을 만들고 로그인 페이지에서 그 파일을 불러오는 것이 편리합니다. 더 많은 로그인 화면 꾸미기 정보는 codex를 참고하시기 바랍니다.
플러그인 활용
5. Custom Login
6. Sexy Login
9. Pathway
마치며
로그인 페이지는 대시보드 접근을 위해 꼭 필요한 웹사이트의 일부분입니다. 그동안 로그인 페이지를 워드프레스 로고로 방치하셨다면 이번 기회에 여러분의 멋진 웹사이트 로고로 장식해보시는 것도 좋을 것같네요.
펌 : http://www.hwangc.com/decorate-your-wordpress-login-page/
'wordpress' 카테고리의 다른 글
| 워드프레스 위젯 만들기 (0) | 2013.08.09 |
|---|---|
| 워드프레스 플러그인 만들기 기본 개념 (0) | 2013.08.09 |
| 워드프레스의 포스트 SNS로 공유하기 (0) | 2013.08.06 |
| 워드프레스 사용자 등급별 역할 이해하기 (0) | 2013.08.06 |
| Wordperss의 Permalink를 Short URL로 치환하기 (0) | 2013.08.06 |