WP Manifestindependent plugin directory
manifest / users / custom-elementor-auth

Custom Elementor Auth

Плагін автентифікації для WordPress з AJAX входом, реєстрацією, скиданням пароля та інтеграцією з Elementor.

by Vasiliy · github.com/s-vasiliy/custom-elementor-auth

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/s-vasiliy/custom-elementor-auth/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/s-vasiliy/custom-elementor-auth ↗

Custom Elementor Authentication

Власний WordPress-плагін для авторизації, реєстрації та відновлення пароля користувачів з інтеграцією в Elementor.

Плагін використовує стандартні WordPress API та AJAX-запити для обробки авторизації без перезавантаження сторінки. Архітектура побудована з урахуванням розділення відповідальності, безпеки, масштабованості та зручності подальшої підтримки.

Основні можливості

🔐 Авторизація

  • Вхід за Email або Username
  • Пароль
  • Remember Me
  • AJAX-авторизація без перезавантаження сторінки
  • Відновлення забутого пароля через AJAX
  • Редирект після успішної авторизації
  • Повідомлення про помилки та успішну авторизацію
  • Показ / приховування пароля

📝 Реєстрація

Форма реєстрації містить:

  • First Name
  • Last Name
  • Email
  • Username
  • Password
  • Confirm Password

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

  • перевірка обов'язкових полів;
  • перевірка коректності Email;
  • перевірка унікальності Email;
  • перевірка унікальності Username;
  • перевірка пароля;
  • перевірка підтвердження пароля;
  • створення користувача через WordPress API;
  • автоматичне призначення ролі Subscriber;
  • автоматичний вхід після успішної реєстрації;
  • редирект після реєстрації.

Elementor

Плагін додає власний Elementor Widget:

Login + Registration

Віджет підтримує три режими:

  • Login
  • Registration
  • Login + Registration

Налаштування віджета

Доступні налаштування:

  • тип форми;
  • Redirect URL;
  • текст Email / Username;
  • текст Password;
  • текст Remember Me;
  • текст Forgot Password;
  • текст кнопки Login;
  • текст кнопки Registration;
  • тексти повідомлень про помилки;
  • текст повідомлення про успішну операцію.

Style Controls

Віджет має Elementor Style Controls для:

  • форми;
  • полів;
  • кнопок;
  • повідомлень;
  • typography;
  • кольорів;
  • border;
  • border radius;
  • padding;
  • spacing.

Також передбачені responsive settings для:

  • Desktop
  • Tablet
  • Mobile

AJAX

Усі основні операції виконуються без перезавантаження сторінки.

Login

Форма
  ↓
JavaScript
  ↓
AJAX Request
  ↓
Nonce Verification
  ↓
Validation
  ↓
wp_signon()
  ↓
JSON Response
  ↓
Success / Error Message
  ↓
Redirect

Registration

Форма
  ↓
JavaScript
  ↓
AJAX Request
  ↓
Nonce Verification
  ↓
Validation
  ↓
wp_create_user()
  ↓
wp_signon()
  ↓
JSON Response
  ↓
Success / Error Message
  ↓
Redirect

Безпека

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

Використовуються:

  • wp_verify_nonce()
  • wp_create_nonce()
  • wp_signon()
  • wp_create_user()
  • sanitize_text_field()
  • sanitize_email()
  • sanitize_user()
  • esc_html()
  • esc_attr()

Додатково

  • захист AJAX-запитів через nonce;
  • sanitization вхідних даних;
  • escaping даних перед виведенням;
  • перевірка email;
  • перевірка username;
  • перевірка пароля;
  • відсутність прямих SQL-запитів;
  • використання стандартних WordPress API;
  • захист від XSS;
  • захист від CSRF;
  • безпечна робота з authentication cookies через WordPress API.

Структура плагіна

custom-elementor-auth/
│
├── plugin.php
├── README.md
├── uninstall.php
│
├── includes/
│   ├── class-plugin.php
│   ├── class-ajax.php
│   ├── class-auth.php
│   └── class-validator.php
│
├── widgets/
│   └── class-auth-widget.php
│
├── ajax/
│
├── classes/
│   └── class-assets.php
│
└── assets/
    ├── css/
    │   └── auth.css
    │
    └── js/
        └── auth.js

Архітектура

Плагін розділений на окремі компоненти відповідно до їх відповідальності.

Plugin

Відповідає за:

  • ініціалізацію плагіна;
  • перевірку залежностей;
  • завантаження класів;
  • реєстрацію Elementor widget.

Auth

Відповідає за роботу з WordPress authentication API:

  • login;
  • registration;
  • password reset;
  • user management.

Validator

Відповідає за:

  • перевірку вхідних даних;
  • email validation;
  • username validation;
  • password validation;
  • перевірку підтвердження пароля.

AJAX

Відповідає за:

  • Login AJAX request;
  • Registration AJAX request;
  • Forgot Password AJAX request;
  • nonce verification;
  • JSON responses.

Elementor Widget

