Що таке адаптивний дизайн?
Завдяки різноманітності пристроїв із різними розширеннями, розмірами екрана та операційними системами, необхідність адаптивних веб-сайтів та програм стала надзвичайно важливою.
Веб-розробники, маркетологи та дизайнери з усього світу знають, що потенціал сайту визначається його адаптивністю. Якщо сайт адаптавний, можна легко здійснювати навігацію та перегляд контенту на будь-яких пристроях, від мобільних до ПК.
Адаптивний веб-дизайн — це підхід до веб-дизайну, в якому елементи веб-сайту регулюються відповідно до розмірів екрана та браузера для збільшення читабельності, забезпечення 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.
- Крок 1: Розпаковуємо Bootstrap
- Крок 2: Налаштовуємо Bootstrap
- Крок 3: Копіюємо код
- Крок 4: Налаштовуємо шаблон HTML
- Крок 5: Налаштовуємо Header та Footer
- Крок 6: Налаштовуємо відображення Рекомендованих Публікацій
- Крок 7: Складаємо список Категорій
- Крок 8: Налаштовуємо відображення Останніх Публікацій та Авторів
Щоб зрозуміти все викладене, вам необхідно мати базові знання про такі речі:
Як працює FTP і HTML
Як редагувати, створювати та завантажувати PHP-файли на вашому сервері
Як створювати навігацію за допомогою панелі керування WordPress
Крок 1: Розпаковуємо Bootstrap
- Перш за все, встановіть WordPress на свій домен.
- Потім завантажте та розпакуйте Bootstrap з http://getbootstrap.com/
- Після цього підключіться до вашого хостинг-сервера за допомогою FTP-клієнта FileZilla.
- Перейдіть до wp-content > themes.
- Створіть нову папку в каталозі тем під назвою BootStheme, і завантажте вміст розпакованого Bootstrap у цю папку.
- Майже всі установки WordPress містять такі файли:
- Index.php
- Style.css
- Header.php
- Footer.php
Тепер створіть 4 порожні файли, використовуючи ім’я файлів, наведене вище.
Крок 2: Налаштовуємо Bootstrap
Відкрийте style.css і вставте наступний код.
1 2 3 4 5 6 7 8 | /* Theme Name: MyTheme Theme URI: https://yourwebsite.com Description: Mytheme Built on bootstrap Version:1.1 Author: Name Surname Author URI: https://yourwebsite.com */ |
Це основні коментарі, які містять опис та деталі теми. За бажанням ви можете також розмістити свої власні коментарі
Крок 3: Копіюємо код
У цьому туторіалі ми не будемо використовувати всі файли CSS та JS, які є в бутстрап пакеті, а лише копіювати код bootstrap.min.css у style.css. Ваш файл style.css повинен виглядати так.
Крок 4: Налаштовуємо шаблон HTML
Для подальшої роботи нам потрібно мати базовий шаблон HTML. Ви можете використовувати ці безкоштовні теми. Або ось цей код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | <!DOCTYPE html> <html> <head> <title>Bootstrap WordPress Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class = "navbar navbar-inverse navbar-static-top"> <div class = "container"> <a href = "#" class = "navbar-brand">Bootstrap WordPress Template</a> <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <div class = "collapse navbar-collapse navHeaderCollapse"> <ul class = "nav navbar-nav navbar-right"> <li><a href = "#">Home</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Blog <b class = "caret"></b></a> <ul class = "dropdown-menu"> <li><a href = "#">Item One</a></li> <li><a href = "#">Item Two</a></li> <li><a href = "#">Item Three</a></li> <li><a href = "#">Item Four</a></li> </ul> </li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a> <ul class = "dropdown-menu"> <li><a href = "#">Twitter</a></li> <li><a href = "#">Facebook</a></li> <li><a href = "#">Google+</a></li> <li><a href = "#">Instagram</a></li> </ul> </li> <li><a href = "#">About</a></li> <li><a href = "#contact" data-toggle="modal">Contact</a></li> </ul> </div> </div> </div> <div class = "container"> <div class = "jumbotron"> <h2>Post Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu erat, congue eget ornare et, luctus eget purus. Etiam et risus metus. Nam sed mi tellus. Mauris molestie massa eu metus tempor, in hendrerit arcu adipiscing.</p> </div> <div class = "panel panel-default panel-body"> <div class = "row"> <div class = "col-md-2"> <ul class="nav nav-pills nav-stacked"> <li><a href = "#">Category One</a></li> <li><a href = "#">Category Two</a></li> <li><a href = "#">Category Three</a></li> <li><a href = "#">Category Four</a></li> </ul> </div> <div class = "col-md-10"> <a href = "#"><h3>This random post is really awesome!</h3></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu erat, congue eget ornare et, luctus eget purus. Etiam et risus metus. Nam sed mi tellus. Mauris molestie massa eu metus tempor, in hendrerit arcu adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class = "text-muted">Posted by You on July 7th 2017</p> </div> </div> </div> </div> <div class = "navbar navbar-default navbar-fixed-bottom"> <div class = "container"> <p class = "navbar-text pull-left">Site Built By Ahsan</p> <a href = "http://youtube.com/" class = "navbar-btn btn-danger btn pull-right">Subscribe on YouTube</a> </div> </div> <div class = "modal fade" id = "contact" role = "dialog"> <div class = "modal-dialog"> <div class = "modal-content"> <form class = "form-horizontal"> <div class = "modal-header"> <h4>Contact BootStrap Template</h4> </div> <div class = "modal-body"> <div class = "form-group"> <label for = "contact-name" class = "col-lg-2 control-label">Name:</label> <div class = "col-lg-10"> <input type = "text" class = "form-control" id = "contact-name" placeholder = "Full Name"> </div> </div> <div class = "form-group"> <label for = "contact-email" class = "col-lg-2 control-label">Email:</label> <div class = "col-lg-10"> <input type = "email" class = "form-control" id = "contact-email" placeholder = "[email protected]"> </div> </div> <div class = "form-group"> <label for = "contact-msg" class = "col-lg-2 control-label">Message:</label> <div class = "col-lg-10"> <textarea class = "form-control" rows = "8"></textarea> </div> </div> </div> <div class = "modal-footer"> <a class = "btn btn-default" data-dismiss = "modal">Close</a> <button class = "btn btn-primary" type = "submit">Send</button> </div> </form> </div> </div> </div> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </body> </html> |
WordPress має вбудовані функції get_header () і get_footer (), які за умовчанням викликають файли header.php та footer.php відповідно. Ми будемо вирізати HTML-код згори до першого контейнера div і вставляти його в наш файл header.php, після чого файл має бути таким же, як зображення, наведене нижче.
Файл footer.php міститиме іншу частини коду:
Якщо ми активуємо цю тему і завантажимо її на нашому сайті, ми ще не побачимо нічого, оскільки index.php пустий. Щоб завантажити хедер та футер, ми будемо використовувати вбудовану функцію WordPress для виклику цих елементів шляхом імплементації наступного коду в index.php:
1 2 3 | <?php get_header(); ?> <?php get_footer(); ?> |
Тепер елементи хедера та футера будуть завантажені на наш веб-сайт, але ми отримаємо основну сторінку без стилю.
Крок 5: Налаштовуємо Header та Footer
У файлі header.php ми будемо імпортувати таблицю стилів Bootstrap, використовуючи функцію WordPress echo get_stylesheet_uri() (читати далі в WordPress Codex), це імпортує стиль style.css на наш веб-сайт, і ми побачимо верхню панель меню.
Функції JavaScript на нашій сторінці все одно не працюють, і ми не бачимо жодного випадаючого меню. Щоб це змінити, треба імпортувати наші js-файли безпосередньо імпортуючи файл за URL-адресою в footer.php. Вставте наступний код перед закриваючим тегом body.
1 | <script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script> |
WordPress відомий своїми налаштуваннями та плагінами. Щоб повідомити WordPress, де розмістити хуки плагінів, ми будемо вставляти <?php wp_head(); ?> та <?php wp_footer(); ?> у файлах header.php та footer.php. Крім цього для встановлення динамічних заголовків веб-сайту ми збираємося використовувати wp_title (); функція у файлі header.php між тегами <title>.
1 | <title><?php wp_title(' | ',true,'right'); ></title> |
Крок 6: Налаштовуємо відображення Рекомендованих Публікацій
Наведений вище код буде викликати заголовок повідомлення, розділений символом “|”, а потім назву сайту. Булевий (Boolean) true відображатиме заголовок. Якщо ви встановите його у false він просто поверне значення та не відобразить його. ‘right’ визначає розташування заголовка публікації праворуч від розділювача.
Тепер ми будемо викликати динамічні публікації на головній сторінці index.php, що відображатимуться зверху, так само як і з рекомендованими публікаціями, які ми бачимо на багатьох сайтах із підтримкою WordPress.
Напишіть наступний код у ваш index.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php query_posts('posts_per_page=1'); while(have_posts()) : the_post(); ?> <div> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p><?php the_excerpt(); ?></p> </div> <?php endwhile; wp_reset_query(); ?> |
Ми будемо використовувати петлю 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();.
Вставте наступний код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="panel panel-default panel-body"> <div> <div> <ul> <?php wp_list_categories('orderby=name&title_li='); ?> </ul> </div> </div> </div> |
Це дозволить перерахувати категорії за назвою з наведенням курсора.
Крок 8: Налаштовуємо відображення Останніх Публікацій та Авторів
Насамкінець ми покажемо останні публікації блогу на домашній сторінці. Ми збираємося запустити ще один тег div, і під цим div ми використаємо аналогічну петлю while, який ми використовували у популярних публікаціях, але ми не будемо обмежувати його з використанням query_posts();.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div> <?php while(have_posts()) : the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <p><?php the_excerpt(); ?></p> <p> posted by <?php the_author(); ?> <?php endwhile; wp_reset_query(); ?> </div> |
WordPress виконує функцію the_author (); і знаходить юзернейм автора публікації. Ми можемо використовувати це для динамічного відображення імені автора у кожній публікації.
Після успішного завершення усіх процедур, ви отримаєте сторінку, подібну до зображеної вище.
Про автора
Настя Семерей. Вірить у могутність слова та образу, тому, крім іншого, почала писати про дизайн та електронну музику.