Question

我想在Wordpress Child主题中添加一个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');

最后，我从父主题复制了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

＆＃34; NetworkError：404 Not Found - http://dev.electricalenergy.se/wp-content/themes/twentysixteen/js/jquery.flexslider-min.js?ver=4.5＆＃34;

＆＃34; NetworkError：404 Not Found - http://dev.electricalenergy.se/wp-content/themes/twentysixteen/css/flexslider.css?ver=4.5＆＃34;

将flexslider的css / js文件放在父主题目录或follow this中。

将Flexslider添加到Wordpress子主题

1 个答案: