Bootstrap шаблони для wordpress. Як зробити підключення bootstrap до wordpress? Foundry – багатоцільова тема на WordPress

винесений з header.php, для зручнішої розробки. Наприклад, потрібно зробити слайдер на всю ширину сторінки — просто в кастомному шаблоні сторінки робите слайдер без необхідності закривати відкриті теги з фіксованою шириною.

Завантажуйте, спробуйте. Пишіть свою думку у коментарях.

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

Bootstrap – це один із видів фреймворку. Фреймворк – це платформа, яка складається з набору інструментів, які дозволяють створити структуру веб-сайту. Існує безліч різних фреймворків, але не всі можуть надати всі ті можливості, які є у Bootstrap. Це, зокрема, економія часу, адже Bootstrap дозволяє використовувати готові шаблони, а також високу швидкість роботи і узгоджений дизайн. Макети, створені з урахуванням цього фреймворку, відмінно масштабуються будь-яких пристроях з різним розміром екрана.

Щоб використовувати Bootstrap шаблони WordPress, не потрібно мати високі знання у програмуванні. Він підтримує налаштування типографіки, додавання медіафайлів, таблиць, форм, діалогових вікон, оформлення навігації та багато іншого.

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

Bootstrap шаблони WordPress – Добірка найкращих шаблонів для різних застосувань на базі найкращого фреймворку

Homey – WordPress тема для сайту бронювання

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

Bifrost – мінімалістична тема WordPress для портфоліо

Bifrost - це мінімалістична і чиста тема WordPress, яка підходить для будь-яких потреб. Вона ідеально підійде для таких напрямків діяльності, як різні агентські послуги, фріланс, фотографія, електронна комерція та багато іншого. Чудовий дизайн уособлює прагнення команди розробників надати вам ідеальний інструмент для ведення вашого бізнесу. Тема відрізняється не тільки стильним та чистим дизайном, але також і розширеною функціональністю, що дозволить вам використовувати сайт із цією темою на всі 100%. Зручний і простий редактор дасть вам можливість налаштувати будь-які нюанси сторінок на вашу думку.

Seocify – тема для SEO та Digital агенцій

Seocify ідеально підходить для оформлення сайтів SEO агентств та компаній цифрового маркетингу. Вона створена на основі просунутого редактора Elementor та Revolution Slider. Компонування всієї теми, включаючи чудовий дизайн, було спроектовано найкращим способом, щоб зробити роботу з даною темою легкою та приємною. Вона підходить для різних сайтів онлайн-бізнесу. Такі напрямки, як онлайн-маркетинг, SEO-агентство, цифровий маркетинг, веб-сайти соціальних мереж – чудовий приклад того, де цю тему можна успішно застосувати. Seocify поставляється з безліччю налаштованих сторінок, так що вам буде з чого вибирати при швидкому створенніВашого сайту.

Himmelen – шаблон особистого блогу WordPress

Himmelen – це чудовий приклад теми для блогу на WordPress з чистим та елегантним дизайном, побудований на базі Bootstrap 3. Вона справді створена з творчим підходом. З її допомогою ви зможете створити чудовий блог на будь-яку тему, будь то подорожі, приготування страв, новини, фотографії тощо.

Для всіх цих цілей у комплекті шаблону є велика кількість макетів та стилів. Зокрема, є безліч варіантів оформлення. домашньої сторінки, кілька варіантів виконання шапки, безліч варіантів дизайну меню та три варіанти його розташування (у шапці, у футері та приховане), п'ять макетів самого блогу (стандартний, вертикальний, два стовпці, компактний список та Masonry), два макети слайдера рекомендованих записів та величезне кількість різноманітних віджетів у футері. Також є спеціально оформлений блок найпопулярніших записів.

У комплекті із шаблоном безкоштовно йде дев'ять плагінів. Можна додати можливість передплати за допомогою MailChimp та соціальних кнопок.

Крім неймовірно гарного оформленнявас потішать чудові характеристики завантаження сторінок, що відіграє важливу роль не тільки для SEO, але і для сприйняття з боку ваших читачів.

Writing – мінімалістичний шаблон блогу на WP з креативними функціями

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

Тема має відмінні показники SEO завдяки чудовій структурі коду та створенню з урахуванням сучасних правил роботи пошукових систем. Це дозволить залучити до вашого блогу потрібну аудиторію.

Barcelona – шаблон журналу Вордпрес із простим та чистим оформленням

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

Нова версія шаблону дозволяє створити інтернет-магазин завдяки підтримці WooCommerce. Тепер на базі свого журналу ви також зможете створити соціальну мережу(підтримка BuddyPress) та форум (підтримка bbPress). Ще є чотири нових варіанти кнопки нумерації.

Шаблон працює на версії Bootstrap 3.4.3.

Foundry – багатоцільова тема на WordPress

Шаблон Foundry створений на базі найчистішого коду та має відмінний дизайн для створення сайтів різного напряму. Він підтримує велику кількість варіантів оформлення та макетів. У комплекті із шаблоном йде безліч корисних плагінів. До них входить преміум плагін для ручної побудови сторінок Visual Composer. Також є плагін WooCommerce, який створює базу для організації онлайн-магазину. За допомогою Contact Form 7 ви зможете створити чудові контактні форми.

Плагін Tickera є відмінним рішенням для бронювання та продажу квитків на різноманітні заходи (концерти, конференції, форуми, симпозіуми тощо). Для пошукової оптимізації доступний чудовий плагін Yoast. Він працює як помічник, який підказує вам у реальному часі, що потрібно відредагувати у статті, щоб вона була кращою з точки зору SEO.

Основною метою цього шаблону є увага до деталей. Тема добре працює на будь-яких браузерах, і з виходом нової версіїстала готова до перекладу будь-якою мовою світу. Завдяки чуйності Foundry ваш сайт відмінно виглядатиме на будь-яких пристроях. Шаблон відповідає усім вимогам стандартів WordPress.

Profi – професійний шаблон WordPress для бізнесу

Шаблон Profi спеціально підійде для застосування в бізнес-цілях, але це не означає, що він призначений виключно для великого бізнесу. Його можна використовувати для агентства, невеликої та середньої компанії, великої корпорації та навіть для створення особистого портфоліо. Підтримується функція блогу. Visual Composer (преміум плагін, який йде в комплекті) допоможе вам вручну створити макет кожної зі сторінок - все, що вам потрібно, це вибрати і розмістити в потрібних місцях компоненти, що сподобалися. У панелі керування можна вибрати та використовувати різні кольори для будь-яких елементів сайту.

Створюючи сторінки, можна використовувати ефект паралаксу для заднього фонуі приголомшливий слайдер. Також для покращення сприйняття користувачем доступні плавні анімації CSS3 від TweenMax.

Плагін Contact Form 7 дозволяє створювати контактні форми з великою кількістю полів. У вас не виникне проблем із перекладом сайту завдяки підтримці плагіна WPML.

Шаблон має код, що самодокументується, і високу швидкість завантаження. При його розробці були враховані найкращі методики SEO-оптимізації, тому він дозволить серйозно підняти свої позиції в пошуковій видачі.

Selfie – чуйний шаблон WordPress для різноманітних завдань

Бізнес-шаблон Selfie створений для застосування з різною метою: для компаній, власників магазинів, стартапів, художників, блогерів та інших професіоналів своєї справи. За допомогою будівельника сторінок Visual Composer ви зможете вручну створити практично будь-який сайт з унікальним дизайном та високою чуйністю. Можна зробити все набагато простіше, скориставшись одним із величезної кількості готових макетів(Більше 50 варіантів оформлення домашньої сторінки). А щоб заощадити ще більше часу, передбачено встановлення теми з демо-контентом в один клік.

У комплекті із шаблоном йде кілька плагінів, використовуючи які ви зможете покращити та прикрасити свій сайт. Зокрема, плагін WooCommerce дозволить вам створити власний інтернет-магазин. А Slider Revolution або LayerSlider нагоді для додавання слайдера. За допомогою плагіна Rankie ви зможете стежити за своїми показниками пошукової видачі та кожного ключового слова. Окрім надання статистики, він дозволяє створити список цінних ключових слів, які ви зможете використати надалі. Варто відзначити кілька пакетів векторних та плоских іконок, які також йдуть у комплекті.

