Отже, створимо перед собою завдання. У нас є шаблон на wordpress, до нього потрібно підключити bootstrap. Як це зробити? Здавалося б, чого тут складного, підійде той же код, який ми використовували для підключення до веб-сторінці. Але не тут то було, якщо ви спробуєте в header.php, в якому в wordpress-шаблоні виводиться секція head, додати той самий код:
Нічого не вийде, стилі фреймворка НЕ підключаться. Чому і що нам з цим робити? По-перше, подивіться на шлях, що веде до таблиці стилів. Давайте згадаємо, що wordpress Новомосковскет шлях починаючи з кореневої папки сайту, а не шаблону, у нас же шлях прописаний тільки щодо шаблону. Реальний же шлях, по якому знаходиться файл, виглядає так:
Фреймворк Bootstrap - верстаємо адаптивно, просто, швидко!
Освойте найбільш простий, швидкий і гнучкий спосіб створювати адаптивні веб-сайти
Отже, стилі не підключаються тому, що просто неправильно заданий шлях. По-друге, в wordpress є спеціальні функції, які дозволяють правильним чином підключати скрипти і стилі. Я пропоную вам як раз скористатися цією функцією і підключити файли фреймворку оптимальним чином. Для цього нам потрібно буде написати деякий код в functions.php в нашому активному шаблоні.
Пройдіть в самий кінець, сюди ми і будемо додавати код, який підключить фреймворк до движку.
Оскільки ми тут не вивчаємо wordpress-функції, я просто дам вам готовий код, який відразу підключить js і css-файли фреймворку. Нижче я дозволю собі трохи пояснити цей код.
Отже, нам потрібно буде написати нову функцію, назвемо її довільно, я пропоную так - 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 сайта, Лендінгем, тобто утворять єдиний сайт, а також отримати хорошу теоретичну підготовку.
Фреймворк Bootstrap - верстаємо адаптивно, просто, швидко!
Освойте найбільш простий, швидкий і гнучкий спосіб створювати адаптивні веб-сайти
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі