Верстка под WordPress. Делаем динамическим верхнее меню. Фреймворки для создания адаптивного дизайна

Интернет всё больше становиться мобильным. Уже сейчас на некоторых моих сайтах доля мобильного трафика превышает 40%. К тому же Гугл и даже Яндекс заявляли, что в мобильной выдаче предпочтение отдают тем сайтам, которые правильно отображаются на мобильных устройствах. Так что если кто этого ещё не сделал самое время задуматься над удобством пользования вашим сайтом для данной аудитории. Именно поэтому я решил сделать адаптивный шаблон для данного блога — сайт, но при этом не менять его совсем, а просто максимально быстро и просто переделать уже существующий. Заодно и проверим даст ли это рост трафика. Как оказалось это сделать совсем не сложно, достаточно внести мелкие изменения в код и всё доступно прямо из админки WordPress.

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

Приступим…

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

Это прописываем в шапке сайта, в нашем случае это файл header.php, найти который мы можем в админке, пункты меню Внешний вид => Редактор.


Дальше практически все основные элементы сайта с конкретно заданной шириной делаем резиновыми, то есть ширину лучше задавать процентах. Хотя, конечно, можно прописывать конкретную ширину блока для конкретной ширины экрана. В этом нам поможет правило @media . Оно позволяет прописывать в css-файле отдельные стили одному и тому же элементу при разной ширине экрана. Я решил совместить: полностью десктопную версию не менять, а для конкретных экранов задать ширину блоков в процентах.
Например, ширина сайта у меня по умолчанию 1180 пикселей. И я в конце css-файла стилей (редактировать который можно также через админку, как и предыдущий) я дописал правило:

