×

Создать сайт или лендинг бесплатно

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

ВСЕ ОЧЕНЬ ПРОСТО

1 Войдите или зарегистрируйтесь.
2 На соответствующих страницах появятся ссылки для перехода к инструментам.
3 Ознакомьтесь с инструкцией и приступайте.

Если у вас возникнут проблемы пишите на [email protected] . Благодарим что вы с нами!

О сайте

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

FORGOT YOUR DETAILS?

CREATE ACCOUNT

WordPress урок. Как полностью настроить страницу входа

WordPress урок. Страница входа

WordPress урок WPMU DEV по созданию оригинальной страницы входа на сайт

Like our page

5894

Follow Us

25374

Circle Us

3841
WordPress урок
WordPress урок. Страница входа обеспечивает общий взгляд, один-размер-подходит на все решения для входа в WordPress. Единственная проблема заключается в настройке и она может получиться немного неловко. К сожалению, в WordPress нет встроенной функции для добавления своего собственного логотипа или изменения общего внешнего вида, чтобы соответствовать любой пользовательской темы брендинга или у вас есть на ваш собственный сайт. В этом уроке я покажу вам, как начать с изменения экрана входа в систему, так что вы можете настроить его, чтобы выглядеть так, как вы хотите. Мы собираемся создать вдохновляющую форму входа с помощью нескольких простых изменений, используя PHP и CSS. Поделиться на Facebook, Твиттер. Поделиться на Google+.

WordPress урок. Описание

WordPress урок на тему "Сайт создать", рубрика "Веб дизайн обучение".

Что мы будем создавать?

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

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

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

WordPress урок - Настройка Страницы входа

Этот WordPress урок будет охватывать несколько модификаций файлов темы, которые позволят вам создать свою собственную страницу входа:

  • Добавить пользовательский фон
  • Заменить логотип WordPress с логотипом на заказ
  • Настроить внешний вид формы входа
  • Измените Войти логотип URL
  • Убрать Забыли пароль ссылку
  • Убрать "обратно в" ссылку
  • Скрыть сообщение об ошибке Войти
  • Удалить дрожание Войти Страница
  • Изменить URL перенаправления
  • Установить "Запомнить", чтобы проверить

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

Вот то, что вам нужно сделать в этом WordPress уроке:

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

Добавление пользовательского фона

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

Мы можем добиться этого путем добавления в нашем заказном Войти styles.css-файле:

 

body.login { background-image: url('home-bg.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }

Убедитесь, что вы заменили имя файла в строке 2 с именем вашего собственного образа.

Замените WordPress логотип на собственный

WordPress Кодекс обеспечивает аккуратное объяснение того, как заменить логотип, но так как мы  уже создали файл CSS мы можем просто добавить следующее в этот файл:

.login h1 a {

background-image: url('login-logo.png');

}

Сохраните логотип, который вы хотите использовать в вашей папке / авторизации, где ваш заказ Войти styles.css-файл также сохранен.

Не забудьте заменить имя файла в строке 2 с именем вашего логотипа файла.

Настроить вид Логин-формы

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

Во-первых, мы будем менять стиль этикетки, чтобы текст был темнее чем форма поля ввода, чтобы дать им более округлый вид:

 

WordPress урок

 

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

 

.login .button-primary {
width: 120px;
float:right;
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
background: -o-linear-gradient(top, #17a8e3, #17a8e3);
background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
color: #ffffff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}

.login .button-primary:hover {
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}

.login .button-primary:active {
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}

 

В то время как изменения являются тонкими, они лучше соответствуют нашему брендингу.

WordPress урок. Изменить Logo URL страницы входа

По умолчанию, логотип ссылка ведет на wordpress.org. Вы можете изменить это, чтобы указать на ваш сайт, добавив этот код в файл functions.php:

 

function my_login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'my_login_logo_url' ); function my_login_logo_url_title() { return 'Your Site Name and Info'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' );

 

Заменить "имя вашего сайта и информацию" в строке 7 с именем вашего сайта. Это просто ALT текст для логотипа.

Снимите ссылку Забыли пароль

"Забыли пароль?" Ссылка полезна, если вы потеряли свой пароль, но если кто-то взломал вашу электронную почту они смогут заполучить пароль WordPress и взять все на вашем сайте.

Чтобы удалить ссылку, добавить к вашей CSS файл:

 

p#nav { display: none; }

Удалить ``Назад к сайту`` Ссылку

Ссылка "Назад к ..." позволяет пользователям вернуться на главную страницу вашего сайта. Я иду из-за чистого взгляда, что я не хочу, чтобы отобразить этот текст под моей формой. И в этом WordPress уроке мы удалим его, добавив следующие строки в наш файл CSS:

p#backtoblog { display: none; }

Скрыть сообщение об ошибке Входа

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

Если вы набрали неправильный логин, он говорит: "Неверный Имя пользователя". В то время как сообщение может быть полезным для вас, проблема в том, что хакеры могут использовать эту информацию, чтобы угадать ваши учетные данные и получить доступ к вашему сайту.

Самый простой способ обойти это, чтобы изменить сообщение об ошибке с этим кодом в файл functions.php:

 

function login_error_override()

{

return 'Incorrect login details.';

}

add_filter('login_errors', 'login_error_override')

 

Просто обновить линию 3, чтобы изменить сообщение об ошибке.

Измените URL перенаправления

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

В данном WordPress уроке мы научимся этому. Добавьте следующий код в файл functions.php, так что все, кроме администратора пользователи автоматически перенаправляются:

 

function admin_login_redirect( $redirect_to, $request, $user ) { global $user; if( isset( $user->roles ) && is_array( $user->roles ) ) { if( in_array( "administrator", $user->roles ) ) { return $redirect_to; } else { return home_url(); } } else { return $redirect_to; } } add_filter("login_redirect", "admin_login_redirect", 10, 3);

Установите флажок ``Запомнить меня``

"Запомнить меня" флажок снят по умолчанию. Я хотел, чтобы проверить это, когда я войду, но иногда я забываю, только чтобы понять, потом, что я забыл, и это слишком поздно. Doh!

Чтобы оставить этот флажок всегда установленным, добавьте врезку для functions.php:

 

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Подводя итог нашему WordPress уроку

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

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

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

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

You must be logged in to post a comment.

Похожие публикации

TOP SQL requests:83. Generation time:1,519 sec. Memory consumption:19.47 mb