Javascript 非常简单：'Read more'...' Show Less' 要应用于 Wordpress 的功能？

Question

我作为最后的手段来到这里，希望能快速简单地解决这个问题。

我一直在使用一些 Javascript 来在同一页面的 6 个不同部分创建“阅读更多...”和“...阅读更少”功能。

我有一段正文，我只想显示第一行。其余部分将在单击“阅读更多...”时显示

下面的 sn-p 显示代码本身正在运行，但是我在尝试将其实际应用到我的网站/主题时遇到了很多麻烦。任何将其应用于functions.php文件的尝试。

$(".more").toggle(function () {
    $(this).text("less..").siblings(".complete").show();
}, function () {
    $(this).text("more..").siblings(".complete").hide();
});

.complete {
    display:none;
}
.more {
    color:navy;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="teaser">text goes here</span>

<span class="complete"> this is the 
complete text being shown</span>

<span class="more">more...</span>

我遇到的问题是，每次我尝试将它应用到我的functions.php 时，它都会产生一个错误，导致我的整个网站崩溃。

有没有人知道我做错了什么？或者将其应用于 wordpress 主题的最佳方式是什么？

我使用的主题是现代化。

对此的任何帮助都会很棒。

提前非常感谢。

Answer 1

尝试将上述 sn-p 添加到位于 assets 文件夹中的 js 中，然后在 functions.php 文件中使用 wp_register_script()、wp_enqueue_script() 和 add_action() 函数添加对该文件的引用

function my_enqueued_scripts()
{

global $post;
// Register file that contains your js 
wp_register_script('myscript', get_template_directory_uri() . '/assets /js/myscript.js');

if (isset($post)) {
    //load it when needed depending on the page -template-home.php
    if (is_page_template('template-home.php')) {
        wp_enqueue_script('myscript');
    }
}
}

然后调用你的函数

add_action('wp_enqueue_scripts', 'my_enqueued_scripts', 10);