将 Flexslider 添加到 Wordpress 子主题

Question

我想在 Wordpress 子主题中添加一个 flex 滑块，但它不起作用。我已经尝试了几个小时，希望能得到一些帮助。 这是网站： http://dev.electricalenergy.se/

在我的儿童主题中，我添加了： 1. 一个带有 flexslider.css 的 CSS 文件夹 2.一个带有jquery.flexslider.js的js文件夹 3. function.php 使用以下脚本

<?php
// FLEXSLIDER
function flexslider() {
    if (!is_admin()) {

        // Enqueue FlexSlider JavaScript
        wp_register_script('jquery_flexslider', get_template_directory_uri(). '/js/jquery.flexslider-min.js', array('jquery') );
        wp_enqueue_script('jquery_flexslider');

        // Enqueue FlexSlider Stylesheet        
        wp_register_style( 'flexslider-style', get_template_directory_uri() . '/css/flexslider.css', 'all' );
        wp_enqueue_style( 'flexslider-style' );

        // FlexSlider custom settings       
        add_action('wp_footer', 'flexslider_settings');

        function flexslider_settings() { ?>         
            <script>
                jQuery(document).ready(function($){

                    $('.flexslider').flexslider();
                });
            </script>
        <?php 
        }
    }
}
add_action('init', 'flexslider');

4. 最后，我从父主题复制了 index.php 并添加了

   <div id="primary" class="content-area">
   <main id="main" class="site-main" role="main">
   
           <!-- Flexslider demo content -->
   
           <div class="flexslider">
               <ul class="slides">
                   <li>
                       <img src="http://farm7.staticflickr.com/6213/6256961398_a484813abe_b.jpg" />
                       <p class="flex-caption">Caption goes here</p>
                   </li>
                   <li>
                       <img src="http://farm7.staticflickr.com/6025/6012928351_d643e5a404_b.jpg" />
                       <p class="flex-caption">Caption goes here</p>
                   </li>
                   <li>
                       <img src="http://farm7.staticflickr.com/6126/6007110789_bd7faaaa79_b.jpg" />
                       <p class="flex-caption">Caption goes here</p>
                   </li>
                   <li>
                       <img src="http://farm6.staticflickr.com/5159/5874760659_de4c00d585_b.jpg" />
                       <p class="flex-caption">Caption goes here</p>
                   </li>
               </ul>
           </div>
   
           <!-- END Flexslider demo content -->
   

Answer 1

你的代码是正确的，但是css是空的，js没有加载：

404

“网络错误：404 未找到 - http://dev.electricalenergy.se/wp-content/themes/twentysixteen/js/jquery.flexslider-min.js?ver=4.5”

“网络错误：404 未找到 - http://dev.electricalenergy.se/wp-content/themes/twentysixteen/css/flexslider.css?ver=4.5”

将flexslider的css/js文件放到你的父主题目录或者follow this.