Question

我正在尝试为我的WordPress子主题的header.php模板中的<h1>标记生成的网站标题（我在WAMP中的WordPress网站）设置动画（我键入了网站＆＃39; s标题：常规 - ＆gt;设置 - ＆gt;网站标题）。

<header id="masthead" class="site-header" role="banner">
        <div class="site-branding">
            <h1 class="site-title tlt"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>

我已将此行标识为生成我的网站标题的行：

<h1 class="site-title tlt"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

已将课程tlt放入textillate（https://github.com/jschr/textillate）的h1标记中以进行动画制作。 Textillate需要三个依赖项（jQuery，lettering.js animate.css）我在header.php

的head部分链接到了

<script type="text/javascript" src="/wp-content/themes/qwerty-child/vendors/jquery.lettering-0.6.1.min.js"></script>
<link rel="stylesheet" href="/wp-content/themes/qwerty-child/vendors/animate.css">
<script type="text/javascript" src="/wp-content/themes/qwerty-child/vendors/jquery.textillate.js"></script>
<script type="text/javascript" src="/wp-content/themes/qwerty-child/script.js"></script>

我甚至尝试过所有依赖项的相对路径，比如

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="vendors/jquery.lettering-0.6.1.min.js"></script>
<link rel="stylesheet" href="vendors/animate.css">
<script type="text/javascript" src="vendors/jquery.textillate.js"></script>
<script type="text/javascript" src="script.js"></script>

仍然没有动画。最后，这是我的jQuery脚本：

注意：我的script.js文件位于其他目录中

$(document).ready(function(){
    $(function(){
        $('.tlt').textillate();
})

}

我阅读了关于使用JavaScript的codex但我仍然无法将其设置为动画（https://codex.wordpress.org/Using_Javascript）。我之前使用过textillate并且运行良好，但是，这是我第一次在WordPress上使用它

使用JavaScript从WordPress header.php动画h1标签

0 个答案: