Странички входа сайта на WordPress. Меняем дизайн.

Описывается как настроить дизайн страниц входа сайта на WordPress при помощи плагина"BG Captcha для WordPress", чтобы они максимально соответствовали идее сайта. Под страничками входа понимаются странички входа на сайт, регистрации пользователей и восстановления пароля. Продолжение "Как настроить плагин BG Captcha для WordPress. Обязательные плагины. Часть 1а." Описываются плагины, которые обязательно должны быть на каждом сайте на WordPress.

Стандартная форма входа сайта на WordPress изображена на рис. 6.

входа/регистрации сайта на WordPress

Рис. 6. Стандартная форма входа WordPress

Формы регистрации и восстановления пароля выглядят так же. Посмотрим, как можно сделать эти формы более привлекательными при помощи плагина"BG Captcha для WordPress". Начнем с фирменного логотипа.

Подготовим два изображения фирменного логотипа. Одно приблизительно 250х70 пикселов. Второе - вдвое больше - для экранов ретина. И, если необходимо, фоновое изображение для страничек входа сайта на WordPress.

Вывод изображения фирменного логотипа на страницах входа сайта на WordPress

  1. Открываем вклвдку настроек плагина на вкладке "Дизайн форм входа" (рис. 7).
    входа/регистрации сайта на WordPress

    Рис. 7. Настройка логотипа страниц входа

  2. Вводим URL изображения фирменного логотипа. Это можно сделать двумя путями. Первый - просто ввести в соответствующее поле URL. После того, как нажмете большую синюю кнопку внизу "Сохранить изменения" ("Save Changes"), страничка дизайна форм входа обновится и, если не было ошибки, появится изображение. Второй способ более простой - нажать мышкой на кнопку "Выберите файл" ("Select File") и появится стандартная форма WordPress для выбора файла из медиатеки сайта. Если файла в медиатеке нет, то надо его туда загрузить при помощи той же формы.
  3. Если в дальнейшем надо будет заменить изображение, то достаточно ввести одним из перечисленных выше способов URL нового изображения. Если необходимо совсем удалить фирменный логотип и вернуться к форме на рис. 6, то необходимо нажать на маленький красненький минус слева от изображения.
  4. Ниже вводим URL изображения логотипа для дисплеев ретина. Оно выглядит существенно больше.
  5. Теперь выбираем выравнивание логотипа относительно формы. Возможные варианты: влево, вправо, по центру. По умолчанию - по центру.
  6. Следующий шаг - вводим URL странички, на которую будет выполнен переход при нажатии мышкой на изображение логотипа. По умолчанию переход осуществляется на главную страничку сайта. Можно ввести любой URL.
  7. И последнее - можем ввести атрибут Title изображения логотипа. Зачем нужно вводить этот параметр? Если мы подведем мышку к лого и оставим ее там, то через несколько секунд появится надпись. На на рис. 8. подчеркнуто красным.
    входа сайта на WordPress

    Рис. 8. Атрибут Title логотипа

    Это и есть атрибут Title. Мы вводим девиз сайта.

Настройка фона на страницах входа сайта на WordPress

Теперь перейдем к настройке фона на страницах входа сайта на WordPress.

  1. Зададим цвет фона. Это можно сделать двумя способами. Если знаем шестнадцатеричный код цвета, то его достаточно ввести в поле "Цвет фона" ("Background Color") (Рис. 9.1). После того, как нажмете большую синюю кнопку внизу "Сохранить изменения" ("Save Changes"), поле получит выбранный цвет. Второй способ - просто нажать мышкой на поле. Появится стандартный виджет WordPress выбора цвета (Рис. 9.2).
    входа сайта на WordPress

    Рис. 9. Выбор цвета фона

    При его помощи выбираем требуемый цвет.

  2. Выберем, если необходимо, фоновое изображение для страничек входа на сайт, регистрации пользователей и восстановления пароля. Как задать URL изображения описано в п. 2 предыдущего раздела (рис. 10).
    входа сайта на WordPress

    Рис. 10. Настройка фонового изображения

  3. Если решили, что нам нужно фоновое изображение, то теперь необходимо его правильно позиционировать.
  4. "Повторять фоновое изображение" ("Background Image Repeat"). Выбираем будет ли повторяться фоновое изображение, и, если будет, то как. Возможные варианты - по вертикали и горизонтали - как плитка ("Seamless Tile"), только по горизонтали ("Repeat Horizontally"), только по вертикали ("Repeat Vertically"), не повторять ("No Repeat"). По умолчанию - повторять по вертикали и горизонтали ("Seamless Tile").
  5. "Увеличивать фоновое изображение" ("Background Image Expanding"). Выбираем размеры фонового изображения. Возможные варианты - не увеличивать ("Disable"), увеличивать до высоты экрана ("Contain"), увеличивать до ширины экрана ("Cover"). По умолчанию - не увеличивать ("Disable").
  6. "Прокрутка фонового изображения" ("Background Attachment"). Выбираем поведение фонового изображения при прокрутке странички. Возможные варианты - закрепить изображение - ("Fixed"), прокручивать вместе со страницей ("Scroll") или прокручивать вместе с элементом ("Local"). По умолчанию - прокручивать вместе со страницей ("Scroll").
  7. "Позиция фонового изображения (X)" ("Background Position (X)"). Выбираем выравнивание фонового изображения по горизонтали относительно форм входа. Возможные варианты: влево ("Left"), вправо ("Right"), по центру ("Center"). По умолчанию - по центру ("Center").
  8. "Позиция фонового изображения (Y)" ("Background Position (Y)"). Выбираем выравнивание фонового изображения по вертикали относительно форм входа. Возможные варианты: верх ("Top"), низ ("Bottom"), по центру ("Center"). По умолчанию - по центру ("Center").
  9. Изображение задано и правильно расположено. Теперь осталась последняя мелочь - ввести в поле "Нижний колонтитул страницы входа" ("Login Pages Footer") в виде текста в HTML все, что Вы хотите туда разместить. Например, ссылки на странички с утверждением конфиденциальности, правил и условий и утверждение Copyright (рис. 11)
    входа сайта на WordPress

    Рис. 11. Самый низ страницы входа

  10. Вот и все. Пример того, какой может стать страничка входа сайта на WordPress с использованием плагина "BG Captcha для WordPress" приведен на рис. 12
    входа сайта на WordPress

    Рис. 12. Новый дизайн формы входа

Можно сравнить с тем, что было на рис. 6. Мне кажется стало немного лучше. Думаю, посетителям сайта то же понравится.

Описан процесс настройки плагина"BG Captcha для WordPress". Дана пошаговая инструкция с пояснениями. Мы установили Google reCaptcha на необходимые формы, чтобы избежать спама и злоупотреблений, приносимых роботами, а так же настроили дизайн страничек входа сайта на WordPress. Удачи!

No comments yet.

Leave a Reply

Please verify that you are not a robot.

Thank You for your comment.

s2Member®