Сообщение об ошибке и подтверждении успешного удаления поста на фронтенде

Содержание

Вопрос или проблема
Ответ или решение
1. Использование модальных окон
2. Изменение функции удаления поста
3. Сообщение подтверждения об успешном удалении

Вопрос или проблема

Я позволяю авторам удалять свои посты на фронтенде, так как они не могут получить доступ к админке. У меня это работает, но меня смущает стандартное сообщение JavaScript alert – есть ли способ стилизовать js alert? Насколько я понимаю, нет. Или использовать jQuery для сообщения и применить модальное окно, которое я мог бы стилизовать?

Также после удаления пользователь возвращается на ту же страницу, что хорошо, но нет сообщения об подтверждении – мне хотелось бы, чтобы было сообщение “Пост успешно удален”. Я просто думаю, что такие детали улучшили бы пользовательский опыт. Вот код, который я использую:

function wp_delete_post_link($link = 'Удалить этот пост', $before="", $after="") {
global $post;
if ( $post->post_type == 'post' ) {
if ( !current_user_can( 'edit_page', $post->ID ) )
  return;
} else {
if ( !current_user_can( 'edit_post', $post->ID ) )
  return;
}
$message = "Вы уверены, что хотите удалить ".get_the_title($post->ID)." ?";
$delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);
$htmllink = "<a href="" . $delLink . "" onclick = \"if ( confirm('".$message."' ) ) { execute(); return true; } return false;\"/>".$link."</a>";
echo $before . $htmllink . $after;
$redirect = add_query_arg( 'success', 'true', $redirect );
}

<?php wp_delete_post_link('Удалить ваш пост', '<p><em>Удалить ваш пост: </em>', '</p>'); ?>

И это было добавлено в author.php, где находится кнопка удаления поста

 <?php if ( ! empty( $_GET['success'] ) ) {
                            echo 'Ура!';
                            }
                        ?>

Здесь два вопроса. Что касается стилизации оповещений/модальных окон, это общий вопрос HTML/CSS – ознакомьтесь с этими примерами, чтобы начать.

Что касается второго вопроса, это зависит от того, что вы делаете после удаления – возвращаетесь ли вы на фронтенд или остаетесь в админке? (Я обновлю свой ответ после вашего ответа).

Вам не следует изобретать велосипед – используйте основную функцию get_delete_post_link, чтобы получить URL для удаления. Это будет обрабатывать нонсы и любые будущие изменения в ядре, если и когда они произойдут.

Обновление: Для вашего редиректа добавьте параметр, который затем можно проверить при загрузке страницы:

$redirect = add_query_arg( 'success', 'true', $redirect );

А затем в вашем шаблоне:

if ( ! empty( $_GET['success'] ) ) {
    echo 'Ура!';
}

Ответ или решение

Для создания лучшего пользовательского опыта при удалении постов с помощью JavaScript в WordPress, вы правы: стандартные alert-уведомления не поддаются стилизации. Вместо этого вы можете использовать модальные окна с помощью jQuery. Также, чтобы обеспечить подтверждение успешного удаления постов, можно использовать параметры URL для отображения соответствующего сообщения.

1. Использование модальных окон

Для начала, давайте заменим стандартный сигнал подтверждения на модальное окно. Вы можете использовать jQuery UI или сторонние библиотеки, такие как Bootstrap или SweetAlert, для создания стильного и наглядного модального окна. Приведенный ниже код следит за удалением поста и открывает модальное окно для подтверждения:

<!-- Подключите jQuery и нужную библиотеку для модальных окон -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Пример с использованием SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">

<script>
function confirmDelete(delLink) {
    swal({
        title: "Вы уверены?",
        text: "Вы собираетесь удалить '" + delLink.dataset.title + "'!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            window.location.href = delLink.href; // Переход на URL удаления
        }
    });
}
</script>

2. Изменение функции удаления поста

Измените вашу функцию wp_delete_post_link, чтобы генерировать ссылку, которую мы будем использовать с модальным окном:

function wp_delete_post_link($link = 'Удалить это', $before="", $after="") {
    global $post;
    if ( $post->post_type == 'post' ) {
        if ( !current_user_can( 'edit_page', $post->ID ) )
            return;
    } else {
        if ( !current_user_can( 'edit_post', $post->ID ) )
            return;
    }

    $delLink = wp_nonce_url(get_bloginfo('url') . "/wp-admin/post.php?action=delete&amp;post=" . $post->ID, 'delete-post_' . $post->ID);
    $htmllink = '<a href="' . esc_url($delLink) . '" data-title="' . esc_attr(get_the_title($post->ID)) . '" onclick="confirmDelete(this); return false;">' . esc_html($link) . '</a>';
    echo $before . $htmllink . $after;
}

3. Сообщение подтверждения об успешном удалении

После удаления поста вы можете использовать параметр в URL, чтобы показать сообщение "Пост успешно удален". Вы добавили следующий код после удаления:

$redirect = add_query_arg( 'success', 'true', $redirect );

А затем в вашем шаблоне (например, author.php) вы можете отобразить сообщение при наличии параметра success:

<?php if ( !empty($_GET['success']) ) { ?>
    <div class="notice notice-success">
        <p>Пост успешно удален!</p>
    </div>
<?php } ?>

Теперь у вас есть полностью функциональная система для удаления постов с использованием стилизованных модальных окон для подтверждения и сообщения об успехе. Это улучшает пользовательский опыт и придает вашему интерфейсу более современный и удобный вид.