Use AJAX in shortcode

时间:2012-11-17 作者:user23769

我有以下代码来显示随机引用的快捷码。问题:如何使按钮显示新的随机报价?我的意思是,这会点击按钮并显示一个新的报价(当然不会刷新页面)。

function random_quote() {

    // quotes file
     $array = file("/path to txt file");

    // generate a random number between 0 and the total count of $array minus 1
    // we minus 1 from the total quotes because array indices start at 0 rather than 1 by default
    $r = rand(0,count($array)-1);

    // return the quote in the array with an indices of $r - our random number
    return $array[rand(0,count($array)-1)];
}

add_shortcode( \'randomquotes\', \'random_quote\');
我对如何在WordPress中使用ajax更新页面上的内容感兴趣?在我的情况下,因为事实正是如此。

对不起,我的英语不好。我希望你能理解我。谢谢

2 个回复
最合适的回答,由SO网友:Johannes Pille 整理而成

首先,这在WPSE的范围内是非常边缘的
除了触发初始HTML输出的短代码之外,这实际上只是AJAX。

不管怎么说,就是这样做的:

PHP假定您提供的上述PHP代码段是功能性的,请将以下内容放入ajax调用的PHP文件中:

/wp-content/themes/%your_theme%/js/ajax-load-quote.php

 <?php
 /* uncomment the below, if you want to use native WP functions in this file */
// require_once(\'../../../../wp-load.php\');

 $array = file( $_POST[\'file_path\'] ); // file path in $_POST, as from the js
 $r = rand( 0, count($array) - 1 );

 return \'<p>\' . $array[$r] . \'</p>\';
 ?>
供将来参考,并使此答案对其他人有用:请注意wp-load.php 必须包含才能使用本机WordPress功能。最常见的情况可能是WP_Query$wpdb.

页面内容、小部件或模板文件中的HTML结构:

<div id="randomquotes">
    <p>I would rather have my ignorance than another man’s knowledge,
       because I have so much more of it.<br />
       -- Mark Twain, American author & Playwright</p>
</div>
<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>
很明显,你可以根据自己的喜好进行调整,但为了这个例子,这就是我们要做的
我们稍后将通过一个短代码生成上述内容。

jQuery

/wp-content/themes/%your_theme%/js/ajax-load-quote.js

function ajaxQuote() {
    var theQuote = jQuery.ajax({
        type: \'POST\',
        url: ajaxParams.themeURI+\'js/ajax-load-quote.php\',
        /* supplying the file path to the ajax loaded php as a $_POST variable */
        data: { file_path: ajaxParams.filePath },
        beforeSend: function() {
            ajaxLoadingScreen(true,\'#randomquotes\');
        },
        success: function(data) {
            jQuery(\'#randomquotes\').find(\'p\').remove();
            jQuery(\'#randomquotes\').prepend(data);
        },
        complete: function() {
            ajaxLoadingScreen(false,\'#randomquotes\');
        }
    });
    return theQuote;
}
/* Loading screen to be displayed during the process, optional */
function ajaxLoadingScreen(switchOn,element) {
    /* show loading screen */
    if (switchOn) {
        jQuery(\'\'+element).css({
            \'position\': \'relative\'
        });
        var appendHTML = \'<div class="ajax-loading-screen appended">
            <img src="\'+ajaxParams.themeURI+\'images/ajax-loader.gif"
                alt="Loading ..." width="16" height="16" /></div>\';
        if( jQuery(\'\'+element).children(\'.ajax-loading-screen\').length === 0 ) {
            jQuery(\'\'+element).append(appendHTML);
        }
        jQuery(\'\'+element).children(\'.ajax-loading-screen\').first().css({
            \'display\': \'block\',
            \'visibility\': \'visible\',
            \'filter\': \'alpha(opacity=100)\',
            \'-ms-filter\': \'"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"\',
            \'opacity\': \'1\'
        });
    } else {
        /* hide the loading screen */
        jQuery(\'\'+element).children(\'.ajax-loading-screen\').css({
            \'display\': \'\',
            \'visibility\': \'\',
            \'filter\': \'\',
            \'-ms-filter\': \'\',
            \'opacity\': \'\'
        });
        jQuery(\'\'+element).css({
            \'position\': \'\'
        });
    }
}
/* triggering the above via the click event */
jQuery(\'#newquotes\').click( function() {
    var theQuote = ajaxQuote();
    return false;
});
将其放在函数中。php在上面的代码段(您会发现包含的代码段已在下面修改)下面,粘贴以下内容:

function random_quote( $atts ) {
    /* extracts the value of shortcode argument path */
    extract( shortcode_atts( array(
        \'path\' => get_template_directory_uri() . \'/quotes.txt\' // default, if not set
    ), $atts ) );
    $array = file( $path );
    $r = rand( 0, count($array) - 1 );
    $output = \'<div id="randomquotes">\' .
            \'<p>\' . $array[$r] . \'</p>\' .
        \'</div>\' .
        \'<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>\';
    /* enqueue the below registered script, if needed */
    wp_enqueue_script( \'ajax-quote\' );
    /* supplying the file path to the script */
    wp_localize_script(
        \'ajax-quote\',
        \'ajaxParams\',
        array(
            \'filePath\' => $path,
            \'themeURI\' => get_template_directory_uri() . \'/\'
        )
    );
    return $output;
}
add_shortcode( \'randomquotes\', \'random_quote\');
/* register the js */
function wpse72974_load_scripts() {
    if ( ! is_admin() ) {
        wp_register_script(
           \'ajax-quote\', 
            get_template_directory_uri() . \'/js/ajax-load-quote.js\',
            array( \'jquery\' ),
            \'1.0\',
            true
        );
    }
}
add_action ( \'init\', \'wpse72974_load_scripts\' );
可选:加载屏幕的css
.ajax-loading-screen {
    display: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff; /* the background of your site or the container of the quote */
    filter: alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    -webkit-transition:  opacity .1s;
    -moz-transition:  opacity .1s;
    -ms-transition:  opacity .1s;
    -o-transition: opacity .1s;
    transition: opacity .1s;
    z-index: 9999;
}
.ajax-loading-screen img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
}
资源/阅读wp_localize_script() - codex
  • jQuery.ajax - jQuery API Docs
  • ajaxload.info - loading gif generator
  • SO网友:fuxia

    您可以在短代码中注册脚本。如果主题包含wp_footer().

    工作原理:

    注册快捷码回调add_shortcode().在脚本添加更新按钮中,将POST请求发送到admin_url( \'admin-ajax.php\' ) 并获取新数据。将返回的数据插入到具有短代码的元素中ajax-shortcode-demo.

    ajax-shortcode-demo.php

    <?php
    /**
     * Plugin Name: AJAX Shortcode Demo
     * Description: How to use AJAX from a shortcode handler named <code>[ajaxdemo]</code>.
     */
    
    add_action( \'wp_loaded\', array ( \'Ajax_Shortcode_Demo\', \'get_instance\' ) );
    
    class Ajax_Shortcode_Demo
    {
        /**
         * Current plugin instance
         *
         * @type NULL|object
         */
        protected static $instance = NULL;
    
        /**
         * Unique action name to trigger our callback
         *
         * @type string
         */
        protected $ajax_action = \'load_demo_data\';
    
        /**
         * CSS class for the shortcode, reused as JavaScript handle.
         *
         * Must be unique too.
         *
         * @type string
         */
        protected $shortcode_class = \'ajaxdemo\';
    
        /**
         * Remeber if we had regsitered a script on a page already.
         *
         * @type boolean
         */
        protected $script_registered = FALSE;
    
        /**
         * Create a new instance.
         *
         * @wp-hook wp_loaded
         * @return  object $this
         */
        public static function get_instance()
        {
            NULL === self::$instance and self::$instance = new self;
            return self::$instance;
        }
    
        /**
         * Constructor. Register shortcode and AJAX callback handlers.
         */
        public function __construct()
        {
            add_shortcode( \'ajaxdemo\', array ( $this, \'shortcode_handler\' ) );
    
            // register the AJAX callback
            $callback = array ( $this, \'ajax_callback\' );
            // user who are logged in
            add_action( "wp_ajax_$this->ajax_action", $callback );
            // anonymous users
            add_action( "wp_ajax_nopriv_$this->ajax_action", $callback );
        }
    
        /**
         * Render the shortcode.
         */
        public function shortcode_handler()
        {
            $this->register_scripts();
    
            return sprintf(
                \'<div class="%1$s"><b>%2$s</b></div>\',
                $this->shortcode_class,
                $this->get_rand()
            );
        }
    
        /**
         * Return AJAX result.
         *
         * Must \'echo\' and \'die\'.
         *
         * @wp-hook wp_ajax_$this->ajax_action
         * @wp-hook wp_ajax_nopriv_$this->ajax_action
         * @return int
         */
        public function ajax_callback()
        {
            echo $this->get_rand();
            exit;
        }
    
        /**
         * Random number.
         *
         * @return int
         */
        protected function get_rand()
        {
            return rand( 1, 1000 );
        }
    
        /**
         * Register script and global data object.
         *
         * The data will be printent before the linked script.
         */
        protected function register_scripts()
        {
            if ( $this->script_registered )
                return;
    
            $this->script_registered = TRUE;
    
            wp_register_script(
                // unique handle
                $this->shortcode_class,
                // script URL
                plugin_dir_url( __FILE__ ) . \'/jquery-ajax-demo.js\',
                // dependencies
                array ( \'jquery\'),
                // version
                \'v1\',
                // print in footer
                TRUE
            );
    
            wp_enqueue_script( $this->shortcode_class );
    
            $data = array (
                // URL address for AJAX request
                \'ajaxUrl\'   => admin_url( \'admin-ajax.php\' ),
                // action to trigger our callback
                \'action\'    => $this->ajax_action,
                // selector for jQuery
                \'democlass\' => $this->shortcode_class
            );
    
            wp_localize_script( $this->shortcode_class, \'AjaxDemo\', $data );
        }
    }
    

    jquery-ajax-demo.js

    jQuery( function( $ ) {
    
        var buttonClass = AjaxDemo.democlass + \'Button\',
            // insert AJAX result into the shortcode element
            updateDemo = function( response ){          
                $( \'.\' + AjaxDemo.democlass ).find( \'b\' ).html( response );
            },
            // fetch AJAX data
            loadDemo = function() {
                $.post( AjaxDemo.ajaxUrl, { action: AjaxDemo.action }, updateDemo );
            };
    
        // add an update button
        $( \'.\' + AjaxDemo.democlass )
            .append( \' <button class="\' + buttonClass + \'">New</button>\' );
    
        // assign the clock handler to the button
        $( \'.\' + buttonClass ).click( loadDemo );
    });
    
    生成博客帖子:

    enter image description here

    结束

    相关推荐

    将用户从Admin Break AJAX重定向

    尝试对一些用户进行简单重定向,我不想访问wp admin/,因此我执行了以下代码:function no_admin_access() { if ( !current_user_can( \'delete_posts\' ) ) { wp_redirect( site_url( \'/\' ) ); exit; } } add_action(\'admin_init\', \'no_admin_access\'); 但是,当