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

Adaptive Web Design

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

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

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

Адаптивный веб-дизайн — это подход к веб-дизайну, в котором элементы сайта регулируются в соответствии с размерами экрана и браузера для увеличения читабельности, обеспечения 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 не будет опубликован.

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

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

    • ул.Водогонная 2, офис 321, 79017 Львов, Украина
    • email: info@lemarbet.com
    Спасибо!Мы получили ваш запрос.
    Представитель команды свяжется с вами в ближайшее время.
    Обычно это занимает 1-2 рабочих часа.