Главная / Wordpress / Изменяем стили страницы входа в админку WordPress без плагинов

Изменяем стили страницы входа в админку WordPress без плагинов

05.05.2016

С этой статьи я хочу начать вести новую рубрику — WordPress. Давно хотел этим заняться, но все никак руки не доходили. Кому то может показаться что я отхожу от темы заданной сайту в самом начале, но хочу успокоить вас дорогие друзья. С самого начала, когда идея создания этого сайта была еще у меня в голове, я планировал сделать рубрику в которой бы писал не только про WordPress, но и обо всем что касается сайтостроения и вебмастерства.

В дальнейшем, планирую опубликовать курсы по сайтостроению, которые в большей мере будут состоять из моих статей. Так что, кому интересно — читайте и узнавайте новое, кому не интересно — открывайте другие рубрики, благо есть что почитать на моем сайте.

Итак, сегодня я расскажу как без плагинов сменить стили на странице авторизации в админку wordpress. Раньше, когда я только начинал знакомство с этой CMS, я использовал плагины, которые позволяли сменить фон страницы авторизации и логотип. Через какое то время, я нашел как изменить эти стили непосредственно в файлах самого wordpress. Всё в общем было хорошо, пока WordPress не предложил установить обновления своего движка. После чего, само собой все мои труды были перезаписаны новыми файлами из обновления.

Сегодня я уже имею немалый опыт работы с этой CMS и могу подсказать вам как править стили страницы входа в админку, чтобы не пришлось после обновления всё переделывать.

Подключаем свой файл стилей страницы авторизации

Для начала вам нужно открыть файл functions.php который находится в папке вашей темы

открываем файл functions.php

После чего, в самый конец файла вставить следующий код:

//Подключаем стили страницы авторизации
function custom_login_css() {
	echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri('template_directory').'/style_login.css" />';
	}
	add_action('login_head', 'custom_login_css');
//---------END-----------

//Подключаем стили страницы авторизации

function custom_login_css() {

echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri('template_directory').'/style_login.css" />';

}

add_action('login_head', 'custom_login_css');

//---------END-----------

Тем самым мы подключаем к нашей теме файл style_login.css в котором мы и будем указывать новые стили. Да, не забудьте создать этот файл в папке с вашей темой.

Теперь чтобы проверить что у меня получилось, я задам фон для страницы авторизации. Открываю файл style_login.css и пишу в него стиль фона:

body.login{
	background-color: #34495e;
}

body.login{

background-color: #34495e;

}

обновляю страницу авторизации и вуаля, у меня новый цвет фона

Изменяем логотип wordpress на свой

Для того чтобы изменить логотип, пропишите в файле стилей новый стиль, в котором будет указан путь к вашему новому логотипу, в моем случае я прописал так:

.login h1 a{
	background: url('/wp-content/themes/pctheme/img/index_.png') no-repeat center center;
}

.login h1 a{

background: url('/wp-content/themes/pctheme/img/index_.png') no-repeat center center;

}

Сохраняем файл стилей и проверяем. Как видите, теперь гораздо лучше

Последним штрихом будет смена гиперссылки логотипа. Сменив логотип с WordPress на свой, при наведении на него ссылка все равно останется прежней (на сайт wordpress). Для того чтобы поменять ссылку на свою, добавляем следующий код в functions.php:

// Форма авторизации: ставим свою ссылку с логотипа.
add_filter('login_headerurl', create_function('', 'return get_home_url();'));
 
// Форма авторизации: ставим свой title в логотипе.
add_filter('login_headertitle', create_function('', 'return get_bloginfo("title");'));

// Форма авторизации: ставим свою ссылку с логотипа.

add_filter('login_headerurl', create_function('', 'return get_home_url();'));

// Форма авторизации: ставим свой title в логотипе.

add_filter('login_headertitle', create_function('', 'return get_bloginfo("title");'));

тем самым мы укажем ссылку на главную страницу нашего сайта, а при наведении увидим свой тайтл.

Дальше украшайте страницу входа в админку как хотите, вас может ограничить только ваша фантазия. Теперь стили этой страницы всегда будут актуальными, а обновления wordpress ни коем образом не заденут их.