3 колонки —Русские шаблоны WordPress. Шаблоны 3 колонки вордпресс
Как адаптировать шаблон WordPress с 3 колонками
Здравствуйте, уважаемые друзья. Сегодня я покажу, как адаптировать шаблон WordPress с 3-мя колонками. Такую статью и видеоурок попросил меня опубликовать один из моих зрителей канала на YouTube.
Как адаптировать шаблон с двумя колонками, я рассказывал и показывал в статье «Адаптивный дизайн сайта – как адаптировать шаблон WordPress». Так, что если вы её читали, то многое вам будет уже понятно. Во многом процесс похож. Весь секрет в правильном подборе стилей css.
Найти сегодня тему (шаблон), который не адаптирован (не поддерживает адаптацию под мобильные устройства), крайне, трудно. Так как все новые шаблоны поддерживают адаптацию.
Но, я все, же нашёл одну тему, которая в идеале, по структуре, похожа на образец, который меня попросили использовать в качестве примера.
Вот пример сайта, на который я ориентировался при подборе подходящего шаблона для демонстрации.
Сайт для примера
А вот шаблон, который я нашёл. Дизайн отличается, но общая структура у них одинакова – 3 колонки. И именно два сайтбара, с одной стороны.
Шаблон, который будем адаптировать
Анализ шаблона перед началом работ.
Залог успешной адаптации шаблона заключается в грамотном применении медиазапросов и стилей css. Прежде чем приступить к адаптации вы должны провести анализ шаблона. Проверить наличие метатега viewport, определить основные блоки шаблона, какие они имеют классы и идентификаторы, какие размеры, отступы заданы для них, какие стили обтекания или позиционирования применены.
Все это нужно будет для успешной адаптации шаблона. Проведя анализ и поняв, как устроен шаблон, его в дальнейшем легче адаптировать. Здесь важна каждая мелочь.
Итак, первым делом, открываете сайт в браузере и исследуете исходный код шаблона на наличие метатега «viewport». Для адаптивных шаблонов он нужен в обязательном порядке.
Для открытия исходного кода нажимаете комбинацию клавиш CTRL+U, а чтобы найти нужный фрагмент в коде используйте комбинацию CTRL+F и введите поисковый запрос «viewport».
Поиск метатега viewport
Так как шаблон неадаптивный, то и метатега в нём нет.
Следующим шагом нужно выяснить, какие основные блоки имеет шаблон, и проанализировать стили, присвоенные этим блокам. Лучше взять тетрадь, нарисовать схему шаблона и подписывая блоки выписать стили оформления.
А поможет в этом панель разработчика в браузере. Для её вызова нажмите клавишу F12.
Смотрим на структуру шаблона, в моём случае после тега body идёт блок ДИВ с идентификатором «page». Именно в этом блоке собраны все остальные блоки шаблона. И ширина его 1020 пикселей.
Блок div page
Следующий важный блок – это шапка (header), но в моём шаблоне этот блок не имеет фиксированной ширины и, значит, будет подстраиваться под размеры блока «page». Впрочем, меню тоже.
Идём далее и видим блок с контентом ДИВ и идентификатором id=»content», этот блок имеет ширину 540 пикселей.
Блок div content
Общий блок для двух сайтбаров имеет идентификатор id=»sidebar» и ширине его 360 пикселей.
Блок div sidebar
А в этом общем блоке, расположены левый и правый сайтбары меньшего размера. Левый с идентификатором id=»l_sidebar» и шириной 170 пикселей и правый id=»r_sidebar» 140 пикселей.
Блок div l_sidebar
Надеюсь, вы обратили внимание, что размеры блоков меньше, чем могли бы поместиться в общем блоке «page». Это потому что для каждого блока есть внутренние и внешние отступы и их тоже нужно учитывать. Так как если на компьютерной версии всё смотрится гармонично, то в мобильной версии такие отступы неприемлемы. И в медиазапросах это нужно учитывать.
Далее, идёт блок подвала (footer), который не имеет фиксированной ширины и будет подстраиваться под размеры родительского контейнера. В этом примере это «page».
Процесс адаптации шаблона.
Вот так сейчас выглядит шаблона на мобильных устройствах. То есть до адаптации.
Неадаптированный шаблон
Сервис Page Speed Insights тоже ругается по этому поводу.
Отсутствие адаптивности
Итак, приступаем.
Первым делом добавим метатег «viewport». Открываем административную панель WordPress – «Внешний вид» — «Редактор» — «Заголовок (header.php)».
В этом файле, обычно, прописывают подключение метатегов, стилей, библиотек и скриптов. Хотя, скрипты лучше перенести в подвал.
В общем, в этом файле, между тегами <head>…</head>вставляем вот этот код:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Вставка метатега viewport
Сохраняем страницу и идём дальше.
Теперь открываем файл «Таблица стилей (style.css)». Здесь прописаны основные стили. Мы не будем создавать отдельный файл под мобильные стили, а пропишем их в конце этого файла.
Примечание: Только будьте внимательны, мобильные стили должны быть в самом конце. Если в будущем вы захотите добавить стиль оформления, то делайте это выше этих стилей.
Для написания медиазапросов и стилей под них нужно определить «Точки излома» — порог, при котором дизайн должен меняться.
Определение точек проходит при помощи панели разработчика в браузере. Для своего шаблона я определил три точки, когда дизайн начинает ломаться.
Первая точка – 992 пикселя по ширине.
Первая точка излома
Вторая точка – 760 пикселей по ширине.
Вторая точка излома
И третья точка – 600 пикселей по ширине.
Третья точка излома
Под эти точки я и буду создавать медиазапросы.
Открываю таблиц стилей и в конце добавляю медиазапрос и вот эти стили:
/* Адаптивный дизайн ------------------------------------- */ @media screen and (max-width: 992px) { img {max-width: 100%; height: auto;} body { background: #FFF; } body.custom-background { background-color: #FFF !important; } #page { width: 100%; border: 0; } #menu-header { margin: 0; } .narrowcolumn {width: 56%; float: left; padding: 0 0 20px 10px;} #sidebar {width: 35%; padding: 10px 10px 10px 0; } #l_sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; } #r_sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; } }
Медиазапрос для первой точки
Описать всё довольно сложно, поэтому я подробно всё покажу и расскажу в видеоуроке. Но идея такова. Когда ширина экрана становится меньше 992 пикселя, начинают работать стили из медиазапроса. То есть фиксированная ширина в пикселях пересчитывается в проценты для основных блоков по формуле:
Затем работая с панелью разработчика, выясняются стили, отвечающие за отступы и обтекание. За счёт уменьшения отступов, ширина самого блока может быть увеличена в процентах. За счёт стилей «float» – определяется, с какой стороны блоки обтекают друг друга.
В общем, на первой точке я сделал так, чтобы два сайтбара преобразовались в один и гармонично адаптировались с блоком контента.
Вид на первой точке
Следующая точка 760 пикселей. При такой ширине экрана, сайтбар и контент в одном ряду не помещаются, и поэтому я смещаю сайтбар вниз под блок с контентом, и ширину увеличиваю до 95%.
Для этого я использую вот этот медиазапрос и стили:
@media screen and (max-width: 760px) { .narrowcolumn { float: left; display:block; padding: 5px; margin: 5px; width: 95%; background: #fff; clear:right; } #sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; background: #fff; } }
Вид во второй точке
И в последней точке, 600 пикселей, поиск по сайту переношу над заголовком. В принципе этого можно было не делать, но я решил, что так будет лучше.
Для этого использовал вот этот медиазапрос:
@media screen and (max-width: 600px) { .header-search { float:none; display:block; } }
Вид в третьей точке
На этом адаптация шаблона почти закончена. Я не коснулся только меню. Так что сейчас можно проверить шаблон в сервисе Page Speed Insights и посмотрим, как изменилась ситуация с удобствами для пользователей мобильных устройств.
Без адаптации меню
Как видите, почти идеально. Так как меню я не трогал, то результат 99 из 100.
Адаптация меню была уже рассмотрена в статьях и видеоуроках ранее. Я сейчас быстренько сделаю адаптивное меню, и результат будет доведён до идеала. Как и хотели 100 из 100.
Полностью адаптивный шаблон
Вот и всё, шаблон адаптирован. В качестве наглядного примера, предлагаю посмотреть видеоурок, где я показываю весь процесс в деталях.
У меня на этом сегодня всё. Друзья, желаю вам успехов! До встречи в новых статьях и видеоуроках.
С уважением, Максим Зайцев.
1zaicev.ru
3 колонки Archives - Шаблоны WordPress (темы) на русском
Customizr — отличная бесплатная WordPress тема с довольно широким функционалом, что обычно можно встретить в премиум шаблонах.
Хочу поделиться отличным WordPress шаблоном, имеющим весьма широкий функционал. Шаблон имеет адаптивную верстку, настраиваемый слайдер, возможность кастомизации дизайна отдельных рубрик и страниц, а также полезные виджеты.
Simple Catch — простая и удобная WordPress тема, без всяких излишеств. Имеет слайдер на главной странице, изменяемый макет шаблона — доступны варианты с левым и правым сайдбаром, а также без них в одну колонку.
Уже много времени утекло с последней публикации, пора браться за дело и наверстывать, а то пойди подумаете что блог заброшен. Кстати, не мог не порадовать последний АП ТИц 17.07.2012 60 -> 130.
Сегодня, представляю вам локализированный мной WordPress шаблон от все того же newwpthemes.com. PressBiz выполнен в светлых тонах, имеет правый сайдбар и вполне достаточный для рядового блога функционал. Подойдет для сайтов различной тематики, в отдельности, судя также из названия, для проектов о бизнесе.
MaxiMagazine — одна из последних WordPress тем от newwpthemes.com, выглядит довольно «опрятно», имеет два сайдбара — левый и правый, настраиваемое меню в футере сайте, а также большое число дополнительных виджетов.
Представляю вам довольно функциональный WordPress шаблон Admired, имеющий резиновую верстку. В зависимости от настроек, сайтбар может располагаться как с левой, так и с правой стороны, также шаблон может иметь все три колонки.
Данная WordPress тема — бесплатная версия популярного журнального шаблона от немецкого разработчика der-prinz.com. Тема имеет гибкую настройки, восемь полей для виджетов, настраиваемую область вкладок на главной странице, меню в футере.
UpStream — бесплатный русифицированный Wordpres шаблон в серых тонах, от разработчиков newwpthemes.com. Имеет журнальную структуру, подойдет для сайтов самой разной тематики.
Weight loss — бесплатный WordPress шаблон для сайтов женской тематики. Функции стандартны, ничего лишнего, доработок не требует.
Тема довольно хороша собой и имеет не скромный функционал. Разработчики постарались, чтобы угодить нам. Присутствует широкий слайдер, два сайтбара, нижнее меню, дополнительные виджеты.
StoryMag — идеальное решение для тех, кто ищет новостной/журнальный шаблон, профессиональный дизайн, имеет бесплатный статус. Как и все темы от newwpthemes.com, имеет гибкие настройки, позволяющие подстроить внешний вид сайта под свои нужды.
Данный шаблон имеет отличный внешний вид, цветовая гамма, на мой взгляд, как раз то что нужно. Бесплатный статус и довольно хороший набор возможностей, делает его замечательным вариантом для самых разных проектов, в том числе и новостных сайтов.
Здравствуйте, читатели моего блога! Уже как пару месяцев не публиковал новых wordpress шаблонов, честно говоря было не до этого, много времени занимает офлайн работа… но это отдельная история. Итак, заглянув на популярный сайт newwpthemes.com, я был приятно удивлен, до этого совсем однообразные wordpress темы, стали более функциональней и гибче.
Здравствуйте! Встречаем очень вкусную, а главное бесплатную WordPress тему The Morning After от woothemes.com. Она полностью совместима последними версиями движка, хоть и создана уже более года назад, все благодаря добросовестным разработчикам, которые не забывают обновлять тему.
WorldSym — трехколоночный шаблон от разработчиков themepix.com, выполнен в светлых тонах, шапка содержит две полосы травяного и цвета маренго, что придает сайту большую живость.
templatelab.ru
3 колонки | Русские Wordpress темы и шаблоны
Свежий профессиональный шаблон с фиксированной шириной, который имеет три колонки, зеленое оформление, а также собственную панель администрирования для настройки ее …
Универсальная тема с современным дизайном и множеством полезных и необходимых настроек. Основная цветовая гамма этой темы коричневая, как всегда, разработчки …
Хорошая тема для новостного сайта-портала, которая выполнена в приятных деловых тонах. В неё встроено много полезных функций: например, популярные записи. …
Выполненный в темных тонах трехколоночный шаблон Fenster заинтересует разработчиков сайтов любой тематики. Поддержка виджетов, пользовательские меню в шапке, баннеры и …
Профессиональный многопрофильный шаблон для широкого применения и дополнительной продолжения работы в коде. Содержит большое количество настроек и опций ознакомиться с …
Качественная премиум тема с полезной функцией «выпадающее меню» данная функция отлично помогает структурировать рубрики большого блога. Яркий и светлый дизайн, …
Отличная трёхколоночная тема с перспективным кодом для дальнейшего развития. Имеет поддержку виджетов, миниатюр к записям, рекламу Adsense и многое другое. …
Многофункциональная тема для городского портала от индийского маэстро Sadish Bala. Если вы ищете хороший шаблон для блога, в котором вы …
Неплохая разработка от визуалов веб-сцены ChicagoBlogTemplates. В шаблоне есть поддержка виджетов, форма поиска по сайту, меню в заголовке, rss и …
wordpress-ru.ru
3 колонки | Русские Wordpress темы и шаблоны
Восхитительная тема с интересным названием Karizma. Прекрасно подойдет для сайта общей тематики. Содержит поддержку виджетов, популярные записи, места для рекламных …
Универсальная качественная тема с простым дизайном от мастера веб-сборки и большим количеством настроек подойдет для твоего прикольного и не очень …
Общетематический шаблон, который обладает шестью встроенными цветовыми схемами: белая, голубая, розовая, фиолетовая, красная, черная, зеленая. После активации шаблона появится дополнительная …
Двухколоночный премиум-шаблон с левым и правым сайдбарами, с поддержкой виджетов, в опциях можно задать банеры 125?125 px, Relax полностью совместим …
Тёмный трёхколоночный шаблон, который можно с успехом использовать на любом сайте или блоге, независимо от его тематики и назначения. Встроена …
Бесплатный шаблон от пустынного странника Wrangler, который, как и другие его темы, можно использовать как на блоге, посвященному здоровому образу …
Стильный золотой шаблон, который почти на 100% повышает настроение у посетителей. Содержит в себе все необходимые настройки и опции, которые …
Бесплатная универсальная трехколоночная тема фиксированной ширины от newwpthemes с поддержкой виджетов и каруселью. Имеется поддержка граватаров в комментариях к записям, …
Довольно приятный премиум-шаблон, специально разработанный для владельцев сайтов с высокими техническими требованиями. Сайдбар расположен и справа и слева. Поддержка Gravatar …
wordpress-ru.ru
3 колонки | Русские Wordpress темы и шаблоны
Уникальная и современная тема под лицензией Creative Commons License. Поддерживается и всегда совместима с последними версиями WordPress. Подойдет для любого …
Новейшая уникальная тема с двойным сайдбаром, расположенным с правой стороны. Удобная админка, через которую легко и непринуждённо можно настроить различные …
Высококачественная профессиональная тема с 3-мя колонками и сайдбарами по бокам. Подходит для любой ниши, особенно для кино-сайтов. Поддерживает виждеты и …
Качественный профессиональный шаблон для успешных владельцев крупных проектов. Два сайдбара располагаются справа и слева. Удобное меню в админке. Дизайн: NewWpThemes …
Универсальный тёмный шаблон, который прекрасно подойдет для любого блога или сайта вне зависимости от его тематики. Рекомендуем всем владельцам Вордпресс-блогов, …
Профессиональный шаблон для онлайн изданий и интернет-газет и журналов. В сайдбар можно легко вставить видео с Youtube, просто указав в …
Стильная трехколоночная тема в ретро-гранж формате с оригинально выполненной строкой поиска. Идеально подойдёт для личных страничек, блогов разных тематик. Дизайн: …
Качественная газетная тема для интернет СМИ. В заголовке есть два рекламных блока ссылок. Редактируется в файле ads.php. Просто вставьте свой …
Популярная тема с двойным правым сайдбаром на тему отдыха и путешествий от professional website design. Я этот шаблон используя наодном …
wordpress-ru.ru
3 колонки —Русские шаблоны WordPress
Современный высококачественный шаблон, имеет липкое меню и адаптивный дизайн. Есть встроенные виджеты, есть слайдер, тема подойдет под любой сайт.
Шаблон с тремя колонками, на главной записи расположены в каскадном стиле. Тема довольно проста в использовании, есть небольшое меню с настройками.
Шаблон Pisces идеально подойдет для любителей красивых фотографий, а также создания профессионального портфолио. Тема Pisces имеет симпатичный дизайн и оригинальную структуру.
Тема обладает обширной панелью с настройками, данный шаблон очень гибок в настройках. Подойдет под любую тематику.
Шаблон с тремя колонками в каскадном стиле. Дизайн подстраивается под размеры экранов, в настройках прост.
Качественный шаблон который прекрасно подойдет для любого сайта. В шаблон встроены виджеты, есть виджет для главной страницы, присутствует виджет популярных записей.
Адаптивный каскадный шаблон для движка WordPress. Подойдет для любой тематики, прост в настройках.
Шаблон с тремя колонками на главной и с адаптивным дизайном. Можно использовать под любую тематику.
Шаблон ориентированный на кулинарную тематику сайтов. На главной 3 колонки, есть верхнее меню.
Качественная тема с тремя колонками на главной. Есть встроенный слайдер и много других полезных функций. Чтобы настроить портфолио нужно: создать страницу с шаблоном «Portfolio Page», создать категорию записей в которую добавить их, и настроить в опциях.
Простой шаблон хорошо подойдет для блога или сайта визитки. Шаблон имеет адаптивный дизайн, поэтому будет хорошо отображаться на всех девайсах.
Качественный шаблон с адаптивным дизайном и встроенным слайдером. Чтобы записи на главной отображались как на демо сайте, нужно: - Создать страницу с шаблоном homepage - Задать эту страницу чтобы она выводилась на главной. - Добавить виджеты для homepage
Тема HarmonUX Core имеет качественный и стильный дизайн, который подойдет для организации как профессионального портала, так и простого блога.
Темный шаблон, идеально подойдет для музыкального сайта ориентированного на рок направление.
Качественный настраиваемый шаблон с адаптивным дизайном, его отличие это панель с множеством настроек.
Симпатичная тема выполненная в розовых тонах, дизайн адаптивный. На главной 3 колонки, боковая колонка расположена с правой стороны.
Интересный шаблон со встроенными виджетами, которые позволят выводить записи в нескольких вариантах. В настройках темы можно выбрать сторону для Сайдбара, есть встроенный Слайдер. Чтобы записи на главной отображались как на демо сайте нужно: 1- Создать страницу с шаблоном Magazine Front Page. 2 — Добавить виджетов в область Magazine Front Page 3 — Задать созданную страницу […]
Тема Griffin имеет великолепный дизайн, читую структуру и утонченные линии. Шаблон Griffin идеально подойдет как для создания простого блога, так и для создания корпоративного сайта.
Простой каскадный шаблон с адаптивным дизайном, на главной странице записи выводятся в 3 колонки.
Записи на главной выводятся в виде блоков, хорошо подойдет для сайта фотографа или художника.
wordpress48060.rssing.com
