Wordpress: bir ajax çağrısı ile bir eklenti işlevi nasıl?

3 Cevap php

Ben bir Wordpress MU eklenti yazıyorum, her yazı ile bir bağlantı içerir ve kullanıcı bu linke tıkladığında eklenti işlevlerinden birini arayın ve sonra dinamik bu işlevi çıkışı ile bağlantı metnini güncelleştirmek için ajax kullanmak istiyorum .

Ben ajax sorgu ile şaşırıp. Bunu yapmak için bu karmaşık, açıkça hack-ish, yol var, ama oldukça çalışmıyor. Bir eklenti ajax işlevselliği eklemek için 'doğru' ya da 'wordpress' yolu nedir?

(Benim şu anki hack kod aşağıda. Ben benim tarayıcıda örnek-ajax.php doğrudan gittiğimde olarak wp sayfasında olsun aynı çıktıyı alamadım oluşturmak bağlantıyı tıkladığınızda.)

Ben aşağıdaki gibi benim kod [1] kurmak var:

mu-plugins/sample.php:

<?php
/*
Plugin Name: Sample Plugin
*/
if (!class_exists("SamplePlugin")) {
  class SamplePlugin {
    function SamplePlugin() {}
    function addHeaderCode() {
      echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl').
             '/wp-content/mu-plugins/sample/sample.css" />\n';
      wp_enqueue_script('sample-ajax', get_bloginfo('wpurl') .
             '/wp-content/mu-plugins/sample/sample-ajax.js.php',
             array('jquery'), '1.0');

    }
    // adds the link to post content.
    function addLink($content = '') {
        $content .= "<span class='foobar clicked'><a href='#'>click</a></span>";
        return $content;
    }
    function doAjax() { //
        echo "<a href='#'>AJAX!</a>";
    } 
  }
}
if (class_exists("SamplePlugin")) {
  $sample_plugin = new SamplePlugin();
}
if (isset($sample_plugin)) {
  add_action('wp_head',array(&$sample_plugin,'addHeaderCode'),1);
  add_filter('the_content', array(&$sample_plugin, 'addLink'));
}

mu-plugins/sample/sample-ajax.js.php:

<?php
if (!function_exists('add_action')) {
    require_once("../../../wp-config.php");
}
?>
jQuery(document).ready(function(){
    jQuery(".foobar").bind("click", function() {
        var aref = this;
        jQuery(this).toggleClass('clicked');
        jQuery.ajax({
          url: "http://mysite/wp-content/mu-plugins/sample/sample-ajax.php",
          success: function(value) {
            jQuery(aref).html(value);
          }
        });
    });
});

mu-plugins/sample/sample-ajax.php:

<?php
if (!function_exists('add_action')) {
  require_once("../../../wp-config.php");
}
if (isset($sample_plugin)) {
  $sample_plugin->doAjax();
} else {
  echo "unset";
}
?>

[1] Note: The following tutorial got me this far, but I'm stumped at this point. http://www.devlounge.net/articles/using-ajax-with-your-wordpress-plugin

3 Cevap

TheDeadMedic çok doğru değil. WordPress AJAX yetenekleri inşa etti. Için / argüman 'eylem' ile POST kullanarak wp-admin/admin-ajax.php ajax isteği gönderin:

jQuery(document).ready(function(){
    jQuery(".foobar").bind("click", function() {
        jQuery(this).toggleClass('clicked');
        jQuery.ajax({
          type:'POST',
          data:{action:'my_unique_action'},
          url: "http://mysite/wp-admin/admin-ajax.php",
          success: function(value) {
            jQuery(this).html(value);
          }
        });
    });
});

Eğer sadece kullanıcılar giriş için çalışmak istiyorsanız, o zaman bu gibi eklenti bunu kanca:

add_action('wp_ajax_my_unique_action',array($sample_plugin,'doAjax'));

veya yalnızca kullanıcıların dışı oturum için çalışmak, bu gibi kanca:

add_action('wp_ajax_nopriv_my_unique_action',array($sample_plugin,'doAjax'));

