Адаптивный дизайн: Создаем сайт на WordPress используя Bootstrap

Adaptive Web Design
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Что такое адаптивный дизайн?

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

Веб-разработчики, маркетологи и дизайнеры со всего мира знают, что потенциал сайта определяется его адаптивностью. Если сайт адаптивный, можно легко осуществлять навигацию и просмотр контента на любых устройствах, от мобильных до ПК.

Адаптивный веб-дизайн — это подход к веб-дизайну, в котором элементы сайта регулируются в соответствии с размерами экрана и браузера для увеличения читабельности, обеспечения user experience и уменьшения времени загрузки страниц.

Еще в ноябре 2013 года Мэтт Каттс, глава команды Google по борьбе со спамом, выпустил видео, в котором объясняет, что адаптивность дизайна не повлияет на выдачу поисковой системы. Кроме того, компания Google опубликовала свои рекомендации для веб-сайтов на мобильных устройствах, в которых содержится подробная информация о том, как Google воспринимает адаптивные веб-сайты.

Так как все больше смартфонов, планшетов и гаджетов становятся доступными, меньше людей пользуются ПК. Это означает, что смартфоны используют для поиска любого контента: от новостей до поиска ближайших магазинов, от запросов на авиабилеты и актуальных фильмов. Этот тренд становится влиятельной бизнес возможностью для онлайн-сообщества.

WordPress и адаптивный веб-дизайн

WordPress — это самая популярная CMS система, которой пользуются 27% сайтов во всем мире. С появлением адаптивного веба известные разработчики начали приспосабливаться к адаптивному дизайну и ввели простые для понимания структуры, такие как Redux Framework, Carrington Core, Bootstrap, которые могут использоваться для создания адаптивной темы или шаблона WordPress с нуля.

Что такое Bootstrap?

Bootstrap — это набор инструментов, который помогает в разработке сложных веб-приложений. Его создали разработчики Twitter и Bootstrap был доступен для общественности с открытым исходным кодом.

Bootstrap помогает создавать шаблон веб-сайтов и веб-страниц проще и быстрее. Он подходит для людей с любым уровнем опыта, для устройств любых форматов и проектов любого масштаба, потому что его писали на HTML, CSS, Java Script и Less.

 

[Читайте так-же: WordPress Дизайн тренды 2017]

Вот следующие 8 шагов для создания адаптивного сайта WordPress на основе Bootstrap 3:

Чтобы понять все изложенное, вам необходимо иметь базовые знания о таких вещах:

  • Как работает FTP и HTML
  • Как редактировать, создавать и загружать PHP-файлы на вашем сервере
  • Как создавать навигацию с помощью панели управления WordPress

Шаг 1: Распаковываем Bootstrap

  1. Прежде всего, установите WordPress на свой домен.
  2. Затем загрузите и распакуйте Bootstrap с http://getbootstrap.com/
  3. После этого подключитесь к вашему хостинг-сервера с помощью FTP-клиента FileZilla.
  4. Перейдите к wp-content>themes.
  5. Создайте новую папку в каталоге тем под названием BootStheme, и загрузите содержание распакованного Bootstrap в эту папку.
  6. Почти все установки WordPress содержат следующие файлы:
  • Index.php
  • Style.css
  • Header.php
  • Footer.php

Теперь создайте 4 пустые файлы, используя имя файлов, приведенное выше.

папки

 

Шаг 2: Настраиваем Bootstrap

Откройте style.css и вставьте следующий код.

Это основные комментарии, содержащие описание и детали темы. По желанию вы можете разместить свои собственные комментарии.

Шаг 3: Копируем код

В этом туториале мы не будем использовать все файлы CSS и JS, которые есть в бутстрап пакете, а только копировать код bootstrap.min.css в style.css. Ваш файл style.css должен выглядеть так.

файл bootstrap

Шаг 4: Настраиваем шаблон HTML

Для дальнейшей работы нам нужно иметь базовый шаблон HTML. Вы можете использовать эти бесплатные темы. Или вот этот код:

