Подумать только

logoas CogITas

Сомневаться - Трудиться - Любить

× Error from canvas.getContext(): Maybe your browser or hardware (GPU) does not appear to support WebGL. The Canvas for WebGL below will be empty.
Mouse и Num Lock

Мой сайт классно смотрится и на мобильном, и на телевизоре

Строим блог – Шаг 14

Адаптивный дизайн

Адаптивный дизайн

 

   Доработаем немного дизайн сайта, приведенного в статье «Добавляем дизайн в стандартный шаблон WordPress с помощью всего несколько настроек!». Особое внимание уделим корректному отображению сайта на мобильных устройствах (маленький экран, медленный интернет).

   Во-первых, изменим размер изображения в шапке, чтобы он был на всю ширину на больших экранах. Для этого в файле twentysixteen\inc\customizer.php изменим параметр width в функции add_theme_support, чтобы WordPress позволял вставить большой файл до 2400 пикселей:

'width'                  => 2400,

   Расширяем при помощи фотошоп наш исходный файл шапки без надписи в 2 раза до 2400 копированием и зеркальным отражением, вставляем через консоль.

   Во-вторых, теперь не будет растровой не масштабируемой надписи с названием сайта, сделаем ее текстовой векторной поверх изображения. Для этого вставляем в настройках style.css :

.site-title
{
	font-size: 130%;
	font-family: Montserrat, "Helvetica Neue", sans-serif;
	color: #559955;
	z-index: 9999;
	text-align: center;
	position: absolute;
	top: 0%;
	left: 15%;
}

   Посмотрим, как сайт выглядит на мобильном. Для этого воспользуемся программой Resizer:

Просмотр сайта на разных устройствах

Просмотр сайта на разных устройствах

 

   Для установки Resizer необходимо скачать архив resizeras.zip. Распаковать в директорию htdocs, например в as\upconsole. В файле as\upconsole\js\resizer.min.js указать в верхней функии путь к jquery:

127.0.0.1/as/upconsole/js/jquery.min.js

   В файле  as\upconsole\index.html указываем:

<script src="http://127.0.0.1/as/upconsole/js/resizer.min.js"></script>

   Теперь запускаем в браузере 127.0.0.1/as/upconsole :

Установка resizeras

Установка Resizer

 

   Перетягиваем <-->Resizeras на панель закладок. Все, идем на наш сайт и на панели закладок нажимаем <-->Resizeras. С помощью этого инструмента можно удобно проверять адаптивность любого сайта в Интернет. Можно тягать за края отображаемой области и менять размер устройства. Этот размер отображается в новой верхней панели.

   Я обычно разворачиваю браузер на весь экран и смотрю, как выглядит сайт на разных устройствах с помощью Resizer. То есть, нет необходимости менять размер браузера.

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

 

mobile font-size: 130% top: 0%; left: 15%;
14.0 — >= 390px font-size: 150% top: 1%; left: 25%;
14.1 — >= 710px font-size: 175% top: 1%; left: 27%;
14.2 — >= 783px font-size: 235% top: 2%; left: 28%;
14.3 — >= 910px font-size: 295% top: 2%; left: 24%;
14.4 — >= 985px font-size: 355% top: 3%; left: 27%;
14.5 — >= 1200px font-size: 400% top: 3%; left: 30%;

   Например:

	.site-title
	{
		font-size: 150%;
		top: 1%;
		left: 25%;
	}

   Подобным образом можно делать адаптивными любые элементы дизайна.

   Осталось придать красоты нашей надписи средствами css. Используя http://csstxt.com, получаем код и результат:

        text-shadow:4px 2px 5px rgba(26,122,42,0.6);
	font-style:oblique;
	color:#16690D;
	font-family:trebuchet MS, sans-serif;

Заголовок векторным текстом

