Отборная информация, которая вставляет!

Кастомизируемая логин панель на wordpress

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

1. Установить плагин Custom Admin Branding и не париться с кодом.

После установки, нужно будет сделать свои изображения и поместить их в папку с плагином или заменить существующие. Только не забывайте, что изображения для хедера и футера должны быть в png формате, а остальные в jpg

Второй альтернативный плагин — BM Custom Login

2. сменить дефолтные картинки для логин формы.

wp-admin-screen

найти их вы можете в папке wp-admin / images, картинки имеют название

login-bkg-tile.gif
login-bkg.bottom.gif

3. Сменить просто картинки через файл стилей.

Тут, чуть посложнее, но зато без плагинов

Сначала нужно зайти в файл functions.php вашей темы и добавить код

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


Этим кодом, мы указываем движку подгружать файл стилей не дефолтный, а ваш, который вы создадите.

Далее, в файлах вашей темы добавьте папку custom-login, а в неё положите файл custom-login.css — в нем мы и будем делать изменения.

Вот и все, теперь в вашем файле custom-login.css вы можете создавать создавать стили и подгружать ваши собственные картинки.

Как пример

/* Custom Login Styles */
 
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}	/* Page background. Can't use the body tag for this! */
h1 a {	/* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
} 
 
body.login {border-top-color:#dff4fc;}	/* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}	/* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;}	/* Rollover link effects in top bar */

пример

немного картинок

knoxware

goldfish2

ehk

luma


 

Похожие статьи:



5 комментариев к “Кастомизируемая логин панель на wordpress”

  1. Хорошее описание! Спасибо! Как раз мне в тему. Попробую применить.

  2. Спасибо большое! Второй год пытаюсь панеьку для логина нормльно сделать — только сейчас удалось.

  3. спасибо! попробую сделать это у себя!

  4. Спасибо, автору респект

  5. Нихера не работает Fatal error: Call to undefined function add_action() in /home/www/z201671/http/wp-includes/functions.php on line 4673

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›