1. Висновок зображення фірмового логотипу на сторінках входу сайту на WordPress
2. Налаштування фону на сторінках входу сайту на WordPress

Описується як налаштувати дизайн сторінок входу сайту на WordPress за допомогою плагіна "BG Captcha для WordPress", щоб вони максимально відповідали ідеї сайту. Під сторінками входу розуміються сторінки входу на сайт, реєстрації користувачів і відновлення пароля. продовження " Як налаштувати плагін BG Captcha для WordPress. Обов'язкові плагіни. частина 1а . "Описуються плагіни, які обов'язково повинні бути на кожному сайті на WordPress.

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

Мал. 6. Стандартна форма входу WordPress

Форми реєстрації і відновлення пароля виглядають так само. Подивимося, як можна зробити ці форми більш привабливими за допомогою плагіна "BG Captcha для WordPress". Почнемо з фірмового логотипу.

Підготуємо два зображення фірмового логотипу. Одне приблизно 250х70 пікселів. Друге - вдвічі більше - для екранів ретина. І, якщо необхідно, фонове зображення для сторінок входу сайту на WordPress.

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

1. Відкриваємо вклвдку налаштувань плагіна на вкладці "Дизайн форм входу" (рис. 7).

   Мал. 7. Налаштування логотипу сторінок входу

2. Вводимо URL зображення фірмового логотипу. Це можна зробити двома шляхами. Перший - просто ввести у відповідне поле URL. Після того, як натиснете велику синю кнопку внизу "Зберегти зміни" ( "Save Changes"), сторінка дизайну форм входу оновиться і, якщо не було помилки, з'явиться зображення. Другий спосіб більш простий - натиснути мишкою на кнопку "Виберіть файл" ( "Select File") і з'явиться стандартна форма WordPress для вибору файлу з медіатеки сайту. Якщо файлу в медіатеці немає, то треба його туди завантажити за допомогою тієї ж форми.
3. Якщо в подальшому треба буде замінити зображення, то досить ввести одним з перерахованих вище способів URL нового зображення. Якщо необхідно повністю видалити фірмовий логотип і повернутися до форми на рис. 6, то необхідно натиснути на маленький Червоненький минус слева від зображення.
4. Нижче вводимо URL зображення логотипу для дисплеїв ретина. Воно виглядає значно більше.
5. Тепер вибираємо вирівнювання логотипу щодо форми. Можливі варіанти: вліво, вправо, по центру. За замовчуванням - по центру.
6. Наступний крок - вводимо URL сторінки, на яку буде виконано перехід при натисканні мишкою на зображення логотипу. За замовчуванням перехід здійснюється на головну сторінку сайту. Можна ввести будь-який URL.
7. І останнє - можемо ввести атрибут Title зображення логотипу. Навіщо потрібно вводити цей параметр? Якщо ми підведемо мишку до лого і залишимо її там, то через кілька секунд з'явиться напис. На на рис. 8. підкреслено червоним.

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

   Це і є атрибут Title. Ми вводимо девіз сайту.

Налаштування фону на сторінках входу сайту на WordPress

Тепер перейдемо до налаштування фону на сторінках входу сайту на WordPress.

1. Задамо колір фону. Це можна зробити двома способами. Якщо знаємо шістнадцятковий код кольору, то його досить ввести в поле "Колір фону" ( "Background Color") (Рис. 9.1). Після того, як натиснете велику синю кнопку внизу "Зберегти зміни" ( "Save Changes"), поле отримає вибраний колір. Другий спосіб - просто натиснути мишкою на полі. З'явиться стандартний віджет WordPress вибору кольору (Рис. 9.2).

   Мал. 9. Вибір кольору фону

   При його допомозі вибираємо необхідний колір.

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

   Мал. 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)

   Мал. 11. Самий низ сторінки входу

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

    Мал. 12. Новий дизайн форми входу

Можна порівняти з тим, що було на рис. 6. Мені здається стало трохи краще. Думаю, відвідувачам сайту той же сподобається.

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