帮助我完成我的第一个非常基本的插件

时间:2019-08-18 作者:iMed

我正在尝试创建我的第一个worpress插件!

实际上,我的想法是,当我单击按钮时,会向php文件(ajax-process.php)发送一个ajax请求,它包含一个非常基本的代码,可以从数据库中提取一些数据,然后在我的主页中将其显示为警报或其他。

这是我的插件floder(在wordpress插件文件夹中)

DB拉拔器:

   - DB-Puller.php
   - ajax-process.php
和js(js\\u file.js)+css(css\\u file.css)文件夹。

这里是DB拉拔器的组成部分。php

<?php
/**
 * Plugin Name: DB-Puller 
 * Plugin URI: https://my-web-site.com/
 * Description: This is a my firt plugin, it(s allows to display data from database. 
 * Version: 0.1
 * Author: Firest Last name
 * Author URI: https://my-web-site.com/
 * License: GPL3
 */

function scripts_files_enqueue_scripts() {

// Adding css file    
wp_enqueue_style(\'css_file\',plugins_url( \'css/css_file.css\', __FILE__ ) );

// Adding JS file    
wp_enqueue_script( \'js_file\', plugins_url( \'js/js_file.js\', __FILE__ ), array(\'jquery\'), \'1.0\', true );
}


add_action(\'wp_enqueue_scripts\', \'scripts_files_enqueue_scripts\');

/* Load Ajax Callback to "wp_ajax_*" Action Hook */
add_action( \'wp_ajax_nopriv_my_ajax_action\', \'my_ajax_action_callback\' );

?>

这就是包含ajax过程的内容。php
N.B:数据库表非常基本,它只包含id+文本列

<?php

function my_ajax_action_callback()
{
   if (isset($_POST[\'req\']))
        {
            global $wpdb;
            $quer = $wpdb->get_results( "SELECT * FROM wp_custom_table_1" ); 
            $arr = $quer[0]->text;
            echo $arr;
            die();
        }
    wp_die(); // required. to end AJAX request.
}


js文件的内容

jQuery(function($){

    $(\'body\').prepend(\'<button class="btn" type="button">PULL DATA</button>\');

    $(\'button.btn\').on(\'click\', function()
                  {

        $.ajax({

            url:\'http://127.0.0.1/wp522/wp-content/plugins/DB-Puller/ajax-process.php\',
            method:\'POST\',
            data:{
                  req:\'\',
                  action:\'my_ajax_action\',
                  },
            success:function(data)
            {
                alert(data);
            },
            error:function()
            {
                alert(erooor);
            }
        })
    })
})
警报发送为空!请帮我找出问题所在!

非常感谢。

2 个回复
SO网友:Cyclonecode

我已经回答了这个问题stackoverflow,但也在这里添加了答案:

从代码上看,这似乎不像Wordpress做这类事情的方式。

首先,您需要包括ajax-process.php 在插件主文件中,例如:

require_once plugin_dir_path(__FILE__) . \'/ajax-process.php\';
其次,您需要像这样注册ajax回调:

add_action(\'wp_ajax_my_ajax_action\', \'my_ajax_function\');
add_action(\'wp_ajax_no_priv_my_ajax_action\', \'my_ajax_function\');
然后在中注册ajaxUrlscripts_files_enqueue_scripts() 因此可以从javascript访问它。这个admin-ajax.php 文件处理所有ajax请求:

wp_localize_script(
   \'js_file\',
   \'ajax\',
    array(
      \'ajaxUrl\' => admin_url(\'admin-ajax.php\'),
    )
);
然后在javascript中需要使用ajaxUrl 并指定action 这将告诉Wordpress应该触发哪个回调:

jQuery(function($) {
  $(\'body\').prepend(\'<button class="btn" type="button">PULL DATA</button>\');

  $(\'button.btn\').on(\'click\', function() {
    $.post({
        url: ajax.ajaxUrl,
        data: {
          req: \'\',
          action: \'my_ajax_action\',
        },
        success: function(data) {
          alert(data);
        },
        error: function() {
          alert(\'error\');   
        }
    });
});
这是一篇好文章AJAX in Plugins, 解释如何在插件中使用ajax。

SO网友:Chetan Vaghela

请尝试以下代码:

DB拉拔器。php

<?php
/**
 * Plugin Name: DB-Puller 
 * Plugin URI: https://my-web-site.com/
 * Description: This is a my firt plugin, it(s allows to display data from database. 
 * Version: 0.1
 * Author: Firest Last name
 * Author URI: https://my-web-site.com/
 * License: GPL3
 */

function scripts_files_enqueue_scripts() {
    // Adding css file    
    wp_enqueue_style(\'css_file\',plugins_url( \'css/css_file.css\', __FILE__ ) );

    // Adding JS file    
    wp_enqueue_script( \'js_file\', plugins_url( \'js/js_file.js\', __FILE__ ), array(\'jquery\'), \'1.0\', true );
    # define ajax objext
    wp_localize_script(\'js_file\',\'my_ajax_object\',array(\'ajaxurl\' => admin_url( \'admin-ajax.php\' )));
}

add_action(\'wp_enqueue_scripts\', \'scripts_files_enqueue_scripts\');

require_once plugin_dir_path( __FILE__ ) . \'ajax-process.php\';

/* Load Ajax Callback to "wp_ajax_*" Action Hook */
add_action( \'wp_ajax_nopriv_my_ajax_action\', \'my_ajax_action_callback\' );
add_action( \'wp_ajax_my_ajax_action\', \'my_ajax_action_callback\' );
js/js\\u文件。js公司

jQuery(function($){

    $(\'body\').prepend(\'<button class="btn" type="button">PULL DATA</button>\');

    $(\'button.btn\').on(\'click\', function()
                  {

        $.ajax({

            url:my_ajax_object.ajaxurl,
            method:\'POST\',
            data:{
                  req:\'\',
                  action:\'my_ajax_action\',
                  },
            success:function(data)
            {
                alert(data);
            },
            error:function()
            {
                alert(erooor);
            }
        })
    })
})
ajax过程。php

<?php

function my_ajax_action_callback()
{
   if (isset($_POST[\'req\']))
        {
            global $wpdb;
            $quer = $wpdb->get_results( "SELECT * FROM wp_custom_table_1" ); 
            $arr = $quer[0]->text;
            echo $arr;
            die();
        }
    wp_die(); // required. to end AJAX request.
}
在上面的代码中,我添加了一个本地化ajax路径,并包含了一个ajax进程。php文件和js\\u文件。js我添加了ajax的url。如果这对你有用,请告诉我!