如何使用 PHP 函数在 div 中添加链接？

Question

我的 Wordpress 主题内置了一个滑块，它允许通过 Wordpress 菜单 > 外观 > 自定义设置滑块标题和描述。但是，标题和说明的输入框不确认代码。所以我不能简单地使用<a href="#IngredientsAnchor">Click Me!</a> 或<button type="button" onClick="#IngredientsAnchor">Click Me!</button> 等在描述输入框中添加链接或按钮。

这是滑块的代码

<div id="main" role="main">
    <section class="slider">
        <div id="slider">
            <ul class="slide-img slides">
                                        <img alt="slide1" src="http://mastermix.asia/wp-content/uploads/2018/10/cow.jpg">   
                                        <div class="container caption-overlay text-right">
                                                <h1 class="slider_txt">
                        Master Mix                      </h1>
                                                <div class="txt">
                        <p>The very best of animal feed!                            
                        </p></div>

                    </div>
            </ul>
        </div>
    </section>
</div>

我想使用一个函数添加到该行中，使其显示如下内容：

<div id="main" role="main">
    <section class="slider">
        <div id="slider">
            <ul class="slide-img slides">
                                        <img alt="slide1" src="http://mastermix.asia/wp-content/uploads/2018/10/cow.jpg">   
                                        <div class="container caption-overlay text-right">
                                                <h1 class="slider_txt">
                        Master Mix                      </h1>
                                                <div class="txt">
                        <p>The very best of animal feed!                            
                        </p></br><a href="#IngredientsAnchor" class="button">Click Me!</a></div>

                    </div>
            </ul>
        </div>
    </section>
</div>

有人可以就我需要在所需行中添加的功能提供建议吗？

非常感谢。

编辑：我可能需要一个类似于我想出的“工作”功能。有人可以建议吗？或者进行修改以使其有效？

function replace_slider_txt()
{
    $(".txt").replaceWith('<div class="txt"><p>The very best of animal feed!</p><br /><a href="#IngredientsAnchor" class="IngredientsBtn"></a></div>');
}
add_action('slider','replace_slider_txt');

第二次编辑： 我还尝试在我的 functions.php 中打破 php 并使用脚本进行编辑，这也显示没有任何变化。 GRRR！

?>
<script type="text/javascript">
    $('.txt').replaceWith("<div class='txt'><p>The very best of animal feed!</p></br><a href='#IngredientsAnchor' class='IngredientsBtn'>&#x2B07;</a></div>");
</script>
<?php

第三次编辑：我还尝试了一个简单的 CSS 代码，可能会以这种方式更改它作为最后的手段。实际首页仍然没有变化

.txt,
.txt p { content: 'HAVE I CHANGED??' !important; }

使用 Chromes Inspector 并单击 .txt 我看不到新的 element 内容，但它仅存在于 styles 列中。所以对我的要求没有好处。

Answer 1

您可以在自定义的主题 js 文件中添加以下代码。

jQuery(document).ready(function($) {
    jQuery( "#slider .txt" ).append( '</br><a href="#IngredientsAnchor" class="button">Click Me!</a>');
}); 

如果有效，请告诉我。