Wp_LOCALIZE_SCRIPT和SHORTCODE中的calid不同

因此，我正在制作一个短代码，并尝试集成vue+wp\\u查询，当我在同一页上使用具有不同属性的多个短代码时，很难使其正常工作。我正在使用插件“简单即时搜索”的代码作为基础，并且仍在学习。

我想我可以对div id和wp\\u localize\\u脚本使用uniqid（），然后在脚本文件中使用它。然而，div中生成的id与js中生成的id不同-vfm_gallery.block_id.

<?php

if (!class_exists(\'myclass\')){
    class myclass {

        /**
         * Class Constractor
         */
        function __construct() {
            //add shortcode
            add_shortcode(\'gallery-grid\', array($this,\'display_gallery_shortcode\'));
            //ajax handler
            add_action( \'wp_ajax_nopriv_vfm_gallery\', array($this, \'ajax_search\') );
            add_action( \'wp_ajax_vfm_gallery\',  array($this, \'ajax_search\') );
            add_action(\'wp_enqueue_scripts\',array($this,\'add_scripts_and_styles\'));

        }

        /**
         * shortcode to display search form and results Div
         * @return string - search form and results Div
         */
        public function display_gallery_shortcode(){

            return  \'<div id="\' . $this->gallery_block_id() . \'">
                        <transition name="fade">
                            <div class="loader-overlay" v-if="loading">
                                <div class="loader"></div>
                                <h2>Fetching data</h2>
                            </div>
                        </transition>
                        <transition name="slide-fade" appear>
                            <div v-if="!loading">
                                <ul>
                                    <li v-for="post in posts">
                                        {{ post.title }}
                                    </li>
                                </ul>
                            </div>
                        </transition>
                    </div>\';

        }

        /**
         * ajax search function
         * @return array() with title,content JSON
         */
        public function ajax_search(){


            $latest = new WP_Query( array (
                \'post_type\'       => \'gallery\',
                \'posts_per_page\'  => \'9\',
                \'cat\'             => \'\',
            ));

            $posts = $latest->posts;

            // Check if any posts were found.
            if ( ! $latest->post_count ){
                echo json_encode(array());
                die();
            }


            //Create an array with the results

            $results=array();
            foreach ( $posts as $post ) {   

                $video_url = $post->post_content;

                $title = trim( strip_tags( $post->post_title ) );

                $image = get_the_post_thumbnail( $post->ID, \'thumbnail\' );

                $url = get_permalink($post->ID);

                $results[] = array(
                  \'title\'       => $title,
                  \'video_url\'   => $video_url,
                  \'image\'       => $image,
                  \'url\'         => $url
                );
            }

            //using JSON to encode the array
            echo json_encode($results);
            die();
        }

        /**
         * Void function to add needed scripts and styles.
         */
        public function add_scripts_and_styles(){
            wp_enqueue_script( \'vfm-gallery\', plugin_dir_url(dirname(dirname(__FILE__))) . \'js/gallery.js\', array( \'jquery\' ), null, true );

            wp_localize_script( \'vfm-gallery\', \'vfm_gallery\', array(
                \'ajaxUrl\'   => admin_url( \'admin-ajax.php\' ),
                \'nonce\'     => wp_create_nonce(\'vfmg\'),
                \'block_id\'  => $this->gallery_block_id()
            ));
        }

        static function gallery_block_id(){
            return \'vfm_gallery_\' . uniqid();
        }


    }//end class
}//end if
new myclass();

var postsList = new Vue({
    el: "#" + vfm_gallery.block_id,
    data: {
        posts: [],
        loading: true,
    },
    created: function () {
        this.fetchData();
    },
    methods: {
        fetchData: function () {

            this.loading = true; //start loading
            axios.get(vfm_gallery.ajaxUrl, {
                    params: {
                        action: \'vfm_gallery\',
                        nonce: vfm_gallery.nonce
                    }
                })
                .then((response) => {
                    this.loading = false; //stop loading
                    this.posts = response.data;
                })
                .catch((error) => {
                    this.loading = false; //stop loading
                    console.error(error)
                })

        }
    }

})

<?php global $shortcode_id; $shortcode_id ++; $settings_arr = array();//Here is your settings for each shortcode ob_start(); ?> <script> if(!my_plugin_data) var my_plugin_data = {} my_plugin_data[<?php echo $shortcode_id ?>] = <?php echo json_encode($settings_arr) ?> </script> <div>MY SHORTCODE CONTENT GOES HERE</div> <?php return ob_get_clean();

如何重命名WordPress AJAX URL？

我目前正在寻找更改/隐藏默认WordPress的方法admin-ajax.php URL。我想这样做以删除admin 当我使用AJAX URL从我的服务器读取例如一个文件时，它可以防止我的客户产生误解。在这种情况下，URL具有admin前缀，这有点令人困惑。因此，AJAX URl应如下所示：ajax.php我搜索了一下，但找不到任何有用的信息。因此，我无法向您显示任何相关代码。但当我得到它时，我会更新我的问题以帮助其他人。也许有人以前做过这件事，可以给我一些有用的提示，以便我尽快实施？这将是非常棒的！

相关推荐

如何重命名WordPress AJAX URL？