Адаптивные изображения WordPress без проблем


Оглавление (нажмите, чтобы открыть):

адаптивные изображения wordpress?

при вставке из админ панели на страницу изображения не адаптивны. что прописать нужно в functions чтобы исправить это? WordPress 4.9.4

2 ответа 2

У себя сделал так, установите свой размер экрана и при необходимости класс.

ВП по умолчанию (если не поломано плагинами/темой) выводит изображения с srcset, что автоматически показывает нужные изображения для нужных экранов.

Метод же выводом через @media не очень хороший (нужно применять аккуратно), тк при этом грузятся все изображения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками wordpress или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Адаптивные изображения WordPress без проблем

WordPress имеет встроенную систему загрузки медиафайлов. Когда вы загружаете изображение, система автоматически создает и сохраняет его различные версии.

  • Оцените публикацию
    Сайтостроение от А до Я
  • Настрочить жалобу в спортлотоautoRSS
  • Распечатать

Похожие публикации

3 распространенные ошибки WordPress и как их исправить

Крушите свой рабочий стол в приступе отчаяния? Досадная ошибка привела к тому, что вы разлюбили WordPress? Рубрика: CMS и движки для сайтов

WordPress L10n: как сделать локализацию плагина

В первой части серии статей о WordPress плагинах i18n and l10n мы рассказали о том, как локализовать плагин для WordPress. Рубрика: CMS и движки для сайтов

Захватывающие улучшения в WordPress 3.9

Будучи активным участником WordPress сообщества, мне удалось принять участие в релизе последней версии: WordPress 3.9. Названная в честь Джимми Смита, иконы джаза, версия WordPress 3.9 известна также как «Смит» (англ. Smith). Рубрика: CMS и движки для сайтов

Всё, что вы хотели знать о WordPress 3.9

16 апреля была выпущена новая версия WordPress под кодовым названием «Смит», которая принесла нам очередной набор важных изменений. Вот что важно знать об основных изменениях в WordPress версии 3.9. Рубрика: CMS и движки для сайтов

10 лучших кэш-плагинов, необходимых для ускорения работы вашего сайта на основе WordPress

Справиться с проблемой медленной загрузки страниц вашего сайта можно с помощью кэш-плагинов для WordPress. Итак. Вот список 10 лучших кэш-плагинов для сайтов на WordPress. Рубрика: CMS и движки для сайтов

Варианты создания доски объявлений на wordpress

Рассмотрим возможность создания доски объявлений используя плагин Ads-WordPress. Этот плагин имеет широкий круг применения. Рубрика: CMS и движки для сайтов

Адаптивные изображения WordPress без проблем

Добрый день! Столкнулся с такой проблемой: хочу сделать адаптивные изображения, так как если смотреть на сайт с телефона, картинка рушит структуру текста.

Если картинки центрирована, то проблем с масштабированием нет, но если стоит слева или справа текста, то размер изображения сохраняется. Скрин прилагаю.

Пытался решить проблему, добавив в файле стилей класс:

.img-responsive <
display: block;
height: auto;
max-width: 80%;
>

Но никакой реакции нет. Подскажите как это реализовать

21.05.2015, 09:53 #2
21.05.2015, 10:02 #3
proksey-net
Посмотреть профиль
Найти ещё сообщения от proksey-net

Пробовал ставить и 50% — результат тот же.

А как сделать так, чтобы картинка не могла быть шире 80% основного контейнера?
В идеале хотелось бы видеть, чтобы изображения уменьшалось пропорционально размеру экрана. То есть если оно занимает 20% ширины экрана, то и занимало бы так.

Никто не может подсказать?

21.05.2015, 10:11 #4
21.05.2015, 12:24 #5
21.05.2015, 12:29 #6
21.05.2015, 12:33 #7

Может подскажите что и куда вставить? Мне необходимо, чтобы на маленьких экранах только картинки уменьшались.

Вот как выглядит responsive.css:

@ media screen and ( max — width : 840px ) <
#main #content

#container #main #content,
#container #main .sidebar <
width : 100 %;
max — width : 100 %;
>
>

@ media screen and ( max — width : 640px ) <
#footer .widget-footer <
display : block ;
margin : 0 0 10px ;
width : 100 %;
>
>

@ media screen and ( max — width : 480px ) <
#header-logo <
margin : 0 ;
width : 100 %;
>

#header-logo > a <
display : table ;
margin : 0 auto ;
>

. widget — header <
float : none ;
text — align : center ;
width : 100 %;
>

#nav-top <
display : block ;
float : none ;
clear : both ;
>
#nav-top .nav-top

#nav-main .nav-main <
float : none ;
border : none ;
>

#nav-main .nav-main > li, #nav-main .nav-main > ul > li <
clear : both ;
float : none ;
border — bottom : 1px solid #222;
border — left : none ;
border — right : none ;
>

#nav-main .nav-main > li:last-child, #nav-main .nav-main > ul > li:last-child

#nav-main .sub-menu, #nav-main .children, #nav-main .sub-menu li, #nav-main .children li <
border : none ;
box — shadow : none ;
>

#nav-main .sub-menu a #nav-main .sub-menu .sub-menu a #nav-main .sub-menu .sub-menu .sub-menu a #nav-main .sub-menu .sub-menu .sub-menu .sub-menu a

#nav-main .sub-menu .sub-menu, #nav-main .children .children

#nav-main li:hover > ul
#nav-main .page_item:hover > ul

#nav-main .toggle-on > .sub-menu <
display : block ;
position : relative ;
overflow : hidden ;
>

#nav-main .toggle-on > .sub-menu,
#nav-main .toggle-on > .sub-menu > li,
#nav-main .toggle-on > .sub-menu > li a <
width : 100 %;
>

. rtl #nav-main . rtl #nav-main .nav-main,
. rtl #nav-main .nav-main li

@ media screen and ( max — width : 360px ) <
. bjqs — heading , . bjqs — descript

. entry — excerpt , . entry — thumbnail <
clear : both ;
padding — right : 0 ;
>
. entry — thumbnail

�� Оптимизация изображений на сайте ��

Высокая скорость загрузки сайта положительно влияет на поисковую оптимизацию, а также улучшает поведенческие факторы. Все любят быстрые сайты, и поисковики, и пользователи. Значительную часть трафика и веса страниц на сайте составляют мультимедийный контент — это изображения и видео. Согласитесь, сложно представить себе современный сайт без картинок. Но именно эти медиафайлы и задерживают загрузку страниц. Изображения на сайте нужно оптимизировать, но при этом важно найти баланс между размером изображения и его качеством. Рассмотрим несколько способов, как оптимизировать изображения на сайте.

Что значит оптимизировать изображения на сайте?

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

Преимущества оптимизации изображений

Зачем оптимизировать изображения на сайте? Существует множество преимуществ оптимизации изображений для повышения производительности. По данным HTTP Archive , по состоянию на декабрь 2020 года изображения составляют в среднем 54% от общего веса веб-страницы . Поэтому, когда дело доходит до оптимизации сайта на WordPress , изображения — это первое, с чего следует начинать. Это важнее, чем оптимизация скриптов и шрифтов. К тому же, процесс оптимизации изображений является одним из самых простым для реализации, но многие владельцы веб-сайтов игнорируют его.

Основные преимущества оптимизации изображений на сайте:

  • Это улучшит скорость загрузки страницы. Если ваша страница загружается слишком долго, посетители могут устать от ожидания и закрыть сайт. Для получения дополнительной информации об оптимизации времени загрузки страницы смотрите подробное руководство по оптимизации скорости сайта.
  • В сочетании с плагинами SEO для WordPress это улучшает SEO сайта на WordPress. Ваш сайт будет выше в результатах поиска. Большие файлы замедляют работу сайта, особенно на мобильных устройствах, а поисковые системы пессимизируют медленные сайты. Google также может сканировать и индексировать ваши изображения быстрее для поиска изображений в Google. Вы знаете, какой процент трафика вашего сайта приходится на поиск картинок Google? Вы можете использовать Google Analytics для проверки трафика поиска картинок Google.
  • Более быстрое создание резервных копий и восстановление из них.
  • Меньшие размеры файлов изображений используют меньше трафика. Особенно актуально для мобильных браузеров.
  • Требует меньше места на сервере (это зависит от того, сколько миниатюр вы оптимизируете)

Как оптимизировать изображения на сайте для улучшения производительности

Основная цель оптимизации изображений — найти баланс между размером файла и приемлемым качеством . Существует несколько способов выполнить все эти оптимизации. Один из самых популярных способов — просто сжимать изображения перед загрузкой в ​​WordPress. Это можно сделать с помощью таких инструментов, как Adobe Photoshop или Affinity Photo. Некоторые из этих задач также могут быть выполнены с помощью плагинов, о которых мы поговорим ниже.

Две основные вещи, которые следует учитывать, — это формат файла и тип используемого сжатия . Выбрав правильное сочетание формата файла и типа сжатия, можно уменьшить размер изображения в 5 раз. Вам придется поэкспериментировать с каждым изображением или форматом файла, чтобы увидеть, что работает лучше всего.

Выберите правильный формат файла

Прежде чем приступить к сжатию изображений, убедитесь, что вы выбрали наиболее подходящий тип файлов. Существует несколько типов файлов изображений:

  • PNG — изображения более высокого качества, но также имеет больший размер файла. Был создан как формат изображения без потерь, хотя он также может быть с потерями.
  • JPEG — использует оптимизацию с потерями и без потерь . Вы можете отрегулировать уровень качества для хорошего баланса качества и размера файла.
  • GIF — использует только 256 цветов. Лучший выбор для анимированных изображений. Используется только сжатие без потерь.
  • WebP — новый формат изображений для интернета. Хорошо оптимизирует изображения, но поддерживается не всеми браузерами. Как использовать WebP в WordPress.

Качество vs Размер файла

Вот пример сильного сжатия изображения. Первая картинка использует очень низкую степень сжатия, что приводит к высочайшему качеству (но большому размеру файла). Во втором случае используется очень высокая степень сжатия, что приводит к очень низкому качеству изображения (но меньшему размеру файла). Исходное изображение без изменений весит 2,06 МБ.

Низкое сжатие (высокое качество) JPG — 590 КБ Высокое сжатие (низкое качество) JPG — 68 КБ

Как вы можете видеть, первое изображение весит 590 КБ. Это довольно много для одной фотографии. Как правило, лучше всего, если общий размер веб-страницы не превышает 1 или 2 МБ. 590 КБ будет уже четвертью объема всей страницы. Второе изображение явно выглядит ужасно, но оно и весит всего 68 КБ. Важно найти правильное соотношение между степенью сжатия (качеством) и размером файла.

Поэтому возьмем изображение со средней степенью сжатия, и, как вы можете видеть ниже, качество теперь выглядит хорошо, а размер файла составляет 151 КБ, что является приемлемым для фотографии с высоким разрешением. Это почти в 4 раза меньше, чем оригинальная фотография с низким уровнем сжатия. Обычно более простые изображения, такие как PNG, должны иметь размер менее 100 КБ или меньше для лучшей производительности.

Среднее сжатие (отличное качество) JPG — 151 КБ

Сжатие с потерями или без потерь

Также важно понимать, что можно использовать два типа сжатия: с потерями и без потерь.

Сжатие с потерями — это процесс, который удаляет некоторые данные. Это ухудшит изображение, поэтому вам нужно быть внимательным с тем, насколько сильно уменьшать изображение. Размер файла может быть уменьшен на значительную величину. Вы можете использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие редакторы изображений, чтобы настроить параметры качества изображения. Пример, который мы использовали выше, использует сжатие с потерями.

Сжатие без потерь — это процесс, который сжимает данные. Он не снижает качество, но потребует распаковки изображений перед тем, как их можно будет отобразить. Вы можете выполнить сжатие без потерь на рабочем столе, используя такие инструменты, как Photoshop, FileOptimizer или ImageOptim.

Лучше всего поэкспериментировать с методами сжатия, чтобы увидеть, что лучше всего подходит для каждого изображения или формата. Многие инструменты имеют опцию сохранения изображение для Интернета (Save for web). Это опция присутствует во многих графических редакторах, она дает выбрать настройки качества для оптимального сжатия. Вы несколько потеряете в качестве, поэтому экспериментируйте, чтобы найти наилучший баланс, сохранив приемлемое качество изображения.

Инструменты и программы для оптимизации изображений

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

Сжатие фотографии в Affinity Photo

Вот некоторые дополнительные инструменты и программы для работы с изображениями:

  • Adobe Photoshop
  • Gimp
  • Paint.NET
  • GIFsicle
  • JPEGtran
  • JPEG Mini
  • OptiPNG
  • pngquant
  • FileOptimizer
  • ImageOptim
  • Trimage
  • ImageResize.org

Изменение изображения до нужного размера

Раньше было очень важно загружать изображения в масштабе и не позволять CSS изменять их размер. Однако это уже не так важно, поскольку WordPress с версии 4.4 теперь поддерживает адаптивные изображения (не уменьшенные с помощью CSS). По сути, WordPress автоматически создает несколько размеров каждого изображения, загружаемого в медиа-библиотеку. Включив доступные размеры изображения в атрибут srcset , браузеры теперь могут загружать наиболее подходящий размер и игнорировать другие. Пример того, как на самом деле выглядит код вставки изображения в WordPress.

Медиатека WordPress создает эскизы на основе настроек сайта. Однако оригинал также сохраняется и остается нетронутым. Если вы хотите изменить размер ваших изображений и сохранить дисковое пространство, не сохраняя оригинал, вы можете использовать бесплатный плагин, такой как Imsanity .

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

Плагины WordPress для оптимизации изображений

К счастью, с WordPress вам не нужно делать оптимизацию или сжатие изображений вручную. Вы можете использовать плагины, чтобы автоматически выполнить сжатие. Есть несколько плагинов, которые автоматически оптимизируют ваши графические файлы по мере их загрузки. Они даже оптимизируют изображения, которые вы уже загрузили. Это удобная функция, особенно если у вас уже есть сайт с изображениями. Рассмотрим некоторые плагины для оптимизации изображений для повышения производительности сайта на WordPress.

Однако важно, чтобы вы не рассчитывали только на плагины. Например, не стоит загружать изображения размером более 2 МБ в медиатеку WordPress. Это может привести к очень быстрому использованию свободного дискового пространства на хостинге. Лучший способ — изменить размер изображения в инструменте для редактирования фотографий, а затем загрузить его и использовать один из следующих плагинов, чтобы еще больше уменьшить его.

Imagify Image Optimizer

Imagify создан той же командой, которая разработала плагин WP Rocket, с которой большинство из вас, вероятно, знакомы. Этот плагин совместим с WooCommerce, NextGen Gallery и WP Retina. Он имеет функцию массовой оптимизации, и есть выбор между тремя различными уровнями сжатия: нормальный, агрессивный и ультра. Плагин имеет функцию восстановления, поэтому, если вы недовольны качеством, вы можете одним кликом откатиться до оригинального файла и повторно сжать до уровня, который лучше соответствует вашим потребностям. Есть бесплатная и премиум версия. Бесплатная ограничена квотой в 25 МБ изображений в месяц.

Imagify сжимает изображения на сторонних серверах , а не на ваших, что важно для производительности. Imagify не замедляет работу сайта на WordPress.

ShortPixel Image Optimizer

ShortPixel Image Optimizer — это бесплатный плагин, который позволяет сжимать до 100 изображений в месяц и работает с файлами различных типов, включая файлы PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений как с потерями, так и без потерь. Может преобразовать CMYK в RGB. Он загружает ваши изображения и миниатюры в облако для обработки, а затем возвращает их на ваш сайт, чтобы заменить оригиналы. Он создает резервную копию исходных файлов, поэтому вы можете вручную восстановить их, если хотите. Он может конвертировать файлы галереи одним потоком. Не имеет ограничений на размер файла.

Optimus Image Optimizer

Optimus WordPress Image Optimizer использует сжатие без потерь для оптимизации изображений. Он поддерживает WooCoomerce и мультисайты и имеет хорошую функцию массовой оптимизации для тех, у кого уже есть большие медиа-библиотеки. Он также совместим с плагином WP Retina WordPress. Есть бесплатная и премиум версия. В премиум-версии вы платите один раз в год и можете сжимать неограниченное количество изображений. Если объединить его с плагином Cache Enabler, вы также сможете использовать формат WebP, которые представляют собой новый облегченный формат изображений от Google.

WP Smush

WP Smush имеет как бесплатную, так и премиум-версию. Он позволяет удалять скрытую информацию из изображений, чтобы уменьшить размер без снижения качества. Плагин будет сканировать изображения и уменьшать их размер по мере их загрузки на сайт. Он также просканирует существующие изображения и уменьшит их. Может обрабатывать до 50 файлов одновременно.

  • Совместим с некоторыми из самых популярных плагинов медиа-библиотеки, такими как WP All Import и WPML.
  • Вся оптимизация изображения выполняется с использованием методов сжатия без потерь, что обеспечивает высокое качество изображения.
  • Не имеет значения, в каком каталоге хранятся изображения. Smush находит их и сжимает.
  • Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все изображения будут изменены в одинаковых пропорциях.

TinyPNG

TinyPNG использует сервисы TinyJPG и TinyPNG (бесплатная учетная запись позволяет сжимать около 100 изображений в месяц) для оптимизации изображений JPG и PNG. Плагин автоматически сжимает новые изображения и массово оптимизирует существующие. Может преобразовывать CMYK в RBG для экономии места. Сжимает изображения JPEG до 60% и изображения PNG до 80% без видимой потери качества. Нет ограничений на размер файла.

ImageRecycle

ImageRecyle — плагин автоматической оптимизации изображений и документов PDF. Этот плагин ориентирован не только на сжатие изображений, но и на PDF-файлы. Очень удобная функция — возможность установить минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 КБ, вы можете автоматически исключить их из сжатия. Это гарантирует, что картинки и файлы никогда не будут сжаты слишком сильно. Плагин также включает возможность массовой оптимизации и автоматическое изменение размера изображения. Примечание: есть бесплатная 15-дневная пробная версия, но сам плагин платный, и изображения загружаются и сжимаются с использованием серверов разработчиков плагина. Вы платите не за месяц, а за общее количество сжатых изображений, тарифные планы начинаются с 10 долларов за 10 000 картинок.

Оптимизация изображений на примерах

Мы решили провести собственный небольшой тест, чтобы показать, насколько оптимизация изображений может повлиять на общую скорость сайта на WordPress.

Несжатые JPG

Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG размером более 1 МБ. Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из теста скорости, общее время загрузки составило 1,55 секунды, а общий размер страницы — 14,7 МБ.

Сжатые JPG

Затем мы сжимали JPG с помощью плагина Imagify WordPress, используя «агрессивную настройку». Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости , общее время загрузки было сокращено до 476 мс, а общий размер страницы уменьшен до 2,9 МБ. Общее время загрузки уменьшилось на 54,88%, а размер страницы уменьшился на 80,27% .

На вашем сайте практически нет других способов оптимизации, которые позволили бы сократить время загрузки более чем на 50%. Вот почему оптимизация изображений так важна, весь процесс был автоматизирован плагином.

Оптимизируя ваши изображения с помощью инструмента для редактирования фотографий или плагина WordPress, вы также можете исправить предупреждение «Оптимизировать изображения», которое вы получаете в Google PageSpeed ​​Insights.

Если у вас есть другие предупреждения об оптимизации из инструментов тестирования скорости, обязательно ознакомьтесь с нашим руководством по Google PageSpeed ​​Insights и пошаговым руководством Pingdom.

Использование SVG

Другая рекомендация — использовать SVG вместе с другими изображениями. SVG — это масштабируемый векторный формат, который отлично подходит для логотипов, иконок, текста и простых изображений. Вот несколько причин:

  • SVG автоматически масштабируются как в браузерах, так и в инструментах редактирования фотографий.
  • Google индексирует SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
  • SVG традиционно (не всегда) меньше по размеру файла, чем PNG или JPG. Это может привести к ускорению загрузки.

Сравним три разных типа изображений:

JPG (оптимизированный размер: 81,4 КБ)

PNG (оптимизированный размер: 85,1 КБ)

SVG (оптимизированный размер: 6,1 КБ)

Как вы можете видеть выше, SVG имеет меньший размера файла на 92,51% по сравнению с JPG. А по сравнению с PNG — 92,83%. Ознакомьтесь с нашим руководством по использованию SVG на сайте WordPress.

Лучшие практики оптимизации изображений на сайте

Приведем некоторые общие рекомендации по оптимизации изображений для сайтов:

  • Если вы используете плагин WordPress, используйте тот, который сжимает и оптимизирует изображения на своих серверах. Это, в свою очередь, снижает нагрузку на ваш собственный сайт.
  • По возможности используйте векторные изображения вместе с PNG и JPG
  • Используйте CDN для быстрой доставки ваших изображений посетителям по всему миру
  • Удаляйте ненужные данные изображения
  • Обрезайте белые поля изображения, добавить их можно через CSS
  • Максимально используйте эффекты CSS3
  • Сохраняйте изображения в нужных размерах
  • Используйте веб-шрифты вместо размещения текста внутри изображений — они выглядят лучше при масштабировании и занимают меньше места
  • Используйте растровые изображения только для сцен с большим количеством форм и деталей
  • Уменьшайте битовую глубину до меньшей цветовой палитры
  • Используйте сжатие с потерями, где это возможно
  • Экспериментируйте, чтобы найти лучшие настройки для каждого формата
  • Используйте GIF, если вам нужна анимация (но сжимайте анимированные GIF-файлы )
  • Используйте PNG, если вам нужна высокая детализация и высокое разрешение
  • Используйте JPG для общих фотографий и скриншотов
  • Удалите все ненужные метаданные изображения
  • Максимально автоматизируйте процесс обработки изображений
  • В некоторых случаях вам может потребоваться отложенная загрузка изображений для более быстрой визуализации первой страницы.
  • Сохраняйте изображения как «оптимизированные для Интернета» в таких инструментах, как Photoshop

Адаптивный дизайн сайта – как адаптировать шаблон WordPress 127

Здравствуйте, уважаемые друзья. Вот уже через несколько дней Google вводит ещё один фактор ранжирования — мобильность (адаптивность) сайта. То есть те сайты, которые не адаптированы под мобильные устройства будут понижаться в поисковой выдаче мобильных запросов. Вот поэтому нужно торопиться и сделать свой сайт адаптивным.

Возможно, у кого-то возникнет вопрос, а почему бы не создать мобильную версию сайта? Сделать это можно при помощи специализированных сайтов или заказать у фрилансеров. А ещё можно установить плагин для WordPress – WPTouch, который возьмёт на себя всю работу по адаптации текущего шаблона.

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

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

Все ли шаблоны можно адаптировать

Да, адаптировать можно практически все шаблоны. Только вот на какие-то нужно потратить меньше усилий, а на другие гораздо больше.

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

Но, вот если вы всё же хотите адаптировать свой действующий шаблон, то нужно внимательно оценить трудности, с которыми вы столкнётесь. Определить целесообразность.

К примеру, мой старый шаблон можно было адаптировать, но при этом пришлось бы непросто применить новые стили и медиазапросы. Пришлось бы менять и дорабатывать графические элементы дизайна.

В этом конкретном примере пришлось бы переделать всю шапку и создать новый фон для мобильных устройств. И я решил сменить шаблон. Хотя и новый шаблон я дорабатывал не меньше старого.

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

На чём основан адаптивный шаблон сайта

Создание адаптивного шаблона основано на пяти основных составляющих:

  1. Резиновый (адаптируемый) макет (каркас) – если основной шаблон имеет фиксированные размеры шапки, сайтбара, блока под контент, футера, то его резиновая копия вычисляется на основе процентной доли от родительского контейнера.

Так, например, если родительский контейнер имеет размер 760рх, а в нём содержится блок контента — 495рх и сайтбар — 190рх. Определение процентной доли каждого из блоков будет вычисляться по формуле:

Блок контента: 495/760*100= 65.1315789%

Примечание: если бы в блоке с контентом был бы ещё один блок, то для него, родителем был бы блок контента.

  1. Резиновые (адаптируемые) изображения – здесь принцип работы таков, что изображение подстраивается под размеры блока в котором расположено (родителя). Для создания таких резиновых изображений достаточно в стилях css, для мобильных устройств прописать вот такие стили:
  1. Резиновые (адаптируемые) встроенные видео – принцип тот же, что и у изображений. Видео подстраиваются под размер контейнера в котором расположены. CSS стили для этого используются следующие:
  1. Резиновые (адаптируемые) шрифты – как правило, шрифты в шаблонах указываются в пикселях (рх), а их нужно перевести в относительную величину высоты шрифта (em).

Перевод шрифта из pxв em осуществляется по формуле:

Примечание: и хотя, браузеры в современных смартфонах и планшетах умеют масштабировать шрифты для удобства пользователя, пренебрегать этим пунктом не стоит.

  1. Медиазапросы (Mediaqueries) – именно благодаря медиазапросам и происходит показ того или иного дизайна в зависимости от размеров экран устройства с которого ведётся просмотр. Более подробно о том, как применять медиазапросы я писал здесь. Сейчас лишь напомню, что без этих запросов не будет и адаптивного дизайна в принципе.

Как адаптировать шаблон WordPress

Шаг 1. Анализ и изучение шаблона

Первым делом, что нужно сделать – это провести анализ и изучить шаблон. При проведении анализа нужно определить ширину основного блока (родителя), ширину блоков сайтбара, контента и так далее. Сделать это лучше всего через панель разработчика в браузере Firefox или Chrome.

Также нужно выписать идентификаторы и классы этих блоков, в дальнейшем они пригодятся для присвоения css стилей.

Ещё нужно определиться с графическими элементами дизайна, их расположением и свойствами. В некоторых случаях их тоже нужно будет менять.

В качестве примера рассмотрим пример шаблона, который ещё не адаптирован. Определим блоки, их классы и идентификаторы и размеры.

Контейнер – оболочка, в котором содержатся все остальные блоки, имеет идентификатор (#page) и ширина контейнера 760рх.

Следующий блок – это блок шапки (заголовка), он имеет идентификатор (#header) и ширину 758рх.

Также в этом блоке вся красота создана при помощи фонового изображения. А по-хорошему сложной графики там нет, и лучше реализовать это при помощи css – стилей.

Идём дальше, следующий блок – блок с контентом. С этим блоком совсем всё плохо, так как стили заданы не рационально. Делая на совесть, такие косяки нужно переделывать. Но сейчас не об этом. Самое главное — это узнать идентификатор и ширину. Идентификатор этого блока имеет имя (#content) и в нём есть ещё и класс (.narrowcolumn). Ширина блока (#content) не задана, но на скриншоте можно видеть, что она составляет 495рх. А получается это за счёт заданной ширины для этого же блока с классом (.narrowcolumn) плюс внутренний отступ слева 45рх.

Всё это можно сделать гораздо проще, впоследствии при адаптации из-за такого рода мелочей возникают определённые трудности.

Следующий блок – это сайтбар. Имеет идентификатор (#sidebar) и ширина его составляет 190рх.

С этим блоком на первый взгляд всё нормально, но если посмотреть внимательно на скриншот, то возникает вопрос, а что за внешний отступ (margin-left: 545рх;)? А это так сделано выравнивание сайтбара по правому краю. Хотя это можно было сделать с помощью свойства float. Также фоновый цвет выполнен при помощи изображения, что можно легко заменить на цвет в css.

На такие моменты обязательно нужно обращать внимания. Так как из таких мелочей складывается вся большая работа по адаптации шаблона.

И завершающий блок в этом шаблоне – это подвал. Он имеет идентификатор (#footer) и ширину 760 рх.

А очередной косяк в шаблоне, фон создан при помощи изображения. Что тоже замедляет загрузку страницы и легко может быть заменено стилями css. Или css спрайтами.

С анализом структуры мы разобрались, надеюсь, вы поняли, на что обращать внимание. Если не совсем, то видео урок вам поможет.

И теперь можно переходить к созданию медиазапросов и стилей css для мобильных устройств.

Шаг 2. Создание медиазапросов и стилей

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

Примечание: в этом примере, добавление мобильных стилей не так много. Поэтому эти стили вы добавляете в конце файла style.css. Если же у вас стилей будет много, то целесообразней создать отдельный файл и подключить его отдельно.

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

В моём примере, следующая переломная тачка это 480рх. При такой ширине сайтбар выглядит как-то узко и не доделано. Поэтому следующий медиазапрос будет на этой точке и выглядит он так:

Внимание! обращаю ваше внимание, что каждый последующий медиазапрос наследует свойства css предыдущего. То есть в моём примере если я сделал эластичными изображения на точке 760рх, то на 480рх этого делать не надо.

Вот и всё адаптация данного шаблона закончена. Конечно, я бы ещё многое передела, заменил бы изображения, участвующие в дизайне на стили css, переписал некоторые основные стили и так далее. Но это уже не относится к адаптации шаблона.

А теперь давайте посмотрим, что Гугл говорит нам по поводу нашего шаблона. Проверим до и после наших работ.

Проверка адаптации шаблона в PageSpeed Insights

Итак, открываем сервис PageSpeed Insights, вводим url сайта и проверяем.

Шаблон до адаптации:

Результат налицо. Думаю, комментировать не стоит. Удобство пользователя 67 их 100.

Шаблон после адаптации:

Как видите, показатель удобства для пользователей поднялся с 67 до 94. А если ещё адаптировать меню, то этот показатель вырастет до 99-100.

Вот так вот друзья можно адаптировать шаблон WordPress. Разумеется, со своими шаблонами вам придётся потрудиться, но дело того стоит.

Также посмотрите видеоурок, в нём я кое, какие моменты разбираю более подробно.

А у меня на этом всё. Желаю вам успешной адаптации ваших шаблонов и до встречи в новых статьях и видеоуроках.

Похожие статьи по теме:

Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:

Подписывайтесь на новые статьи!

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

127 коммент. к статье “ Адаптивный дизайн сайта – как адаптировать шаблон WordPress ”

Спасибо что обучили. ))

Всегда рад помочь ��

Неплохо описано. Как раз на неделе планировал переверстать свой сайт под Bootstrap.

А теперь вы знаете, как сделать адаптивный шаблон без сторонних сервисов и их внешних ссылок �� Желаю успешного внедрения!

Привет. Прям не статья, а целое руководство! ��
Думал, что Google давно уже ввел данный фактор ранжирования, а оказалось, что они пока только эксперименты проводили!
А мне еще нужно в своем подправить небольшие косяки… =)

Влад, привет. Спасибо за похвалу! ��
Небольшие косяки — это мелочи. В целом у тебя отличный шаблон, дополнив несколько медиазапросов и всё будет отлично. И начать следует с топа комментароров, этот блок выезжает за видимые границы. И Гугл обязательно укажет это как недостаток. Я бы наверное перенёс этот блок в подвал. Ну, это лично моё мнение ��

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

Google как раз и светит: «Контент шире экрана + Ссылки слишком близко друг к другу». Вчера немного смотрел, а на Топ как-то внимание и не обратил — спасибо!

Пожалуйста, рад был помочь!

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

Вася, привет. Ты прав, — работа не простая, но делать её нужно. Ведь уже не только Гугл, но и Бинг выделяю сайты для мобильных устройств в результатах мобильных запросов. А следовательно и остальные поисковики сделаю тоже самое.

ДОброго времени суток!
скажите пожалуйста. А сколько будет стоить адаптация моего сайта (на ВП) под моб. устройства? Если конечно вы согласитесь это делать. (Спросил на всякий случай, мало ли)
Лично у меня не получается..Целый день потратил зря.

Здравствуйте, Сергей. В вашем шаблоне на первый взгляд, просматриваются определённые трудности: фоновое изображение шапки, достаточно объёмное меню, не адаптированные блоки контекстной рекламы, социальные кнопки, форма комментариев, баннеры и некоторые мелочи, которые потребуют тоже времени.
Такая работа вам обойдётся в 2500 — 5000 рублей. Всё зависит от того, как вы решите реализовать меню, основные блоки сайта и контекстную рекламу.
Честно говоря, за эту цену вы можете купить современный, адаптивный шаблон премиум класса.

Максим, возник вопрос. Можно ли вывести деньги с Адсенсе на ВебМонеу? Мало инфы в интернете, а то говорят там какие-то чеки с америки надо ждать.

Вань, привет. Можно и на вебмани, но не напрямую а через рапиду. Если не определить способ вывода, то по умолчанию это чек. А с его обналичиванием много трудностей.

Я чек не хочу, посмотрю потом, так у меня 1$ на баланде в Аденс. Я его года два назад тому ставил на сайт, чёт толку не было — ну там моя вина, не умел ничего) Сейчас чуть ума прибавилось, попробую поставить, может накоплю на бибику))

Один бакс — это начало. Способ вывода можно настроить, когда будет достигнут порог в 10$, а первый платёж будет после достижения 100$. Так что стать блоки и экспериментируй. Формат блоков лучше сразу выбирай — адаптивный.

Поставил уже, у меня посещалка 150-200, будет ли от рекламы толк? У тебя за месяц сколько с Аденса?

Ещё месяц не прошел, как я поставил рекламу, результат очень скромный — около 7$. Нужно ещё анализировать и экспериментировать с размещением блоков. У меня пока времени нет. Буду делать по мере свободного времени.

Бродил сегодня по блогам — у новичков, значит, стоят партнёрки (обычно весь видждет забит), а вот крупнячки в основном АДенс — причём ставят в начале и в конце статьи, видимо хороший заработок от него. Замечаю, что чем меньше рекламы и больше естественных внутренних ссылок, тем выше посещалка. Над ПФ, значит, нужно работать, а не о рекламе думать))

Разумеется, в первую очередь сайт нужно развивать, а доход от рекламы будет! ��

Максим, не могли бы вы подсказать в чем может быть быть ошибка. Не получается адаптировать фотографии внутри статьи. max-width:100%; height: auto — не помогают. Шаблон изначально адаптивный, но на предыдущей теме фото были намного шире. Теперь никак не хотят под новую тему подстраиваться.

Здравствуйте, Татьяна. Откройте свой файл style.css найдите 1202 строчку, там будут стили для блока с классом .wp-caption и изображения внутри него. Выглядит это так:
.wp-caption img <
border-color: #EEE;
padding: 0px;
max-width: 640px;
height: auto;
Измените параметр ширины на width: 100%; И будут все изображения адаптироваться.

Максим, спасибо. Помогло.

Очень рад, Татьяна. Удачи вам!

А если внутренние контейнеры в процентах заданы, как тогда расчитывать?

Здравствуйте, Денис. Если внутренние блоки уже переведены в проценты, — значит половина дела сделана, нужно внешние блоки указать как 100%.
Чтобы проверить правильность указанных процентов, можно воспользоваться следующим расчётом: родительский блок (в пикселях) умножить на проценты дочернего блока (переведённые в десятичное выражение).
Пример:
Родительский блок 760рх;
Дочерний блок 25%;
760*0,25=190 или 760*25/100=190 — ширина дочернего блока в пикселях
Вот как то так!

Спасибо за статью, но что-то не получается заставить распознавать адаптацию на мобильном устройстве.
Пример, если родительский блок 950px (ширина сайта — содержащего информацию), @media screen and (max-width: 950px) — но все современные мобильные устройства с гораздо большим разрешением экрана.

Например — разрешение экрана ipad mini retina 2048 х 1536. и это не позволяет планшету распознать адаптацию.

Возможно я что-то упустил — но есть ли какие-то более конкретные медиа-запросы, позволяющие определять что это мобильное устройство — не только по разрешению экрана?

Добрый день, Иван. Медиазапросы ориентированы на ширину экрана браузера или устройства. А вот прописывать их можно, по разному:
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) <стили оформления>— ориентирован и на ширину браузера и на экран устройства.
@media (max-width: 49.938em) <стили оформления>— эквивалент 800рх.
@media (min-width: 800рх) and (max-width: 950рх) <стили оформления>— стили от 800 до 950 пикселей. Таким образом можно группировать экраны мобильных устройств.
На современных планшетах, сайт как правило будет отображаться в полноразмерном виде. А для других мобильных устройств будут применены стили из медиазапросов.
Здесь тоже можете посмотреть примеры использования медиазапросов http://1zaicev.ru/ispolzuem-mediazaprosy-css3-dlya-adaptivnoj-vyorstki-shablona/ Удачи!

Скажите, в принципе все ясно, но не понял с наследованием медиазапросов. Например, у вас указано в примере первого (когда 760 px) медиазапроса: #content , а во втором примере (переломная точка 480px) уже: #content , но ведь в первом случае контент уже сделан эластичным, зачем тогда опять его делать?

И еще вопрос. В каждой переломной точке можно создавать медиазапрос для того, что ломается (шрифт, например), а остальное не трогать?

Янис, всё верно, — медиазапросы наследуют свойства от большего к меньшему. Но, подключение свойств зависит от конкретного шаблона. В моём примере, как раз нужно было изменить блок контента, чтобы он гармонично смотрелся на маленьком экране. То есть если бы я не прописал ширину 96% для точки 480 пикселей, то блок с контентом занимал бы не всё пространство на экране.
Таким образом, какие-то свойства не прописываются (они наследуются из предыдущего запроса), а какие-то меняются или пишутся новые свойства.
По поводу второго вопроса, да можно создавать медиазапросы для элементов, которые ломают дизайн. Только соблюдайте последовательность. От большего к меньшему.

Еще вот нашел интересный метатег — https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=ru, как вам такое? Но тут уже стили не применишь, я так понял?

Почему не применишь? Всё также, адаптивные параметры через медиазапросы. Просто акцент делается на добавление мета тега viewport. При наличии его, даже без медиазапросов, будет предпринята попытка адаптировать контент. Но, без медиазапросов и стилей не обойтись.

Это да, пробовал его ставить, все равно через проверку Гугла на адаптацию выдает:
1. Контент шире экрана.
2. Ссылки стоят близко друг к другу.
То есть надо ширину контента вместе со шрифтами уменьшать, а ссылки — это видать меню навигации?

Надо обратить внимание, возможно не весь контент выходит за пределы. Бывает так, что один элемент выходит за пределы и уже будет предупреждение. Тут нужно быть внимательным. А по поводу ссылок, то это активные пункты меню и другие элементы, на которые могут нажимать мобильные пользователи. Для них тоже нужно создавать отдельные стили.

Сможете подсказать в таком моменте. Буду очень признателен. Прописал для шапки сайта на движке SMF ) такие стили:
#header
<
background: url(../images/theme/картинка.png) no-repeat;
padding-left: 0px;
>
#header div.frame
<
background: url(../images/theme/картинка.png) no-repeat;
padding: 0px 0px 0 0;
>
Что только ни делал, чтобы шапка пропорционально растягивалась по горизонтали на больших экранах или равномерно уменьшалась на малых, то обрезает ее — то не дотягивает. И вроде же мелочь какая-то, да пока не найду никак решение?
Особенно долго бился с этим тупым классом frame, что-то вот чувствую не то там. Посередине — это логотип, а серый фон шапки и зеленый на меню (это все отдельные картинки).

Нужно создать медиазапрос для точки 960 пикселей, где для изображений применить свойство max-width:100%; а также отменить паддинг, который для обычного дизайна задан в строке 1368 index.css padding: 12px 170px; Его нужно сбросить на ноль. Именно из-за него вся трудность. Удачи.

О, спасибо — буду сейчас пробовать. Дак ведь, если убрать отступы — логотип же сместится ниже или выше наверное, хотя text-align: center прописал?

Еще такой важный момент — все сейчас перепробовал для изменения окна браузера хром (винда 8), но нигде не нашел датчики пикселей, чтобы определять точки слома дизайна, как у вас на скрине вверху?

И последний момент: что если указать в медиазапросе изначально #content — будет тогда пропорционально изменяться ширина и высота блока с контентом, включая шрифты?

Внутренний способ нужно убрать только при прохождении точки в 960px. Для остальных размеров менять ничего не надо.
В хроме начнёт отображаться размер экрана, если вы включите панель разработчика (F12).
По поводу контента, то нужно смотреть как задана ширина родительского блока. От этого зависит, как будет видоизменяться внутренние блоки.

Здравствуйте, Максим Зайцев! Понравился ваш сайт, нашел для себя много нового и интересного, что хотелось бы реализовать у себя на сайте! Первым делом я взялся за адаптацию сайта под мобильный вид по вашей статье.
Но как всегда у новичков в блогостроении возникают трудности. Применил предложенными вами медиазапросы, немного переименовал блоки, но что-то все криво встало. Кривой сайдбар вылезает на верх, фотографии и сам контент не хочет адаптироваться… Вы не могли бы заглянуть ко мне на блог и подсказать в чем может быть загвоздка?
Заранее благодарен за оказанную помощь!

Здравствуйте, Максим. У вас придётся не только адаптировать шаблон, но ещё и переделать структуру html каркаса. Дело в том, что сайтбар идёт выше контента. За счёт этого, он оказывается выше при срабатывании медиазапроса. Ну и конечно же нужно поработать со стилями. Так для инетнификатора #maincol при точке излома 1000рх нужно задать ширину в 70%, а для #sidebar-right 28%. Также у сайтбара настроен внешний отступ margin-left:71.71% его следует убрать. На следующей точке 700рх, нужно контент сделать 100% и убрать обтекание по левому краю float:left . В общем нужно работать в этом направлении. Желаю удачи!

Максим Зайцев, благодарю за скорый ответ и за то, что уделили моему сайту свое время! Я уже подыскиваю новый шаблон… В этот вложил очень много времени и своих сил, но теперь понимаю, что у него структура не одна из лучших и наверное будет самый лучший вариант это найти новую тему. Только правильный шаблон найти не так просто. Я на распутье, думаю найти самую простую тему, переделать её под себя и адаптировать или уже готовую адаптированную найти… Или все же постараться эту тему довести до ума… Я просто знаю, если за что-то возьмешься, то другое нужно будет переделывать, так как это все завязано друг с другом. Как Вы считаете не сложно будет переделать структуру? Еще раз спасибо!

Мне ваш шаблон симпатичен. Поэтому я бы прежде всего попытался его адаптировать. Сделать это будет не легко, скажу сразу. Потрудится придётся и со структурой и с меню и много новых стилей создать.
Если же менять шаблон, то сегодня они уже все адаптивные и ориентироваться следует на структуру построения. Потому как, если вы выберите шаблон на API ключах, до дорабатывать его без знания php будет крайне сложно. Но хороших адаптивных шаблонов достаточно много.

помогите адаптировать тему WordPress travel-blogger под телефоны .
все перепробовал не получается.
если кто умеет напишите я скину код.
вот тема целиком:
https://yadi.sk/d/1mI-CxCmgyyMa

Слава, вы бы просто указали ссылку вашего сайта, тогда было бы проще подсказать где, что подправить.

Максим, благодарю за дельный совет и за положительный отзыв о моем шаблоне! Буду мучать свою тему, так как делал её сам и без плагинов. Воссоздать похожую в новом шаблоне будет очень трудоемко, лучше потихоньку эту до ума доведу ��
У Вас подсмотрел расположение формы комментирования и реализовал у себя, только в конце всех комментариев сделал ссылку-якорь на форму комментирования. Так мне кажется посетителям будет удобней оставить комментарий после прочтения других комментариев к статье.
Сейчас прочел о микроразметке и понимаю, что от всего, что нужно еще сделать на моем сайте, могут мозги поехать))
Хотел бы вернуться к теме адаптации. Как на ваш взгляд, в чем может быть причина того, что у меня на сайте не адаптируются картинке в статье? (Пока «кривую» мобильную версию с сайта убрал).

Максим, тем более, если вы сами работали над шаблоном, вам будет легче разобраться и сделать его адаптивным. Первым делом нужно перенести блок сайтбара под контент в html структуре, а далее использую медиазапросы настраивать стили.
Что касается изображений, то для них нужно задать стиль max-width:100%; При изменении размеров экрана и соответственно родительского контейнера с изображениями, последние будут меняться в зависимости от размеров родителя. При этом родительский контейнер родителя в медиазапросе тоже должен быть переведён в проценты.
Делайте резервную копию и пробуйте, записывайте действия походу и всё получится. Желаю удачи!

Максим, благодарю за скорый ответ! От не совсем изученных понятий и определений употребленных в вашем комментарии становиться страшно ��
Не хотел показаться глупым, простые вопросы задавать и тратить ваше время, начал искать в интернете по запросу «html структура в wordpress» и сравнивать свои файлы темы. Просматривал свои файлы темы и сравнивал с примерами в интернете, но не смог сложить пазл в голове.
Попрошу у вас на правах ликбеза немного пояснить по моим вопросам. Возможно, новички (кем я и себя считаю) с похожей ситуацией прочтут комментарии и решат похожую проблему.
Я свою тему полностью перебрал под себя, но не делал её с нуля. Возможно, если разбирался, то изначально смотрел на структуру сайта при выборе темы.
Я как понял в HTML заворачивается весь сайт, внутри него уже помещаются все теги всех файлов темы. У меня HTML открывается (начинается) в файле header.php и закрывается (заканчивается) в файле footer.php. Уже в футоре стоят закрывающие теги /body /html. В файле index.php вызываются уже все части темы это heade, content, s > Со стилизацией я думаю разберусь, а вот что касается этих СТРУХТУР ХТМЛэ я не разберусь �� Этот неукротимый сайдбар не хочет при мобильном виде быть внизу под контентом и все портит. Простые вещи, но из-за нехватки знания, вот такая вот беда. Я самоучка и все делалось почти методом «тыка», Везде описано все в общих чертах, а к частным случаям порой нужно применять силу космоса, чтобы все заработало.
Если у меня не сложный случай, имеет простой ответ как переместить сайдбар в структуру и у вас не займет много времени просмотреть в браузере структуру, то хотел бы вас как человека знающего попросить, обучить своим веб-премудростям и подсказать, что нужно делать.

Максим, структура шаблонов WP такова, что все основные элементы шаблона имеют отдельный файл. А файл index.php объединяет их вместе. Путём подключения через php, где тот же сайтбар подключается так: ?php get_sidebar(); ?> (в начале треугольная скобка пропущена, иначе код на моём блоге не отобразится, но в исходном коде сайта скобка присутствует).
Посмотрите внимательно на свой файл index.php и обратите внимание на последовательность подключение основных блоков. В вашем случае первым подключается сайтбар, а после контент. Вам нужно код вывода сайтбара вырезать и вставить ниже контента. Только будьте аккуратны, соблюдайте все скобки и кавычки. И делайте резервные копии перед экспериментами.
Таким образом вы измените порядок вывода блоков в шаблоне.
Так вот, если необходимо внести изменения в основной блок шаблона (шапка, контент, подвал), то измерения вносятся в соответствующие файлы. Но, это вы и так знаете.
Надеюсь, объяснил понятно. Но, в любом случае, если будут вопросы пишите.

Максим, спасибо большое, все стало ясно. С помощью Notepad++ выяснил, что в файле index где что /div-вами закрывается. После хейдера идет сразу сайдбар. Начал вызов сайдбара переставлять после контента и перед футером, но сайдбар встраивается либо в футер, либо в область контента. Вставлял после вызова контента div > А можно ли как-то еще сайдбар вызвать, например, вне файла index.php? Но наверное это строгое условие появления самого сайдбара на сайте… Может у меня зависимые от чего-то и не самостоятельные сами контейнера сайдбара, футера, хейдера или контента, что на них так зависимы друг от друга?
Не думаю, что разработчик данного шаблона что-то не так сделал, наверное он преследовал какую-то цель или основывался на чем-то раз такое построение структуры сделал… У вас есть какие-нибудь еще предположения, может есть другой способ вывода элементов сайта?
Я понимаю, возможно Вы не сталкивались с такими случаями на своей практике и мне сложно изъяснятся правильными терминами, но в любом случае большое человеческое спасибо за внимание моему вопросу!

Максим, ни какие блоки ДИВ удалять не нужно. Откройте исходный код вашего шаблона Ctrl+U, скопируйте код в Notepad++ и посмотрите на структуру. Обратите внимание на то, какой блок что содержит и что в себя включает. У вас вложенность блоков ДИВ такова: universe > wrapper > wrap > sidebar-right и content. Блок footer идёт ниже, отдельно. Кстати, обратите внимание на отсутствие переноса строки после закрытия блока с сайтбаром — лучше каждый блок начинать с новой строки, так легче разобраться.
Вам нужно всё содержимое sidebar-right перенести под content, причём сделать это нужно в index.php. Главное разберитесь с блоками ДИВ, что в каком блоке содержится и где эти блоки закрываются. Как только с этим разберётесь и сразу перенесете сайтбар. Удачи!

Максим, спасибо! У меня три ДИВа висели в воздухе, то есть они видимо открываются в предыдущем файле, возможно в хейдере, а в в файле индекс закрываются. Просмотрел в Notepad++, эти три дива не подсвечиваются никак, то есть не задействованы в данном файле, а когда удалил их, то футер, который был на всю ширину экрана, стал по ширине страницы контента, а все остальное осталось прежнем. Не суть, видимо у меня такая причудливая тема.
Извините, что отнял у вас время на решения моих вопросов. Благодаря вам теперь знаю ориентир — буду разбираться! ��

Лишних ДИВов в исходном коде, вашей темы, нет. Вы правильно подметили, что начало в хедере, а окончание в индексе. Такое тоже бывает. Продолжайте, вы на правильном пути! ��

Максим, просмотрел всю тему свою и пришел к выводу, что она не стандартная. Дело в том, что три контейнера, которые начинаются в хейдере, а это universe, wrapper, wrap заканчиваются ДИВами в каждом файле темы. Три лишних закрывающихся ДИВа есть в каждом файле. Это нужно для того, чтобы отображать Шапку сайта и навигацию над контентом… Как матрешка, вложения или древовидные комментарии.
Чтобы не подгружать каждый раз файлы хейдера навигацию и другие элементы, они видимо склеиваются этими тремя ДИВами… Вариант либо убирать дивы, а вместе с тем убрать в шапке universe, wrapper, wrap. Потом заново делать навигацию, шапку и элементы страницы, либо дабавить в каждый файл начало universe, wrapper, wrap, чтобы ДИВы закрылись.
Вот я сделал описанный последний вариант. Сайт начал дольше погружаться.
Работает также и все отображается за исключением скорости.
Начал экспериментировать, но перемещения под контент сайдбар успеха не принес.
Вот такие вот дела. Ближайшую неделю не смогу заниматься сайтом так как уезжаю, оставлю пока все по прежнему, а когда вернусь, скорее всего искать буду новую тему с более удачной структурой. К новой потом постепенно буду прикручивать функционал старой темы. Не получилось с данным косяком справится, видимо к некоторым темам адаптация медиазапросами не подходит.
К сожалению, я в числе пользователей неудачных по своей структуре тем.
Большое человеческое спасибо за стремление помочь, причем все толково и грамотно было объяснено, но изначальная структура темы подвела. Надеюсь, что с новой темой сложиться все иначе.
Вернусь и отпишусь, когда все получится. Благодарю за помощь! ��

Максим, очень жаль, что не получилось. Мне и самому стало интересно решить эту задачку. Вы можете скинуть архив вашей темы мне на почту. Я поковыряюсь на досуге. Возможно и найду решение. А нет, так смените тему ��

Приветствую, Максим. Проверял свой блог на скорость загрузки для мобильных (63/100 — низкая), она меня давно уже мучает. Пишет постоянно — используйте кеш браузера, а ведь у меня стоит плагин WP Super Cache, все же работает и настроено, что ему так не нравится все этому Гуглу, не подскажешь плиз?

А еще в настройках этого плагина стоит такая мудатень (окно желтое), что пишет — не могу автоматически обновить правила mod_rewrite в файле htaccess, откройте его права доступа для записи или установите эти правила вручную. Смотрю htaccess в корне сайта — все эти рекомендуемые правила установлены (еще раньше их ставил) и я опять закрыл права на запись. Все верно же, чего это окно не исчезает, ведь нельзя же держать всегда htacess открытым для записи, или для владельца открыть их? Кстати, есть еще папка cache, там у меня открыты права на запись для владельца.

Для Гугла вообще трудно угодить. Что касается файла htaccess, то у него должны быть права 644, то есть владелец имеет возможности чтения и записи, остальные только чтение. Я в качестве кэша использую W3 Total Cache плагин. Он мне больше нравится. Ещё хорошо оптимизировать изображения, css, html и js.

Вот такое мне выдает Гугл:
«Используйте кеш браузера.
Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.»

Ха, у меня на htaccess стоят 444, вот тут наверное и зарыта собака… Поэтому постоянно требует прав для записи, а я как-то позабыл о некоторых файлах вообще, времени в обрез, то то надо, то это надо, а потом с головы все вылетает.

Поздравляю с тИЦ 10, я сегодня тоже наконец-то получил! Надо отметить, хахх…

Спасибо, и я тебя поздравляю с получением тИЦ �� Точно надо отметить такое событие!

Максим, меня тут заинтересовала новая тема — кэширование, Гугл, так сказать навеял новых мыслей своими ускорениями pagespeed. У меня на хостинге стоит система Memcached, многие пишут, что эффективная вещь. Вот на мой форум она подключается прямо в настройках SMF, в вордпресс уже надо как-то иначе. Что скажешь об этом Memcached?

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

Почему на первых порах, ведь если посещаемость увеличится, то наоборот нужно кэширование улучшать, запросы же пойдут от кучи пользователей?

Да, чем больше посетителей — тем больше запросов. И кэширование необходимо. Но, так как мы используем виртуальный хостинг и на сервере вместе с нашим сайтом ещё сотни или тысячи, возникает обратная ситуация. Memcached работает по принципу 1 Мб кэша = 1 Мб ОЗУ, следовательно закэшировав 200 Мб отнимаем этот объём из оперативки. А это тоже не хорошо.
Я общался по поводу кэширования с техподдержкой моего хостинга, так они дали мне понять, что на всех серверах настроено кэширование и при посещаемости до 5000 в сутки мене нечего об этом беспокоится. Ощутимо ускорить загрузку сайта позволяет оптимизация изображений и кэширование в браузере.
Я тоже экспериментирую с разными вариантами оптимизации и ускорения скорости загрузки, но пока самый большой тормоз это изображения.

Дак вот это кэширование в браузере и не дает покоя, его первым и главным мне гугл выдает — исправить обязательно. Я так понял плагин кэширует все, да не все. Смотрел что надо исправить, и там вот такое и подобное:
zarabotatj-v-internete.r…dvanced-categories-widget/css/widget.css (24 часа)
zarabotatj-v-internete.r…ed-categories-widget/js/jquery.widget.js (24 часа)
zarabotatj-v-internete.r…s/contact-form-7/includes/css/styles.css (24 часа)
zarabotatj-v-internete.r…ct-form-7/includes/js/jquery.form.min.js (24 часа)
zarabotatj-v-internete.r…ns/contact-form-7/includes/js/scripts.js (24 часа)
Читал в интернете, некоторые вебмастера удаляют плагин и ставят кэширование в htaccess. Что ты посоветуешь, чтобы закэшировать вышеперечисленное и им подобное? Вот это главное бы исправить, а потом уже изображениями можно заняться.

Я использую плагин W3 Total Cache, который отлично справляется с кэшированием в барузере. Хотя Гугл периодически ругается, я это связываю с временем анализа и занятостью серверов. Попробуй этот плагин, может поможет.

Максим, немного не по теме, так как не нашел у тебя соответствующей статьи. Хотел спросить, как думаешь, засекают ли поисковики, если к примеру добавить сайт (площадку) в миралинкс или гогетлинкс?

Само добавление сайта в сервисы нет. А вот покупные ссылки однозначно. Причём не важно, проиндексирована статья или нет.

Покупные — имеешь ввиду, если я покупаю ссылку, ведущую на мой сайт с какого-нибудь внешнего ресурса?

Да, именно так. Поисковики умеют отличать покупные ссылки от естественных. И если таких будет слишком много, в разы больше естественных, то накладывают фильтр.

Ну это да, особенно, когда сейчас «минусинск» Яндекс запустил…

Максим, спасибо за предоставленную возможность! ��
Я подготовлю файл темы и вышлю вам на почту.

Благодарю за проделанную работу — все работает! Теперь постараюсь «допелить» свою тему и избавиться от косяков. Спасибо большое за отзывчивость! Максим, успехов и процветание твоему сайту, постоянного пополнения в копилку знаний и умений! ��

Спасибо, тёска! �� Работы с допиливанием будет много, но если делать это всё постепенно, то всё получится. Если будут вопросы, всегда обращайся. Удачи тебе и твоему сайту!

Здравствуйте! Спасибо за Вашу статью. Пробовал, но к сожалению получилось не все. Только шапка становится резиновая, а с остальным никак. Сколько Вы возьмете за адаптацию? Сайт http://жива-курорт.рф

Здравствуйте, Артем. То что шапка адаптируется это уже хорошо, значит и остальное можно адаптировать. К сожалению у меня сейчас нет времени на сторонние проекты. Небольшое окно будет в августе. Так что если будет актуально, то пишите мне на почту: maksim@1zaicev.ru.

Добрый день, подскажите ,где можно скачать адаптивный шаблон с 3 вертикальными колонками, везде где смоьрю всегда две

Денис, вы это можете сделать прямо из административной панели WP, в разделе «Внешний вид» — «Темы» — «Добавить новую». Там же есть фильтр характеристик, где можно выбрать адаптивный дизайн и три колонки.
К тому же здесь будут представлены лишь темы соответствующие стандартам WP. Удачи!

Максим привет! Очень дельные уроки! Но увы у меня ничего не вышло, хотелось бы попросить твоей помощи) Конечно могу сделать отдельно мобильную версию для сайта, но хочется адаптировать эту без плагинов, т.к. плагин адаптирует для смартфонов. Как только открываю сайт на айпаде, сразу становится все не в лучше виде.

Артём, привет. Что не получается? Чем я могу помочь?

Максим привет! Можно вашей помощи попросить?

62 полезных инструмента для адаптивного дизайна (Responsive web design)

UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It&raquo (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

Chris Coyier и Scott Jehl экспериментируют с техниками адаптивного дизайна для корректного отображения таблиц (&lttable&gt). Таблицы могут быть широкими, и от этого никуда не деться. Можно уменьшить масштаб и увидеть всю таблицу целиком, но тогда размер текста будет слишком мал для чтения. Можно увеличить масштаб, чтобы можно было прочесть, но тогда вам придется прокручивать таблицу по вертикали и горизонтали, чтобы просмотреть ее полностью.

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

3. Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens
Адаптивное меню: Преобразование меню в выпадающий список на небольших экранах

Chris Coyier описывает технику преобразования длинных рядов ссылок в выпадающие пункты меню на малых разрешениях. Когда пользователь просматривает сайт на маленьком экране и нажимает на выпадающее меню, он видит большие и красивые пункты меню, которые легко выбрать. Очевидно это гораздо лучше, чем отображение крошечной ссылки, по которой даже трудно кликнуть.

4. CSS Media Queries and Using Available Space
CSS Media Queries и рациональное использование доступного места

В руководстве описано, как при различных разрешениях экрана с помощью Media Queries вносить небольшие изменения во внешний вид сайта. Например, в боковой колонке вам необходимо указать e-mail. На малых разрешениях e-mail можно дополнить иконкой, на больших — написать почту текстом, на еще больших совместить и то, и другое и так далее.

Адаптивные изображения и видео

5. Fluid Images
Резиновые изображения (масштабирование средствами браузера)

Резиновые изображения — одна из центральных тем в адаптивном веб-дизайне. В статье Ethan Marcotte приведен подробный обзор создания их с помощью классического фрагмента кода img , а также все необходимые детали, необходимые для началы работы.

Альтернативный подход к резиновым изображениям принадлежит Filament Group. Их метод позволяет разработчикам создавать адаптивные макеты, которые подают разные размеры изображения для различных разрешений. Фактически, это позволяет подавать оптимизированные под мобильные устройства изображения для небольших экранов и их версии в высоком разрешении для больших экранов.

Метод, разработанный Filament Group, использует .htaccess и JavaScript файлы для подачи изображений разных размеров исходя из ширины экрана посетителя. Альтернативным решением является использование таких инструментов, как TinySrc (инструмент является теперь частью Sencha).

7. Responsive Images and Context-Aware Image Sizing
Адаптивные изображения и контекстно-зависимые изменения размеров изображений

Craig Russell разработал метод, который использует скрипт на стороне сервера (на PHP), для подачи изображений различных разрешений и объемов. Идея состоит в том, что в PHP-скрипте используется массив, в который вносятся файлы изображений и их относительные масштабы в процентах. Атрибут SRC тега IMG должен быть установлен таким образом, чтобы получить ID запрашиваемого изображения, но без указания масштаба.

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

Harry Roberts подал идею использовать комбинацию DIV и IMG для выбора наиболее подходящего для текущего устройста изображения. У родительского DIV большое изображение хранится в background-image, а в IMG — версия для мобильных устройств. С помощью Media Queries будет выбрано маленькое изображение из IMG или большое из фона DIV:

9. Responsive Images Using CSS3
Адаптивные изображения средствами CSS

Метод Nicolas Gallagher опирается на использование Media Queries (ничего себе! — прим. переводчика), свойства content и выражения attr(). К сожалению, этот метод интересен только с точки зрения идеи — он не работает ни в одном из существующих на данный момент браузеров.

10. Responsive Images Using Cookies
Адаптивные изображения с помощью Cookies

Keith Clark предлагает использовать cookies для подачи уменьшенных изображений мобильным пользователям. Каждый раз, когда браузер запрашивает файл с сервера, он автоматически передает cookies вместе с запросом. Если мы используем JavaScript для создания cookies с информацией о размерах текущего экрана, то все последующие запросы браузера будут отдавать эти данные на сервер.

Другими словами, сервер будет знать размер экрана устройства еще до того, как браузер начнет загружать изображения из html. Это можно использовать для того, чтобы уменьшать размеры изображений на стороне сервера.

11. Responsive Images With ExpressionEngine
Адаптивные изображения с помощью ExpressionEngine

John Faulds представил метод для создания адаптивных изображений, существенно отличающийся от приведенных выше. С помощью user agent определяется, является ли устройство мобильным или нет. По результатам проверки создается глобальная переменная, которая используется в шаблонах для изменения размера изображения на выходе. Получается, что только одно изображение посылается в браузер, но для мобильных посетителей оно одно, а для посетителей с десктопа уже другое.

Nick La на основе применения max-width: 100% к видео представляет метод, который делает HTML5 видео, object- и iframe-встроенные видео адаптивными. Что касается последнего, метод очень прост. Просто вставьте упомянутый код в блок DIV и укажите padding-bottom от 50% до 60%. А для дочерних элементов (таких как iframe, object embed) — свойства width и height равными 100% плюс абсолютно спозиционируйте. Это заставит встроенные элементы расширяться во всю ширину автоматически. Первоначально данный метод предложил Thierry Koblentz.

Краткое руководство по изменению размеров изображения в зависимости от объема текста.

Адаптивные письма электронной почты

14. Optimizing Your Email for Mobile Devices With the Media Query
Оптимизация электронной почты для мобильных устройств с помощью Media Queries

Для просмотра больших писем часто необходима горизонтальная прокрутка, особенно когда к письму приложено большое изображение. В данном исследовании Campaign Monitor объясняет, как электронные письма могут быть оптимизированы для мобильных устройств с помощью Media Queries и предложено несколько полезных методов и фрагментов кода для использования на практике.

15. Responsive Design for Email, the Largest Mobile Audience
Адаптивный дизайн для электронной почты, инструмента с самым большим количеством мобильной аудитории

В статье приведен интересный опыт и размышления команды Beanstalk по применению Media Queries для создания mobile friendly (дружелюбной к пользователям) мобильной почты.

В этой статье рассматривается использование Media Queries под конкретные мобильные почтовые клиенты.

17. Guide to CSS Support in Email
Руководство по поддержке CSS почтовыми клиентами

Создание почты на HTML, которая отображалась бы одинаково корректно во всех основных почтовых клиентах, может быть крайне долгим и трудозатратным. Поддержка даже простого CSS значительно отличается между клиентами и даже между разными версиями одного и того же клиента.

Campaign Monitor собрали руководство, чтобы сэкономить ваше время и нервы на выяснение всех этих деталей. Протестированное на 24 различных почтовых клиентах, оно охватывает все популярные приложения электронной почты.

Инструменты для адаптивного веб-дизайна

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

Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.

Css3-mediaqueries-js — это другой скрипт, который позволяет работать CSS3 Media Queries в IE 5+, Safari 2 и Firefox 1+.

Этот инструмент представляет собой веб-редактор CSS вашего сайта с функцией автосохранения и просмотра результата в реальном времен. WebPutty поддерживает SCSS, Sass, LESS и Compass. Чтобы воспользоваться этим инструментом, просто вставьте ссылку перед закрывающим тегом &lt/head&gt на вашем сайте.

При создании адаптивного веб-дизайна приходится работать с большим количеством Media Queries. Johan Brook делится небольшим секретом о том, как узнать, какое именно правило Media Queries отрабатывает в данный момент. Статья также содержит mixin для разработчиков, использующих Sass.

Этот инструмент предназначен для всех, кому нужен быстрый и простой способ проверить созданный сайт при различной ширине экрана. Проверить сайт можно как онлайн, так и скачав код с Github.

JavaScript Andy Hume позволяет применять различные классы к HTML элементам на основе их ширины.

23. Resize My Browser
Изменяйте размер вашего браузера

Если вам нужно, чтобы браузер отображал контент при определенном размере окна, то это — то, что вам нужно. Просто нажмите на размер, который необходим, и посмотрите, как выглядит ваш сайт при этом размере. Не работает в Chrome и Опера из-за проблем с событием «ResizeTo».

Удобный инструмент, который показывает, какие Media Queries активны при текущей ширине браузера. Перетащите его на панель закладок и в случае необходимости просто запустите.

Используйте информацию из этого маленького интрумента для создания адаптивного сайта.

Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны (BlackBerry Torch, Google Nexus One,iPhone, Motorola Droid), планшеты (BlackBerry Playbook, iPad,Samsung Galaxy Tab, Dell Streak), мониторы или телевизоры (720p, 1080p).

Вы можете просмотреть результаты проектирования прямо в браузере и использовать привычные вам средства разработки, такие как Firebug. Также попробуйте альтернативный инструмент ScreenFly.

Harry Roberts разработал калькулятор и генератор резиновой сетки. Просто укажите количество столбцов, ширину одного столбца, отступ, и инструмент сгенерирует резиновую сетку CSS по вашим параметрам. Очень удобно!

28. Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko
Бесплатная HTML5/CSS3 WordPress 3.1 тема с адаптивным макетом: Yoko

Yoko — современным и гибкая WordPress тема. Благодаря адаптивному макету на основе CSS3 Media Queries тема настраивается под различные размеры экрана. Дизайн оптимизирован для больших экранов десктопов, планшетов и небольших экранов смартфонов. Чтобы придать сайту индивидуальность, вы можете использовать новые форматы постов (например, галереи, боковые колонки или цитаты). Выберите свой логотип и изображение в шапке, настройте фон и цвет ссылок.

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

Макеты адаптивного дизайна

Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.

Это настраиваемые шаблоны для создания многофункциональных, высокопроизводительных мобильных веб-приложений. Вы получите кроссбраузерность для смартфонов класса А и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile. А также большое количество различных оптимизаций для мобильных браузеров.

Skeleton — это небольшая коллекция CSS и JavaScript файлов, которые помогут вам в быстрой разработке сайтов, одинаково удобных на любом экране, будь это 17-дюймовый ноутбук или iPhone. Skeleton представляет собой хорошо организованную и спроектированную сетку, которая адаптивна вплоть до мобильного телефона. В ней также есть стили для большинства HTML элементов, которые можно использовать как основу для своего дизайна.

Фреймворки для адаптивного дизайна

1140 CSS Grid оптимизирован для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, использующая Media Queries.

Этот CSS-фреймворк — хорошая основа для разработки на крошечных экранах (например, телефоны) и небольших экранах (например, планшеты) прямо из коробки с минимальными усилиями. Помимо этого имеется генератор для создания резинового CSS-фреймворка под себя.

Flurid — это резиновая сетка на 6, 7, 8, 9, 10, 12 и 16 колонок.

FluidGrids — генератор модульной сетки, который создает макеты из 6, 7, 8, 9, 10, 12 или 16 колонок.

CSS-фреймворк для создания адаптивных макетов. Он содержит 4 базовых макета и три набора типографики.

Резиновый фреймворк с упором на типографику.

Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.

Стратегии адаптивного дизайна

40. The Responsive Designer’s Workflow
Workflow разработчика адаптивного веб-дизайна


Luke Wroblewski законспектировал презентацию Ethan Marcotte о применении принципов адаптивного веб-дизайна в модернизации сайта одной из ведущих газет. Среди прочего, Ethan объясняет, как он подходит к методологии проектирования адаптивного веб-дизайна и что из себя представляет процесс прототипирования в контексте адаптивного веб-дизайна.

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

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

В данной презентации Stephen Hay описывает неприятности, с которыми вы можете столкнуться при создании адаптивного сайта.

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

Еще один интересный взгляд на создание адаптивного дизайна. Nathan C. Ford фокусирует внимание на поведении своих посетителей, а затем на основе него создает пользовательские сценарии и Media Queries.

«У каждого сайта есть цели, которые выходят за рамки простого чтения, где недостаток различных возможностей может фактически уничтожить приятный опыт взаимодействия. Я работаю над таким проектом в настоящее время. Наш подход заключается в том, чтобы изучить всё и сформировать оптимальное взаимодействие для наиболее вероятных пользовательских сценариев. Работая таким образом, мы до совершенства оттачиваем каждый Media Query».

45. More Responsive Design, Please
Еще больше адаптивного дизайна, пожалуйста

В статье Jason Things размышляет о проблемах адаптивного дизайна. Статья очень хорошо продумана и, что называется, «must read».

Luke Wroblewski делал заметки на Конференции Breaking Development во время выступления Stephen Hay о реалиях проектирования для различных устройств.

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

По словам Kyle Neath, адаптивный веб-дизайн — это более широкое понятие, чем просто размер экрана. Kyle написал о том, как GitHub обрабатывает ссылки, об адресной строке, о частичном обновлении страницы и объяснил, почему он считает, что HTML5 History API — это самое важное, что произошло в front-end разработке со времен появления Firebug. Очень вдохновляющая презентация.

В этой презентации Dave Olsen представляет прогрессивную мобильную стратегию, которая состоит из стратегий аудиторий, контента и платформы. Dave считает, что для развития устойчивой и масштабируемой мобильной стратегии, вы должны ответить на следующие вопросы: «Какую ценность представляет этот контент для целевой аудитории?».

50. How to Use CSS3 Media Queries to Create a Mobile Version of Your Website
Как использовать CSS3 Media Queries для создания мобильной версии сайта

В этой статье на Smashing Magazine Rachel Andrew объясняет, как используя всего несколько правил CSS, вы можете создать iPhone версию своего сайта с помощью CSS3, которая будет работать прямо сейчас. В статье приведен очень простой пример и процесс добавления стилей для мобильных устройств на сайт, чтобы показать, как легко мы можем добавить мобильно-ориентированные стили на уже существующий сайт.

Вам также могут быть интересны следующие статьи по данной теме: Aaron Gustafson «Адаптивные макеты с Media Queries» и Emily Lewis «Адаптирование для различных устройства с CSS3 Media Queries».

Дискуссии и различные точки зрения на адаптивный веб-дизайн

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

Andy Hume объясняет, что по его мнению, адаптивность это наше все. Это то, что делает сайт рабочим, когда он загружается через неизвестный браузер на неизвестном устройстве неизвестного человека.

52. Responsive Web Design or Separate Mobile Site? Eh, It Depends
Адаптивный веб-дизайн или отдельный мобильный сайт? Зависит от обстоятельств.

Интересная статья о плюсах и минусах адаптивного веб-дизайна по сравнению с мобильным сайтом.

Вполне логично включить в данный обзор мнения о том, когда адаптивный дизайн уместен, а когда нет. В данной статье обсуждается, почему адаптивный дизайн не всегда имеет смысл с точки зрения пользовательского взаимодействия. Обратите внимание на интересные комментарии к статье. Аналогичное мнение имеет и Luke Jones.

Обсуждение в блоге Jeremy Keith о необходимых составляющих адаптивного дизайна и о том, как эффективно создавать разные макеты на основе разных размеров экрана. С примерами.

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

Публикация представляет собой сочетание философии и стратегии для аккумулирования лучших практик в области адаптивного дизайна.

В этой статье Jason Grigsby рассказывает о результатах своего исследования об адаптивном дизайне, его особенностях, а также делает несколько замечаний о текущем положении вещей в области адаптивного сайтостроения.

Дополнительные ресурсы

Публикации об адаптивном дизайне, которые не вписываются в категории выше.

Регулярно обновляемая коллекция веб-сайтов, которые используют Media Queries.

59. Responsive Web Design, by Ethan Marcotte
Книга Responsive Web Design, автор Ethan Marcotte

Эта книга, написанная Ethan Marcotte и опубликованная издательством A Book Apart — кладезь знаний по разработке адаптивных сайтов. Она охватывает основы адаптивного дизайна, модульные сетки, адаптивные изображения и Media Queries, что достаточно для понимания того, как создать адаптивный сайт.

В 9 серии The Big Web Show Jeffrey Zeldman и Dan Benjamin пригласили Ethan Marcotte, чтобы обсудить адаптивный дизайн.

На закуску

61. The Latest in HTML5
Последние тенденции в HTML5

В презентации рассматриваются малоизвестные аспекты HTML5, которые могут будут реализованы в браузерах в ближайшем будущем. Среди прочего, Media Queries на стороне сервера с JavaScript и обнаружение форм-фактора устройства.

От переводчика

Отличным дополнением к статье будет блог об адаптивном дизайне, в котором разработчики делятся опытом и пишут обзоры responsive инструментов.

Как отключить адаптивные размеры картинок (srcset) в WordPress 4.4?

Всем привет! Вопрос такой.

В версии 4.4. была введена новая фитча: для всех картинок добавляется новый атрибут «srcset» и вроде бы еще к нему в придачу «sizes». Это своего рода промежуточные размеры картинки.

По своим причинам, мне этот атрибут не нужен и нужно его выключить везде где это возможно, т.е. надо запретить вывод атрибутов srcset и sizes для всех картинок.

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

Нашел в сети такой код для отключения:

Но что-то мне подсказывает, что это не самое лучшее решение.

Подскажите пожалуйста как выключить эти лишние атрибуты правильно.

Как Сделать Адаптивный Шаблон WordPress с Помощью HTML5

Введение

Шаблон WordPress – это набор файлов, который определяет внешний вид вашего сайта. Шаблон включает в себя HTML, PHP и CSS, а также довольно часто JavaScript/jQuery.

В этом руководстве по WordPress, вы узнаете, как сделать адаптивный шаблон WordPress с помощью HTML5, CSS3 и принципов адаптивного дизайна. Вы также узнаете, как разделить разные части вашего сайта на “шаблоны”.

Шаблоны, как и плагины, находятся отдельно от основного кода WordPress. Шаблоны могут позволить вам создать подходящий дизайн для каждой из страниц вашего сайта, и в случае чего у вас будет возможность полностью изменить его. Однако, чтобы отобразить информацию из WordPress или содержимое записи, вы должны использовать для этого специальные теги, предоставляемые WordPress, эта тема также будет затронута в нашем руководстве.
После завершения данного руководства и создания адаптивного шаблона WordPress, отличной идеей станет практика на дочерней теме. У нас есть отличное руководство о том, как создать дочернюю тему WordPress. Шаблон, который вы сами создадите в этом руководстве станет отличным фундаментом для изучения адаптивного дизайна и поможет вам лучше использовать возможности дочерних тем.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Чтобы успешно следовать данному руководству, вам понадобится текстовый редактор, вроде Notepad++ или NetBeans.

Что такое HTML5 и почему вы должны его использовать

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

Самым большим изменением является появление нового набора семантических элементов HTML. К примеру, теперь footer (футер) любой HTML страницы может быть обозначен с помощью элемента , который подскажет браузеру, что данная часть сайта является футером. В более ранних версиях HTML, футер создавался такими элементами как

Обычный документ HTML5 выглядит примерно так:

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

Адаптивный дизайн означает, что ваш сайт автоматически отображается в лучшем формате для посетителя на основе размера его экрана. Макет страницы в буквальном смысле ‘реагирует’ на доступное место на экране посетителя. Содержимое должно быть расположено идеально, чтобы ничего не было обрезано, не уплывало за экран и в общем сайт должен быть чист настолько, насколько это возможно.

Вы должны думать о макете вашего сайта, как о серии сеток и задать содержимому процент от ширины сетки. Например, div может забрать 50% доступного места, вместо указания его ширины в 800px. Ширина div полной страницы занимает 100% свободного пространства, поэтому, если вы хотите вместить четыре div на одной линии, каждая должна занимать 25% всего пространства.

Для изображений, вы можете задать максимальную ширину в 100% его настоящего размера и задать высоту как auto. Когда контейнер с изображением в нём будет уменьшаться в размерах, следом за ним автоматически будет уменьшаться изображение в ширине и высоте.

Для изображений, использование (ширины) width: 100% вместо (максимальной ширины) max-width: 100% приведет к тому, что изображение будет занимать 100% доступного ему пространства, вместо того, чтобы остановиться на его настоящей ширине и высоте. Если изображение в ширину 200px, но находится в внутри div, который занимает 100% пространства экрана, max-width обеспечит, чтобы изображение не увеличивалось больше своего настоящего размера 200px в ширину.

Чтобы сделать шаблон полностью отзывчивым, вы также можете использовать функцию CSS3 под названием медиа-запросы. В медиа-запросах вы можете определить медиа тип (экран, печать и т.д.) на который будет влиять хотя бы одна медиа функция (max-width, orientation и т.д.). Медиа функции могут быть связаны между собой ключевым словом and.

  • В первом примере CSS будет применен к любому экрану (монитору, телефону и т.д.), которые имеют видимую ширину (область внутри браузера, не всё окно) между 400px и 800px.
  • Второй пример будет применен для любого медиа типа, который ее просматривает.
  • Еще один интересный медиа тип ‘print’ означает, что CSS будет применен только в том случае, если пользователь предварительно просматривает страницу в окне ее печати.

Полный список медиа типов и медиа функций доступен на сайте веб-документации Mozila Developer Network.

В вашей таблице стилей CSS вы определяете правила, которые указывают когда содержимое меняется, какое содержимое меняется и как оно меняется. Этим способом вы можете изменить любой CSS атрибут, вроде ширины любого текстового блока или задний фон div. Вот некоторые примеры правил медиа функций, которые указывают когда правило будет применено:

  • max-width – максимальная ширина видимой области браузера, любое значение больше нее и правило не будет применено
  • min-width – минимальная ширина для видимой области, любое значение меньше данного и правило не будет применено
  • orientation – находится ли экран в альбомном или портретном режиме

Обычным примером является ситуация, когда у вас есть два текстовых блока, которые оба занимают 50% экрана и находятся на одной сетке. Если окно браузера становится меньше, блоки автоматически подстраиваются, чтобы занимать 50% экрана, вместо того, чтобы исчезнуть с него. Если окно браузера станет слишком маленьким, чтобы правильно отобразить текст в блоках, то вы можете указать им занять 100% экрана и расположиться друг над другом. Вы даже можете указать, чтобы блок полностью был скрыт, если посчитаете это лучшим вариантом.

Шаг 1 – Хранение темы и ее файлов

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

Чтобы избежать подобного рода проблем, очень важно проверить все изменения на оффлайн версии сайта. Как только ваши изменения будут готовы и проверены, вы сможете перенести их на работающий сайт. Для проверки изменений можно воспользоваться контейнером. Вы можете узнать о том, как установить WordPress на Docker здесь.

Давайте начнем руководство и узнаем, как сделать адаптивный шаблон WordPress!

WordPress шаблоны находятся в собственных папка в каталоге wp-content/themes/.

В каталоге wp-content/themes/ создайте новую папку под названием my-theme. Папка должна иметь уникальное и короткое имя, чтобы ее было легче найти.

ЗАМЕТКА: Папка темы не должна содержать числа или пробелы. Ваша тема не должна иметь то же название, что и другая. Если вы планируете поделиться вашей темой, то удостоверьтесь в том, что тема с данным именем уже не была загружена в каталог тем WordPress.

Шаблон WordPress может быть создан даже с двумя файлами – index.php и style.css – и WordPress будет использовать их для отображения каждой из страниц и записей на вашем сайте.

На самом же деле, вы наверняка захотите, чтобы записи, страницы и другие разделы вашего сайта имели свой макет. Каждый раздел вашего сайта имеет свой HTML и PHP, который применяется только для этого раздела – каждый из них называется файлом шаблона.

Если вы используете пользовательские типы записей, вы можете создать файл шаблона, который будет применяться только для данного типа записей. Если вы хотите, чтобы записи из определенной категории имели другой стиль, вы можете воспользоваться if…then… внутри цикла.

Каждый файл шаблона должен иметь корректное имя, которое определенно в документации WordPress.

Вот некоторые из файлов шаблона помимо index.php:

  • header.php – содержит любой HTML, который идет вверху вашей страницы, начиная от
  • single.php – используется при отображении одной Записи из вашего блога
  • page.php – используется при отображении одной Страницы из вашего блога
  • comments.php – определяет как комментарии и блок с комментариями будут отображаться
  • footer.php – содержит любой HTML, который идет внизу вашей страницы, включая

Для ознакомления с полным списком шаблонов, посетите данный сайт WordPress Theme Developer Handbook.

Теперь, когда у вас есть папка для хранения вашей темы, вам необходимо создать базовые файлы шаблона.

Шаг 2 – Создание файлов шаблона и таблицы стилей CSS

В папке my-theme создайте следующие PHP файлы:

  • header.php
  • index.php
  • footer.php
  • functions.php
  • sidebar.php
  • single.php
  • page.php

В дополнение к PHP файлам создайте новый CSS файл под названием style.css (основная таблица стилей должна называться style.css).

Первым шагом после создания файлов, станет добавление некоторой информации в самый верх файла style.css, которую прочтет WordPress и отобразит в панели управления.

Информация должна быть записана как многострочный комментарий CSS, каждый заголовок на своей собственной строке, начиная с ключевого слова заголовка.

Существует определенное число ключевых слов заголовка, которые помогут вам указать информацию об авторе (ваше имя), сайт автора, описание темы, имя темы, версию темы и т.д. Для получения полного списка ключевых слов заголовка посетите страницу WordPress Codex – File Header.

Вот формат для написания заголовка Ключевое слово: Информация

ЗАМЕТКА: Седьмая и восьмая строка необходима лишь, если вы планируете поделиться своей темой на WordPress.org. Если вы будете использовать тему на вашем собственном сайте, вы можете пропустить эти две строки и закрыть раздел комментария.

В данный момент ваша тема уже будет видима в панели управления в разделе темы. Вы должны увидеть белый и серый блоки с надписью My Theme. После создания вашей темы, вы можете сделать ее скриншот, чтобы он отображался здесь.

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

Теперь, мы добавим одно правило в CSS файл, который изменит задний фон страницы.

Добавьте пустую строку после закрытия комментария */ на строке 10.

На следующей строке после новой пустой строки (11 строка в файле), напишите следующее.

Первая запись является важной частью адаптивного дизайна. Знак * является подстановочным и соответствует каждому классу, который может быть найден в HTML документе. Он означает, что окончательная ширина и высота каждого объекта на странице должна включать содержимое, padding и border. Если вы не зададите такие параметры, и у вас будет два блока с шириной 50% расположенных бок о бок с любым значением padding (поля вокруг элемента) или border (границы вокруг элемента), они не будут находится бок о бок, так как их настоящий размер будет больше чем 100%. Блок с шириной в 100% и padding в 1% будет занимать 102%, так как padding добавляется с левой и правой стороны. Вместо этого, правило добавляет padding внутрь блока, вместо его добавления снаружи.

Вторая запись просто меняет белый задний фон, таким образом мы сможем быстро увидеть используется ли таблица стилей. Мы также задали шрифт, который будет использоваться в нашем шаблоне.

Шаг 3 – Перед началом создания

Перед тем, как вы сможете сделать адаптивный шаблон для вашего WordPress, вы должны добавить несколько строк кода в различные файлы, чтобы сделать для себя хорошую отправную точку для начала создания шаблона. Эти шаги необязательны, но мы строго рекомендуем их произвести.

Эти шаги будут иметь краткое описание, чтобы вы могли как можно быстрее перейти непосредственно к созданию макета.

Первое, мы добавим CSS файл под названием normalize.css. Различные браузеры, имеют различные стандартные настройки для таких вещей как padding и border. Normalize.css устанавливает несколько наборов атрибутов, чтобы обеспечить, что все браузеры отображают вашу страницу одинаково. Если не использовать такую таблицу стилей, то частой проблемой может стать то, что когда вы захотите, чтобы ваш заголовок начинался с самого верха левого края вашей страницы, в конечном результате вы все равно обнаружите пустое место над ним.

functions.php

Откройте functions.php и добавьте следующий код:

Далее, вам понадобиться включить боковые виджеты. Если вы не включите этот код, ссылка на меню виджетов не будет видна в панели управления, и вы не сможете добавить никаких виджетов. Пока вы еще находитесь в файле functions.php, ниже предыдущей функции добавьте следующий код:

Теперь нам необходимо зарегистрировать пользовательское навигационное меню, чтобы разрешить использование Внешний вид → Меню в панели администратора. Добавьте следующие строки после предыдущего кода:

Сохраните файл functions.php и загрузите его в папку с вашим шаблоном.

sidebar.php

Теперь откройте файл sidebar.php и добавьте следующий код. Он даст возможность боковой панели и вашим виджетам появляться тогда get_sidebar(), когда его вызывают.

Первая строка говорит WordPress, если виджеты не включены, то боковая панель HTML не должна быть показана. Вторая строка устанавливает атрибуты для элемента, который содержит виджет. HTML5 предоставляет элемент ‘aside’ для боковой панели. Третья строка – это функция WordPress для фактического отображения виджетов. Последняя строка закрывает начальный оператор if.

Сохраните и загрузите файл sidebar.php в папку вашего шаблона.

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

Шаг 4 – Построение макета с помощью шаблонов

header.php

header.php определит самый верх нашего документа, начиная с DOCTYPE.

Все HTML документы должны начинаться с DOCTYPE, который даст браузеру знать, как воспринимать документ. Тип документа HTML5 просто html. Открывающему тегу нужен языковой атрибут, и WordPress предоставляет функцию для ввода корректного кода языка, который вы выбрали в процессе установки – language_attributes().

В поле заголовка, вы используете строчку кода, которая отобразит название вашего сайта с последующими if…then… операторами, чтобы отобразить описание вашего сайта ИЛИ заголовок текущей страницы/записи.

Знак ? это условный оператор PHP называемый тернарным оператором. В этой строчке кода is_front_page() это функция WordPress, которая возвращает TRUE , если просматривается главная страница или FALSE , если просматривается любая запись или страница. Функция перед двоеточием используется, если было возвращено TRUE , а функция после двоеточия используется, если возвращено FALSE .

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

Функция body_class() дает вашему body стандартные CSS классы установленные WordPress. Последняя строка разрешает отображение навигационного меню, если оно было создано в панели управления. Окончательный вид файла header.php будет таким:

Если вы хотите использовать лого в качестве заголовка, замените на код вашего изображения внутри тегов .

Сохраните header.php и загрузите его в папку вашего шаблона.

index.php

index.php определяет главную страницу, а также будет использоваться в качестве стандартного макета, если определенные файлы шаблонов (например single.php, page.php) не будут найдены.

Мы используем теги шаблонов, чтобы убедиться в том, что коды header (get_header), sidebar (get_sidebar) и footer (get_footer) включены в нашу главную страницу.

Цикл WordPress будет всегда отображать список записей и их выдержки с большим количеством тегов шаблона. Мы также используем семантические элементы HTML5 , , и . Некоторые из наших элементов будут иметь назначенные для них классы, они будут написаны когда мы перейдем к файлу style.css.

Цикл начинается с и заканчивается на . Внутри цикла используются следующие теги шаблонов:

  • – выводит URL настоящей записи
  • – выводит заголовок записи в безопасном формате для атрибута заголовка ссылки
  • – выводит заголовок записи
  • – выводит имя автора
  • – выводит выдержку из записи, которая будет автоматически сгенерирована, если вы не написали свою собственную

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

и т.д. Если раздел или статья еще не имеют текста хедера, то их можно оставить без внимания.

Сохраните файл index.php и загрузите его в папку вашего шаблона. Если вы зайдете сейчас на ваш сайт, то увидите довольно простую страницу.

Вы можете заметить, что заголовок во вкладке браузера состоит из имени вашего сайта и его описания. В верхней части имеется название вашего сайта (или лого, если вы использовали его). Также любая запись, которая есть у вас на сайте отображается со своим заголовком, автором и выдержкой. Несмотря на то, что сайт загружается без проблем, вам все равно необходимо закрыть открытые теги и в footer.php.

footer.php

footer.php определяет футер каждой страницы и должен закрывать любые открытые теги HTML в других файлах шаблонов. В данном случае и до сих пор являются открытыми из header.php.

Он также должен включать в себя хук-событие wp_footer() , чтобы обеспечить добавление любого конечного кода WordPress и JavaScript на страницу. Если при заходе на сайт вы были авторизованы в качестве администратора, то вы могли заметить, что сверху пропала панель администратора. Код, который показывает панель администратора подхватывается с хуком wp_footer().

Мы также добавим семантические элементы HTML5 , чтобы явно определить наш футер.

Сохраните footer.php и загрузите его в папку вашего шаблона.

single.php

single.php определяет макет при просмотре одиночной записи на вашем сайте. Он может быть совершенно другим по сравнению с index.php.

В нашем случае мы не будем добавлять боковую панель в записи для того, чтобы просто нагляднее показать различие в макете.

Главный контент будет занимать всю ширину страницы, так как мы задали ему класс content-full-width из таблицы стилей. Ссылка была удалена из заголовка, так как она здесь не нужна. Функция для отображения всего поста это the_content():

Сохраните single.php и загрузите его в папку вашего шаблона.

page.php

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

Обратите внимание, что если файл шаблона не существует, то будет использован файл шаблона index.php. Если вы не создадите page.php, то шаблон не будет использовать такой же макет, как и posts.php.

Чтобы сделать различия более явными, мы снова добавим боковую панель в этот макет, и зададим контенту страницы 70% ее ширины.

Сохраните page.php и загрузите в папку вашего шаблона.

style.css

Добавьте следующее в конец файла таблиц стилей. Это позволит задать различным блокам белый фон и синюю границу, чтобы помочь нам представить, как много места тот или иной занимает.

Сохраните файл style.css и загрузите его в папку вашего шаблона.

Теперь, когда у вас есть базовые файлы шаблонов и таблица стилей, вы можете легко переходить между вашими записями и страницами. Ваш новый шаблон должен выглядеть примерно так.

Использование медиа-запросов

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

Для этого руководства по WordPress мы изменим ширину записей в списке записей, когда окно браузера будет меньше 800px. Вместо 2 записей расположенных бок о бок, каждая запись будет на своей линии. Мы сделаем это с помощью добавления медиа-запросов. Если вы хотите освежить в памяти информацию о медиа-запросах, вернитесь к разделу Что такое адаптивный дизайн? этого руководства.

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

Для начала мы напишем медиа-запрос, который будет влиять на класс .article-loop, который имеет ширину 49% по умолчанию. Мы напишем его прямо под исходным определением. Медиа-запрос будет звучать так, если окно браузера меньше 800px в ширину, то класс .article-loop должен использовать 99% доступного пространства вместо изначального значения.

Затем мы напишем медиа-запрос, который опустит боковую панель под основной контент и расширит основной контент и саму панель до 100% ширины, если окно браузера меньше 600px. Это будет наиболее подходящий макет для мобильных устройств, когда место ограничено.

Вновь в файле style.css найдите определение .article-loop, которое должно быть на строке 73. Ниже класса .article-loop впишите следующее:

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

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

Следующий медиа-запрос, который мы добавим будет похож на предыдущий. Он скажет основному контенту и боковой панели занимать 100% доступного пространства, и боковая панель уйдет под основной контент.

ЗАМЕТКА: Так как этот медиа-запрос влияет на различные классы, которые находятся в различных места таблицы стилей, стоит поместить такого рода медиа-запрос в конец файла таблицы стилей.

Сохраните style.css и загрузите его в папку вашего шаблона. Вновь посетите ваш сайт и изменяйте размер окна браузера до тех пор, пока не увидите, что основной контент начнет занимать 100% ширины и боковая панель уйдет под него.

Используя боковую панель, нажмите на любую доступную страницу и вы увидите, что боковая панель также будет находиться внизу и все останется на своих местах.

Объяснение тегов шаблона и хуков-события WordPress

Чтобы полностью интегрировать ваш шаблон с WordPress, вы должны использовать теги шаблона и хуки-события. Это две совершенно разные вещи.

Теги шаблона

Теги шаблона – это PHP функции, предоставляемые WordPress, чтобы легко включить файлы шаблонов (вроде header.php) из вашей темы в другой файл или показать какую-либо информацию из базы данных.

Например, чтобы показать футер на главной странице, но не на какой-либо другой, добавьте get_footer() в конец файла index.php, а не в page.php.

Ниже представлены два кратких списка тегов шаблонов, чтобы дать вам представление о том, какие теги доступны.

Шаблоны тегов, чтобы вставить в файлы шаблона:

  • get_header() – включает шаблон файла header.php
  • get_sidebar() – включает шаблон файла sidebar.php
  • get_footer() – включает шаблон файла footer.php
  • get_search_form() – включает шаблон файла searchform.php

Теги шаблонов, чтобы отобразить информацию из базы данных

ЗАМЕТКА: Некоторые теги шаблонов могут быть использованы в цикле. Понятие цикл будет объяснено немного позднее в данном руководстве, вкратце это код, который получает любые запрошенные записи.

  • bloginfo() – отображает информацию запрошенную в качестве параметра, например, bloginfo(“name”) показывает имя вашего сайта, которое задано в панели управления (посмотрите список параметров)
  • single_post_title() – отображает заголовок текущей записи, когда используется в single.php
  • the_author() – отображает автора текущей записи
  • the_content() – отображает основной текст записи или страницы
  • the_excerpt() – выдержка из поста или страницы

Полный список тегов шаблона вы можете найти здесь.

Хуки-события

Хуки-события – это PHP функции, предоставляемые WordPress, которые обычно имеют другие функции прикрепленные к ним. Некоторые хуки не имеют таковых и существуют исключительно для плагинов. Хуки-события позволяют плагинам прикреплять их собственные функции и запускать их в различных точках в процессе загрузки страницы.

В хедере вашего шаблона хук-событие wp_head() вызвано, чтобы включить стандартный HTML хедер WordPress в теги . Он имеет некоторые основные функции WordPress для добавления HTML на страницу и позволяет запускать любые функции, подключенные к нему плагинами.

В разделе футера вашего шаблона хук-событие wp_footer() вызвано, чтобы включить стандартный HTML и JavaScript и запустить любую функцию прикрепленную к ним плагинами

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

К примеру, если не вызвать wp_footer() в файле шаблона footer.php, то вы не сможете увидеть панель администратора, даже если вы авторизованы как админ. Базовый код WordPress, который вызывает появление панели прикреплен к хуку-событию wp_footer() и прикрепленная функция не может быть запущена, если хука-события не существует.

Для более полного объяснения понятия хук-событие, прочитайте соответствующий раздел в руководстве по созданию своего плагина.

Цикл WordPress

Цикл используется для фактического отображения записей. Он может быть использован, чтобы отобразить только одну запись или все ваши опубликованные записи на одной странице. HTML, который вы пишите в цикле будет использоваться для отображения каждой из записей, запрошенной циклом. Код продолжит повторяться, пока не достигнет конечной записи.

Для отображения одной записи, вы можете использовать тег шаблона the_content() внутри цикла, это отобразит контент записи. Для отображения списка опубликованных записей, вы можете использовать the_excerpt() внутри цикла, таким образом вся запись отображаться не будет.

Цикл является многострочным сокращением if…then… состоящим из 4 строчек кода. Первая строка говорит, что если запись была найдена, то будет использован следующий код для ее отображения, пока она существует. Если не найдено подходящих записей, то вы можете определить заменяющий текст. Обычный пример WordPress выглядит примерно вот так:

Заключение

Поздравляем! Вы узнали, как сделать адаптивный шаблон WordPress с помощью HTML5!

Теперь, когда вы знаете о файлах и тегах шаблона, вы можете еще раз взглянуть на специальные списки WordPress codex файлы шаблонов и теги шаблонов, и поэкспериментировать с ними, добавляя новые разделы в ваш макет. Вы также узнали, что такое адаптивный дизайн. Изменяйте CSS правила и ширину эелементов, чтобы посмотреть как будет вести себя браузер в разных ситуациях. Изменяйте медиа-запросы, чтобы найти лучшее решение для вашего сайта.

Мы рекомендуем ознакомиться с руководством о том, как создать дочернюю тему WordPress,чтобы более эффективно использовать ваши новые знания.

43 Awesome адаптивные бесплатные темы WordPress для создания красивых сайтов без затрат на дизайн – 2020

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

Давайте взглянем на некоторые из лучших бесплатных шаблонов WordPress:

1 Shapely

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

Эта тема настраиваемая. Пользователи могут изменять цвета различных элементов сайта, редактировать информацию об авторских правах, включать изображения сотрудников или разделы персонализации. Большинство премиальных и бесплатных плагинов WordPress поддерживаются Shapely: W3 Total Cache, Jetpack, WordPress SEO, Contact Form 7 и функции Easy Bootstrap Shortcode. Если вы хотите попробовать Shapely, обязательно получите доступ к ее демонстрации.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

2 Illdy

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

3 Portum

Portum – это мощный и современный бесплатный шаблон WordPress. Идеальная тема для создания красивых, функциональных бизнес-сайтов. WP Customizer превращает ваш веб-сайт Portum в интуитивную, быстро настраиваемую площадку: развертывание и изменение разделов, изменение макетов и цветовых схем и многое другое. Настройте анимацию и динамическое поведение и сделайте свой сайт лучшим для вашего рынка.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

4 Pixova Lite

Pixova Lite – базовая, но сфокусированная тема WordPress, разработанная для создания сайтов с нуля. 100% адаптивный макет с элегантной профессиональной типографикой. Чистый сильный код, который упрощает настройку. Вы получите тему со многими разделами для размещения заголовков, подвала и виджетов. Шаблон использует неограниченные шрифты Google и цвета для смешивания. Предлагаем готовые разделы виджетов и контактные страницы.

Pixova Lite – бесплатная универсальная тема одностраничного формата с плавной прокруткой и адаптацией на все устройства и браузеры.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

5 Newspaper X

Newspaper X – это журнальная тема WordPress, ориентированная на новости. Во-первых, шаблон имеет несколько страниц в интуитивном меню. И во-вторых, он является гибким и полностью бесплатным для скачивания! Кроме того, он может быть изменен с помощью WordPress Customizer.

Тема даст вам потрясающее управление рекламными баннерами, полностью интегрированное с дизайном макета. Вы найдете верхнюю панель и подвал со множеством функций для добавления. Шаблон специально разработан для публикации новостей. Вы можете опубликовать их в 4 группах: редакционные, события, последние новости и мировые новости. Эта тема предназначена для всех средств массовой информации и коммуникации.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

6 NewsMag Lite

NewsMag Lite – мощная, впечатляющая многопользовательская тема для интернет-магазина. Обновленная и расширенная, она является самой полной и многофункциональной бесплатной темой WordPress, доступной на сегодняшний день.

NewsMag Lite содержит всесторонние шаблоны демо-сайтов для ряда конкретных ниш. Имея множество вариантов настройки, вы сможете контролировать внешний вид вашего интернет-журнала NewsMag Lite. Совместимость с плагином электронной коммерции WooCommerce позволяет продавать товары прямо со своего веб-сайта сразу же после первоначальной настройки. Поскольку NewsMag Lite построен на Bootstrap, его модульный дизайн делает его легко кросс-совместимым с браузерами и устройств во всем мире.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

7 Sparkling (Most Popular)

Sparkling – самая популярная тема WordPress, используется тысячами веб-мастеров по всему миру. Шаблон переведен на русский язык и совместим с плагином WPML для создания многоязычных веб-сайтов. Чтобы не отставать от тенденций разработки дизайна WordPress, разработчики темы внесли в нее важные обновления. Удивительная тема WordPress, бесплатна для использования на личных и коммерческих сайтах.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

8 Activello

Activello – это хорошо продуманная, профессионально графически оформленная многопользовательская тема WordPress.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

9 Blaskan

Blaskan – тема WordPress для блогинга. Шаблон фокусируется на блогах, но работает так же хорошо для журналов. Вы получите интегрированные значки социальных сетей и страницу контактов. Кроме того, Blaskan использует удивительный баннер для настройки фиксированного изображения, например, вашего собственного логотипа.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

10 Allegiant

Allegiant – интуитивно понятная бесплатная многопользовательская тема для веб-сайтов. Инновационный, многофункциональный набор инструментов для несложной разработки красивых, стильных веб-сайтов. Оснащен широкой коллекцией плагинов, опций и ресурсов, которые позволяют создавать сайты практически любого типа.

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

11 Ascendant

Ascendant – многоцелевая тема WordPress. Шаблон имеет 3 версии для разных экономических и целевых ниш. Ascendant отлично подходит для блогов, портфолио и социальных сетей, а также для бизнеса. Полностью адаптируется ко всем экранам и браузерам. Тема имеет неограниченные цвета и короткие коды, позволяющие создавать любые элементы.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

12 Breviter

Breviter – уникальная, бесплатная тема WordPress для профессионалов и блоггеров. Упаковка нескольких удобных стилистических дизайнов в одном совершенно бесплатном пакете. С Breviter ваши блоги будут выделяться из толпы.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

13 Affluent

Affluent – профессиональный многоцелевой шаблон для веб-сайта на WordPress. Тема разработана специально для потребностей бизнеса и коммерции в различных отраслях. Не требуя абсолютно никаких знаний в области кодирования. Благодаря полностью визуальным интерфейсам, Affluent предоставляет мощные возможности настройки макета, которые позволяют точно настраивать каждую деталь навигации по сайту. Тема содержит полезные и удобные пользовательские короткие коды. Их можно развернуть одним щелчком мыши.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

14 MedZone

MedZone – сверхбыстрая и динамичная тема WordPress. Она поставляется в одностраничном формате и с множеством настроек макета. Полностью ориентирована на медицинские учреждения и организации. С обновленной версией известного дизайна Macostheme. С его помощью разделы постов очень легкие. С темой вы получите файлы перевода и неограниченные шрифты Google!

В MedZone есть система бронирования и страницы для предоставляемых услуг. Макет на 100% адаптивный и гибкий. . Шаблон имеет профессиональную концепцию, призванную дать белый дизайн, например, для сайта больницы.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

15 Brilliance

Brilliance – динамичная и мобильная, технически продуманная, адаптивная профессиональная многопользовательская тема WordPress.

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

16 Dazzling – шаблон для бизнеса

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

17 Travelify тема для путешествий

На этом шаблоне будут прекрасно смотреться творческие сайты, а также личные блоги или онлайн-журналы, а также агентства. Это популярная тема WordPress с более чем 250 000 загрузок и установок. Шаблон относится к самым высоким рейтингам бесплатных тем WordPress.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

18 Unite – Свадебная тема WordPress

Ваш свадебный сайт должен быть на высшем уровне, поэтому соглашайтесь не меньше, чем на совершенство. Однако дорогое не всегда приравнивается к высокому качеству, а Unite доступен бесплатно. Чтобы убедить себя в ошеломляющем качестве, не стесняйтесь ознакомиться с их демоверсией. Построенный с использованием известной инфраструктуры Bootstrap 3, этот шаблон обязательно будет адаптироваться к любому устройству.

Дизайн в виде сетки ананонсов записей и плюс слайдер делает шаблон привлекательным.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

19 Esteem

Esteem – эту чистую тему WordPress,можно использовать практически для любого сайта. Тема поставляется с 2 настраиваемыми шаблонами. Эта тема поддерживает как пользовательский логотип, так и название сайта, поэтому вы также можете персонализировать свою тему и подогнать ее в соответствии с вашими брендом. Тема поддерживает пользовательскую функцию фона WordPress. Шаблон поставляется с пользовательским CSS, который делает CSS-настройки очень быстрыми и легкими.

Эта тема поставляется с 5 пользовательскими виджетами, специально разработанными для бизнес-сайтов. Полностью совместима с Contact Form 7, которая управляет несколькими форматами контактов на вашем веб-сайте. Шаблон также использует хлебные крошки, альтернативную схему навигации, организующую сайт в иерархическом порядке и показывает местоположение пользователя на вашем веб-сайте. Готова к переводу, просто создайте языковые файлы и используйте ее на своем родном языке, а также предлагает бесплатную поддержку для оказания помощи пользователям в создании и работе своего веб-сайта.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

20 Influence

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

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

21 Arcade Basic

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

Каждая из ваших галерей может иметь свой уникальный вид, спасибо за это плагину JetPack. В полной мере используйте карусель jQuery и возможности совместимости с Bootstrap 3.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

22 StanleyWP – Тема Bootstrap

Если бы это был человек, эта тема была бы одета в костюм и галстук. Шаблон одновременно демонстрирует как простоту, так и сложность. Структура Bootstrap позволяет синхронизировать ее с любым известным устройством, правильно отображая контент.

Шаблон включает в себя функции перетаскивания страниц, панель параметров темы, три макета страниц, несколько типов постов и высокочувствительное кодирование.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

23 Flat Theme

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

Эта адаптивность является ее ключевой особенностью. Некоторые из ее функций включают в себя генератор коротких кодов, совместимость с Bootstrap 3.0, таблицу цен, параметры портфолио, которые можно фильтровать, интеграцию как шрифтов Google, так и аналитики.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

24 Customizr

Это определенно одна из самых популярных тем в нашем списке, в общей сложности 4,8 из 5 звезд, в дополнение к более 721 380 загрузкам. Количество редко является показателем качества, но в этом случае мы можем сделать исключение. В настоящее время в версии 3.2.3 это определенно стоит посмотреть.

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

25 Hathor

С Hathor персонализация стиля, интерфейса и цветовой палитры вашей веб-страницы становится легкой задачей. Сайты компании получают свой собственный логотип. Тема с гордостью может похвастаться 3 стилями блоков, 4 стилями заголовка, 4 макетами и 5 шаблонами страниц.

Ее структура замечательно адаптируема и универсальна. Она может использоваться для журналов, портфолио, блога, бизнеса и творческих веб-сайтов. Персональные страницы также не исключаются, так как эта тема имеет достаточную настраиваемость, чтобы вы могли выразить свою индивидуальность. Кросс-платформенная совместимость не является проблемой, так как Hathor будет работать на любом устройстве или планшете. Что касается настройки, цветовая палитра практически безгранична. С бесчисленным количеством скинов пользователь может легко изменить цвет любого компонента веб-сайта. Hathor включает в себя многоуровневое раскрывающееся меню и систему установки One Click, которая быстро выполнит работу за вас.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

26 Meris

Полезный практически в любой ситуации, Meris обязательно удовлетворит потребности любого клиента. Установите его, чтобы продвигать свой бизнес-сайт. Добавленная область виджета предоставляет этой теме дополнительную степень гибкости. Включены как дополнительные, так и полные слайдеры, а также социальные значки и слогоны.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

27 Virtue

Virtue – это замечательная тема WordPress. Шаблон универсален, способен адаптироваться практически к любой ситуации. Он использует css3 и html 5 для своего кодирования и структуру Bootstrap 3, чтобы быть максимально мобильным и адаптивным. Люди с большей вероятностью приобретают услугу или продукт, если знают, что их транзакция облегчается надежной платформой. Virtue совместим с плагином Woocommerce и дает вам возможность разрабатывать вашу страницу контента, что поможет вам создать свой собственный интернет-магазин.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

27 Tracks

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

И рейтинг пользователей довольно высок, 4,8 из 5 звезд и более 36 000 активных загрузок.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

28 Make

Make – отличная тема WordPress, не требующая каких-либо специальных знаний. Разработчики интегрировали в шаблон некоторые мощные функции настройки, в том числе настраиваемое перетаскивание. Во-вторых, его можно использовать для профессиональных бизнес-сайтов, серьезных журналов, личных блогов или онлайн-портфолио.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

29 Responsive

Этот инновационный скин включает в себя 11 областей виджета, 9 шаблонов страниц, 4 позиции меню и 6 макетов шаблонов. Также были добавлены инструменты для веб-мастеров, инструменты загрузки логотипов и инструменты для социальных сетей, что делает шаблон, одной из лучших тем на рынке. Клиент может создать свой собственный интернет-магазин, благодаря интеграции плагина Woocommerce.

30 Spacious

Просторный шаблон показывает все признаки блестящего дизайна в сочетании с универсальностью. Он способен адаптироваться к любой цели или бизнесу. Может использоваться для ведения блогов, бизнеса или портфеля. Включает 13 областей виджетов, 4 макета страниц, 6 шаблонов страниц, 5 пользовательских виджетов, которые фокусируются на шаблонах для бизнеса и потрясающем слайдере. Вы можете выбирать между темным или более светлым цветом, загружать свой логотип или отображать свою страницу на разных языках.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

31 Vantage

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

32 Semicolon

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

Шаблон отличается гладким, упрощенным дизайном, который лучше всего подходит для представления текстового контента. Доступна бесплатная демонстрация, позволяющая оценить все преимущества темы. Посетите Semicolon Demo для получения дополнительной информации. Шаблон имеет рейтинг 5 из 5 звезд.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

33 Hueman

Без сомнения, это один из самых популярных шаблонов в нашем списке. С оценкой пользователя 4.9 из 5 звезд и более 320 000 загрузок.

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

34 Interface

Эта тема с дизайном сетки полностью адаптивная. В шаблон включено множество вариантов настройки, нескольких отличных плагинов, таких как Contact Form 7, Breadcrumb NavXT и, конечно же, WP-PageNavi.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

35 Radiate

Этот шаблон определенно заслуживает 4,9 из 5-ти звездного рейтинга и более 120 000 раз он был загружен.

Radiate объединяет пользовательский фон, основной параметр цвета и, конечно же, пользовательский CSS. В целом, это хороший продукт, и его стоит посмотреть.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

36 Adventurous

Adventurous – это чистая, простая, легкая и минимальная тема WordPress. Вы можете использовать его для любого типа сайта, который вы хотите, без необходимости беспокоиться о проблемах совместимости. Шаблон имеет многоязычную поддержку, поэтому существует потенциал для более широкой клиентской базы.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

38 Minamaze

Тема высокого качества Minamaze Pro решила выпустить Minamaze, уменьшенную бесплатную версию своего премиального программного обеспечения. Эта тема способна отображать изображения с высоким разрешением, включает в себя высокочувствительный макет и большую гибкость благодаря панели параметров. Хотя его использование не ограничивается какой-либо конкретной нишей, Minamaze лучше всего подходит для предприятий, фотографов и блогеров.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

39 Evolve

Разработанный для адаптации к любым условиям, Evolve способен дать фору любому премиум шаблону. Он содержит слайдер постов и в общей сложности 10 слайдов для каждой категории. Кроме того, он построен на надежной платформе Boostrap 3 и инновационном слайдере Parallax с максимум 5 слайдами на странице. Огромное количество функций, которые предлагает эта тема, способно конкурировать даже с самыми дорогими премиальными темами. Включены все настройки с вариантами логотипов, цветовых схем и боковых панелей.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

40 Serene

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

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | ДЕМО | Заказать настройку шаблона

41 Hemigway

Универсальный и простой в использовании, шаблон лучше всего подходит для блогеров. Его адаптивность позволяет устанавливать и использовать его практически для любого типа веб-страниц. Он включает в себя изображения с полной шириной заголовка с эффектом прокрутки Parallax, множеством готовых макетов и пользовательских виджетов. В настоящее время он переведен на шведский язык, но поддерживает любой другой язык. Если вы ищете тему WordPress, которая проста в установке и еще проще в использовании, Hemigway – это то что надо.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

42 Flat

Flat – тема WordPress, которая подходит для блогов,. Она разработана талантливой командой YoArts. Тема на самом деле более популярна, чем многие из премиальных тем. Внастоящее время она имеет рейтинг 4,4 из 5 звезд и, безусловно, ее стоит посмотреть.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

43 Enigma

Шаблон построен на базе CSS Bootstrap и может отображаться на любом типе устройства. Тема работает со всеми основными браузерами, имеет 2 шаблона страниц, 4 макета страниц и привлекательный просмотр изображений в подвале.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ / СКАЧАТЬ | Заказать настройку шаблона

Если вы не подобрали подходящую тему WordPress для своего сайта, посмотрите бесплатную коллекцию тем WordPress:

Лучшие плагины картинок в WordPress — галереи, слайдеры, для миниатюр и т.п.

Текущее содержимое статьи является обновленной версией старой записи, которая была опубликована 8 лет назад. За это время список плагинов для картинок в Вордпресс стал уже совсем не актуальным, поэтому срочно требовал обновления. Кстати, в блоге есть отдельная метка по wordpress изображениям, где найдете более 40 заметок по данной теме с разными решениями, хаками и руководствами по теме. В этой публикации будут представлены только модули (с кратким описанием).

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

В блоге уже было несколько узкоспециализированных подборок по плагинам Вордпресс изображений, вот ссылки на них:

В данной статье, как можете видеть из заголовка, собраны лучшие WordPress плагины картинок по разным направлениям — от фотоблогов до создания слайдшоу. Некоторые из них я уже рассматривал, поэтому в кратком описании буду ссылаться на соответствующие детальные обзоры.

NextGEN Gallery

NextGEN — единственный WordPress модуль изображений из прошлой подборки, что не просто сохранился за 8 лет, но и превратился в один из самых узнаваемых и популярных (его скачали более 1,5млн человек). Начиналось все с простого плагина для создания галереи, но теперь это полноценная система по управлению фотками на вашем сайте, где есть: добавление, группировка, сортировка фото, создание альбомов, миниатюр, импорт мета данных и многое другое.

NextGEN обладает широкой функциональностью, но при этом достаточно прост и понятен в работе через админку. В классической версии содержит 2 варианта галерей (с миниатюрами и через слайдшоу) + 2 типа стилей альбомов со множеством опций: оформление, размеры картинок, эффекты увеличения при просмотре и т.п. В PRO версии разных способов отображения контента еще больше.

BJ Lazy Load

Он, как и все остальные Lazy Load решения, позволяет ускорить загрузку вашего веб-ресурса. BJ Lazy Load показывает пользователям графику в статьях и дизайне сайта только когда прокрутка экрана до них доберется. В описании сказано, что поскольку данная технология поддерживает в том числе и с iframe, то вставки Vimeo или YouTube также будут обрабатываться. Хотя в подборке плагинов отложенной загрузки изображений есть специальный вариант для видео контента — Lazy Load for Videos (тоже недавно получил обновление).

Flickr Badges W >

Для тех, кто не в курсе Flickr — один из самых древних, крупных и популярных фотохостингов, которым пользуются миллионы людей. Flickr Badges Widget — простой виджет на jQuery, позволяющий отображать в блоге подборки последних или случайных объектов из вашего Flickr аккаунта. Этот модуль картинок в Вордпресс содержит несколько опций настройки, систему табов и даже механизм кэширования. Из подобных решений это самое скачиваемое наряду с Meks Simple Flickr Widget.

Responsive Flickr Sl >

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

Photo Gallery by WD

Продвинутая WP галерея со множеством настроек и 100% адаптивностью. В этом Вордпресс модуле к картинкам можно добавлять описания, теги, формировать из них альбомы. В галерее доступны несколько видов отображения: миниатюры, карусель и др. Есть поддержка видео и даже какие-то E-commerce функции для продажи принтов. Последняя и часть других фишек, как я понимаю, доступны в PRO версии, но и без них бесплатный релиз имеет весьма привлекательные возможности.

Responsive Lightbox by dFactory

Данный скрипт позволяет посетителям веб-проекта просматривать увеличенные версии картинок с помощью так называемого Lightbox эффект. Применяется как на отдельных изображениях, так и в галереях — для WordPress графики подключается автоматически. Самое полезное здесь — адаптация под мобильные девайсы. Модуль содержит много разных опций, виджеты, совместим с WooCommerce и Visual Composer. Простой, но функциональный инструмент.

Easy FancyBox

Как и предыдущий, этот WordPress плагин изображений добавляет эффект Lightbox всем JPG, GIF и PNG картинкам на сайте. После установки основные опции найдете в разделе «Настройки». Кроме графики он также срабатывает для: видеоконтента (ссылки на Vimeo, Youtube, Dailmotion), флеш файлов, PDF, iFrames и в некоторых других случаях. Совместим с NextGEN. Также по теме могу упомянуть модуль jQuery Colorbox, что имеет меньше загрузок, но описание у него неплохое. Читайте обзор плагина Easy Fancybox.

MetaSl >

Достаточно функциональное и не сложное в работе решение для внедрения слайдшоу. Выбираете файлы из медиабиблиотеки или просто перетаскиваете их, устанавливаете заголовок, ссылки и другие детали. Возможность добавить линки на фотки — одно из приятных преимуществ (иногда попадаются такие задачи в работе).

Плагин поддерживает 4 разных типа слайдшоу: карусель Flex Slider 2, Nivo Slider с 16 эффектами и 4 темами, максимально легкий Responsive Slides и Coin Slider (первые 3 полностью адаптивны). Работа над модулем активно ведется, в нем много настроек, поддержка мультиязычности и т.п.

Responsive Sl >

Достаточно популярный и мощный плагин Вордпресс изображений для создания слайдера. Вы можете добавлять сколько угодно картинок из своей библиотеки и создавать сразу несколько элементов на странице. Кроме графики допускается использование видео, шорткодов и виджетов. Модуль поддерживает HTML код в заголовке и описании, можете добавление URL линков, есть десятки разных опций, адаптивность. В принципе, по функциям все подобные слайдеры плюс-минус похожи.

Logo Carousel

Это один из самых скачиваемых вариантов из подборки слайдеров логотипов, но выбирать подходящее решение нужно зависимости о своих текущих задач. В Logo Carousel есть: возможность добавлять активные ссылки на лого, создание нескольких объектов на странице, использование шорткодов. Из интересных особенностей — эффект, когда изначально изображения отображаются в ЧБ, а при наведении в цвете (работает в современных браузерах).

Carousel Horizontal Posts Content Sl >

В данном WordPress плагине картинки не выводятся как отдельные графические элементы, — слайдер содержит записи. Это отличная возможность представить посты в оригинальном виде, демонстрируя, например, последние новости. Кроме миниатюры в Posts Content Slider отображаются заголовок и краткий анонс. Слайдер «дружит» с мобильными устройствами, имеет навигацию, поддерживает виджеты и переводы. Есть десятки опций для его настройки. Весьма интересный модуль, как по мне.

Twenty20 Image Before-After

Один из плагинов из заметки про создание фото До и После в Вордпресс. Наверняка, вы слышали о таком эффекте. Twenty20 Image Before-After легко интегрируется в статьи через шорткоды либо вставляется через виджет. Интерфейс максимально прост, поддерживается Visual Composer. Картинки получаются адаптивными и доступны на всех устройствах. В описании на официальном сайте есть видео демонстрация настройки и работы.

Instagram Feed

Отображает фотки из одного или нескольких открытых Инстаграм аккаунтов либо из фидов. Совмещайте несколько источников в одном блоке. Здесь много разных настроек, поддерживаются полноразмерные фотки, имеется адаптивность. Под блоком фотографий найдете кнопку «загрузить еще», с помощью которой можете обновлять их бесконечное число раз. Есть также кнопка подписки.

Easy Watermark

У меня уже был детальный обзор этого Вордпресс модуля картинок для создания водяного знака watermark. Это неплохое функциональное решение я использую в текущем и некоторых других проектах. Не смотря на то, что оно не обновлялось около 2х лет, с новыми версиями системы работает стабильно. Нравится наличие множества фишек, например, допускается создавать водяной знак из текста или jpg / png / gif файлов, имеются настройки прозрачности, расположения watermark`а и т.п.

Auto Post Thumbnail

В блоге есть специальный раздел/тег про WordPress миниатюры — найдете там интересные статьи. Что касается этого модуля, то он автоматически создает Thumbnail из первой картинки в постах или других типах записей (если, конечно, такого элемента у публикации еще нет). Вы также можете сгенерировать миниатюры в уже существующих заметок.

Comment Images Reloaded

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

В настройках Comment Images Reloaded можете указать максимальный вес загружаемого файла, выбрать размер отображаемой графики на сайте, запрещать/разрешать данную функцию для определенных записей и т.п. Дополнительно советую глянуть расширенный обзор модуля загрузки картинок в комментариях — там чуть более детально рассмотрены все его опции.

Related Posts Thumbnails Plugin for WordPress

Также миниатюры пригодятся вам в похожих заметках после статей — это поможет привлечь внимание читателей и к другим публикациям. В настройках задаете число выводимых элементов и выбираете алгоритм отбора схожих записей по категориям, тегам. Кроме фото выводятся анонсы (все, в принципе, традиционно).

Изначально думал переместить устаревшие WordPress плагины для изображений из прошлой версии поста в самый конец дабы оставить их, так сказать, для ознакомления. Однако, как оказалось, из 20-ти подобранных в 2010 году, решений доступными оказались лишь 3. Некоторые последний раз редактировались 5-7 лет назад, но добрая их половина просто удалены из репозитория. Вот уж действительно непостоянная судьба у скриптов и модулей.

В дальнейшем данный список плагинов для картинок в Вордпресс обязательно будет пополняться. Я, в принципе, сразу мог разместить их здесь около 30-40 штук, но думаю, лучше будет отобразить из каждой категорий задач по 1-2 самых эффективных варианта. Переходите по дополнительным ссылкам в статье дабы найти остальные модули.

Если вы знаете другие интересные/полезные наработки либо заметили, что какой-то из плагинов перестал работать — пишите в комментариях.

Мастер Йода рекомендует:  Извлечение данных с помощью функции preg_match() PHP
Добавить комментарий
21.05.2015, 13:26 #8