Лучший способ подключения Bootstrap в WordPress

Question

Лучший способ подключения Bootstrap в WordPress

12 окт. 2017 г., 13:02:23

Просмотры: 48.4K

Голосов: 10

Я пришел из среды разработки Laravel, где использование Bootstrap относительно простое. Однако у меня есть проект на WordPress, где я использую Bootstrap для навигационных панелей. Проблема в том, что они нарушают отображение заголовка на странице. Я использую тему Be Theme. Вот мой код:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="tabbable">
<div class="panel panel-default">
<div class="panel-body">
    <ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black; "></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="link" role="tabpanel" style="; color: black;">  


    <form action="" method="get" name="" style="color: black;" class="form-inline">
    <br>

    <br>


<input type="submit" name="submit" class="btn btn-default" style="background-color: red;">
</form>

<table>

</table>




    </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>

   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
</div>

</div>
</div>
</div>
</div>
</body>
</html>

Я создал шаблон страницы, используя этот код, благодаря помощи, полученной в предыдущем вопросе.

Как использовать Bootstrap, не нарушая работу тем WordPress и их заголовков?

РЕДАКТИРОВАНИЕ: вот как выглядит мой functions.php

add_action( 'wp_enqueue_scripts', 'mfnch_enqueue_styles', 101 );
function mfnch_enqueue_styles() {

    // Подключаем родительскую таблицу стилей
//  wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );     //это не нужно, если файл пустой

    // Подключаем родительскую rtl таблицу стилей
    if ( is_rtl() ) {
        wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' );
    }

    // Подключаем дочернюю таблицу стилей
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style.css' );

}

Как мне отредактировать эту функцию, чтобы включить Bootstrap? Я пробовал самостоятельно, но он не отображается.

Заранее спасибо!

R1ddler

137

темы twitter bootstrap

Комментарии

Вам нужно правильно подключать скрипты и стили в WordPress. Я бы рекомендовал создать пользовательскую/дочернюю тему для ваших целей. Это может вам помочь

custom_scripts() { wp_enqueue_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Piyush Rawat

12 окт. 2017 г. 13:07:23

Все ответы на вопрос

Комментарии

Нужно ли добавлять это в functions.php основной темы или дочерней темы?

R1ddler

12 окт. 2017 г. 13:10:51

Вы можете добавить в дочернюю тему, если она у вас есть.

Punitkumar Patel

12 окт. 2017 г. 13:12:00

Добавил мою функцию стилей в functions.php в первом посте (без Bootstrap)

R1ddler

12 окт. 2017 г. 13:16:37

Я понял, что именно этот скрипт портит мой заголовок <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

R1ddler

12 окт. 2017 г. 13:37:31

Вам следует добавить // перед ссылкой.

Punitkumar Patel

12 окт. 2017 г. 13:39:58

Показать остальные 5 комментариев

Как насчёт экономии трафика и возможного увеличения скорости загрузки страницы с помощью MaxCDN и NetDNA. Добавьте эти две функции в ваш файл functions.php

function pwwp_enqueue_my_scripts() {
    // jQuery указан как зависимость для bootstrap-js - он будет загружен WordPress перед скриптами Bootstrap
    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // весь JavaScript Bootstrap
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');

function pwwp_enqueue_my_styles() {
    wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

    // это добавит таблицу стилей из стандартного расположения темы, если ваша тема ещё не делает этого
    //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');

Документация источника

Alexius The Coder

31

1 янв. 2021 г. 21:55:29

Punitkumar Patel 328 · Accepted Answer · 2017-10-12T13:07:04Z

Вы можете добавить Bootstrap в WordPress с помощью следующей функции в файле functions.php

Вы можете изменить URL по необходимости, если используете CDN.

<?php 
/**
 * Подключение скриптов и стилей
 */
function your_theme_enqueue_scripts() {
    // все стили
    wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 );
    wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/css/style.css', array(), 20141119 );
    // все скрипты
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
    wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );