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; }

使用Chrome检查器并单击.txt，我看不到新的 element 内容，但是该内容仅存在于 styles 列中。所以对我的要求没有好处。

Answer 1

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

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

请告诉我它是否有效。

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

1 个答案: