很抱歉，这个问题很长。我想要具体。
我正在开发包含内容的WordPress页面。我正在从头开发自己的主题。在首页，我想要一个包含各种图像的幻灯片。
我正在使用WAMP在本地开发我的WordPress网站。
我试图以两种方式使这个幻灯片显示工作。第一种方式有效，但我不认为这是正确的方法。
方法1：
我在front-page.php文件中包含了幻灯片的html，然后我在它下面加入了JavaScript。这个工作，幻灯片的工作，一切都很棒。可悲的是，我不认为这是正确的方法。
但是：
我做了很多关于wp_enqueue_scripts（）的阅读;以及将JavaScript包含在WordPress模板中的正确方法。由此，我收集到我的JavaScript应该在一个单独的.js文件中。然后，在我的functions.php文件中，我应该使用唯一的名称注册JavaScript文件，并使用wp_enqueue_scripts（）调用它;功能。如果我只想在某些页面上加载JavaScript，我可以使用条件逻辑。默认情况下，JavaScript将加载到站点的标题中。我已经阅读了谷歌搜索给我的所有文章，以及观看了一堆视频。似乎意见在functions.php文件中确切包含此内容的确切位置略有不同，以及在函数中注册后是否需要单独调用JavaScript文件。
（旁注：我理解我们也用这种方式包含我们的CSS，wp_enqueue_style（）函数存在于functions.php文件中。我没有遇到过这个问题，我的CSS加载很好。）
如果我以这种方式成功地将JavaScript排入队列，我应该可以将幻灯片的html放入实际的WordPress内容管理系统中，方法是将其作为页面内容包含在那里。这将是理想的，因为如果需要，我可以从我的WordPress仪表板更改和添加图像。我总结这比将其硬编码到我的front-page.php文件本身更合乎逻辑。
唯一的问题是我似乎无法正确地做到这一点。我的幻灯片出现了，我的CSS出现了，但JavaScript显然没有加载，因为没有幻灯片放映功能，而且元素只显示在页面上，一个在另一个之下。我将尝试尽可能全面地理解我在functions.php文件中尝试的各种方法：
失败方法1是将它包含在functions.php文件中：（旁注：wp_enqueue_style（＆＃39; style＆＃39;，get_stylesheet_uri（））;此代码部分有效，我＆＃39 ;我只是将它作为参考，以便您查看在我目前包括尝试失败的functions.php文件中的位置
<?php
function GHDCustom_resources () {
wp_enqueue_style('style', get_stylesheet_uri());
wp_register_script('ghd-frontpageslideshow', get_template_directory_uri() . '/ghd-js/ghd-frontpageslideshow.js', 'array()', 'false', 'true');
}
{ add_action ('wp_enqueue_scripts', 'GHDCustom_resources');
}
?>
失败方法2是保持functions.php文件如上所示，但是然后将以下内容添加到head部分中的header.php :(字面意思没有任何变化。）
<?php wp_head();
wp_enqueue_scripts('ghd-frontpageslideshow')
?>
因为我已经销毁了这么多先前的尝试，所以我很难迭代每一次无效的尝试。现在，我的大脑太累了，无法尝试重新创建每个场景。但最重要的是，显然我缺少一些东西而不理解。任何有关可能的帮助，都将非常感激。我一直在讨论这个问题几天。我希望我的问题至少有点连贯。如果我的问题不清楚，我需要提供更多信息或代码片段，请告诉我，我会这样做。
以下是幻灯片演示的JavaScript以及html标记。就像我说的那样，如果我只是将它全部包含在我的front-page.php文件中，这就有效。
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length} ;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script> <!--front-page-image-slideshow-->
<div class="frontpage-slideshow-container">
<div class="mySlides fade">
<img src="/ghd-grafix/shortycakes-logo.png" style="width: 100%">
<div class="text"><p>Logo for Small Bakery Business</p></div>
</div>
<div class="mySlides fade">
<img src="/ghd-grafix/tourmaline-image.png" style="width: 100%">
<div class="text"><p>Website Banner for Client: CUBE</p></div>
</div>
<div class="mySlides fade">
<img src="/ghd-grafix/client-icon-set.png" style="width: 100%">
<div class="text"><p>Icon Set for Client: CUBE</p></div>
</div>
<div class="mySlides fade">
<img src="/ghd-grafix/run-the-race-cross-and-foot.png" style="width: 100%">
<div class="text"><p>Logo for Prayer Campaign</p></div>
</div>
<div class="mySlides fade">
<img src="/ghd-grafix/suaveaudio-visualasset.png" style="width: 100%">
<div class="text"><p>Logo design and Visual Asset for Audio Visual Company</p></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
答案 0 :(得分：0)
在您的主题中，functions.php执行此操作：
<?php
define( 'TEMPPATH', get_template_directory_uri() );
define( 'THEME_VERSION', '1.0.0' );
add_action( 'after_setup_theme', 'yourtheme_theme_setup' );
if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
function yourtheme_theme_setup() {
//actions go here
add_action( 'wp_enqueue_scripts', 'yourtheme_frontend_scripts' );
}
}
if ( ! function_exists( 'yourtheme_frontend_scripts' ) ) {
function yourtheme_frontend_scripts() {
if (is_home()) { // will load only on home
wp_enqueue_script( 'slick_js', TEMPPATH.'/ghd-js/ghd-frontpageslideshow.js', array( 'jquery' ), THEME_VERSION, true );
}
// will load anywhere. Put your scripts and styles here using enqueue functions - you can add more conditionals here...
}
}
这应该只在您的主页上加载您的脚本。请注意jquery依赖项。
了解更多：
另外：google