Ми переїхали 🚚 Шукай в розділі послуги на Plerdy Детальніше

+38-067-370-19-59

0 Вы только узнали
% информации

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

SEO+500% » Продвижение сайтов интернет-магазинов » Адаптивный дизайн: Создаем сайт на WordPress используя Bootstrap

Читати статтю українською

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

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

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

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

/*
Theme Name: MyTheme
Theme URI: https://yourwebsite.com
Description: Mytheme Built on bootstrap
Version:1.1
Author: Name Surname
Author URI: https://yourwebsite.com
*/

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. Вы можете использовать эти бесплатные темы. Или вот этот код:

<!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 = "you@example.com">
</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>

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>

</head>

<body>

<a href = "#" class = "navbar-brand">Bootstrap WordPress Template</a>

</button>

<li><a href = "#">Item Three</a></li>

</ul>

</li>

<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>

<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>

<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>

<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>

<a href = "#"><h3>This random post is really awesome!</h3></a>

<p class = "text-muted">Posted by You on July 7th 2017</p>

</div>

<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>

<h4>Contact BootStrap Template</h4>

</div>

</div>

<label for = "contact-email" class = "col-lg-2 control-label">Email:</label>

</div>

<label for = "contact-msg" class = "col-lg-2 control-label">Message:</label>

</div>

<a class = "btn btn-default" data-dismiss = "modal">Close</a>

</div>

</form>

</div>

</body>

</html>

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

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

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

<?php get_header(); ?>
<?php get_footer(); ?>

<?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.

<script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

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>.

<title><?php wp_title(' | ',true,'right'); ></title>

1	<title><?php wp_title(' \| ',true,'right'); ></title>

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

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

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

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

<?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(); ?>

<?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>

<div>

</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();.

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

<div class="panel panel-default panel-body">
<div>
<div>
<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>
</div>
</div>
</div>

<div>

<ul>

<?php wp_list_categories('orderby=name&title_li='); ?>

</ul>

</div>

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

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

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

<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>

<div>

<?php while(have_posts()) : the_post(); ?>

<p> posted by <?php the_author(); ?>

<?php endwhile; wp_reset_query(); ?>

</div>

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