Бутстрап в теме Wordpress не отображается в браузере - PullRequest
Новая
       30

Бутстрап в теме Wordpress не отображается в браузере

0 голосов
/ 04 июня 2018

Я работаю над темой WordPress, используя загрузочный фреймворк для стилизации моей страницы.Сначала я создал макет в стандартном HTML, чтобы убедиться, что все выглядит так, как я хотел:

Код прототипа: 

<!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>

Однако, когда я перемещаю код в мою тему, Bootstrap игнорируется.

Код темы: (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>

Каталог wwwroot , содержащий файлы ресурсов Bootstrap, находится в корне как темы, так и прототипа.

как тема, так и прототипкаталоги хранятся в каталоге www WAMP и доступны через Localhost .

решено

Проверено на 404 ошибки в инструментах разработчика Firefox и внесены соответствующие исправления.

Ответы [ 3 ]

0 голосов
/ 04 июня 2018

В Theme Code: (index.php) у вас есть прямая ссылка CSS в верхнем колонтитуле и JS в нижнем колонтитуле, это не WordPress.если вы хотите добавить CSS и js в свой WordPress, используйте приведенный ниже код для справки. 

/**
 * 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' );

Примечание: 1) Этот код предназначен только для справки, поэтому вам необходимо добавить путь CSS и JS.

2) если вы создали дочернюю тему, пожалуйста, используйте get_stylesheet_directory_uri () вместо get_template_directory_uri ().

3) Кроме того, вы добавили библиотеку начальной загрузки в корневой каталог WordPress, чтобыПожалуйста, добавьте библиотеку начальной загрузки в папку вашей темы.

0 голосов
/ 04 июня 2018

VIMP: Вы всегда должны ставить в очередь свои скрипты и таблицы стилей.Не используйте их непосредственно в своем коде.

Вы можете поставить загрузчик в очередь, используя приведенный ниже код в файле functions.php вашей родительской темы или дочерней темы.Тем не менее, рекомендуется создание дочерней темы. 

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');

Предпочтительнее использовать постановку в очередь перед жестким кодированием, потому что, если вы видите в приведенном выше примере, мы сначала проверяем, уже загружен ли начальный загрузчик, чтобы он не был включен несколько разраз.

0 голосов
/ 04 июня 2018

Используйте инструменты разработчика в Firefox или Chrome или Safari или IE , чтобы проверить URL-адреса таблицы стилей и посмотреть, если ониверны или если они 404-й.Это скажет вам, откуда они вызываются, если вам нужно использовать template_url или stylesheet_url и т. Д.

Также вы можете использовать бесплатный CDN для начальной загрузки CSS: см. https://www.bootstrapcdn.com/

...