Як підключити Bootstrap до WordPress?

54

Від автора: всім привіт. У минулій статті ми розглянули підключення фреймворку до веб-сторінці, але якщо ми говоримо про те, як підключити Bootstrap до WordPress, то тут все виглядає трохи по-іншому. Давайте ж розглянемо, як зробити підключення правильно.

Отже, створимо перед собою завдання. У нас є шаблон на wordpress, до нього потрібно підключити bootstrap. Як це зробити? Здавалося б, чого тут складного, підійде той же код, який ми використовували для підключення до веб-сторінці. Але не тут то було, якщо ви спробуєте в header.php, в якому в wordpress-шаблоні виводиться секція head, додати той самий код:

Нічого не вийде, стилі фреймворку не підключаться. Чому і що нам з цим робити? По-перше, подивіться на шлях, що веде до таблиці стилів. Давайте згадаємо, що wordpress читає шлях починаючи з кореневого каталогу сайту, а не шаблон, у нас же шлях прописаний тільки щодо шаблону. Реальний же шлях, по якому знаходиться файл, виглядає так:

/wp-content/themes/назва теми/css/bootstrap.min.css

Отже, стилі не підключаються тому, що просто неправильно задано шлях. По-друге, у wordpress є спеціальні функції, які дозволяють правильним чином підключати скрипти і стилі. Я пропоную вам скористатися цією функцією і підключити файли фреймворку оптимальним чином. Для цього нам потрібно буде написати деякий код functions.php у нашому активному шаблоні.

Щоб його змінити, з’єднайтесь з сайтом по ftp і перейдіть в каталог з активною темою, знайдіть там відповідний файл. Пропоную вам зберегти його резервну копію на всякий випадок. Тепер відкрийте його за допомогою зручного вам редактора. Можна не вивчати особливо його вміст, все одно, якщо ви не знайомі з wordpress-функціями, то нічого не зрозумієте, хіба тільки із коментарів розробника.

Пройдіть в самий кінець, сюди ми і будемо додавати код, який підключить фреймворк до движка.

Оскільки ми тут не вивчаємо wordpress-функції, я просто дам вам готовий код, який відразу підключить js і css-файли фреймворка. Нижче я дозволю собі трохи пояснити цей код.

function load_bootstrap(){
wp_enqueue_script(‘bootstrap-js’, get_template_directory_uri().’/js/bootstrap.js’);
wp_enqueue_style(‘bootstrap-css’, get_template_directory_uri().’/css/bootstrap.css’);
}
add_action(‘wp_enqueue_scripts’, ‘load_bootstrap’);

Отже, нам потрібно буде написати нову функцію, назвемо її довільно, я пропоную так – load_bootstrap, щоб відразу було зрозуміло. Всередині функції прописуємо дві wordpress-функції. Перша відповідає за підключення скриптів, друга – за css-стилі. Самі функції абсолютно ідентично працюють і мають 2 обов’язкових параметра:

Назва функції. Його можна написати довільно. Знову ж таки, я пропоную назвати так, щоб було відразу все зрозуміло.

Шлях до підключеному файлу. Дуже важливо встановити його правильно, якщо ви просто пропишіть js/bootstrap.js, то нічого працювати не буде, так як я вже говорив, що wordpress шукає файли від кореня сайту, а в корені папки js просто немає, вона присутня в нашому шаблоні, куди ви заздалегідь повинні скинути файли фреймворка.

Власне, щоб правильно вказати шлях, потрібно отримати шлях до папки з активним шаблоном, а потім вже дописати сам шлях до скрипта в цьому шаблоні. Як це зробити? Тут нам допоможе функція get_template_directory_uri(). Прописуємо її і пристыковываем шлях до файлу.

Якщо вам потрібно підключити більше файлів, то просто з нового рядка заново пишемо функцію wp_enqueue_script або style, вказуємо в параметрах назву і шлях.

На цьому складання функції, яка буде підключати наші файли фреймворку, закінчено. Але якщо зараз ви захочете почати користуватися можливостями фреймворку, то ще рано. Нам необхідно дати движку цю функцію на виконання. Це як раз і робить остання строчка вищевказаного коду, яка починається з функції add_action.

У ній ми повинні вказати 2 параметра: перший буде незмінний у нашому випадку, це функція wp_enqueue_scripts. Саме з s на кінці, це важливо! Другим параметром потрібно вказати назву нашої спільної функції, в якій ми підключаємо наш js і css-файл.

Отже, ми розглянули з вами правильне підключення bootstrap до wordpress. Якщо в майбутньому вам потрібно буде підключити нові файли фреймворку, не потрібно буде писати для цього нову функцію, а всього лише додати або змінити потрібні рядки коду у вже наявної у вас функції load_bootstrap().

Завдяки тому, що ми зробили все таким чином, підключення фреймворку буде працювати при зміні доменного імені, при зміні імені шаблону і т. д. Що ж, ви можете починати використовувати фреймворк для своїх цілей, на цьому я закінчую цю статтю. Якщо ви хочете в максимально короткі терміни освоїти bootstrap, рекомендую вам пройти наш платний курс з цього фреймворку, в якому ви зможете зверстати 2 сайту, лендінгем, тобто односторінковий сайт, а також отримати хорошу теоретичну підготовку.