Відповідає за:

  • HTML структуру форми;
  • Elementor Controls;
  • Style Controls;
  • responsive settings;
  • tabs Login / Registration.

Assets

Відповідає за підключення:

  • JavaScript;
  • CSS.

Frontend JavaScript

Відповідає за:

  • AJAX requests;
  • frontend validation;
  • loading states;
  • error messages;
  • success messages;
  • redirects;
  • password visibility;
  • переключення Login / Registration tabs.

Вимоги

Перед встановленням переконайтеся, що на сайті встановлені:

  • WordPress 6.x
  • PHP 8.1 або новіше
  • Elementor

Рекомендовано використовувати актуальні стабільні версії WordPress, PHP та Elementor.

Інструкція зі встановлення

Варіант 1 — встановлення ZIP-архіву

Крок 1. Завантажити плагін

Завантажте файл:

custom-elementor-auth.zip

Крок 2. Відкрити WordPress Admin

У панелі адміністратора WordPress перейдіть:

Plugins → Add New Plugin

або українською:

Плагіни → Додати новий

Крок 3. Завантажити ZIP

Натисніть:

Upload Plugin

Виберіть файл:

custom-elementor-auth.zip

та натисніть:

Install Now

Крок 4. Активувати плагін

Після завершення встановлення натисніть:

Activate Plugin

Варіант 2 — ручне встановлення

Розпакуйте:

custom-elementor-auth.zip

Після розпакування має бути папка:

custom-elementor-auth/

Завантажте її в:

/wp-content/plugins/

У результаті структура повинна виглядати приблизно так:

wp-content/
└── plugins/
    └── custom-elementor-auth/
        ├── plugin.php
        ├── includes/
        ├── widgets/
        ├── classes/
        ├── ajax/
        └── assets/

Після цього відкрийте:

WordPress Admin
→ Plugins

Знайдіть:

Custom Elementor Authentication

і натисніть:

Activate

Налаштування Elementor

Після активації:

1. Створіть або відкрийте сторінку

Відкрийте сторінку через Elementor:

Pages → Edit with Elementor

2. Знайдіть віджет

У списку Elementor Widgets знайдіть:

Login + Registration

3. Додайте віджет

Перетягніть його на сторінку.

4. Виберіть тип форми

У налаштуваннях віджета доступні:

Login
Registration
Login + Registration

5. Налаштуйте Redirect URL

Вкажіть URL сторінки, на яку користувач повинен перейти після успішної авторизації або реєстрації.

Наприклад:

/my-account/

або:

/dashboard/

6. Налаштуйте тексти

У вкладці Content можна змінити labels та повідомлення форми відповідно до дизайну або вимог сайту.

7. Налаштуйте дизайн

У вкладці:

Style

можна налаштувати зовнішній вигляд:

  • inputs;
  • buttons;
  • tabs;
  • messages;
  • typography;
  • colors;
  • borders;
  • spacing.

Тестування

Після встановлення рекомендується перевірити всі сценарії.

Login

Перевірити:

  • правильний username + password;
  • правильний email + password;
  • неправильний password;
  • неіснуючий користувач;
  • Remember Me;
  • redirect;
  • AJAX error message.

Registration

Перевірити:

  • успішну реєстрацію;
  • існуючий email;
  • існуючий username;
  • некоректний email;
  • порожні required fields;
  • різні password / confirm password;
  • автоматичний login;
  • redirect після реєстрації.

Forgot Password

Перевірити:

  • існуючий email;
  • неіснуючий email;
  • некоректний email;
  • success/error message;
  • отримання листа від WordPress.

Responsive

Перевірити віджет на:

Desktop
Tablet
Mobile

GitHub Installation

Для розробки можна клонувати репозиторій безпосередньо в wp-content/plugins:

cd wp-content/plugins

git clone https://github.com/YOUR_USERNAME/custom-elementor-auth.git

Після цього активуйте плагін через:

WordPress Admin → Plugins

Розробка

Для локальної розробки рекомендується використовувати:

  • LocalWP
  • XAMPP
  • Docker
  • Laravel Valet / Valet+
  • інше локальне WordPress-середовище

Мінімальні вимоги:

PHP 8.1+
WordPress 6.x
Elementor

Можливі майбутні покращення

Плагін можна розширити такими можливостями:

  • Google reCAPTCHA;
  • Cloudflare Turnstile;
  • password strength indicator;
  • email verification;
  • social login;
  • Google Login;
  • Facebook Login;
  • rate limiting для login attempts;
  • custom user roles;
  • двофакторна авторизація;
  • додаткові Elementor Style Controls;
  • unit tests;
  • integration tests;
  • WP-CLI commands.

Мета проєкту

Проєкт створений як приклад кастомної реалізації WordPress authentication functionality з інтеграцією в Elementor.

Основна увага приділена:

  • використанню WordPress API;
  • безпечній роботі з користувачами;
  • AJAX architecture;
  • modular code structure;
  • Elementor integration;
  • maintainability;
  • responsive frontend;
  • clean and reusable code.

Ліцензія

Проєкт призначений для демонстраційних та навчальних цілей.