Выполнение функции PHP только при нажатии (WordPress)

Question

Для одного из моих WordPress сайта файлы PHP, у меня есть следующий код:

<div class="tabs"> 
     <a href="#tab1" id="items_id">Items</a> 
    </div> 
    <div class="section" id="tab1"> 
    <?php get_template_part('page/tab1'); ?>    
    </div> 

Таким образом, это будет вызывать tab1.php файл в разделе div id="tab1".

Однако, я хочу сделать так, чтобы get_template_part был выполнен или вызывается только при нажатии на вкладку Items.

Каким будет jQuery для вызова или выполнения функции get_template_part?

EDIT:

Итак, что я пытаюсь добиться похож на Ajax. Поскольку функция get_template_part не будет вызываться до тех пор, пока не будет нажата вкладка "Items", браузер не должен вызывать ненужные файлы и замедлять страницу.

Сообщите мне, если вы считаете, что это лучший способ сделать это.

Спасибо!

Answer 1

Хотя идея уже проиллюстрирована Рафаэль в своем ответе, я вмешиваюсь, чтобы добавить некоторые детали

Лучший способ использования AJAX с Wordpress - использовать его встроенный способ его обработки, а также путем отправки запросов на wp-admin/admin-ajax.php (я знаю, что часть «admin» в имени файла немного вводит в заблуждение. но все запросы в интерфейсе (сторона просмотра), а также администратор могут обрабатываться в admin-ajax.php с большим количеством преимуществ, особенно для обеспечения безопасности. А для серверного кода php, который будет выполнен, он должен быть помещен в functions.php.

Ваш код JQuery будет выглядеть примерно так:

$(document).ready(function() { 
     $('.tabs a').click(function(e) { 
      e.preventDefault(); 

      var tab_id = $(this).attr('id'); 


      $.ajax({ 
       type: "GET", 
       url: "wp-admin/admin-ajax.php", 
       dataType: 'html', 
       data: ({ action: 'yourFunction', id: tab_id}), 
       success: function(data){ 
          $('#tab'+tab_id).html(data); 
       }, 
       error: function(data) 
       { 
       alert("Error!"); 
       return false; 
       } 

      }); 

    }); 
}); 

в functions.php вашей темы (или непосредственно в файле плагина), добавьте:

add_action('wp_ajax_yourFunction', 'yourFunction'); 
add_action('wp_ajax_nopriv_yourFunction', 'yourFunction'); 

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

function yourFunction() { 

// get id 
    // your php code 

    die(); 

    } 

Для j avascript, посмотрите на ajax() и его стенографию get(). А для лучших практик использования AJAX с Wordpress в Интернете есть много учебников (я вернусь, чтобы дать один). Успехов

Edit:

Как упоминалось Карлом, вы можете использовать .load() вместо ajax(), Следует отметить, что .load() является просто оболочкой для $.ajax(). Он добавляет функции, которые позволяют определить, где в документе должны быть вставлены возвращаемые данные. Поэтому действительно можно использовать только тогда, когда вызов приведет только к HTML. Он называется несколько иначе, чем другой, поскольку это метод, связанный с конкретным элементом DOM, обернутым jQuery. Таким образом, можно было бы: $('#divWantingContent').load(...), который внутренне звонит .ajax().

Но мой первоначальный ответ о том, как организовать php-код в отношении Wordpress best practices.

Answer 2

Вы не можете вызвать PHP функции из JavaScript, потому что к тому времени, когда браузер видит страницу, РНР уже выполнил (или в случае, не выполняется)

Единственным способом для вас сделать то, что вы хотите, - это свернуть функцию PHP в отдельный скрипт, а затем вызвать этот файл с помощью AJAX. Попросите HTML-код сценария, а затем вставьте HTML-код в div tab1 в обратном вызове AJAX.

Answer 3

Я думаю, что самым простым решением для вас будет использование функции jQuery load(). Это самый простой способ добиться того, что вы описываете. Единственная проблема, что когда кто-то нажимает на заголовок, будет задержка, чтобы получить подразделов, поскольку они еще не существуют (что было бы в случае любой ситуации, когда вы задержать груз

HTML:.

<div class="tabs"> 
     <a href="#tab1" id="items_id">Items</a> 
    </div> 
    <div class="section" id="tab1"></div> 

JS:.

$(function() { 
    //wait for the page to finish loading 
    $('#items_id').click (function (e){ 
    //watch for the items header to be clicked 
    e.preventDefault(); 
    //prevent it from opening a link 
    $('#tab1').load('tab1.php'); 
    //load the tab1.php file, or whatever file INTO the div 
    }); 
})