Як створити користувацьку сторінку для входу в WordPress (Кінцевий посібник)

Ви хочете створити користувальницьку сторінку входу в WordPress для свого веб-сайту?


Якщо ви користуєтеся веб-сайтом членства в WordPress або інтернет-магазином, багато хто з ваших користувачів часто побачать сторінку входу. Налаштування сторінки входу в WordPress за замовчуванням дозволяє запропонувати кращу роботу користувачів.

У цьому кінцевому посібнику ми покажемо вам різні способи створення користувацької сторінки для входу в WordPress. Ви також можете використовувати цей підручник для створення власної сторінки входу в WooCommerce.

Як легко створити користувальницьку сторінку входу в WordPress для свого сайту

Ось, що ви дізнаєтесь з цього посібника.

    Навіщо створювати користувацьку сторінку для входу в WordPress?

    WordPress поставляється з потужною системою управління користувачами. Це дозволяє користувачам створювати облікові записи в магазинах електронної комерції, на веб-сайтах членства або в блозі.

    За замовчуванням на сторінці входу відображаються брендинги та логотип WordPress. Це добре, якщо ви ведете невеликий блог або ви єдина людина, яка має доступ до адміністратора.

    Екран входу в WordPress за замовчуванням

    Однак якщо ваш веб-сайт дозволяє користувачам реєструватися та входити в систему, то користувацька сторінка для входу пропонує кращий досвід користувача.

    Використання власного логотипу та дизайну дозволяє користувачам відчувати себе як вдома. В той час як перенаправлення їх на екран входу в WordPress за замовчуванням, який виглядає не так, як ваш веб-сайт, може виглядати підозріло для користувачів.

    Нарешті, екран для входу за замовчуванням не містить нічого, крім форми входу. Створюючи користувацьку сторінку входу, ви можете використовувати її для просування інших сторінок або спеціальних акцій.

    Зважаючи на це, давайте розглянемо кілька прикладів дизайну користувальницьких сторінок для входу в WordPress.

    Приклади дизайну сторінки для входу в WordPress

    Власники веб-сайтів можуть налаштувати сторінку входу в WordPress, використовуючи різні стилі та методи.

    Деякі створюють користувацьку сторінку входу, яка використовує тему та кольори свого веб-сайту. Інші, змінюють сторінку входу за замовчуванням, додаючи на неї власний фон, кольори та власний логотип.

    1. WPForms

    WPForms

    WPForms – найкращий плагін для контактних форм WordPress на ринку. За збігом обставин, їх плагін також включає в себе доповнення для створення прекрасних форм для входу та реєстрації WordPress, про які ми розповімо вам пізніше в цій статті.

    На їхній користувацькій сторінці входу використовується макет із двох стовпців. Лівий стовпець містить форму входу, а правий стовпець використовується для виділення акцій та інших закликів до дій. У наведеному вище прикладі вони використовують сторінку входу для обміну своїм річним звітом. Для створення унікального входу в систему використовуються спеціальні брендинги, ілюстрації фону та бренду.

    2. Рок-моє весілля

    Рок моє весілля

    Веб-сайт Rock My Wedding використовує спливаючий модал для відображення форми для входу та реєстрації. Перевага використання спливаючого вікна полягає в тому, що користувачі можуть увійти, не виходячи зі сторінки. Це рятує їх від завантаження нової сторінки та пропонує швидше користування.

    3. Жаклінн Стівс

    Жаклінн Стівс

    Jacquelynne Steeves – веб-сайт з декоративно-прикладного мистецтва, де автор публікує вміст про прикрасу будинку, виготовлення ковдр, візерунків, вишивки тощо. На їхній сторінці входу використовується власне фонове зображення, яке відповідає темі веб-сайту та формі входу праворуч.

    4. Графіка церковного руху

    Церковна графіка руху

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

    5. Огляд управління MITSLanan

    Огляд управління MITSLaning

    Веб-сайт MITSLoan Management Review використовує екран входу WordPress за замовчуванням. Для приховування брендування WordPress використовується спеціальний CSS з власним логотипом.

    Створення інтерфейсної сторінки для входу в WordPress

    Існує кілька плагінів WordPress, за допомогою яких можна створити спеціальну сторінку входу в WordPress. Ми покажемо вам два різних плагіни, і ви можете вибрати той, який найбільше підходить вам.

    Створення сторінки входу в WordPress за допомогою теми My Login

    Перше, що вам потрібно зробити – це встановити та активувати плагін Theme My Login. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

    Після активації Тема Мій Логін автоматично створює URL-адреси для вашого власного входу, виходу, реєстрації, забутого пароля та скидання пароля..

    Ви можете налаштувати ці вхідні URL-адреси WordPress, відвідавши сторінку Тема Мій Вхід »Загальні сторінки. Прокрутіть униз до розділу “Слуги”, щоб змінити ці URL-адреси, використовувані плагіном для дій входу.

    Тема Мої сторінки входу

    Тема My Login також дозволяє використовувати шорткоди для створення користувацьких сторінок для входу та реєстрації. Ви можете просто створити сторінку для кожної дії, а потім додати сюди слуп сторінки, щоб плагін міг правильно знаходити та перенаправляти користувачів.

    Почнемо зі сторінки для входу.

    Переходьте до Сторінка »Додати нове щоб створити нову сторінку WordPress. Потрібно вказати назву сторінки, а потім ввести наступний короткий код “[тема-мій вхід]” всередині вмісту.

    Додавання короткого коду

    Тепер ви можете опублікувати свою сторінку та переглянути її, щоб побачити вашу власну сторінку входу в дію.

    Спеціальна сторінка входу в WordPress

    Повторіть процес створення інших сторінок, скориставшись наведеними нижче короткими кодами.

    [topic-my-login action = ”зареєструватись] для реєстраційної форми.

    [topic-my-login action = ”Lostpassword”] ​​для сторінки з втраченим паролем.

    [topic-my-login action = ”перезавантаження”] використовувати його на сторінці скидання пароля.

    Створення користувацької сторінки для входу в WordPress за допомогою WPForms

    WPForms – найкращий плагін для створення форм WordPress. Це дозволяє легко створювати власні форми для входу та реєстрації для вашого веб-сайту.

    WPForms – це преміальний плагін WordPress, і вам знадобиться принаймні їхній професійний план для доступу до додатку для реєстрації користувачів. Користувачі WPBeginner можуть отримати знижку 50%, використовуючи наш код купона WPForms: SAVE50

    Перше, що вам потрібно зробити – це встановити та активувати плагін WPForms. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

    Після активації потрібно відвідати WPForms »Налаштування сторінки для введення ліцензійного ключа. Ви можете знайти цю інформацію у своєму обліковому записі на веб-сайті WPForms.

    Ліцензія WPForms

    Після введення ліцензійного ключа ви зможете встановити додатки. Вперед і відвідайте WPForms »Додатки на сторінці та знайдіть Аддону реєстрації користувача.

    Встановіть додаток реєстрації користувача

    Потім натисніть кнопку Встановити аддон, щоб завантажити та активувати аддон. Тепер ви готові створити власні власні форми для входу.

    Переходьте до WPForms »Додати нове сторінки та прокрутіть униз до шаблону “Форма входу користувача”. Вам потрібно натиснути кнопку “Створити форму реєстрації користувача”, щоб продовжити.

    Створіть форму для входу

    WPForms завантажить форму входу користувача з обов’язковими полями. Ви можете натиснути на поля, щоб додати власний опис або текст навколо них.

    Конструктор форм WPForms

    Ви також можете змінити інші налаштування. Наприклад, він автоматично додає “Надіслати” як заголовок кнопки. Ви можете натиснути на нього, а потім змінити його на логін.

    Налаштування форми

    Ви також можете вирішити, що станеться після успішного входу користувача. Перейдіть на сторінку Установки »Підтвердження та виберіть дію.

    Перенаправлення увійшли користувачі

    Ви можете перенаправити користувача на будь-яку іншу URL-адресу, перенаправити їх на головну сторінку або просто показати їм повідомлення про те, що вони зараз увійшли в систему.

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

    Додавання вашої власної форми для входу на сторінку WordPress

    WPForms дозволяє легко додавати власну форму для входу в будь-яку публікацію або сторінку WordPress.

    Просто відредагуйте сторінку, на якій потрібно додати форму для входу або створити нову. На екрані редагування сторінки додайте блок WPForms до вашої області вмісту.

    Додавання блоку WPForms до публікації

    Далі виберіть форму для входу, яку ви створили раніше, і блок WPForms автоматично завантажить її всередині області вмісту.

    Попередній перегляд форми для входу

    Тепер ви можете продовжувати редагувати сторінку форми для входу або зберігати та публікувати свої зміни.

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

    За замовчуванням ваша користувальницька сторінка форми для входу в WordPress використовує шаблон і стилі сторінки вашої теми. Він матиме меню навігації, заголовок, колонтитул та бічну панель вашої теми.

    Якщо ви хочете повністю перейняти всю сторінку і спроектувати щось з нуля, тоді ви можете використовувати плагін для конструктора сторінок WordPress..

    За допомогою плагіну для створення сторінок ви можете створити спеціальний макет сторінки, а потім додати віджет форми входу, наданий Темою My Login або WPForms.

    На скріншоті нижче ми використовували популярний плагін Beaver Builder. Ми використовували фонове зображення на повноекранному макеті, а потім додавали два стовпці. В одному стовпчику ми додали текст та кнопку. В іншому стовпчику ми додали віджет WPForms.

    Створення користувальницької сторінки для входу за допомогою плагіна для побудови сторінки

    Перевага програми Beaver Builder полягає в тому, що це 100% рішення перетягування.

    Примітка: Оскільки ви вже ввійшли в систему, а також додатки Theme My Login та WPForms можуть не відображати попередній перегляд форми для входу. У плагіні WPForms є опція, де ви можете вимкнути це в налаштуваннях форми.

    Якщо плагіни для створення веб-сторінок WordPress – це не ваша річ, тоді ви можете використовувати власні CSS для стилю форми та самої сторінки входу. Крім того, ви також можете використовувати плагін CSS Hero для легкого додавання спеціальних стилів CSS.

    Змініть логотип та URL-адресу для входу в WordPress

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

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

    Змініть логотип та URL для входу в WordPress за допомогою плагіна

    Перше, що вам потрібно зробити – це встановити та активувати Customlier Colorlib Login. підключати. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

    Після активації плагін додає новий елемент меню з написом “Настроювач входу” на бічну панель адміністратора WordPress. Клацнувши по ньому, запустить програму налаштування входу.

    Інструмент налаштування входу

    Настроювач входу завантажить ваш екран входу в WordPress за замовчуванням з опціями налаштування зліва та попереднім попереднім переглядом праворуч.

    Щоб замінити логотип WordPress на власний, натисніть на вкладку “Параметри логотипу” праворуч. Звідси ви можете приховати логотип WordPress, завантажити власний власний логотип, змінити URL-адресу та текст логотипу.

    Завантажте спеціальний логотип на сторінку входу

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

    В основному, ви можете створити користувальницьку сторінку входу в WordPress, не змінюючи URL-адресу входу в WordPress за замовчуванням.

    Закінчивши, просто натисніть кнопку опублікувати, щоб зберегти зміни. Тепер ви можете відвідати сторінку входу в WordPress, щоб побачити свою власну форму входу в дію.

    Спеціальна сторінка для входу в WordPress з користувацьким логотипом

    Змінення логотипу та входу для WordPress без плагіна (код)

    Цей спосіб дозволяє вручну замінити логотип WordPress на екрані входу на ваш власний логотип.

    По-перше, потрібно завантажити власний логотип у медіатеку. Йти до Медіа »Додати нове сторінку та завантажте власний логотип.

    Завантаживши зображення, натисніть на посилання “Редагувати” поруч із ним. Це відкриє сторінку редагування медіа-файлів, куди потрібно скопіювати URL-адресу файлу та вставити його у порожній текстовий файл на комп’ютері.

    Далі вам потрібно додати наступний код до файлу function.php вашої теми або плагіна для сайту.

    функція wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    background-image: url (http: //path/to/your/custom-logo.png);
    висота: 100px;
    ширина: 300px;
    розмір фону: 300px 100px;
    фон-повторення: не повторення;
    нижня підкладка: 10 пікселів;
    }

    <?php}
    добавлення (‘login_enqueue_scripts’, ‘wpb_login_logo’);

    Не забудьте замінити URL-адресу фонового зображення на URL-адресу файлу, яку ви скопіювали раніше. Ви також можете налаштувати інші властивості CSS відповідно до вашого власного зображення логотипу.

    Тепер ви можете відвідати сторінку входу в WordPress, щоб побачити власний логотип у дії.

    Сторінка входу в WordPress зі спеціальним логотипом

    Цей код замінює лише логотип WordPress. Він не змінює посилання на логотип, який вказує на веб-сайт WordPress.org.

    Давайте змінимо це.

    Просто додайте наступний код у файл function.php теми або тематичний додаток для вашого сайту. Ви можете додати цей код прямо під кодом, який ви додали раніше.

    функція wpb_login_logo_url () {
    повернутися додому_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    функція wpb_login_logo_url_title () {
    повернути «Ім’я та інформацію про ваш сайт»;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    Не забудьте замінити “Ім’я та інформацію вашого веб-сайту” фактичним назвою вашого сайту. Спеціальний логотип на екрані входу тепер буде вказувати на домашню сторінку вашого веб-сайту.

    Це все. Ми сподіваємося, що ця стаття допомогла вам дізнатися різні способи створення сторінки для входу в WordPress для свого веб-сайту. Ви також можете ознайомитись з нашим основним посібником із безпеки WordPress для отримання порад щодо покращення безпеки входу в WordPress.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map