Mentor – це чудова тема, яка підійде для менторів, які надають послуги з особистого розвитку. Нею також можуть скористатися тренери, фізіотерапевти та інші професіонали, яким потрібен особистий сайт для надання та просування своїх послуг. Чистий та сучасний дизайн націлений на звернення відвідувачів до клієнтів. У цій темі є всі графічні елементи, необхідні саме для цього: календарі (для запису), графік особистісного зростання і елементи, що закликають до дії. У шаблоні всі елементи розташовані грамотно: спочатку текст, що приваблює, потім розділи послуг, якась чіпляюча цитата, розділ «Про мене», форма підписки і т.д. Також можна додати розділ із відгуками від задоволених клієнтів, який можна назвати так, як ви захочете (наприклад, успішні історії), а також таблицю з варіантами надання послуг.

Для налаштування сайту ви можете використовувати просто величезну кількість кольорів. Це дозволить зробити його унікальним. Доступно безліч шрифтів Google, з якими можна поекспериментувати. Підтримуються гнучкі шорткоди та контактні форми (плагін Contact Form 7).

FilmMaker – це творча тема, яка підійде для будь-якої креативної агенції, команди чи професіонала для створення сайту кіностудії, студії виробництва фільмів або відеороликів, відеоблогу тощо. Є чотири прекрасні готові оформлення головної сторінки, а також кілька додаткових сторінок: сторінка докладного описувідео (фільма/ролика), сторінка режисера, команди, а також галерея, історія та контактні дані (з підтримкою карти Google, іконками та маршрутом проїзду).

Доступна функція блогу. Шаблон має відмінний дизайн, на базі якого ви зможете створити надійне рішення для відеосайту та при цьому не залежати від великих сервісів типу YouTube. Зі своїм особистим сайтом ви зможете самі себе просувати.

Для спрощення створення сайту доступний плагін Visual Composer, використовуючи який ви зможете без проблем побудувати вручну свій сайт, навіть якщо ви не програміст. А всередині панелі адміністратора ви вже зможете все налаштувати так, як вам заманеться, а саме колір тексту, розмір та шрифт букв, стиль оформлення шапки сайту та всіх сторінок.

MailChimp дозволить легко організувати електронну розсилкуяка допоможе вам у просуванні своєї студії. З перекладом сайту також не виникне проблем, адже в комплекті із шаблоном йдуть файли перекладу.

Якщо вам є що додати, або ви так і не змогли знайти відповідний шаблон, напишіть у коментарях свої вимоги та побажання, і ми допоможемо вам зробити вибір.

Олександр – засновник проекту сайт «Веб-лабораторія успіху», створеного на підтримку початківцям та продовжуючим інтернет-підприємцям. Переконаний трудоголік, за плечима якого професійний досвід керівництва редакцією інтернет-журналу, створення та управління власним інтернет-магазином. Основний рід занять: просування бізнесів (в т.ч. інтернет-магазинів) через Facebook та Google Adwords. Основне захоплення: монетизація сайтів через інструменти партнерського маркетингу та Google Adsense. Особисті підтверджені рекорди: 3 мільйони відвідувачів блогу на місяць.

Bootstrap – потужний та елегантний, інтуїтивно зрозумілий фронт-енд фреймворк, розроблений командою Twitter. Це open-source CSS та JavaScript середовище розробки сучасних інтернетпроектів. Відносно молода платформа веб-розробки, що безумовно заслуговує на вивчення, пропонує безліч корисних речей: стилі компонентів інтерфейсу (заголовки, вкладки, навігаційні панелі…) і HTML-елементів (кнопки, форми, шрифти…), адаптивні queries, JS-плагіни тощо. буд.

Демо | завантажити

18. Sonic Creative Portfolio

Sonic – безкоштовний адаптивний шаблону Bootstrap версії 3.1.1. зі слайдером FlexSlider на головній сторінці. Шаблон заснований на та підійде для створення креативного портфоліо.

19. Powerful

Powerful – адаптивний шаблон на Bootstrap, який використовує як основні елементи дизайну. Ключові особливостішаблон: гнучкий макет, чистий дизайн, слайдер на головній сторінці, фільтр за категоріями для портфоліо.

