Если Вам необходимо сделать форму пожертвования, то лучше это сделать с помощью плагина Лейка
Предлагаю вывести личный кабинет через шорткод, а также убрать поля имени и email, чтобы не плодить аккаунты.
Автоподстановка имени и email
По умолчанию плагин в форме пожертвования имеет поля «Имя и Фамилия» и «email». Таким образом у Вас регистрируются пользователи, но это не всегда удобно, если, например, у вас своя форма регистрации на сайте.
Давайте сделаем автоподстановку Имени (без Фамилии) и email и также скроем эти поля.
Вставьте сниппет код:
//вставить на страницу шорткод [leyka_autofill], чтобы скрипт сработал
if (!defined('ABSPATH')) { exit; }
if (!function_exists('las_get_user_first_name')) {
function las_get_user_first_name(\WP_User $u): string {
$first = trim((string) get_user_meta($u->ID, 'first_name', true));
if ($first !== '') return $first;
$display = trim((string) $u->display_name);
if ($display !== '') {
$parts = preg_split('/\s+/', $display);
if ($parts && isset($parts[0]) && $parts[0] !== '') return $parts[0];
}
return $u->user_login;
}
}
if (!is_admin()) {
add_shortcode('leyka_autofill', function() {
if (!is_user_logged_in()) {
return '
<div class="leyka-login-required" style="padding:16px;border:1px solid #e5e7eb;border-radius:8px;background:#fafafa;margin:12px 0;">
<p style="margin:0;"><a href="/login" style="text-decoration:underline;">Войдите в аккаунт</a>, чтобы пожертвовать</p>
</div>
<style>.leyka-pm-form{display:none!important}</style>';
}
$u = wp_get_current_user();
if (!$u || !$u->ID) return '';
$payload = [
'email' => $u->user_email,
'first' => las_get_user_first_name($u),
];
$json = wp_json_encode($payload, JSON_UNESCAPED_UNICODE);
return '
<script>
(function(){
var data = ' . $json . ';
function applyToForm(form){
if (!form) return;
var elEmail = form.querySelector(\'input[name="leyka_donor_email"]\');
var elName = form.querySelector(\'input[name="leyka_donor_name"]\');
if (elEmail && elEmail.value !== data.email) {
elEmail.value = data.email || "";
elEmail.readOnly = true;
elEmail.dispatchEvent(new Event("input",{bubbles:true}));
elEmail.dispatchEvent(new Event("change",{bubbles:true}));
}
if (elName && elName.value !== data.first) {
elName.value = data.first || "";
elName.readOnly = true;
elName.dispatchEvent(new Event("input",{bubbles:true}));
elName.dispatchEvent(new Event("change",{bubbles:true}));
}
var submit = form.querySelector(\'input[type="submit"].leyka-default-submit[disabled]\');
if (submit && ((elEmail && elEmail.value) || (elName && elName.value))) {
submit.removeAttribute("disabled");
}
}
function applyAll(){
document.querySelectorAll("form.leyka-pm-form").forEach(applyToForm);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", applyAll);
} else {
applyAll();
}
if ("MutationObserver" in window) {
var mo = new MutationObserver(function(mutations){
for (var i=0;i<mutations.length;i++){
var m = mutations[i];
m.addedNodes && Array.prototype.forEach.call(m.addedNodes, function(n){
if (n.nodeType === 1) {
if (n.matches && n.matches("form.leyka-pm-form")) applyToForm(n);
else {
var f = n.querySelector && n.querySelector("form.leyka-pm-form");
if (f) applyToForm(f);
}
}
});
}
});
mo.observe(document.documentElement, {childList:true, subtree:true});
}
})();
</script>';
});
}На странице, где у вас размещена форма пожертвования вставьте шорткод [ leyka_autofill ], чтобы автоподстановка сработала. Так сделано, чтобы код не грузился на всём сайте.
Добавьте css, чтобы скрыть поля имени и email.
.logged-in .leyka-pf .section--person .donor__textfield--email,
.logged-in .leyka-pf .section--person .donor__textfield--name {
display: none ;}
.logged-in .leyka-pf .section--person .section-title-container {
display: none !important;}Кстати удобно вставлять форму пожертвования через виджет «Сбор пожертвований» в гутерберге. Без кода можно настроить цвета.
И вот, что у нас получится:
Личный кабинет через шорткод [ donor_account ]
Вставьте сниппет-код:
//Шорткод вывести стр платежи в приют
function custom_shortcode_function() {
ob_start();
?>
<iframe class="donor-account-iframe" src="/donor-account/" width="100%" height="600px" frameborder="0"></iframe>
<?php
return ob_get_clean();
}
add_shortcode('donor_account', 'custom_shortcode_function');
add_action('wp_head', function() {
if( strpos($_SERVER['REQUEST_URI'], '/donor-account/') !== false ) {
?>
<style>
.header-tint {display:none!important;}
.leyka-persistant-campaign .leyka-campaign-content .content-area .entry-content .leyka-pf-star {margin-top:50px; border-radius:30px;}
.site-content {background-color:#F6F3EF!important;}
.leyka-account .leyka-pf-star .leyka-screen-form h2{font-size:17px;}
.leyka-account .leyka-star-history .donations-history .item p a {pointer-events: none !important;} .leyka-account .subscribed-campaigns-list .item .campaign-title a { pointer-events:none;}
:root { --leyka-font-main: unset;}
:root { --leyka-color-main: #608DDB;}
</style>
<?php
}
});Как Вы заметили css для личного кабинета можно применить только так. Измените его на своё усмотрение в сниппете. Ну и вставьте в ваш личный кабинет шорткод [ donor_account ]
Ну вот так это будет выглядеть.
Приюты не кликабельны, так как там откроются страницы с пожертвованиями и там поля для ввода имени и email. Если вам нужно, чтобы они были кликабельными, то удалите из сниппета {pointer-events:none;}
Обновление!
Сделайте подстановку Имя и email чуть проще и вынесем js из php кода
Вставьте сниппет код:
//Автоподстановка имени и почты для лейки
add_shortcode('leyka_autofill', function() {
if (!is_user_logged_in()) {
return '<div data-leyka="{}"></div>';
}
$u = wp_get_current_user();
$payload = [
'email' => $u->user_email,
'first' => trim(get_user_meta($u->ID, 'first_name', true)) ?: $u->display_name,
];
return '<div id="leyka-autofill" data-leyka=\'' . wp_json_encode($payload, JSON_UNESCAPED_UNICODE) . '\'></div>';
});И на страницу где форма вставьте как раньше шорткод [ leyka_autofill ] и в HTML виджет вставьте:
<script>
document.addEventListener("DOMContentLoaded", function() {
const box = document.querySelector('#leyka-autofill');
if (!box) return;
const data = JSON.parse(box.dataset.leyka || "{}");
const form = document.querySelector("form.leyka-pm-form");
if (!form) return;
const email = form.querySelector('input[name="leyka_donor_email"]');
const name = form.querySelector('input[name="leyka_donor_name"]');
if (email && data.email) {
email.value = data.email;
email.readOnly = true;
email.dispatchEvent(new Event("input", {bubbles: true}));
email.dispatchEvent(new Event("change", {bubbles: true}));
}
if (name && data.first) {
name.value = data.first;
name.readOnly = true;
name.dispatchEvent(new Event("input", {bubbles: true}));
name.dispatchEvent(new Event("change", {bubbles: true}));
}
const submit = form.querySelector('input[type="submit"].leyka-default-submit[disabled]');
if (submit && (email?.value || name?.value)) {
submit.removeAttribute("disabled");
}
});
</script>Ну а для не авторизованных просто динамически скройте форму.
