Попытка создать шорткод, который отображает термины таксономии в выпадающем списке.

На чтение 4 мин Опубликовано 13.01.2025

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
Применение

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

У меня есть фрагмент кода, который отображает все термины из указанной таксономии в выпадающем меню. Код отлично работает, когда он жестко запрограммирован, но у меня возникают трудности с его реализацией в виде пользовательского шорткода. Выпадающее меню отображается корректно, но ссылки не работают при выборе термина. Я понимаю, что проблема заключается в JavaScript, и считаю, что использование wp_enqueue_script является решением, но у меня возникают трудности с правильной его реализацией. Ниже приведен код для моего пользовательского шорткода:

<?php 

add_shortcode('practice_dropdown', 'wc_product_taxonomy_dropdown');

function wc_product_taxonomy_dropdown( $atts ) {
    // Attributes
    $atts = shortcode_atts(array(
        'hide_empty'   => '1', // or '0'
        'show_count'   => '0', // or '0'
        'orderby'      => 'name', // or 'order'
        'taxonomy'     => 'area-of-practice',
    ), $atts, 'practice_dropdown');

    ob_start();
   ?> 
   
    <select class="<?php echo $atts['taxonomy']; ?>" name="<?php echo $atts['taxonomy']; ?>">
      <option><?php echo sprintf( __( 'Выберите %s', 'woocommerce' ), $taxonomy_name ); ?> </option>
      <?php
        $terms = get_terms(array('taxonomy' => $atts['taxonomy'], 'hide_empty' => $atts['hide_empty'], 'show_count' => $atts['show_count'], 'orderby' => $atts['orderby']));
        foreach ($terms as $key => $term) {
      ?>
        <option value="<?php echo get_term_link($term->term_id, $atts['taxonomy']); ?>"><?php echo $term->name; ?></option>
      <?php } ?>
    </select>
    
    <script type="text/javascript">
    

        jQuery(function(){
            var select="."<?php echo $atts['taxonomy']; ?>;
            jQuery(select).on('change', function() {
              if (jQuery(this).val() !== '') {
                  location.href = jQuery(this).val();
              }  
            });
        });
    </script>
    <?php
}

?>

Буду безмерно благодарен за любую помощь, спасибо.

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

Вопрос касается создания шорткода для отображения таксономических терминов в виде выпадающего списка в WordPress. Проблема заключается в том, что хотя выпадающий список отображается правильно, ссылки не работают при выборе термина. Основное предположение заключается в том, что проблема кроется в части JavaScript, а именно в том, что функция wp_enqueue_script не используется должным образом для подключения JavaScript.

Теория

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

Пример

Данный пример шорткода пытается использовать inline JavaScript для обработки выбора элемента выпадающего списка, чтобы перенаправить пользователя на соответствующую страницу таксономии. Проблема может возникать из-за того, что JavaScript код встроен непосредственно в HTML, что может привести к тому, что он не будет корректно выполняться или не сработает по ожидаемому сценарию.

Применение

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

Создайте отдельный файл JavaScript, например custom-dropdown.js, и добавьте в него следующий код:

jQuery(document).ready(function($) {
    $('.area-of-practice').on('change', function() {
        if ($(this).val() !== '') {
            location.href = $(this).val();
        }
    });
});

Измените функцию PHP для подключения JavaScript через wp_enqueue_script:

add_shortcode('practice_dropdown', 'wc_product_taxonomy_dropdown');

function wc_product_taxonomy_dropdown($atts) {
    $atts = shortcode_atts(array(
        'hide_empty'   => '1', // или '0'
        'show_count'   => '0', // или '0'
        'orderby'      => 'name', // или 'order'
        'taxonomy'     => 'area-of-practice',
    ), $atts, 'practice_dropdown');

    // Регистрируем и подключаем скрипт
    wp_register_script('custom-dropdown', get_template_directory_uri() . '/js/custom-dropdown.js', array('jquery'), null, true);
    wp_enqueue_script('custom-dropdown');

    ob_start(); ?>

    <select class="<?php echo esc_attr($atts['taxonomy']); ?>" name="<?php echo esc_attr($atts['taxonomy']); ?>">
      <option><?php echo sprintf(__('Select a %s', 'woocommerce'), $atts['taxonomy']); ?></option>
      <?php
        $terms = get_terms(array('taxonomy' => $atts['taxonomy'], 'hide_empty' => $atts['hide_empty'], 'show_count' => $atts['show_count'], 'orderby' => $atts['orderby']));
        foreach ($terms as $term) {
      ?>
        <option value="<?php echo esc_url(get_term_link($term->term_id, $atts['taxonomy'])); ?>"><?php echo esc_html($term->name); ?></option>
      <?php } ?>
    </select>

    <?php
    return ob_get_clean();
}

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