Как адаптировать шаблон WordPress с 3 колонками 41
Здравствуйте, уважаемые друзья. Сегодня я покажу, как адаптировать шаблон WordPress с 3-мя колонками. Такую статью и видеоурок попросил меня опубликовать один из моих зрителей канала на YouTube.
Как адаптировать шаблон с двумя колонками, я рассказывал и показывал в статье «Адаптивный дизайн сайта – как адаптировать шаблон WordPress». Так, что если вы её читали, то многое вам будет уже понятно. Во многом процесс похож. Весь секрет в правильном подборе стилей css.
Найти сегодня тему (шаблон), который не адаптирован (не поддерживает адаптацию под мобильные устройства), крайне, трудно. Так как все новые шаблоны поддерживают адаптацию.
Но, я все, же нашёл одну тему, которая в идеале, по структуре, похожа на образец, который меня попросили использовать в качестве примера.
Вот пример сайта, на который я ориентировался при подборе подходящего шаблона для демонстрации.
Сайт для примера
А вот шаблон, который я нашёл. Дизайн отличается, но общая структура у них одинакова – 3 колонки. И именно два сайтбара, с одной стороны.
Шаблон, который будем адаптировать
Анализ шаблона перед началом работ.
Залог успешной адаптации шаблона заключается в грамотном применении медиазапросов и стилей css. Прежде чем приступить к адаптации вы должны провести анализ шаблона. Проверить наличие метатега viewport, определить основные блоки шаблона, какие они имеют классы и идентификаторы, какие размеры, отступы заданы для них, какие стили обтекания или позиционирования применены.
Все это нужно будет для успешной адаптации шаблона. Проведя анализ и поняв, как устроен шаблон, его в дальнейшем легче адаптировать. Здесь важна каждая мелочь.
Итак, первым делом, открываете сайт в браузере и исследуете исходный код шаблона на наличие метатега «viewport». Для адаптивных шаблонов он нужен в обязательном порядке.
Для открытия исходного кода нажимаете комбинацию клавиш CTRL+U, а чтобы найти нужный фрагмент в коде используйте комбинацию CTRL+F и введите поисковый запрос «viewport».
Поиск метатега viewport
Так как шаблон неадаптивный, то и метатега в нём нет.
Следующим шагом нужно выяснить, какие основные блоки имеет шаблон, и проанализировать стили, присвоенные этим блокам. Лучше взять тетрадь, нарисовать схему шаблона и подписывая блоки выписать стили оформления.
А поможет в этом панель разработчика в браузере. Для её вызова нажмите клавишу F12.
Смотрим на структуру шаблона, в моём случае после тега body идёт блок ДИВ с идентификатором «page». Именно в этом блоке собраны все остальные блоки шаблона. И ширина его 1020 пикселей.
Следующий важный блок – это шапка (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)».
В этом файле, обычно, прописывают подключение метатегов, стилей, библиотек и скриптов. Хотя, скрипты лучше перенести в подвал.
В общем, в этом файле, между тегами … вставляем вот этот код:
Вставка метатега viewport
Сохраняем страницу и идём дальше.
Теперь открываем файл «Таблица стилей (style.css)». Здесь прописаны основные стили. Мы не будем создавать отдельный файл под мобильные стили, а пропишем их в конце этого файла.
Примечание: Только будьте внимательны, мобильные стили должны быть в самом конце. Если в будущем вы захотите добавить стиль оформления, то делайте это выше этих стилей.
Для написания медиазапросов и стилей под них нужно определить «Точки излома» — порог, при котором дизайн должен меняться.
Определение точек проходит при помощи панели разработчика в браузере. Для своего шаблона я определил три точки, когда дизайн начинает ломаться.
Первая точка – 992 пикселя по ширине.
Первая точка излома
Вторая точка – 760 пикселей по ширине.
Вторая точка излома
И третья точка – 600 пикселей по ширине.
Третья точка излома
Под эти точки я и буду создавать медиазапросы.
Открываю таблиц стилей и в конце добавляю медиазапрос и вот эти стили:
Медиазапрос для первой точки
Описать всё довольно сложно, поэтому я подробно всё покажу и расскажу в видеоуроке. Но идея такова. Когда ширина экрана становится меньше 992 пикселя, начинают работать стили из медиазапроса. То есть фиксированная ширина в пикселях пересчитывается в проценты для основных блоков по формуле:
Затем работая с панелью разработчика, выясняются стили, отвечающие за отступы и обтекание. За счёт уменьшения отступов, ширина самого блока может быть увеличена в процентах. За счёт стилей «float» – определяется, с какой стороны блоки обтекают друг друга.
В общем, на первой точке я сделал так, чтобы два сайтбара преобразовались в один и гармонично адаптировались с блоком контента.
Вид на первой точке
Следующая точка 760 пикселей. При такой ширине экрана, сайтбар и контент в одном ряду не помещаются, и поэтому я смещаю сайтбар вниз под блок с контентом, и ширину увеличиваю до 95%.
Для этого я использую вот этот медиазапрос и стили:
Вид во второй точке
И в последней точке, 600 пикселей, поиск по сайту переношу над заголовком. В принципе этого можно было не делать, но я решил, что так будет лучше.
Для этого использовал вот этот медиазапрос:
Вид в третьей точке
На этом адаптация шаблона почти закончена. Я не коснулся только меню. Так что сейчас можно проверить шаблон в сервисе Page Speed Insights и посмотрим, как изменилась ситуация с удобствами для пользователей мобильных устройств.
Без адаптации меню
Как видите, почти идеально. Так как меню я не трогал, то результат 99 из 100.
Адаптация меню была уже рассмотрена в статьях и видеоуроках ранее. Я сейчас быстренько сделаю адаптивное меню, и результат будет доведён до идеала. Как и хотели 100 из 100.
Полностью адаптивный шаблон
Вот и всё, шаблон адаптирован. В качестве наглядного примера, предлагаю посмотреть видеоурок, где я показываю весь процесс в деталях.
У меня на этом сегодня всё. Друзья, желаю вам успехов! До встречи в новых статьях и видеоуроках.
С уважением, Максим Зайцев.
Похожие статьи по теме:
Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:
Подписывайтесь на новые статьи!
Оставьте комментарий Отменить ответ
41 коммент. к статье “ Как адаптировать шаблон WordPress с 3 колонками ”
Столько телодвижений надо делать…
По-моему, если ты спец по кодам, то — да, можно и поиграться, а так купил за 400 руб. у Борисова адаптированный шаблон — и спишь спокойно. Там и плагины, и форма подписки, и как адаптировать шаблон под себя — всего 5 видеоуроков.
Не сочтите за рекламу — я просто вслух рассуждаю…
Конечно, если есть желание разобраться, то статья Ваша сильно поможет, но ведь время….
Спасибо! Вы подтвердили моё мнение, что если чего-то не знаешь — купи.
Здравствуйте, Галина. Только вот зачем платить 400 рублей. Сегодня все современные шаблоны адаптивные. И настраивать ничего не надо. А вот если шаблон старый и в него вложено много сил, менять не хочется, то адаптировать можно своими силами. Сложно кажется только в начале, но когда принцип становится понятен, то и процесс идёт гораздо быстрее. 😉
Хорошую тему затронули, деньги и время 🙂 Вообще, если вот так откровенно базарить т.е. говорить, то информация за бумаги усваивается гораздо лучше. Это всего касается, ты хоть влюбись в свою тему, но если ты купишь тему, то ты мигом пересядешь на платную. Уже, даже учёными доказано, что деньги человеком воспринимаются, как живое существо. Ведь реально, столько беспредела и за этих бумажек 🙂 К сожалению и в интернете без денег никуда, было бы у меня много «бабосов», я бы за одним проектом не сидел, на меня бы уже целый штаб копирайтеров пахал 🙂
Согласен, каждый отталкивается от своих знаний, времени и финансовых возможностей. Можно использовать тему, которая понравилась пару лет назад, но тогда её придётся адаптировать. Сделать этот можно самостоятельно или заплатить деньги. А можно сменить тему и делать все настройки заново. Вариантов масса.
Вань, ты вот понимаешь, как пишутся статьи (хорошие статьи), сколько времени уходит. И ты примерно представляешь сколько такая работа должна стоить. Так вот ко мне обратился один человек, совсем недавно, и попросил подсказать, где ему купить статей по 30-40 рублей (качественных), для наполнения нового проекта. 😉 Я отправил его на биржи статей, и статьи по такой цене он нашёл. На счёт качества, сомнительно конечно. Но, как видишь много денег не надо для найма армии копирайтеров. 😉
А нахрена такой текст тогда нужен? Я и сейчас порой на биржи заглядываю для подработки, скажу честно, статьи пишутся, но это рерайт. Понимаешь, ты никогда не станешь качественные статьи выставлять на бирже, ну как бы они проверенны конечно же с помощью той же Орфограммки, но идут они на скорость, нет общения с аудиторией. В общем, понятие копирайтер — уже давно размылось, представляется эдакий школьник, строчащий тексты за 20-30 рублей. Редко кто платит больше 80 рублей за килознак, я к тому, что никто не заинтересован в создании качественных, насыщенных статей! Ты скажешь, это ведь в интересах веб-мастера? Нифига, большинству грубо говоря «начихать» на свои детища, у них могут быть по 1 000 статей на сайте, но они созданы лишь для рекламы, больше страниц — выше прибыль. Да и администратор, как правило, не смотрит на качество, заказал, например, 5 статей — выполнил норму! Такое воспитание, сложно это переосмыслить, да и если помнишь мой первый блог, то там такая же хренотень, статьи пишутся быстро и их много, а какой толк? У меня и сейчас больше половины статей полностью надо переделывать, потому что г***но, сделаны на скорость. Я сам хватаюсь за голову, сколько же я сам себе проблем создал. Вот тебе моя последняя статья про Ccleaner, она вышла около 12 000 символов, с кучей скринов — ранее, я уже писал про клеанер, но там было максимум пару тыщёнок символов. Попросту говоря, наплевательское отношение к труду и приводит к каламбуру, такое везде.. В реале, точно такая же ситуация и виной всему именно наплевательство к себе, а впоследствии и к окружающим. В общем, если на меня и будут работать копирайтеры, то это будут действительно люди, которым интересна тема, они заинтересованы в развитии проекта.. На биржах совсем другая политика, да и я сам понимаю, что нормальный текст (статья) — это 3 000 — 4 000 рублей.
Ты попал прямо в точку, подобные статьи покупаются именно для наполнения сайта и заработка на рекламе. Качество материала владельцев не волнует. Я как-то даже читал одну из таких статей, где были описаны способы заработка для новичков. Так вот в этой статье было повествование — для чего создаются сайты, что они создаются только для заработка, а о том что они сделаны для людей и речи не идёт. Печально.
Вот именно, что новичкам пудрят мозги! Поскорее создавай сайт — поскорее иди зарабатывай.. Я тут для интереса читаю одного чувака (по другому его назвать нельзя), так тоже всё время кичится, что у него куча денег из интернета и большая база подписчиков. А какими путями? На баннере девушка с просьбой «я зарабатываю 80 00, погасила кучу кредитов», в общем, жизнь удалась! И люди ведутся на эту этикетку, также сейчас создают «закрытые школы обучения новичков» или марафоны всякие. Я очень рад, что ничего из вышеперечисленного не вкусил! Мне повезло, я попал именно к хорошему веб-мастеру «в руки». У каждого был наставник, так вот — этот наставник делал конечно же рекламные статьи, но он писал правду про весь рунет в целом». Он мне дал правильное направление и всё это я получил бесплатно! Он Просто пилил статьи на своём блоге и в итоге зарабатывает баснословные суммы.
Максим, Открой сайты про заработок и всё поймёшь — людям, не говорят, что можно получать приемлемые суммы в интернете… Сразу зазывают на какой-нибудь почтовик, а почему? Это выгодно, гораздо больше рефералов перейдёт на лёгкий заработок (где можно одной рукой ковыряться в носу, а второй кликать по мышке). Если такой человек одумается и начнёт создавать сайты, что из этого выйдет? Я уже подробно расписал в предыдущей статье.
Вань, повезло тебе с наставником. Есть у кого спросить и на кого равняться. Чего нельзя сказать о тысячах новичков приходящих на быстрыми деньгами в интернете. Но, кстати, они сами виноваты в том, что ведутся на откровенный развод. Халявы нет и не было. Ни в оффлайне, ни в онлайне. Реально зарабатывают на таких новичках, авторы курсов с заголовками «3000-12000 рублей в день». У них всё отлажено, каждую неделю новый курс, с новым автором, куча купленных отзывов и очередной клиент уже в кармане.
Эту тему можно обсуждать бесконечно, и каждый делает свой выбор. Только вот почему-то на нормальные продукты люди реагируют скептически, а на предложения «всё и сразу» ведутся. Психология! 😉
Сейчас курсы по сути одни и те же.. Все хотят заработать в интернете — особенно модно продавать инфопродукты «как заработать на сайте» и т.д. Просто, как по мне, если ты зарабатываешь скажем 100 000 рублей в интернете на сайтах, то зачем тебе собственно создавать курсы? Те кто продают такие курсы, они сами ничего не добились или учат других о том, что надо бы создавать инфопродукты. То есть, получается такой «круговорот курсов в природе».
И блогов много, на подобии того же Борисова, где рассказывается, как откусить часть большого денежного пирога. Гуру себя возвышает, делает из себя человека-загадку, кичиться результатами!
Ещё сейчас модно смеяться над инфобизнесменами, мол, посмотрите какой он «лошпет», не то что я! У меня курсы ого-го!
В общем, я сомнительно отношусь ко всему инфобизнесу, я лучше допущу ошибки, над которыми «посмеются» гуру, чем буду следовать за ними. Те кто действительно чего-то добились, учились у таких как Попов, который не кричит на весь интернет, какой он мего-специалист. Да и много веб-мастеров, которые попросту обучают новичков за бесплатно.
Согласен. Вот только, Евгений Попов добился многого благодаря своему таланту и курсы у него как раз на тему создания сайтов и инфопродуктов. Причём лучшие в рунете.
А развод идёт на мусорных курсах по быстрым способам заработка. И зачастую они даже не связаны с созданием сайтов и тем более инфопродуктов.
По хорошему, пока новичок разберётся, кто положительный герой в сфере инфобизнеса, он либо уйдёт и забудет о заработке в интернете, либо начнёт зарабатывать.
На самом деле, мы очень «забитые» люди и ничего не видим.. Если конкретно так оглядеться по сторонам, то можно увидеть, что сейчас все кому не лень продают курсы. Всех больше я ненавижу воду, вроде хаваешь, хаваешь информацию, а в результате — ничего.. Или ещё любят «продавать» себя, человек вроде суть льёт, а получается, что лапшу на уши вешает и подталкивает на покупку своей услуги или курса. Очень сильное воздействие оказывается на человека видео, потому что тут идёт «лапша» по всем направлениям, я сам попадал в эти жадные лапы. Получаются эдакие «разговоры на кухне», сейчас реально не надо ломиться в дома и предлагать пылесосы, создавай курсы, вешай лапшу — всё легально, ах да, можно ещё ИП создать для пущей надутости. Тому пример СМИ, люди обсуждают глобальные политические новости в своём Мухос**ке, но по сути, ничего не меняется, в прочем. как и в интернете…
Да, Попов умеет объяснять, но голос у него мягко говоря какой-то странный.. Чем-то на уточку смахивает)))
В интернете в последнее время действительно много мусора, но всё же хороших продукты тоже попадаются. Я к примеру на блоге рекомендую только, те продукты, которые сам опробовал и которые принесли мне результат. Надеюсь, что этим я хотя бы небольшой части своих посетителей помогаю не попасть на лохотрон.
Я курсы Попова «пихаю» в массы + у него ещё есть жена, она тоже инфобизнесмен. Там тоже интересные курсы по фотошопу и снимкам. Всех больше мне надоел Вергус, у него вроде как курсы отличные, но реально он ВЕЗДЕ! Куда не зайду, его курсы или прям страницы заточенные под какие-нибудь партнёрки. Я не люблю агрессивную рекламную политику, дело в том, что многие ведь рекламируют курсы в качестве партнёра, а значит, могут хоть полностью загадить ссылками статью с предложением купить какой-нибудь курс.
У Евгения Попова семейный подряд. 😉 А у Евгения Вергуса обширный охват. Не зря он все партнёрские конкурсы выигрывает. Он знает своё дело и делает его. А то что реклама везде, так это и есть партнёрский маркетинг. 🙂
Добрый день, Максим. помогите пожалуйста
1) Если я например удалю страницы, которые находиться в индексации. Надо ли сообщить об этом гугл и там удалить url страницы или же гугл сам автоматический удаляют их из индексаций?
2) Дело в том, что когда я захожу в разделе фонетика, фразы, топики, то не могу нажать на свежие записи, рубрики то есть сайтбар не работает . Не знаете почему?
Здравствуйте, Сауле.
Если вы удаляете страницы на своём сайте, то со временем они будут удалены из индекса поисковых систем. Сначала, при обращении робота к этим страницам будет получен ответ 404 (страница не найдена), а затем эти страницы будут исключены из индекса. Для ускорения процесса, можно в кабинетах вебмастера поисковых систем сообщить об удалении.
В сайтбаре у вас всё работает. Я проверил с нескольких браузеров. Попробуйте сбросить кэш барузера и проверить ещё раз. Или открыть сайт с другого браузера. Всё работает, вы зря волнуетесь.
Источник