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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/s-vasiliy/custom-elementor-auth/archive/refs/heads/main.zip
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.

Ліцензія

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