Eğer herkes için çalışmak istiyorsanız hem de kullanın.

admin ajax.php zaten bazı eylem adlarını kullanır, bu yüzden emin dosyası aracılığıyla bakmak ve aynı eylem adları, yoksa yanlışlıkla vb silme yorumlar, gibi şeyler yapmaya çalışacağım kullanmayın olun

DÜZENLEME

Üzgünüm, ben oldukça soruyu anlamadı. Ben bir ajax isteği yapmak nasıl soran sanıyordum. Neyse, iki şey denemek istiyorum:

İlk olarak, a etiketi olmadan işlev yankı sadece kelime AJAX var. Sonra, bir başarı ve tam bir geri arama hem de böylece ajax arama değiştirmeyi deneyin:

jQuery(document).ready(function(){
    jQuery(".foobar").bind("click", function() {
        var val = '';
        jQuery(this).toggleClass('clicked');
        jQuery.ajax({
          type:'POST',
          data:{action:'my_unique_action'},
          url: "http://mysite/wp-admin/admin-ajax.php",
          success: function(value) {
            val = value;
          },
          complete: function(){
            jQuery(this).html(val);
          }
        });
    });
});

Maalesef bu soruya biraz yönlendirir, ancak bunun problem çözme biter (ya da en azından hata ayıklama yardımcı olur) bulabilirsiniz eğer.

AJAX çağrıları yapmak gerekir only yolu kendi sorgu parametresi geçerli bir WordPress URL gelin ve sonra bir 'çengel' init fonksiyonu ile bu parametrenin varlığı için kontrol edin .

Örneğin, yönetici kullanım için, URL kod olacaktı;

echo admin_url ('benim-ajax = true?');

Sonra eklenti dosyası gibi bir şey bu;

function my_ajax_handler()
{
    if (!isset($_GET['my-ajax']))
        return true;

    // run ajax
    die($ajax_message);
}
add_action('admin_init', 'my_ajax_handler');

WordPress environment

Her şeyden önce, bu görevi başarmak için, bu sunucuya istek itecektir bir jQuery komut enqueue sonra kayıt önerilir. Bu işlemler wp_enqueue_scripts eylem kanca bağladım edilecektir. Aynı kanca bunu keyfi Javascript dahil etmek için kullanılan bu wp_localize_script koymak gerekir. Bu şekilde ön ucunda bulunan bir JS nesne olacak. Bu nesne jQuery kolu tarafından kullanılacak doğru url üzerinde taşır.

Bir göz atın:

  1. wp_register_script(); function
  2. wp_enqueue_scripts kanca
  3. wp_enqueue_script(); function
  4. wp_localize_script(); function

File: functions.php 1/2

add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts(){
  wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR SCRIPT FILE', array(), false, true );
  wp_enqueue_script( 'ajaxHandle' );
  wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}

File: jquery.ajax.js

Bu dosya ajax çağrısı yapar.

jQuery(document).ready( function($){
  //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
  $.ajax({
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
    type: 'POST',
    action: 'myaction' // this is the function in your functions.php that will be triggered
    data:{ 
      name: 'John',
      age: '38'
    },
    success: function( data ){
      //Do something with the result from server
      console.log( data );
    }
  });
});

File: functions.php 2/2

Finally on your functions.php file there should be the function triggered by your ajax call. Remember the suffixes:

  1. wp_ajax (sadece kayıtlı kullanıcılar veya admin panel işlemleri için işlevini izin)
  2. wp_ajax_nopriv (imtiyaz kullanıcılar için fonksiyonuna izin)

Bu ekler artı eylem eylem adını oluşturmaktadır:

wp_ajax_myaction veya wp_ajax_nopriv_myaction

add_action( 'wp_ajax_myaction', 'so_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction' 'so_wp_ajax_function' );
function so_wp_ajax_function(){
  //DO whatever you want with data posted
  //To send back a response you have to echo the result!
  echo $_POST['name'];
  echo $_POST['age'];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}

Umarım yardımcı olur!

Şey net değil varsa bana bildirin.