@media only screen and (max-width: 1200px){ #page { margin: 10px auto; width: 98%; } }

Которое делает, при ширине экрана меньше 1200 пикселей, ширину блога 98%.

Дальше у меня есть две колонки: слева с основным текстом ширина которой 660 пикселей и правая – сайтбар, ширина которого 300 пикселей. Поэтому я тоже добавил правило, которое также делает их резиновыми, но только при ширине монитора меньше 1030 пикселей.

@media only screen and (max-width: 1030px){ #primary { width: 65%; }#secondary { width: 32%; } }

@media only screen and (max-width: 760px){ #primary, #secondary { width: 95%; float: none; margin: 10px auto; } }

А для ширины 480 пикселей и меньше пришлось картинки в лентах новостей сместить в центр и также задать их ширину в процентах.

@media only screen and (max-width: 480px){.blog .entry-image, .search .entry-image, .archive .entry-image { float: none; margin: 0px auto; width: 90%; }.entry-image img { height: auto; width: 100%; }}

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

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

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

• Часть скрывать, а часть показывать;
• Делать выпадающий список;
• Ничего не делать.

Скрыть – это не проблема, просто при данной ширине, для данного блока пишем display: none и всё, но вот чтобы потом показать придётся дописать небольшой скрипт. Таких скриптов в Интернете можно найти море и на javascript и на jquery, я покажу тот, который поставил себе. И вставил так же в header.php:

function showmobmenu() { if (document.getElementById("mobmenu2").style.display == "block") {document.getElementById("mobmenu2").style.display = "none"} else {document.getElementById("mobmenu2").style.display = "block"} }

То есть мне пришлось в код сайта, перед меню, ещё вставить ссылку с картинкой, которая по умолчанию скрыта, а при ширине 480 и меньше показывается, ну и при клике по ней раскрывается всё меню.

Png" alt="Мобильное меню">

А также изменить свойство float для пунктов меню:

@media only screen and (max-width: 480px){ #mobmenu2{ display: none; } #mobmenu { display: block; } .main-navigation li { float: none; } }

Здесь есть ещё один нюанс, который я заметил уже в процессе: если меню скрывается скриптом, то есть с помощью кнопки в мобильной версии, то при увеличении ширины (например, если вы повернули смартфон с вертикального положения в горизонтальное) главное меню уже не отображается. Именно поэтому пришлось добавить ещё одно правило для мониторов 481 пиксель и больше.

@media only screen and (min-width: 481px){ #mobmenu2{ display: block !important; } }

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

Ну, вот и всё, теперь уже точно имеем удобный адаптивный дизайн WordPress. Конечно же, эти же правила подойдут для адаптации практически любого сайта на любом движке. Гугл теперь говорит, что данный блог имеет 99 из 100 по удобству пользования для мобильных устройств.


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

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

На сегодня адаптивную верстку имеет доля 10-20% всех сайтов. 21 апреля 2015 года Google «обрадовал» веб-мастеров, занимающихся сайтостроением, и владельцев ресурсов сообщениями на почту, где сервис предупреждал о неудобстве использования для мобильных устройств. И дальше следовало, что поисковая система отказывается от индексирования таких страниц. Для многих это стало частичной потерей потока посетителей из мобильного интернета.

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

Адаптивная верстка представляет из себя обычный веб-дизайн, умеющий подстраиваться под любое разрешение экрана, в т.ч. для mobile, чтобы пользователю было удобно просматривать страницы ресурса. Как вариант решения проблемы - создать мобильную версию сайта.

Работа над созданием адаптивного веб-дизайна начинается с проверки на сервисах Google. Обычно сервис выдает перечень доработок, которые необходимо выполнить для перехода на мобильную версию. При адаптивной верстке на WordPress изменения вносятся в css-файлы, а внутри header.php в части head прописывается мета-тег с атрибутом viewport, позволяющий подстроить содержимое интерфейса под размер экрана.

Удобство этого метода - не нужно создавать новый сайт, следить за наполнением, заново проводить seo-оптимизацию. Однако, возникают проблемы с отображением в разных браузерах, элементы в некоторых из них начинают «ехать». Требуется тонкая настройка css стилей.

Специально для WordPress создатели разработали бесплатные плагины, помогающие перейти, например, MobilePress, Duda Mobile Website Builder. Их можно скачать с официального сайта.

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

Найти качественные адаптивные шаблоны для веб-мастера не займет много времени, однако потребует знания основ HTML и CSS. Шаблон для работы легко скачивается и переделывается на свое усмотрение.

Достоинства:

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

Недостатки:

• Придется полностью менять старый на новый;
• Внутри встречаются закодированные ссылки автора или на другие сайты.

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

Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.

До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).

Стандартный Frontpage (index.php )

Стандартный Single (single.php )

Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip , чтобы увидеть готовый файл Photoshop.

Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip . Распаковав архив, вы увидите index.html, single.html и page.html . Далее я буду использовать их для превращения в шаблон.

Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.

Если вы перейдёте к папке стандартной темы (wp-content/themes/default ), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css . Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php ).

Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .

Скопируйте папку HTML из GlossyBlue в папку wp-content/themes . После этого перейдите в директорию темы default , скопируйте comments.php и searchform.php в папку glossyblue .

Перейдите в папку темы default , откройте файл style.css . Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue . Если хотите, можете изменить название и данные об авторе.

Теперь нам нужно понять где разделить HTML-файлы на части: header.php , sidebar.php , и footer.php . На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.

Откройте index.html . Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php .
Перейдите в папку темы default , откройте новый header.php . Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.

Меню навигации (wp_list_pages ) Замените тэги li в ul id=nav на ;

Вернитесь к index.html , вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar , поместите его в новый php-файл и сохраните как sidebar.php .

• Замените form id=searchform со всем содержимым на .
• Замените теги li категорий на
• Замените теги li архивов на

Вернитесь к index.html . Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php .

Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.

«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы)

Теперь в вашем index.html должен остаться только div id=content . Сохраните файл как index.php . Впишите строки: get_header , get_sidebar , и get_footer в том порядке, как они встречаются в шаблоне.

Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found» .

Перейдите к директории темы default , откройте index.php . Скопируйте цикл из стандартного index.php в свой — между div id=content../div . После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.

Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design , вы должны увидеть тему GlossyBlue . Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.

Пришло время создать шаблон single.php . Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php , сохранив его как single.php . Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template . На следующем скриншоте отображены внесенные мною изменения:

Теперь новый single.php сохраните с названием page.php . Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов .

Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.

А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:

Запилили мне шаблон под wordpress. Да не простой, а с лендингом на главной. Да ещё и адаптивно всё.

До этого стоял у меня простой статический лендос, который я спиздил с какого-то сайта c предложением услуг копирайтинга. Конечно, не совсем спиздил, я его переделал. Цвета, блоки, меню, и т. д. Но всё это делалось на коленке. Ибо дизайнер из меня никакой. Так, html код в трех местах поправить могу конечно.

Вот так это выглядело:

Форма заказа это уже новая, через wp, вставленная. Была красивая, но она как-то перестала работать. Причем, обнаружилось, что она не пашет, только через пару месяцев. Это летом было. Я пиздец негодовал тогда — два месяца люди не могли написать мне и заказать услуги потому что я нормально не протестировал форму заказа! Были заказы через скайп, напрямую в почту, в личках на форумах. А вот с лендинга внезапно перестали приходить заявки.

А по первой-то, когда только слабал этот сайтик — заявки поступали регулярно. Потом голову ломал почему вдруг перестали. Оказалось что форма не работала. Ну как, не работала, она работала — со второй попытки уходила заявка. Поэтому я и проебал в тестах этот момент — потому что она кое-как всё таки работала. Но кто будет писать второй раз админу, у которого не пашет форма обратной связи? Вот так всё и продолжалось, пока какой-то добрый человек не сообщил мне в скайпе, что форма нихуя не пашет. Тотчас же убрал форму, и воткнул чат живосайт. Дело потихоньку наладилось.

А в сентябре я решил запустить таки этот бложек. Конечно же на wordpress. А на главную прилепил свой лендинг .

Ну и недавно уже вернул форму заявок через плагин встроил в этот лендос.

Но это всё как-то несерьёзно.

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

По цене было адекватное предложение в 4000 рублей, и 4 дня работы. На что я немедля согласился. Как оказалось, вёрстка действительно дело непростое. Было пару десятков замечаний и правок, которые в течение двух суток терпеливо допиливались.

В результате получилось то что получилось, и что вы можете видеть теперь на этом сайте. Итого, обошлось всё дизайн+верстка шаблона в сумме в 8000 рублей. Как вам шаб? Да и вообще, это нормальные цены? Может быть я не прав, и такая верстка реально 10к рублей стоит, а я просто жмот?)

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

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

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

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

Bootstrap от Twitter основан на 12 -колонночной адаптивной модульной сетке. Он включает в себя резиновые и статичные шаблоны. Дополнительно фреймворк поддерживает такие JavaScript -плагины, как: Image Carousel , Typehead , Togglable Tabs и многие другие.

Less Framework основан на 4 шаблонах и 3 наборах типографических пресетов. Less Framework использует основной шаблон в качестве отправной точки, а затем создаёт “дочерние” с помощью CSS3 медиа-запросов.

Foundation – это модульная система, основанная на 12 колоннках, не имеющих фиксированной ширины. Размеры колонок меняются в зависимости от разрешения экрана или размера окна браузера. В комплект этого фреймворка входит набор кнопок, встроенные стили форм и многое другое.

YAML имеет многоколоночную разметку, основанную на модульной сетке с шириной, заданной в процентном соотношении. Этот фреймворк также имеет небольшой встроенный функционал и поддерживает несколько jQuery -плагинов, как: Accessible Tabs и SyncHeight .

Для начала скачайте Foundation и добавьте его файлы в css — и js -папки, находящиеся в директории темы WordPress . Самый простой способ добавить необходимые файлы к Вашей теме – использовать и .

Чтобы добавить JavaScript -файлы для корректной работы Foundation , Вам нужно создать функцию, которая вызывает wp_enqueue_script .

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

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

Все просто обожают прилагать дополнительные усилия для того, чтобы всё работало в Internet Explorer , не так ли? Чтобы быть уверенным в том, что фреймворк Foundation будет корректно работать в Internet Explorer , Вам нужно добавить несколько условных операторов. Этот блок кода нужно поместить в файл header.php перед закрывающим тегом head .

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

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

Worpress Bootstrap – это тема разработанная на фреймворке Bootstrap от Twitter . Она имеет 4 различных шаблона страниц на выбор и несколько вариантов боковой панели. Дизайн этой темы полностью адаптивный. После установки, Вы можете посетить bootswatch.com и выбрать любую из цветовых схем темы.

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

Тема Responsive Twenty Ten поддерживает резиновые изображения, отступы и изображения для мобильных устройств. Она была создана на основе темы Twenty Ten .

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

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

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

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