Как вставить скрипт JS на страницу Worpress через свой плагин на php?

Ссылка скопирована
HTML PHP WordPress
1 ответ

У меня есть сайт на Wordpress. К нему я написал плагин на php и в нём я через шорткод вывожу HTML код на страницу. Как мне вместе с HTML кодом вывести ещё скрипт на JS, чтобы он работал внутри этого шорткода? JS мне нужен для реализации множественной фильтрации карточек по нажатию нескольких переключателей.

Дополнительно:

Ответы:

function enqueue_scripts_for_short(){  	global $post;  	if( has_shortcode( $post->post_content, 'my-shortcode') && ( is_single() || is_page() ) ){  		wp_enqueue_script('my-custom-js', get_template_directory_uri().'/js/my-custom.js');  	}  }  add_action( 'wp_enqueue_scripts', 'enqueue_scripts_for_short' );

function enqueue_scripts_for_short(){ global $post; if( has_shortcode( $post->post_content, 'my-shortcode') && ( is_single() || is_page() ) ){ wp_enqueue_script('my-custom-js', get_template_directory_uri().'/js/my-custom.js'); } } add_action( 'wp_enqueue_scripts', 'enqueue_scripts_for_short' );

  • А можете, пожалуйста, объяснить этот код? Этот код нужно вставить в код плагина php? И вроде, как я понимаю, эта функция для внедрения скрипта из файла, а мне очень желательно вставить прямо из того же файла с плагином php.
  • Никита, что такое ?

    вставить прямо из того же файла с плагином php.

    Это функция которую можно вставить в плагин, да, скрипт вставится только тогда когда в контенте страницы присутствует шорткод

  • WP Panda, то есть мне нужно подключить скрипт js не из отдельного файла с расширением .js, а из кода самого плагина для Wordpress на php
  • Никита, это глупо, но если очень хочется, то что мешает добавить скрипт в тот же шорткод?
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Антон С. Ответ

JS для shortcode в WordPress лучше подключать через wp_enqueue_script(), а не печатать большой скрипт прямо внутри HTML. Тогда WordPress сможет правильно поставить зависимости, версию, загрузку в footer и не будет дублей, если shortcode встречается несколько раз на странице.

Внутри плагина можно сделать так:

add_shortcode('cards_filter', function () {
    wp_enqueue_script(
        'cards-filter',
        plugin_dir_url(__FILE__) . 'assets/cards-filter.js',
        [],
        '1.0.0',
        true
    );
 
    ob_start();
    ?>
    <div class="cards-filter">
        <button data-filter="php">PHP</button>
        <button data-filter="js">JS</button>
        <div class="card" data-tags="php js">Карточка</div>
    </div>
    <?php
    return ob_get_clean();
});

add_shortcode('cards_filter', function () { wp_enqueue_script( 'cards-filter', plugin_dir_url(__FILE__) . 'assets/cards-filter.js', [], '1.0.0', true ); ob_start(); ?> <div class="cards-filter"> <button data-filter="php">PHP</button> <button data-filter="js">JS</button> <div class="card" data-tags="php js">Карточка</div> </div> <?php return ob_get_clean(); });

Если очень нужно вставить короткий inline-скрипт из того же PHP-файла, используйте wp_add_inline_script() после регистрации основного скрипта:

wp_register_script('cards-filter-empty', '', [], '1.0', true);
wp_enqueue_script('cards-filter-empty');
wp_add_inline_script('cards-filter-empty', 'console.log("filter ready");');

wp_register_script('cards-filter-empty', '', [], '1.0', true); wp_enqueue_script('cards-filter-empty'); wp_add_inline_script('cards-filter-empty', 'console.log("filter ready");');

Но для фильтрации карточек лучше всё-таки отдельный JS-файл. Его проще отлаживать, минифицировать, кэшировать и не смешивать с PHP-разметкой.

Также shortcode должен возвращать HTML, а не выводить его напрямую через echo. Иначе при вставке в редактор или конструктор блок может появиться не в том месте.

Если скрипт должен получать настройки из PHP, передавайте их через wp_localize_script() или wp_add_inline_script() до основного кода: AJAX URL, nonce, список фильтров, переводы надписей. Не вставляйте эти данные в глобальные переменные прямо в HTML shortcode без экранирования.

Для множественной фильтрации карточек храните значения в data- атрибутах и в JS сравнивайте выбранные фильтры с набором тегов карточки. Так код не будет зависеть от текста кнопок и проще переживёт перевод сайта или изменение названий категорий.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ 1С Как выдать дефолтному пользователю 1С 8.3 право на загрузку XML? 1 ответ