Завантажити 14 книг

Адаптивний дизайн: Створюємо 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>.

Крок 6: Налаштовуємо відображення Рекомендованих Публікацій

Наведений вище код буде викликати заголовок повідомлення, розділений символом “|”, а потім назву сайту. Булевий (Boolean) true відображатиме заголовок. Якщо ви встановите його у false він просто поверне значення та не відобразить його. ‘right’ визначає розташування заголовка публікації праворуч від розділювача.

Тепер ми будемо викликати динамічні публікації на головній сторінці 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: [email protected]
    Дякуюємо!Ми отримали ваш запит.
    Представник команди зв'яжеться з Вами найближчим часом.
    Зазвичай це протягом 1-2 робочих годин.