워드프레스 | 로그인 페이지 수정방법 코드, 플러그인

개요

워드프레스의 기존 로그인 화면은 커스터마이징을 하는 것이 어렵습니다. 로고를 직접 붙이는 데에도 어려움을 가지고 있어요. 이것을 해결하는 방법은 플러그인과 코드 활용 방법이 있습니다.

조금 더 가벼운 사이트를 만들고 싶다면 직접 코드를 추가하여 만드는 방법을 추천드립니다. 그러나, 오늘 소개해드릴 플러그인 또한 충분히 가볍고 좋아서 충분히 잘 사용하실 것이라는 생각이 듭니다.

플러그인

로그인 페이지 커스터마이저 (Custom Login Page Customizer) 는 무료입니다. 그렇지만 강력한 기능을 지원하고 있습니다.

로그인 페이지 커스터마이저는 총 5가지의 커스텀 템플릿을 제공합니다. 단순한 로고만 바꾸는 경우도 존재하며, 이미지를 직접 추가함으로써 사이트에 산뜻함을 만들 수도 있습니다.

놀랍게도 여러가지 옵션을 제공하기도 합니다. 이는 로그인 활동에서 거의 모든 부분을 수정할 수 있도록 만들어졌으며, 원한다면 직접 CSS 를 추가하여 관리자 페이지를 직접 수정할 수 있도록 만든 점이 장점입니다.

코드 활용방법

function custom_login_img()
{
    echo '<style type="text/css">
    h1 a {background-image: url('.get_template_directory_uri().'/logo.png) !important; 
    }
    </style>';
}
add_action('login_head', 'custom_login_img');

login_head 에 위의 코드를 추가합니다. 이미지 영역을 위의 코드로 덮어씌우게 됩니다.

function custom_login_img()
{
    echo '<style type="text/css">
    h1 a {background-image: url('.get_template_directory_uri().'/logo.png) !important; 
    width: 135px !important;
    height: 50px !important;
    background-size: 135px !important;
    }
    </style>';
}
add_action('login_head', 'custom_login_img');

로고 사이즈가 84픽셀로 고정되기 때문에 추가로 코드를 입력하는 것이 좋습니다. 위와같이 width, height, background-size 를 추가하면 너비와 높이를 조절할 수 있습니다.