Демо | завантажити

20. 403 Карма

403 Karma – безкоштовний HTML5 шаблон на основі Bootstrap. Завдяки адаптивній верстці, плоскому дизайну та ефектному паралакс-сколінгу шаблон чудово виглядає на мобільних пристроївах.

Демо | завантажити

21. Tonic Pro

Створений на основі Twitter Bootstrap, шаблон Tonic Pro поставляється зі слайдером, кастомним візуальним CSS-редактором (що спрощує редагування коду), font awesome іконками та всім тим, що допомагає сайту виділитися серед інших. Базовий набір з усіх корисностей надається безкоштовно, але ви можете придбати преміум-версію шаблону зі значно більшим функціоналом.

Демо | завантажити

22. Free Bootstrap 3.0 HTML Template

Вам потрібно знайти ефектний шаблон для персональної Web-сторінки, онлайн-портфоліо або ресторанний шаблон, що підходить для бару, піцерії, кафе чи бістро? Тоді краще убезпечити себе від проблем із кастомізацією та бути впевненим у можливостях шаблону, на випадок виникнення необхідності розширення функціоналу. Free Bootstrap 3.0 HTML Template - цілком підходяще для цього рішення. Хоча він створений для ознайомлювальних цілей, ви завжди можете придбати оригінальний шаблон (з такою ж структурою) для створення свого startup-проекту.

Демо | завантажити

23. Tulip

Tulip – креативний шаблон з адаптивною версткою, що підходить для створення сайту юридичної фірми, адвокатської контори, консалтингової компанії та низки комерційних проектів, що потребують сучасного . Вибираючи Tulip, ви отримуєте легальний шаблон, який можна використовувати безкоштовно для своїх комерційних цілей. User-Frendly дизайн цього шаблону (дружній для користувачів десктопів та мобільних пристроїв) завжди сприятиме успішності майбутнього веб-проекту.

Демо | завантажити

24. Andia – Free HTML Bootstrap Theme

Andia – безкоштовна адаптивна HTML-тема на Bootstrap. У складі: 5 прикладів повністю адаптивних сторінок, сторінка портфоліо, послуги, About, форма контактів. Andia ідеально підійде для креативного агентства з портфоліо, особистого або під невеликий бізнес-проект. Особливості та функціонал: адаптивний макет, адаптивний слайдер зображень, можливість демонструвати ваші фотографії з сервісу Flickr завдяки інтеграції з Flicr Photostream, можливість створювати іконки на базі шрифту Font Awesome 4.0, стрічка твіттер (twitter feed) та багато іншого.

Демо | завантажити

25. Dellow

Dellow – мінімалістична адаптивна тема з безліччю преміум-опцій, які ви отримуєте безкоштовно. Ключові особливості: слайдер з ефектом паралаксу в шапці, нумерована посторінкова навігація, адаптивний слайдер, кастомний хедер & футер, 4 макети сторінок, кастомні віджети & Time Display. Потужна панель налаштувань значно розширює можливості редагування та спрощує процес модифікації теми.

Демо | завантажити

28. Creation – Flat Industrial Bootstrap Responsive template

Шаблон Creation призначений для створення веб-сайту індустріальної компанії. Може широко використовуватися для інтернет представництв різних компаній-виробників, від невеликих організацій до великих виробничих підприємств та фабрик. У цьому шаблоні ретельно підібрано колірну схему, добре організовано розташування елементів, продумано стиль і структуру макету сітки. Ключові особливості шаблону: HTML5, адаптивність за ліцензією Creative Commons Attribution 3.0 передбачається використання без обмежень. У комплект шаблону включено вихідні файли: HTML файли (.html), таблиці стилів (.css), зображень (.jpg/png/gif), JQuery плагінів(.js), файли вихідних записів Photoshop (.psd), шрифтів (.ttf).

Демо | завантажити

29. My Restaurant

My Restaurant – оригінальний та стильний bootstrap шаблон із фоновим jQuery слайдером, фіксованим меню на jQuery, що змінює колір при наведенні. - jQuery галерея, керувати якою можна вказівником або колесом миші і утворює красивий лайтбокс з ефектом затемнення основного фону.

