Как заменить URL-адреса на кнопки в плагине wpDataTables в WordPress?

Содержание

Вопрос или проблема
Ответ или решение
1. Проблема с исправлением URL на кнопки
2. Исправленный код
3. Сохранение URL при экспорте
4. Резюме

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

Я работаю с плагином wpDataTables на сайте WordPress и пытаюсь заменить URL на кнопки в одной из моих таблиц. В частности, у меня есть столбцы, содержащие ссылки на Instagram и YouTube, и я хочу, чтобы они отображались как кнопки “Открыть”, которые при нажатии открывают ссылку в новой вкладке.

Я добавил следующую функцию в файл functions.php, чтобы попытаться заменить ссылки на кнопки:

add_action('wp_footer', 'custom_wpdatatables_modifications', 100);

function custom_wpdatatables_modifications() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Выбираем все таблицы в контейнере (при необходимости отрегулируйте класс контейнера)
            $('.table_1_wrapper').each(function() {
                // В каждой таблице находим ссылки Instagram и YouTube и изменяем их
                $(this).find('td.column-instagram a, td.column-youtube a').each(function() {
                    var link = $(this).attr('href'); // Получаем URL
                    var platform = $(this).closest('td').hasClass('column-instagram') ? 'Instagram' : 'YouTube';

                    // Заменяем существующую ссылку на кнопку
                    $(this).replaceWith('<a href="' + link + '" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Открыть ' + platform + '</a>');
                });
            });
        });
    </script>
    <?php
}

После развертывания этого кода ссылки по-прежнему отображаются как обычные URL в таблице.

Почему URLs не заменяются кнопками и как я могу убедиться, что ссылки правильно заменены на кнопки? Есть ли лучший способ модификации содержимого строк таблицы, сгенерированных wpDataTables?

Большое спасибо за любую помощь!:)

Я рассмотрел документацию плагина wpDataTables и обнаружил, что есть возможность отображать ссылки как кнопки. Однако, когда я включаю эту функцию и экспортирую таблицу, экспортированный файл показывает текст кнопки (например, “Открыть”) вместо фактического URL. Я хочу, чтобы кнопки отображались в таблице, но чтобы сохранялся правильный формат ссылки в экспортах. Чтобы решить эту проблему, я попытался заменить ссылки на пользовательские кнопки с помощью JavaScript, но это не сработало, как ожидалось.

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

Чтобы заменить URL на кнопки в плагине wpDataTables на вашем сайте WordPress, необходимо учесть несколько ключевых моментов и производить изменения корректным образом. Давайте разберёмся с вашей проблемой и предложим эффективное решение.

1. Проблема с исправлением URL на кнопки

Вы уже добавили функции в файл functions.php, что является правильным шагом, однако используемый вами JavaScript код может не срабатывать по нескольким причинам:

Неправильный селектор: Убедитесь, что селекторы таблицы точно соответствуют именам классов колонок в вашем wpDataTable.
Переопределение данных: Иногда плагины могут перерисовывать таблицы, после загрузки вашего скрипта. Это может произойти, если таблицы инициализируются динамически. Вам необходимо убедиться, что ваш код исполняется после полной загрузки таблицы.

2. Исправленный код

Попробуйте использовать следующий модифицированный JavaScript код для замены ссылок на кнопки:

add_action('wp_footer', 'custom_wpdatatables_modifications', 100);

function custom_wpdatatables_modifications() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Подождем, пока таблица будет загружена
            $(document).on('wpdt_after_table_init', function(event) {
                // Определяем все таблицы
                $('.table_1_wrapper').each(function() {
                    // Находим ссылки Instagram и YouTube
                    $(this).find('td.column-instagram a, td.column-youtube a').each(function() {
                        var link = $(this).attr('href'); // Получаем URL
                        var platform = $(this).closest('td').hasClass('column-instagram') ? 'Instagram' : 'YouTube';

                        // Заменяем ссылку на кнопку
                        $(this).replaceWith('<a href="' + link + '" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Open ' + platform + '</a>');
                    });
                });
            });
        });
    </script>
    <?php
}

3. Сохранение URL при экспорте

Понимаем, что вам также нужно сохранить фактические URL при экспорте таблицы. Вот несколько решений:

Используйте функционал плагина: Если в самом плагине wpDataTables есть функция для отображения ссылок как кнопок (с опцией сохранения оригинальных URL), это может быть наилучший вариант. Проверьте документацию плагина для деталей.
Кастомизация экспорта: Вы можете создать, например, PHP функцию, которая генерирует экспортируемые данные с правильными URL, вместо использования отображаемых данных пользователям в интерфейсе. Это потребует дополнительных манипуляций с кодом плагина.

4. Резюме

Работа с плагином wpDataTables может потребовать дополнительных усилий, чтобы достичь желаемого результата. Используйте предоставленный код с правильными селекторами и убедитесь, что он срабатывает после инициализации таблиц. Обязательно проверьте документацию плагина для изучения доступных функций, которые могут оптимизировать ваши процессу замены URL на кнопки и поддержания сохранности оригинальных ссылок при экспорте.

Следуя данным рекомендациям, вы сможете корректно заменить ссылки на кнопки функционала вашего WordPress сайта и улучшить взаимодействие с пользователями.