Заголовок векторным текстом

 

   Или, используя http://enjoycss.com, получаем код и более крутой результат:

        font-style:oblique;
	font: "Arvo", Helvetica, sans-serif;
	color: rgb(228, 243, 249);
	text-shadow: -2px -2px 1px rgb(255,255,255) , -1px -1px 1px rgb(255,255,255) , 1px 1px 1px rgba(232,247,255,0.901961) , 1px 1px 0 rgb(42,101,139) , 2px 2px 0 rgb(41,99,138) , 3px 3px 0 rgb(40,97,136) , 4px 4px 0 rgb(39,95,133) , 5px 5px 0 rgb(38,93,131) , 6px 6px 0 rgb(37,90,128) , 7px 7px 0 rgb(36,87,125) , 8px 8px 0 rgb(35,84,121) , 9px 9px 0 rgb(33,80,117) , 4px 5px 0 rgb(31,76,113) , 4px 5px 0 rgb(30,72,108) , 4px 4px 1px rgba(28,67,103,0.498039) , 14px 14px 12px rgba(5,13,20,0.498039) ;

Другой вариант векторным текстом

Другой вариант векторным текстом

 

Надписи и русификация

   Для замены «Continue Reading» на «Читать» — ищем  фразу «Continue Reading»  в каталоге нашей темы twentysixteen, например с помощью Total Commander:

Ищем файл, будем русифицировать

Ищем файл, будем русифицировать

 

   В найденных файлах производим замену.

   Надписи комментариев исправляем на русские подобным образом в файлах:

C:\xampp-5.6.23\htdocs\as\blogas\wp-includes\comment-template.php
C:\xampp-5.6.23\htdocs\as\blogas\wp-content\themes\twentysixteen\inc\template-tags.php

   В файле:

C:\xampp-5.6.23\htdocs\as\blogas\wp-content\plugins\subscribe-to-comments\subscribe-to-comments.php

нужно русифицировать много текста, но для основной информации для начала настраиваем этот плагин через панель WordPress:

Русифицируем плагин подписки на комментарии

Русифицируем плагин подписки на комментарии

 

   Уберем ссылку Edit в конце контента страницы. В template-parts\content-page.php, content-search.php, content-single.php, content.php закомментируем код:

<?php
	/*
		edit_post_link(
			sprintf(
				/* translators: %s: Name of current post */
/*
				__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
				get_the_title()
			),
			'<footer class="entry-footer"><span class="edit-link">',
			'</span></footer><!-- .entry-footer -->'
		);
	*/
	?>

 

Адаптивные таблицы

   Wordpress шаблон делает картинки и таблицы адаптивными – подгоняет под размер экрана. Если этого не происходит с таблицами, то необходимо удалить фрагменты width="xx" из кода в режиме Text:

<table width="370">
<tbody>
<tr>
<td width="70"><strong> </strong></td>
<td width="150"><strong>Массовый сервис ведения блога</strong></td>
<td width="150"><strong>Автономный блог (Личный, платный или бесплатный Хостинг)</strong></td>
</tr>

 

Выводы по шагам 1-14 серии «Строим блог»

   Мы провели анализ и  выбрали подходящие этапы размещения сайта на хостингах:

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

  Мы прошли пока только 1 этап. Рассмотрели на личном локальном хостинге установку Веб-сервера и WordPress. Написали страницу о проекте и первую статью. Проработали адаптивный интерфейс.  У нас теперь есть готовый блог! Интерфейс не идеален, но не все сразу 🙂 Осталось только разместить блог в Интернете, наполнять контентом, настраивать постепенно различные фишки.

   Итак, на следующем шаге мы переходим к этапу 2: рассмотрим бесплатные возможности Сети для личного блога.

<< Предыдущий шаг

Следующий шаг >>

Все статьи >>


Комментарии к “Мой сайт классно смотрится и на мобильном, и на телевизоре”

  • Максим говорит:

    Resizeras прикольный скрипт. Я раньше видел только онлайн эмуляторы экранов устройств.

    Ответить
  • marfoldi говорит:

    Когда элементы сайта подстраиваются под размер экрана это называется отзывчивый дизайн, а не адаптивный.

    Ответить
    • Андрей Свирский говорит:

      Согласен, но адаптивным его тоже можно назвать, потому что отзывчивый дизайн является частью адаптивного.

      Отзывчивый веб-дизайн = «резиновый» макет

      Адаптивный веб-дизайн = «резиновый» макет + прогрессивное улучшение.

      Ответить
  • Оставить комментарий

    Ваш email не будет отображаться. Обязательные поля помечены *

    (Чтобы установить аватар, необходимо зарегистрировать свой e-mail на gravatar.com. Как это сделать, написано в статье http://cogitas.ru/robots-avatar-icon-wordpress.html)