[英]how can I make my javascript work with wp_enqueue_script?
我已經下載了一個免費的 HTML5 主題，我正在嘗試將其調整為 Wordpress。 CSS 工作正常，但 javascript 不行。
我基本上已經嘗試了一切，但沒有一個有效。 javascript 似乎正在加載，因為我可以在控制台中記錄每個 js 文件，但沒有發生任何預期的行為（例如滾動）。 問題是 javascript 不是我的，所以我不太明白它是如何工作的。 但在原來的 HTML5 主題上，一切正常，所以它也應該適用於 Wordpress。
我在functions.php中加載了6個腳本文件，它們都在頁腳中。 它們以正確的順序加載（我將它們記錄在控制台中）：
function paradigm_scripts(){
wp_enqueue_script('jquery.min', get_template_directory_uri() . '/js/jquery.min.js',$in_footer = true);
wp_enqueue_script('scrolly', get_template_directory_uri() . '/js/jquery.scrolly.min.js', $in_footer = true);
wp_enqueue_script('browser', get_template_directory_uri() . '/js/browser.min.js', $in_footer = true);
wp_enqueue_script('breakpoints', get_template_directory_uri() . '/js/breakpoints.min.js', $in_footer = true);
wp_enqueue_script('util', get_template_directory_uri() . '/js/util.js', $in_footer = true);
wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js',$in_footer = true);
}
add_action('wp_enqueue_scripts', 'paradigm_scripts');
這是我的首頁.php 文件：
<ul class="actions">
<li>
<a href="#first" class="arrow scrolly"><span class="label">Next</span></a>
</li>
</ul>
單擊下一步時，它意味着滾動，但它沒有，它只是轉到錨點，而不滾動。
你可以這樣做：
I have worked on your question and i have make page home in admin panel then i have create page-home.php in theme folder then i have make header.php and footer.php and just include those files in page-home.php
1) header.php
<!DOCTYPE HTML>
<!--
Paradigm Shift by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Paradigm Shift by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
我在頁腳中應用的第二個更改。php
2) footer.php
<footer>
<ul class="items">
<li>
<h3>Email</h3>
<a href="#">information@untitled.ext</a>
</li>
<li>
<h3>Phone</h3>
<a href="#">(000) 000-0000</a>
</li>
<li>
<h3>Address</h3>
<span>1234 Somewhere Road, Nashville, TN 00000</span>
</li>
<li>
<h3>Elsewhere</h3>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands fa-codepen"><span class="label">Codepen</span></a></li>
</ul>
</li>
</ul>
</footer>
</section>
<!-- Copyright -->
<div class="copyright">© Untitled. All rights reserved. Design: <a href="<?php echo get_template_directory_uri(); ?>/https://html5up.net">HTML5 UP</a>.</div>
</div>
<!-- Scripts -->
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery.scrolly.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/browser.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/breakpoints.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/util.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/main.js"></script>
</body>
</html>
我在 Page-home.php 中應用的第三個更改
3) Page-home.php
<?php get_header(); ?>
<!-- Intro -->
<section class="intro">
<header>
<h1>Paradigm Shift</h1>
<p>A free responsive site template designed by <a href="https://twitter.com/ajlkn">@ajlkn</a> / <a href="<?php echo get_template_directory_uri(); ?>/https://html5up.net">HTML5 UP</a></p>
<ul class="actions">
<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
</ul>
</header>
<div class="content">
<span class="image fill" data-position="center"><img src="images/pic01.jpg" alt="" /></span>
</div>
</section>
<!-- Section -->
<section id="first">
<header>
<h2>Magna sed nullam nisl adipiscing</h2>
</header>
<div class="content">
<p><strong>Lorem ipsum dolor</strong> sit amet consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor amet fermentum. Nullam venenatis erat id vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
<span class="image main"><img src="images/pic02.jpg" alt="" /></span>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Feugiat consequat tempus ultrices</h2>
</header>
<div class="content">
<p><strong>Etiam tristique libero</strong> eu nibh porttitor amet fermentum. Nullam venenatis erat id vehicula ultrices sed ultricies condimentum.</p>
<ul class="feature-icons">
<li class="icon solid fa-laptop">Consequat tempus</li>
<li class="icon solid fa-bolt">Etiam adipiscing</li>
<li class="icon solid fa-signal">Libero nullam</li>
<li class="icon solid fa-cog">Blandit condimentum</li>
<li class="icon solid fa-map-marker-alt">Lorem ipsum dolor</li>
<li class="icon solid fa-code">Nibh amet venenatis</li>
</ul>
<p>Vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Ultrices erat magna sed condimentum</h2>
</header>
<div class="content">
<p><strong>Integer mollis egestas</strong> nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<!-- Section -->
<section>
<header>
<h3>Erat aliquam</h3>
<p>Vehicula ultrices dolor amet ultricies et condimentum. Magna sed etiam consequat, et lorem adipiscing sed dolor sit amet, consectetur amet do eiusmod tempor incididunt ipsum suspendisse ultrices gravida.</p>
</header>
<div class="content">
<div class="gallery">
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/01.jpg" class="landscape"><img src="images/gallery/thumbs/01.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/02.jpg"><img src="images/gallery/thumbs/02.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/03.jpg"><img src="images/gallery/thumbs/03.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/04.jpg" class="landscape"><img src="images/gallery/thumbs/04.jpg" alt="" /></a>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h3>Nisl consequat</h3>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam sed facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet mauris. Ut magna finibus nisi nec lacinia ipsum maximus.</p>
</header>
<div class="content">
<div class="gallery">
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/05.jpg" class="landscape"><img src="images/gallery/thumbs/05.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/06.jpg"><img src="images/gallery/thumbs/06.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/07.jpg"><img src="images/gallery/thumbs/07.jpg" alt="" /></a>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h3>Lorem gravida</h3>
<p>Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aenean ornare velit lacus, ac varius sed enim lorem ullamcorper dolore. ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis.</p>
</header>
<div class="content">
<div class="gallery">
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/08.jpg" class="portrait"><img src="images/gallery/thumbs/08.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/09.jpg" class="portrait"><img src="images/gallery/thumbs/09.jpg" alt="" /></a>
<a href="<?php echo get_template_directory_uri(); ?>/images/gallery/fulls/10.jpg" class="landscape"><img src="images/gallery/thumbs/10.jpg" alt="" /></a>
</div>
</div>
</section>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Duis sed adpiscing veroeros amet</h2>
</header>
<div class="content">
<p><strong>Proin tempus feugiat</strong> sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore.</p>
<ul class="actions">
<li><a href="#" class="button primary large">Get Started</a></li>
<li><a href="#" class="button large">Learn More</a></li>
</ul>
</div>
</section>
<!-- Elements -->
<!--
<section>
<header>
<h2>Elements</h2>
</header>
<div class="content">
<section>
<header>
<h3>Text</h3>
</header>
<div class="content">
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="<?php echo get_template_directory_uri(); ?>/#">this is a link</a>.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<hr />
<h5>Blockquote</h5>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h5>Preformatted</h5>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'Sorted in ' + i + ' iterations.';</code></pre>
</div>
</section>
<section>
<header>
<h3>Lists</h3>
</header>
<div class="content">
<h4>Unordered</h4>
<ul>
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Alternate</h4>
<ul class="alt">
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Ordered</h4>
<ol>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis viverra.</li>
<li>Felis enim feugiat.</li>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis lorem.</li>
<li>Felis enim et feugiat.</li>
</ol>
<h4>Icons</h4>
<ul class="icons">
<li><a href=#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href=#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href=#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href=#" class="icon brands fa-github"><span class="label">Github</span></a></li>
</ul>
<h4>Actions</h4>
<ul class="actions">
<li><a href=#" class="button primary">Default</a></li>
<li><a href=#" class="button">Default</a></li>
</ul>
<ul class="actions stacked">
<li><a href=#" class="button primary">Default</a></li>
<li><a href=#" class="button">Default</a></li>
</ul>
</div>
</section>
<section>
<header>
<h3>Table</h3>
</header>
<div class="content">
<h4>Default</h4>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
<h4>Alternate</h4>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
<section>
<header>
<h3>Buttons</h3>
</header>
<div class="content">
<ul class="actions">
<li><a href="#" class="button primary">Primary</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button large">Large</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button primary disabled">Disabled</span></li>
<li><span class="button disabled">Disabled</span></li>
</ul>
</div>
</section>
<section>
<header>
<h3>Form</h3>
</header>
<div class="content">
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="demo-name">Name</label>
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
</div>
<div class="field half">
<label for="demo-email">Email</label>
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
</div>
<div class="field">
<label for="demo-category">Category</label>
<select name="demo-category" id="demo-category">
<option value="">-</option>
<option value="1">Manufacturing</option>
<option value="1">Shipping</option>
<option value="1">Administration</option>
<option value="1">Human Resources</option>
</select>
</div>
<div class="field half">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">Low</label>
</div>
<div class="field half">
<input type="radio" id="demo-priority-high" name="demo-priority">
<label for="demo-priority-high">High</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Email me a copy</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-human" name="demo-human" checked>
<label for="demo-human">Not a robot</label>
</div>
<div class="field">
<label for="demo-message">Message</label>
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
</div>
</section>
</div>
</section>
-->
<!-- Section -->
<section>
<header>
<h2>Get in touch</h2>
</header>
<div class="content">
<p><strong>Auctor commodo</strong> interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis.</p>
<form>
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="button primary" /></li>
</ul>
</form>
</div>
<?php
get_footer();
?>
這對我有用。我已經嘗試了代碼並給了你代碼
試試下面的代碼：
function paradigm_scripts(){
wp_enqueue_script('scrolly', get_template_directory_uri() . '/js/jquery.scrolly.min.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('browser', get_template_directory_uri() . '/js/browser.min.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('breakpoints', get_template_directory_uri() . '/js/breakpoints.min.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('util', get_template_directory_uri() . '/js/util.js',array( 'jquery' ), '1.0.0' true);
wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0' true);
}
array('jquery') 是您可以根據需要設置的依賴項。 '1.0.0' 是您可以留空或編寫自己的版本的版本
還要仔細檢查您的頁腳是否有wp_footer(); 在你關閉</body>標簽之前
我已經刪除了 WP 已經包含的 jquery.min.js 第一行。 如果不包括在內，您只需要在入隊腳本時提及依賴項。
您實際上是在添加兩個 JQuery 文件。 第一個文件由入隊 function 添加，如下所示。
wp_enqueue_script('jquery.min', get_template_directory_uri() . '/js/jquery.min.js',$in_footer = true);
添加了第二個 wordpress 內置 JQuery 文件，因為您在隊列 function 的第三個參數 (array('jquery')) 中將依賴項指定為 'jquery'。
解決方案
僅添加文件文件，通過提及依賴項或手動添加您的 js 文件。
另外，如下圖調用enqueue function。
wp_enqueue_script('scrolly', get_template_directory_uri() . '/js/jquery.scrolly.min.js',array('jquery'),'',true);
第一個參數是 js 文件的句柄，第二個是路徑，第三個 id 依賴項，第四個是版本，第五個是你想在頁腳中添加腳本的天氣。 最后一個參數只接受真/假值。
確保您已將所有腳本文件放在您的 root/wp-content/themes/theme_name/js/ 目錄中。
如何在Wordpress中通過wp_enqueue_script加載Javascript？
[英]How to load Javascript via wp_enqueue_script in Wordpress?
Wordpress wp_enqueue_script 函數不起作用，javascript 文件未加載
[英]Wordpress wp_enqueue_script function not working, javascript file not loading
使用wp_enqueue_script（）在Wordpress-functions.php中添加Javascript
[英]Add Javascript in Wordpress - functions.php with wp_enqueue_script()
修復Wordpress中的JavaScript沖突，幫助使用wp_enqueue_script
[英]Fixing a JavaScript conflict in Wordpress, help using wp_enqueue_script
如何使用 wp_enqueue_script WordPress 將腳本添加為模塊
[英]How to add script as a module using wp_enqueue_script WordPress
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.