Демо | завантажити

30. Corlate – Free Responsive Business HTML Template

Corlate – безкоштовний адаптивний HTML бізнес-шаблон із вбудованими шрифтами Font Awesome і css3 анімації. Також оснащений своїм власним бутстраповським слайдером-каруселлю, шорткодами, що дозволяють легко створювати вкладки, акордеон-слайдери і навіть галереї. Це повністю адаптивний, легкий та супер-швидкий шаблон. Добре підійде сайту невеликий бізнес компанії, стратап-проекту, або якщо вам як талановитій особистості потрібен сайт для демонстрації своєї творчості.

, Buddypress та BBpress. Bootstrap підключено лише до файлів CSS. Тема розроблена на основі 2-х колонкового макета і може чудово підійти для блогу.

Демо | завантажити

33. Temptation

Temptation – безкоштовна темна WordPress тема, побудована з використанням Bootstrap 3. Це підготовлена ​​до Retina та повністю адаптивна тема, що використовує сітковий макет, має: вітрину Showcase, Nivo слайдер та багато іншого. За поєднанням темних кольорів це, мабуть, одна з найкращих тем із усього репозиторію WordPress.

Демо | завантажити

34. RICHY

RICHY – адаптивна багатоцільова HTML5/CSS3 Bootstrap тема. Має чистий акуратний дизайн та легкість у кастомізації.

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

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

< link href = "css/bootstrap.min.css" rel = "stylesheet" >

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

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

/ 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().) add_action("wp_enqueue_scripts", "load_bootstrap");

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.

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

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

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

Фреймворк Bootstrap 4. Швидкий старт

Вивчіть основи Bootstrap 4 на практичному прикладі з верстки блогу з нуля

Чергова стаття з рубрики «підключення чогось до чогось» На цей раз розглянемо підключення Bootstrap до Wordpress. Якщо ви цікавитеся цим питанням, то, напевно, розумієте, що позначають ці слова. Bootstrap - це css-фреймворк, що в рази спрощує нам верстку веб-сторінок, а wordpress - сайтовий движок, що спрощує управління сайтами. Огляд фреймворку ви можете почитати.

Як завантажити Bootstrap?

Спочатку скачайте собі фреймворк. Для цього перейдіть на офіційний сайт бутстрапу - getbootstrap.com. Він на англійськоюале нічого, не лякайтеся цьому. Перейдіть на вкладку Getting Started, там вам буде запропоновано 3 варіанти скачування фреймворку. Швидше за все, вас влаштувати поки що перший варіант.

Отже, після завантаження розпакуйте архів, там у вас має бути три папки. Це і є вміст фреймворку:

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

Встановлюємо Bootstrap на Wordpress

По-перше, всі три папки потрібно скопіювати у ваш активний wordpress-шаблон. Для цього з'єднайтеся з сервером через ftp, ssh або панель керування на хостингу, та скиньте ці папки.

Далі у кореневій папці активного шаблону знайдіть файл functions.php. Саме його нам доведеться редагувати, щоб правильно підключити файли фреймворку. Власне, щоб усі компоненти бутстрапу працювали, необхідно підключити bootstrap.css та bootstrap.js або мініфіковані копії цих файлів.

Для цього ми створимо нову функцію, яка підключатиме скрипт та стильовий файл. Ось код функції:

function add_bootstrap()(
wp_enqueue_script('my_bootstrap_js', get_template_directory_uri().'/js/bootstrap.js');
wp_enqueue_style('my_bootstrap_css', get_template_directory_uri().'/css/bootstrap.css');
}

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

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

add_action('wp_enqueue_scripts', 'add_bootstrap');

Тут першим параметром виступає по суті сам хук, до якого ми додаємо нашу функцію. Другий параметр – ім'я нашої функції. Вставте цей код, зберігайте зміни у файлі. Установка bootstrap на wordpress успішно виконана, тепер можна використовувати фреймворк.

Якщо ви мало що зрозуміли зі статті, це тільки тому, що ви не знайомі з функціями Wordpress. Просто копіюйте код і читайте мої роз'яснення, і навіть без знань ви легко підключите Bootstrap. А на цьому маю все!