WordPress имеет встроенные функции get_header () и get_footer (), которые по умолчанию вызывают файлы header.php и footer.php соответственно. Мы будем вырезать HTML-код сверху первого контейнера div и вставлять его в наш файл header.php, после чего файл должен быть таким же, как изображение, приведенное ниже.

header-php

Файл footer.php содержит другую части кода:

footer-php

Если мы активируем эту тему и загрузим ее на нашем сайте, мы еще не увидим ничего, поскольку index.php пустой. Чтобы загрузить хедер и футер, мы будем использовать встроенную функцию WordPress для вызова этих элементов путем имплементации следующего кода в index.php:

Теперь элементы хедера и футера будут загружены на наш веб-сайт, но мы получим основную страницу без стиля.

страница-без-стилев

Шаг 5: Настраиваем Header и Footer

В файле header.php мы будем импортировать таблицу стилей Bootstrap, используя функцию WordPress echo get_stylesheet_uri() (читать далее в WordPress Codex), это импортирует стиль style.css на наш сайт, и мы увидим верхнюю панель меню.

Bootstrap wordpress theme

Функции JavaScript на нашей странице все равно не работают, и мы не видим ни одного выпадающего меню. Чтобы это изменить, надо импортировать наши js-файлы непосредственно импортируя файл с URL-адресом в footer.php. Вставьте следующий код перед закрывающим тегом body.

WordPress известен своими настройками и плагинами. Чтобы сообщить WordPress, где разместить хуки плагинов, мы будем вставлять <? Php wp_head (); ?> И <? Php wp_footer (); ?> В файлах header.php и footer.php. Кроме этого для установления динамических заголовков сайта мы собираемся использовать wp_title (); функция в файле header.php между тегами <title>.

Приведенный выше код будет вызывать заголовок сообщения, разделенный символом «|», а затем название сайта. Булевой тип (Boolean) true отображать заголовок. Если вы установите его в false он просто вернет значения и не отразит его. «Right» определяет расположение заголовка публикации справа от разделителя.

Шаг 6: Настраиваем отображение Рекомендованных Публикаций

Теперь мы будем вызывать динамические публикации на главной странице index.php, которые отображаются сверху, так же как и с рекомендованными публикациями, которые мы видим на многих сайтах с поддержкой WordPress.

Напишите следующий код в ваш index.php:

Мы будем использовать петлю while и установим количество сообщений — одно, используя post_per_page. Этот фрагмент кода будет отображать только последнюю публикацию блога в верхней части страницы, а после завершения цикла будет сброшено query_posts.

Класс jumbotron определяется в нашем файле bootstrap.min.css. Мы используем его для стилизации наших популярных публикаций, используя теги <h2> и the_permalink (). Гиперссылка создается в заголовке публикации и the_permalink (); функция ссылается на URL-адрес всей публикации. Чтобы показать отрывок из публикации, мы можем использовать другую встроенную функцию WordPress, какова the_excerpt ();

Шаг 7: Составляем список Категорий

Далее мы перечисляем наши категории слева от домашней страницы. Мы сделаем это, создав несколько экземпляров стиля div с классами бутстрап и функцией WordPress wp_list_categories();.

Вставьте следующий код:

Это позволит перечислить категории под названием с наведением курсора.

Шаг 8: Настраиваем отображение последних записей: и Авторов

Наконец мы покажем последние публикации блога на главной странице. Мы собираемся запустить еще один тег div, и под этим div мы используем аналогичную петлю while, который мы использовали в популярных публикациях, но мы не будем ограничивать его с использованием query_posts();.

WordPress выполняет функцию the_author (); и находит юзернейм автора публикации. Мы можем использовать это для динамического отображения имени автора в каждой публикации.

автор

После успешного завершения процедур, вы увидите страницу с аналогичным контентом.

О авторе:

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

BLOG & NEWS
Задать вопрос

Оставьте вопрос или комментарий к статье:

Ваш email не будет опубликован.

  • ББудем на связи

    Свяжитесь с нами

    Спасибо!Мы получили ваш запрос.
    Представитель команды свяжется с вами в ближайшее время.
    Обычно это занимает 1-2 рабочих часа.