Es ist mein erstes Mal, dass ich ein WordPress-Theme mit Bootstrap 3.0 erstellt habe, als die Dateien nur HTML enthielten und alles korrekt funktionierte, bis ich es in ein WordPress-Theme konvertierte.

Das JavaScript wird nicht richtig geladen. Ich bin mir nicht sicher, ob ich einfach über header.php oder footer.php aufrufen soll

Unten ist der Code, den ich verwendet habe.

header.php

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
</head>

index.php

<?php get_header(); ?>
        <!--carousel-->
        <div class="container full-width">
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/1.jpg" alt="Slide-0">
                        <div class="cap-right slide-cap">
                            <img src="img/slide1cap.png">
                            <a href="#">View Lookbook</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="Slide-1"> 
                        <div class="cap-right slide-cap">
                            <img src="img/slide2cap.png" alt="SlideCap">
                            <a href="#">View More</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/3.jpg" alt="Slide-2">
                        <div class="cap-left slide-cap">
                            <img src="img/slide3cap.png" alt="SlideCap">
                            <a href="#">Watch Video</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/4.jpg" alt="Slide-3">
                        <div class="cap-left slide-cap">
                            <img src="img/slide4Cap.png" alt="SlideCap">
                            <a href="#">Shop Shirts Now</a>
                        </div>
                    </div>
                </div>
                <!--arrows-->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
        <!--end of carousel-->
<?php get_footer(); ?>

functions.php

<?php 

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . 'js/bootstrap.min.js', array( 'jquery' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?>
3
lozadaOmr 2 Dez. 2013 im 18:35

3 Antworten

Beste Antwort

Alles was Sie tun müssen, ist sich zu ändern

js/bootstrap.min.js

Zu

/js/bootstrap.min.js

Hinweis: Sie müssen die Seitenquelle (in Ihrem Browser) anzeigen, um zu überprüfen, ob der Pfad zur Datei bootstrap.min.js korrekt ist. Andernfalls funktioniert dies nicht.

0
stry-kai 19 Juni 2014 im 08:12

So würde ich normalerweise die Skripte bei meinen WordPress-Installationen registrieren.

<?php 
    function wpbootstrap_scripts_with_jquery()
    {
        wp_deregister_script( 'bootstrap-min-js' );
        wp_register_script( 'bootstrap-min-js', get_bloginfo('template_directory') . '/js/bootstrap.min.js', array( 'jquery' ) );
        wp_enqueue_script( 'bootstrap-min-js' );
    }
    add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

    ?>
1
Dylan Hildenbrand 2 Dez. 2013 im 19:31

Schreibe dieses wp_enqueue_script("jquery"); nach dem wp_head();

Dann sollte es funktionieren.

0
Ondrej Janacek 1 Feb. 2014 im 14:01