<

Нет сайта??

Вы можете заказать у нас создание информационных сайтов, сайтов-визиток, интернет-магазинов, порталов, блогов и сайтов любой другой направленности и сложности. Вам не придется думать о том, где и как разместить сайт, мы поможем найти удобный и приемлемый хостинг, зарегистрируем подходящее доменное имя.

Есть сайт нет посетителей?

Раскрутка и продвижение сайта по поисковым запросам. Наш опыт позволит при продвижении Вашего сайта быстро достигнуть первой десятки и уверенно быть лидером среди других сайтов в дальнейшем. Наша методика продвижения основывается на внутренней оптимизации (оптимизация кода) и внешней оптимизации (оптимизация страницы).

Сколько это будет стоить?

Цена варьируется от ваших пожеланий и бюджета, основные же расценки вы можете посмотреть тут

Скажем прямо – с годами страница входа в консоль WordPress практически не претерпела никаких изменений. Безусловно, вы можете добавить к странице входа свой логотип, однако это не будет таким уж значительным разнообразием. Стандартная страница входа в консоль ломает привычный опыт взаимодействия в произвольных темах, поскольку она сильно отличается от общего дизайна сайта. Переход от красивой темы к стандартной странице входа в консоль напоминает резкий телепорт из Парижа в Сибирь.

Почему бы не изменить правила игры, полностью переработав страницу входа в консоль? Возможность ее оформления безграничны. Благодаря некоторым приемам CSS и Javascript, вы можете сделать яркую, уникальную страницу входа в консоль.

В этом учебном руководстве мы рассмотрим создание страницы входа в панель управления WordPress, которая будет обладать произвольным бэкграундом, шрифтами и стилями, а также приятным fade-in jQuery-эффектом, примененным к форме входа.

Вот пример того, что мы будем делать:

untamelogin1

Смотреть Live Demo

В этом учебном руководстве мы внесем несколько базовых изменений в файлы темы, что позволит нам создать ошеломительную страницу входа в консоль для веб-сайтов на WordPress.

  • Шаг 1. Добавляем произвольный бэкграунд.
  • Шаг 2. Заменяем логотип WordPress своим логотипом.
  • Шаг 3. Изменяем внешний вид формы входа.
  • Шаг 4. Изменяем шрифты, используя Google Fonts.
  • Шаг 5. Добавляем  jQuery-эффект “Fade-In” к форме.
  • Шаг 6. Привязываем к логотипу произвольную ссылку.

Все эти изменения могут быть добавлены к вашей теме. Безусловно, можно было бы просто создать отдельный плагин, который вносил бы все необходимые изменения, однако для большего удобства лучше хранить все изменения в папке с активной темой. Лучше всего создать отдельную папку с файлами входа в систему /login в папке с темой. Это поможет вам хранить все соответствующие модификации в одном месте.

Шаг 1. Добавляем произвольный бэкграунд.

Если вы когда-либо пытались добавлять стили к стилевой таблице своей темы, ожидая, что они помогут настроить страницу входа в консоль, то вы должны были сталкиваться со следующей проблемой: WordPress не выполняет загрузку стилевой таблицы темы для страницы входа.

Никаких проблем, мы создадим свою собственную стилевую таблицу для данного примера. Откроем .txt файл и назовем его login-styles.css. Загрузим его в свою новую директорию /login/.

create-directory

Теперь мы «научим» WordPress загружать стилевую таблицу для страницы входа в консоль. Добавим к файлу functions.php своей темы следующий код:

01 function custom_login_css() {
02 echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
03 }
04
05 add_action('login_head''custom_login_css');

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

Настройка бэкграунда может быть легко сделана с помощью CSS. По умолчанию, WordPress добавляет класс .login к элементу body страницы входа в консоль; следовательно, вы можете использовать данный класс для установки своего фона:

01 body.login {
02 background: #fbfbfb url('your-bg.jpg') no-repeat fixed center;
03 }

Старые стили, которые находятся в /wp-admin/css/login.css, будут перекрываться новыми стилями, заданными нами, поэтому имеет смысл изучить данный файл, чтобы получить лучшее представление о вносимых изменениях; также можно использовать firebug для выявления нужных стилей.

Шаг 2. Заменяем логотип WordPress своим логотипом.

Логотип WordPress добавлен к странице входа в консоль в качестве фона элемента .login h1 a. Загрузите свой собственный логотип в директорию /login/ и подберите необходимую высоту и ширину, а также измените background-size.

01 .login h1 a {
02 background-image: url('../login/logo.png');
03 background-size: 300px 260px;
04 width: 300px;
05 height: 260px;
06 }

Возможно, вам понадобится задать отступы, что зависит от высоты логотипа:

01 #login {
02 padding: 30px 0 0;
03 }

Шаг 3. Изменяем внешний вид формы входа.

Теперь давайте сделаем что-нибудь интересное с дизайном самой формы. В этом деле я вдохновлялся прозрачной контактной формой, представленной на CodePen. Мы придадим стандартной форме входа большую привлекательность и современность:

login-form

Вы можете использовать любые стили, какие только захотите, однако в данном примере мы сделаем именно прозрачную форму, как в демо-образце.

Сначала давайте применим стили к самой форме:

01 .login form {
02 margin-left: auto;
03 margin-right: auto;
04 padding: 30px;
05 border: 1px solid rgba(0,0,0,.2);
06 -moz-border-radius: 5px;
07 -webkit-border-radius: 5px;
08 border-radius: 5px;
09 -moz-background-clip: padding;
10 -webkit-background-clip: padding-box;
11 background-clip: padding-box;
12 background: rgba(0, 0, 0, 0.5);
13 -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
14 -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
15 box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
16 overflow: hidden;
17 }

Затем мы настроим элемент input и добавим мягкий, размытый фокус.

01 .login form input {
02 width: 240px;
03 height: 48px;
04 -moz-border-radius: 4px;
05 -webkit-border-radius: 4px;
06 border-radius: 4px;
07 display: block;
08 }
09
10 .login form input:focus,
11 .login form textarea:focus {
12 background-color: rgba(0, 0, 0, 0.2);
13 -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
14 -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
15 box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
16 overflow: hidden;
17 }

В зависимости от цветов, которые вы выбрали для своей формы, вам, возможно, понадобится настроить метки для полей и настроить чекбокс «Remember Me».

01 .login label {
02 color: #fff;
03 line-height: 26px;
04 }
05
06 .login form .input,
07 .login input[type="text"] { color: #8c8a8 }
08 input#rememberme {
09 height: 18px;
10 width: 18px;
11 display: inline;
12 vertical-align: middle;
13 margin: 10px 0;
14 }

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

01 input.button-primary {
02 width: 138px;
03 height: 44px;
04 -moz-border-radius: 4px;
05 -webkit-border-radius: 4px;
06 border-radius: 4px;
07 float:right;
08 border: 1px solid #3d5a5a;
09 background: #416b68;
10 background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
11 background: -webkit-linear-gradient(top, #6da5a3, #416b68);
12 background: -moz-linear-gradient(top, #6da5a3, #416b68);
13 background: -ms-linear-gradient(top, #6da5a3, #416b68);
14 background: -o-linear-gradient(top, #6da5a3, #416b68);
15 background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
16 padding: 10.5px 21px;
17 -webkit-border-radius: 6px;
18 -moz-border-radius: 6px;
19 border-radius: 6px;
20 -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
21 -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
22 box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
23 text-shadow: #333333 0 1px 0;
24 color: #e1e1e1;
25 }
26
27 input.button-primary:hover {
28 border: 1px solid #3d5a5a;
29 text-shadow: #333333 0 1px 0;
30 background: #416b68;
31 background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
32 background: -webkit-linear-gradient(top, #77b2b0, #416b68);
33 background: -moz-linear-gradient(top, #77b2b0, #416b68);
34 background: -ms-linear-gradient(top, #77b2b0, #416b68);
35 background: -o-linear-gradient(top, #77b2b0, #416b68);
36 background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
37 color: #fff;
38 }
39
40 input.button-primary:active {
41 margin-top:1px;
42 text-shadow: #333333 0 -1px 0;
43 border: 1px solid #3d5a5a;
44 background: #6da5a3;
45 background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
46 background: -webkit-linear-gradient(top, #416b68, #609391);
47 background: -moz-linear-gradient(top, #416b68, #6da5a3);
48 background: -ms-linear-gradient(top, #416b68, #6da5a3);
49 background: -o-linear-gradient(top, #416b68, #6da5a3);
50 background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
51 color: #fff;
52 -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
53 -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
54 box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
55 }

Шаг 4. Изменяем шрифты, используя Google Fonts.

Хотите, чтобы шрифты страницы входа соответствовали теме? Не проблема! Мы также можем это сделать. В этом примере мы будем использовать шрифты Google Fonts для настройки навигационных ссылок под формой и сообщение при выходе из аккаунта:

googlefonts

Мы сделаем это тем же способом, как и в случае с вызовом login-styles.css. Добавим следующий код в файл functions.php:

01 function custom_fonts() {
02 echo '<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css" />';
03 }
04
05 add_action('login_head''custom_fonts');

Вставьте свою ссылку для шрифта с сайта Google Fonts.

Теперь вы можете использовать произвольный шрифт на своей странице входа. В демо-примере мы изменили как ссылки под формой входа, так и сообщение при выходе из аккаунта:

01 .login #nav a,
02 .login #backtoblog a {
03 font-family: 'Open Sans Condensed', sans-serif;
04 color: #00667!important;
05 font-size: 17px;
06 }
07
08 div.updated,
09 .login .message {
10 background-color: lightYellow;
11 border-color: #E6DB55;
12 font-family: 'Open Sans Condensed', sans-serif;
13 font-size: 16px;
14 font-weight: 700;
15 }

Шаг 5. Добавляем  jQuery-эффект “Fade-In” к форме.

Демо-пример показал вам, как работает этот эффект. По существу, мы загружаем страницу со скрытой формой и скрытыми ссылками под ней, после чего медленно выводим все это на экран.

Вы можете добавить этот jQuery-код к странице входа и определить селекторы, к которым будет применяться указанный эффект. Число в круглых скобках указывает время (в мс) действия эффекта.

01 add_action( 'login_head''untame_fadein',30);
02
03 function untame_fadein() {
04 echo '<script type="text/javascript">// <![CDATA[
05 jQuery(document).ready(function() { jQuery("#loginform,#nav,#backtoblog").css("display""none");          jQuery("#loginform,#nav,#backtoblog").fadeIn(3500);    
06 });
07 // ]]></script>';
08 }

Шаг 6. Привязываем к логотипу произвольную ссылку.

На данном шаге нам осталось проверить, что логотип ссылается на ваш сайт вместо стандартного wordpress.org. Установить произвольную ссылку можно с помощью добавления фильтра к файлу functions.php.

01 add_filter( 'login_headerurl''custom_login_header_url' );
02 function custom_login_header_url($url) {
03
04 return 'http://untame.net/';
05 }

Меняем тестовый URL-адрес на адрес своего сайта и добавляем этот код в файл functions.php.

Всего несколько простых строк CSS и jQuery способны заметно преобразовать вашу страницу входа в консоль, которая теперь будет соответствовать выбранной вами теме.

Произвольный дизайн страницы входа – это именно то, что вам важно рассмотреть в обязательном порядке, особенно если у вас открыта регистрация пользователей. Это еще одна возможность брэндинга вашего сайта и ваших услуг. Мы часто забываем о том, что пользователи возвращаются к этой странице всякий раз, когда они выходят из своего аккаунта, и зачастую эта страница формирует у людей заключительное впечатление от посещения вашего сайта. Поэтому обязательно потратьте несколько минут и создайте красивую страницу входа, которая произведет на пользователей должный эффект.

Источник: wpmu.org

 

Мой блог находят по следующим фразам

Рубрики: WordPress

Комментарии закрыты.

Портфолио

Популярные записи

ДЕНЬ ПЕРВЫЙ

Итак, вы получили новую базу, с перенесенными данными ...

Металлическое кольцо

Создайте новое изображение (ширина и высота должны быть ...

Детализация

С помощью выделения создайте необходимую вам область. Залейте выбранную ...

Кожаный переплет

Начнем с цвета, подобно приведенному ниже. Примените фильтр texturizer/canvas на 100% ...

Отделение фона

Откроем произвольное изображение, в котором необходимо отделить область ...

Реклама

Спонсоры

Яндекс.Метрика