Шаблоны 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 Karma

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()."/css/bootstrap.css"); } 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.

В ней мы должны указать 2 параметра: первый будет неизменен в нашем случае, это функция 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. А на этом у меня все!