带按钮的WordPress动态短码开关

hwazgwia  于 2023-03-01  发布在  WordPress
关注(0)|答案(1)|浏览(115)

我有1500与简码(foogallery)的图片库。我附加的图片类别过滤器,但很少有过滤器,我将不得不从画廊插件删除。这将是太沉重,大大增加加载时间。
我想出了一个简单的(至少在我的脑海中)解决方案。我想创建一个按钮,将取代目前的shortode在网页上的一个编码成按钮。
所以我用HTML创建了一个按钮和一个带有简码"shrt"的图库。
我的代码如下所示:

<button class="AAA" onclick="testt()">Click</button>

<style>
    
    .AAA {
    
        background: green;
        
    }
    
    .AAA:hover{
        
        background: yellow;
        
    }
    
</style>

<script>
    
    function testt(){
        
 document.getElementById("shrt").value = "[shortcode="new"]";
  }    
    
</script>

很明显,它根本不起作用,所以在网上搜索了几天后,我决定来这里问一下。
我有基本的编程知识,没有花哨,但我相信我的逻辑是正确的:D如果WP & JS允许-这是一个不同的问题:)
有人知道吗?先谢了!

xwbd5t1u

xwbd5t1u1#

您需要了解 AJAX 及其工作原理听到的是这段代码,当您单击按钮时,AJAX函数被调用并加载您的图库短代码(名称:“shrt”与问题中给出的相同,但在问题的代码中,它的写法不同!?)
在开始学习 AJAX 之前,请先了解jQuery和WordPress的基本知识,以便顺利学习
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
https://api.jquery.com/jquery.ajax/
https://developer.wordpress.org/plugins/javascript/ajax/

按钮:

<button id="show-gallery">Click</button>

波纹管代码进入活动主题的function.php

<?php
add_action("wp_footer",function(){
    ?>
    <script>
        jQuery(document).ready(function(){
            jQuery(document).on("click","show-gallery",function(){
                jQuery.ajax({
                    type: 'POST',
                    url: "<?php echo admin_url('admin-ajax.php')?>",
                    data: {action:"load_shortcode"},
                    success: function (data) {
                        // find element that has id shrt and inside that add gallery(responce of ajax)
                        jQuery(document).find("#shrt").html(data); 
                    },
                });
            });
        });
    </script>
    <?php
},90);

function load_shortcode_function(){
    echo do_shortcode('[shrt]'); // shortcode name : shrt
    wp_die();
}
add_action('wp_ajax_load_shortcode', 'load_shortcode_function');
add_action('wp_ajax_nopriv_load_shortcode', 'load_shortcode_function');

你的问题仍然需要一些更多的澄清喜欢什么是在短代码和画廊如何显示
这有助于:https://stackoverflow.com/help/how-to-ask

相关问题