带按钮的 Wordpress 动态简码开关

Question

我有 1500 个带有简码的图片库（foogallery）。 我按类别为图像附加了过滤器，但我必须从图库插件中删除很少的过滤器。它会太重并显着增加加载时间。

我想出了一个简单的（至少在我看来）解决方案。 我想创建一个按钮，它将用编码到按钮中的那个替换页面上的当前短代码。

所以我在 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 允许——那就另当别论了 :)

有人知道吗？ 提前致谢！

Answer 1

您需要了解 AJAX 及其工作原理 听到是这段代码 当您单击按钮时，调用 AJAX 函数并加载您的图库简码（名称：问题中给出的“shrt”，但问题中的代码写的不同！？）

在开始学习 AJAX 之前，先了解 jQuery 和 WordPress 的基本知识，以便顺利学习

https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

https://api.jquery.com/jquery.ajax/

https://developer.wordpress.org/plugins/javascript/ajax/

========================

按钮：

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

波纹管代码进入活动主题的功能.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