Как я могу добавить код jquery на одну страницу WordPress?

#javascript #jquery #ajax #wordpress

#javascript #jquery #ajax #wordpress

Вопрос:

У меня есть скрипт, для которого требуется jQuery, и я не знаю, как добавить его на одну страницу wordress. Я искал множество решений, но они слишком сложны для моего понимания.

 <script>
$(document).ready(function(e) {
$('#checkboxtest').change(function(){
    if( $('#checkboxtest').prop('checked') )
       {checkboxstatus = "YES";}
       else
       {checkboxstatus = "NO";}
$.ajax({
        type: "POST",
        url: "checkboxtestbackend.php",
        data: {checkboxstatus: checkboxstatus},
        })
        
});
});
</script>
  

Комментарии:

1. Наряду с ответами, приведенными ниже, вы должны использовать enqueue_script() для извлечения jquery из отдельного файла в соответствии с кодексом WordPress.

Ответ №1:

Попробуйте это:

 <?php if (is_page('my-page-slug')): ?>
<script>
$(document).ready(function(e) {
$('#checkboxtest').change(function(){
    if( $('#checkboxtest').prop('checked') )
       {checkboxstatus = "YES";}
       else
       {checkboxstatus = "NO";}
$.ajax({
        type: "POST",
        url: "checkboxtestbackend.php",
        data: {checkboxstatus: checkboxstatus},
        })
});
});
</script>
<?php endif; ?>
  

Ответ №2:

Прежде всего — вы должны переписать свою оболочку jQuery, чтобы код работал на страницах WP:

 jQuery(function($) {
    $('#checkboxtest').change(function(){
        if( $('#checkboxtest').prop('checked') )
           {checkboxstatus = "YES";}
           else
           {checkboxstatus = "NO";}
    $.ajax({
            type: "POST",
            url: "checkboxtestbackend.php",
            data: {checkboxstatus: checkboxstatus},
            })
            
    });
});
  

Теперь вы можете добавить этот код на страницу WordPress двумя способами:

Использование плагина для пользовательских фрагментов кода (например, этого)

Или, если ваша страница использует пользовательский шаблон, вы можете напрямую вставить

 <script>
...
</script>
  

добавьте свой код там, где он вам нужен.

Ответ №3:

Существует много способов добавить javascript в ваш WordPress.

Самый простой способ — использовать плагины, подобные этому, css javascript toolbox, чтобы добавлять свои скрипты в WordPress туда, куда вам нужно.

Другой способ — обновить ваш шаблон WordPress и вставить свой код туда, где это необходимо. По этой ссылке вы найдете полный пример того, как это было достигнуто: добавить javascript вwordpress

Ответ №4:

Используйте код, подобный приведенному ниже:

   <?php
    function myscript() {
        // if ( is_single() amp;amp; 'post' == get_post_type() ) {
        // if ( is_singular( 'book' ) ) {  // book is a custom post type 
        if ( is_single()) {
            ?>
            <script type="text/javascript">
                alert("Hello! I am Added");
    
            </script>
        <?php
        }
    }
    add_action('wp_footer', 'myscript');
  

Другой пример:

 /**
 * Proper way to enqueue scripts and styles.
 */
function wpdocs_theme_name_scripts() {
    // if ( is_single() amp;amp; 'post' == get_post_type() ) {
    // if ( is_singular( 'book' ) ) {  // book is a custom post type 
    if ( is_single()) {
        wp_enqueue_style( 'style-name', get_stylesheet_uri() );
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );