WP-THEME.EU

Темы для WordPress европейского качества

Размер фотографий для мобильных устройств

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

Тема мобильного интернета набирает обороты и темы для WordPress оптимизированные под мобильные устройства сейчас гораздо популярнее нежели «классика». Хорошие классические темы, тем не менее, если хорошо сверстаны, отображаются и на мобильных устройствах тоже. Наши темы для WordPress в большинстве своем «приспосабливаются» под мобильные устройства, особенно выходящие после 2012-ого года. Но есть проблема: если тема специально не «заточена» под смартфоны и гаджеты, то есть опсаность того, что эффект будет не самый лучший. Речь идет в первую очередь о дополнительных элементах, составляющих информационную  часть страницы. Это таблицы и это графики.

Как создать мобильную версию собственного сайта, работающего на WordPress, я уже рассказывал Вам в статье «Создать мобильную версию сайта«.

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

Responsive Design

Адаптация форографий ко всем устройствам

Доступ FTP и/или файл style.css

Для этого нам требуется доступ к внутренним файлам через протокол FTP. В директории Вашего сайта находите папку wp-content/название-вашей-темы и файл style.css. Открываем данный файл.

Если же Ваши настройки WordPress позволяют Вам обрабатывать файлы темы напрямую из консоли (админ-панели) WordPress, то пройдите в редактор и произведите нижеследующие изменения напрямую там:

Консоль -> Внешний вид -> Редактор -> Название темы -> style.css.

Если Ваша тема скаченна или получена с нашего сайта WP-Theme.eu, то ближе к концу файла (строка номер 3406) Вам нужно найти строку кода:

.wp-caption
{
border: 1px solid #ddd;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
}

И добавить после margin:10px; следующее:

max-width:100%;

В конечном итоге все должно выглядеть так:

.wp-caption
{
border: 1px solid #ddd;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
max-width:100%;
}

После этого сохраняете файл style.css и обновляете его на сервере.

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

В следующем уроке мы разберем тему адаптивных таблиц в темах для WordPress.

Будут вопросы — добро пожаловать!

Успехов!
Ваш РГ

 

6 комментариев: Размер фотографий для мобильных устройств

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *