Вопрос или проблема
Можно ли скрыть конкретный динамически созданный div от пользователя, который вышел из системы?
Я пробовал это, но не работает:
<?php if (is_user_logged_in()): ?>
var element = document.getElementById("elementor-element-f4e5a8e");
element.classList.add("logged-in");
<?php else: ?>
var element = document.getElementById("elementor-element-f4e5a8e");
element.classList.remove("logged-out");
<?php endif; ?>
Затем добавил соответствующий css.
Элемент body уже получает класс logged-in, который вы можете использовать для скрытия элемента с помощью обычного CSS.
body:not(.logged-in) #elementor-element-f4e5a8e {
display: none;
}
Если ID динамический и не всегда одинаковый, вам понадобится другой селектор для целевого элемента, но это по-прежнему потребует стандартных CSS-техник, не связанных с WordPress.
Также учтите, что скрыть что-то с помощью CSS очень легко для пользователей, поэтому любая информация в этом div должна рассматриваться как общедоступная.
Похоже, вы правильно используете is_user_logged_in(), но попробуйте обернуть действие внутри if-оператора в теги script, чтобы создать встроенный JS-скрипт:
<?php if (is_user_logged_in()) { ?>
<script>
document.getElementById('elementor-element-f4e5a8e').classList.add('logged-in');
</script>
<?php } else { ?>
<script>
document.getElementById('elementor-element-f4e5a8e').classList.add('logged-out');
</script>
<?php } ?>
Просто как заметка, скрытие с помощью CSS легко обойти в браузере. Так что в этом смысле было бы лучше добавить код DIV внутри if-оператора.
Спасибо за помощь, я справился с этим:
<?php
if ( is_user_logged_in() ) {
echo "<script type="text/javascript">
$(document).ready(function($) {
$('#elementor-element-f4e5a8e').addClass('logged-in');
});
</script>";
} else {
echo echo "<script type="text/javascript">
$(document).ready(function($) {
$('#elementor-element-f4e5a8e').addClass('logged-out');
});
</script>";
}
?>
Вышеприведённый вариант один из возможных, но нижеприведённый работает даже лучше:
if (is_user_logged_in()): ?>
<script type="text/javascript">
$(document).ready(function($) {
$('#elementor-element-f4e5a8e').addClass('logged-in');
});
</script>
<?php else: ?>
<script type="text/javascript">
$(document).ready(function($) {
$('#elementor-element-f4e5a8e').addClass('logged-out');
});
</script>
<?php endif; ?>
Ответ или решение
Вопрос, который вас интересует, касается скрытия динамически созданного
Описание Проблемы
Существует динамически созданный элемент <div> с идентификатором elementor-element-f4e5a8e, который необходимо скрыть от пользователей, которые не вошли в учетную запись. Попробуем решить это, используя проверку входа пользователя и соответствующие технологии веб-разработки.
1. Использование PHP и JavaScript
Первоначальная логика, представленная в коде, не работала должным образом из-за отсутствия оборачивания JavaScript кода в теги <script>. Правильное использование функции is_user_logged_in() может выглядеть следующим образом:
<?php if ( is_user_logged_in() ) { ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('elementor-element-f4e5a8e').classList.add('logged-in');
});
</script>
<?php } else { ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('elementor-element-f4e5a8e').classList.add('logged-out');
});
</script>
<?php } ?>Обратите внимание на использование document.addEventListener('DOMContentLoaded', ...). Это гарантирует, что скрипт выполнится только после полной загрузки DOM.
2. Селектор CSS для Скрытия Элемента
Предлагалось использовать класс logged-in у тега <body>, чтобы скрыть конкретный элемент от разлоггированных пользователей:
body:not(.logged-in) #elementor-element-f4e5a8e {
display: none;
}Этот метод эффективен для скрытия элемента, однако важно помнить, что CSS-скрытие можно обойти.
3. Серверные Скрытия
Если вам необходимо совершенно исключить возможность доступа к элементу для разлоггированных пользователей, consider обернуть сам HTML-код
<?php if ( is_user_logged_in() ) : ?>
<div id="elementor-element-f4e5a8e">
<!-- Ваш контент для вошедших -->
</div>
<?php endif; ?>Это скроет элемент от разлоггированных пользователей не только визуально, но и на уровне кода, находящегося в браузере.
Заключительные Соображения
Имейте в виду, что безопасность информации исключительно с помощью CSS не является надежным механизмом, так как опытные пользователи могут обойти такие ограничения. Если ваш элемент содержит конфиденциальные данные, необходимо предпринять дополнительные меры безопасности, включая серверные проверки.
Систематический подход к решению поставленной задачи позволяет добиться необходимого результата и одновременно учитывать аспект безопасности. Используйте подходящий вам вариант в зависимости от уровня безопасности данных в вашем приложении.