Pracuję nad motywem WordPress przy użyciu ramy Bootstrap do stylu mojej strony. Stworzyłem makietę w standardowym HTML najpierw, aby upewnić się, że wszystko wyglądało, jak chciałem:

Kod prototypu:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mac's Breakfast Anytime</title>
<link rel="stylesheet"
      type="text/css"
      href="http://localhost/prototype/wwwroot/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet"
      type="text/css"
      href="http://localhost/prototype/wwwroot/css/site.css">



</head>
<body>
        <div class="container body-content">
!!HEADER!!

!!FOOTER!!
        </div>
        <script src="http://localhost/prototype/wwwroot/lib/jquery/dist/jquery.js"></script>
        <script src="http://localhost/prototype/wwwroot/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="http://localhost/prototype/wwwroot/js/site.js"></script>
</body>
</html>

Jednak gdy przesunąłem kod do mojego tematu, Bootstrap jest ignorowany.

Kod motywu: (index.php)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php bloginfo('name')?> <?php wp_title()?></title>

<link rel="stylesheet"
      type="text/css"
      href="<?php bloginfo('template_url'); ?>/wwwroot/lib/bootstrap/dist/css/bootstrap.css">

<link rel="stylesheet"
      type="text/css"
      href="<?php bloginfo('stylesheet_url'); ?>">



<!-- Facebook Open Graph -->
<meta property="og:site_name" content="<?php bloginfo('name');?>"/>
<meta property="og:title" content="<?php wp_title()?>"/>
<meta property="og:url" content="<?php esc_url(the_permalink()); ?>"/>

<!-- WordPress Scripts & Styles -->
<?php wp_head()?>
</head>
<body>
<div class="container body-content">
<?php get_header(); ?>

<?php get_footer(); ?>
</div>
       <script src="<?php bloginfo('template_url'); ?>/wwwroot/lib/jquery/dist/jquery.js"></script>
        <script src="
<?php bloginfo('template_url'); ?>/wwwroot/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="
<?php bloginfo('template_url'); ?>/wwwroot/js/site.js"></script>
</body>
</html>

Katalog wwwroot zawierający pliki zasobów Bootstrap znajduje się w korzeniu zarówno tematu, jak i prototypu.

Zarówno katalogi motywów, jak i prototypowych są przechowywane w katalogu Wamp Wamp i uzyskaj dostęp przez localhost .

ROZWIĄZANE

Sprawdzono na 404 błędy w Firefox Developer Narzędzia i odpowiednio zmienione ścieżki.

0
OPM eStudio 4 czerwiec 2018, 01:40

3 odpowiedzi

Najlepsza odpowiedź

Użyj narzędzi deweloperskich w Firefox lub IE Aby sprawdzić adresy URL do arkusza stylów i sprawdzić, czy są poprawne lub są one 404-ing. To powie, gdzie są one wywoływane, jeśli trzeba użyć template_url lub stylesheet_url itp.

Ponadto możesz użyć darmowego CDN dla Bootstrap CSS: patrz https://www.bootstrapcdn.com/

0
BlueDogRanch 3 czerwiec 2018, 23:45

W kodzie motywu: (index.php) masz bezpośrednie łącze CSS w nagłówku i JS w Footce, to nie jest sposób WordPress Way. Jeśli chcesz dodać CSS i JS na swoim WordPress, skorzystaj z poniższego kodu dla swojego odniesienia.

/**
 * Enqueue scripts and styles.
 */
function enqueue_scripts_and_styles() {

    // Theme Grid.
    wp_enqueue_style( 'custom-grid', get_template_directory_uri() . '/css/grid-min.css');

    // Google fonts montserrat
    wp_enqueue_style('google-montserrat', '//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900','', '20171222');
    // Fontastic fonts
    wp_enqueue_style('icon-fontastic', '//file.myfontastic.com/TjMbeqXLGBrdGfUQhddhPb/icons.css','', '20171222');

    // Fancybox js
    wp_enqueue_script( 'custom-fancybox-js', get_theme_file_uri( '/js/jquery.fancybox.js' ), array( 'jquery' ), '1.0', true );

}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_and_styles' );

Uwaga: 1) Ten kod jest przeznaczony wyłącznie do odniesienia, więc musisz dodać ścieżkę CSS i JS.

2) Jeśli stworzyłeś motyw dziecka, proszę o get_stylesheet_directory_uri () zamiast Get_Template_directory_uri ().

3) Dodano również bibliotekę Bootstrap w katalogu głównym WordPress, więc dodaj bibliotekę Bootstrap w folderze motywu.

0
Jagir bahesh 4 czerwiec 2018, 05:07

VIMP: Zawsze powinieneś zawsze zakazać skryptów i arkuszy stylów. Nie używaj ich bezpośrednio w kodzie.

Możesz enqueue bootstrap, używając poniżej podanego kodu w funkcji Zaleca się jednak tworzenie motywu dziecka.

function my_bootstrap_resources() {
    $style = 'bootstrap';
    $path_to_bootstrap = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
    if( ( ! wp_style_is( $style, 'queue' ) ) && ( ! wp_style_is( $style, 'done' ) ) ) {
        //queue up your bootstrap
        wp_enqueue_style( $style, $path_to_bootstrap );
    }
}
add_action('wp_enqueue_scripts', 'my_bootstrap_resources');

Należy korzystać z twardego kodowania, ponieważ, jeśli widzisz w powyższym przykładzie, najpierw sprawdzamy, czy Bootstrap jest już zakopany, aby nie był to wielokrotnie uwzględnione.

0
Sushant Tayade 4 czerwiec 2018, 05:21