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

Содержание

Вопрос или проблема
Ответ или решение
Как заменить URL на кнопки в плагине wpDataTables для WordPress
Проблема
Шаги для решения проблемы
Обновленный код
Пояснение кода
Возможные дополнительные решения
Заключение

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

Я работаю с плагином 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 в таблице.

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

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

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

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

Как заменить URL на кнопки в плагине wpDataTables для WordPress

Если вы сталкиваетесь с проблемой замены URL-адресов на кнопки в таблицах, созданных с помощью плагина wpDataTables, вы на правильном пути. Давайте подробнее рассмотрим, как корректно реализовать вашу задачу.

Проблема

Вы добавили JavaScript-код в файл functions.php, который должен заменять ссылки на кнопки, однако ссылки по-прежнему отображаются в виде обычных URL. Данная проблема может возникать по нескольким причинам, включая неправильный выбор селекторов или порядок загрузки скриптов.

Шаги для решения проблемы

Проверьте селекторы и классы: Убедитесь, что вы используете правильные селекторы класса для таблицы и колонок. В вашем коде вы ссылаетесь на класс .table_1_wrapper, проверьте, существует ли он в HTML-структуре страницы.
Используйте правильный способ замены ссылки: В вашем коде стоит заменить текущую ссылку на кнопку, но надо убедиться, что вы корректно сформировали HTML-код кнопки. Также необходимо заплатить внимание на безопасность и совместимость с другим скриптами.
Проверьте порядок загрузки вашего скрипта: Из-за того, что wpDataTables может загружать свои значения через AJAX, ваш код может сработать до загрузки самой таблицы. Попробуйте использовать подход, который реагирует на событие после полной загрузки таблицы.

Обновленный код

Вот пример кода, который может помочь вам достичь желаемого результата:

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_render', function() {
                $('.table_1_wrapper').each(function() {
                    $(this).find('td.column-instagram a, td.column-youtube a').each(function() {
                        var link = $(this).attr('href');
                        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
}

Пояснение кода

Событие wpdt_after_table_render: Этот обработчик гарантирует, что замену выполнят после полной отрисовки таблицы, учитывающей возможные вызовы AJAX.
Обработка классов: Убедитесь, что классы column-instagram и column-youtube назначены столбцам, содержащим ссылки.

Возможные дополнительные решения

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

Заключение

Замена URL на кнопки в wpDataTables требует внимательного подхода и учета особенностей работы плагина. Используйте предложенный код, убедитесь, что селекторы правильные, поведение скриптов контролируется, и у вас всё получится. Если у вас останутся вопросы или понадобятся другие решения, не стесняйтесь писать.

Если этот материал был вам полезен, подумайте о его распространении среди ваших коллег, которым может понадобиться помощь в работе с wpDataTables!