Полное руководство по темам фреймворкам WordPress. Верстка под WordPress

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

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

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

Cherry Framework от TemplateMonster

Несмотря на свою короткую историю, Cherry Framework успел заслужить много положительных отзывов.

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

Ключевые особенности Cherry:

• Независимая модульная структура позволяет использовать компоненты Cherry в отдельности, как самостоятельные инструменты. Tom J. Nowell из команды Automattic убежден, что подобной возможностью должен обладать каждый приличный фреймворк;
• Редактор и набор шорткодов , позволяющих добавлять различные объекты в любое место страницы;
• Возможность фиксировать положение элемента (логотипа, меню или поисковой строки) относительно верхнего или нижнего колонтитулов;
• Минимизатор CSS - инновационный инструмент, позволяющий объединить CSS из разных файлов в один и минимизировать его для ускорения загрузки;
• Backup Option - очень удобная опция, позволяющая «откатиться» в предыдущее состояние, если вас не устроил результат редактирования;
• Механизм плагинов, обеспечивающий быстрое решение различных задач. Это добавление слайдшоу, боковых панелей и различных типов заметок - для отзывов , портфолио и т.п.;
• Совместимость с инструментами сторонних разработчиков;
• Адаптивность и WPML-совместимость - два жизненно необходимых на сегоднящний день функционала, позволяющих создавать многоязычные сайты, адаптированные к любым устройствам, от смартфонов до ПК.

Hybrid Core от ThemeHybrid

Hybrid Core легкий в установке и настройке фреймворк , который позволяет разрабатывать сложные проекты, не прибегая к большим объемам кодирования. Он совместим со стандартом Schema, что обеспечивает хорошую SEO оптимизацию . Кроме этого, в Hybrid Core присутствует много функций, значительно упрощающих труд разработчика. Среди них такие, как:

• Навигационная цепочка («хлебные крошки»), прекрасно работающая на любых страницах, включая сообщения произвольного типа.
• Исправленная и оптимизированная версия шорткода , предоставляющая полный контроль над галереей изображений
• Media Grabber - функция, позволяющая захватывать любой медиаконтент (в том числе из заметки) и использовать его в любом месте сайта.
• сообщений, позволяющий создавать заготовки для различных типов заметок, не ограничиваясь страницы в целом.
• Расширение стандартной функции постраничной разбивки, позволяющее управлять разбивкой материала на странице результатов поиска, архивированных страниц и пр.
• Автоматическая загрузка средств поддержки многоязычности как для родительских, так и для дочерних тем.

Gantry от RocketTheme

Gantry - это попытка профессионалов из RocketTheme объединить все их достижения в разработке тем для Wordpress в единый фреймворк. И попытка, надо сказать, весьма удачная. Построенный с использованием динамической сетки, этот весьма легкий фреймворк поддерживает SCSS, CSS и LESS.

Взгляните на перечень основных особенностей Gantry:

• Менеджер разметки предоставляет полную свободу в разработке макета.
• Система управления контентом, позволяющая создавать, редактировать и публиковать материалы.
• Визуальный конструктор меню, поддерживающий многоуровневые меню и создание пунктов меню с иконками.
• Мегаменю позволяет создавать нестандартные выпадающие меню, где в качестве подпунктов могут выступать не только ссылки, но и любой html – таблицы, формы, списки, отформатированный текст
• Интерфейс администратора, созданный с использованием Ajax, и работающий с невероятной быстротой.
• Мощный обработчик шаблонов Twig.
• А еще Gantry может похвастаться YAML-ориентированным конфигуратором, скользящими боковыми панелями, мощными возможностями наследования и набором всевозможных иконок и шрифтов.

Runway от Parallelus

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

Основные особенности Runway:

• Генератор тем, предназначенный для создания, копирования и редактирования тем.
• Конструктор тем - предназначен для создания админпанелей и записей нестандартного (пользовательского) типа.
• Модульная структура, позволяющая добавлять требуемую функциональность при помощи плагинов буквально в один клик.

Wonderflux от Jonny Allbut

Еще один фреймворк с открытым исходным кодом в нашей подборке - Wonderflux. Качественный продукт, который позволит вам сэкономить время разработки, при этом нисколько не потеряв эффективности.

Ключевые особенности Wonderflux:

• Динамическая разметка , обеспечивающая адаптацию темы к любым размерам экрана.
• Гибкие параметры разметки, которые можно изменять «на лету».
• Коллекция из более чем 100 шорткодов , позволяющая внедрить в тему код или контент любого типа
• Административные настройки, обеспечивающие легкую конфигурацию сайта.
• Совместимость с плагинами Wordpress позволяет решить практически любую поставленную задачу
• Валидатор кода, обеспечивающий соблюдение веб стандартов, что является непременным условием качественной SEO оптимизации.

Unyson от ThemeFuse

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

Ключевые особенности:

• Конструктор страниц с поддержкой технологии drag-and-drop .
• Content Demo Install - Расширение, позволяющее отображать контент именно так, как он выглядит при редактировании.
• Более 20 параметров, упрощающих создание контейнеров, вкладок и форм для админпанели
• Динамические боковые слайд-панели , которые могут настраиваться индивидуально для каждой страницы.
• Автоматическое резервное копирование непосредственно из админпанели. Возможно регулярное копирование по расписанию (ежедневно, еженедельно, ежемесячно и т.д.).
• Навигационные цепочки (a.k.a. «хлебные крошки»), добавляющие простую и понятную навигацию
• Модуль слайд-шоу, поддерживающий как фото- так и видеоконтент.

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

PressWork

Бесплатный Wordpress фреймворк, созданный с использованием HTML5 и CSS3 и ориентированный на широкий круг пользователей - разработчиков, дизайнеров, блогеров.

Вот некоторые его особенности:

• Редактор Front-End - возможность редактирования frontend при помощи редактора с поддержкой drag-and-drop.
• Набор плагинов, расширяющих базовую функциональность фреймворка для решения конкретной задачи.
• Media Queries - модуль, отвечающий за оптимальный внешний вид на любых устройствах.
• Присутствие в комплекте PSD-файлов для редактирования темы, например, изменения логотипа или графических элементов.

Reverie от ThemeFortress

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

Ключевые особенности:

• Фреймворк создан на базе ZURB Foundation и наследует всю его гибкость и мощь.
• HTML5 и hNews microformat обеспечивают ясный, понятный и легко воспринимаемый код. Для HTML5 тэгов можно использовать пользовательские функции Wordpress.
• Имеет механизмы адаптации к размеру экрана, так что выглядит одинаково хорошо и на смартфонах и на ПК.
• Следует концепции минимализма, предлагая только два виджета и два пользовательских меню.
• При необходимости внести изменения в дизайн предлагается непосредственное редактирование SCSS и пользовательского CSS.

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

Vafpress

С Vafpress создание административной (backend) части Wordpress темы становится легким, как никогда.

Для этого в распоряжении разработчика имеются:

• Скрипт управления загрузкой, позволяющий загружать только необходимые блоки, не перегружая frontend излишним кодом.
• Поддержка различных типов полей: текстовых, списков со множественным выбором, флажков (checkbox), переключателей (radiobutton) и других
• Мощный конструктор многоуровневых меню. Для построения использует XML, который затем можно преобразовать в массив PHP.
• Metabox Builder - позволяет записывать metabox в массивы PHP.
• Поддержка групп повторяющихся полей.

Underscores

Некоторые разработчики считают Underscore полноценным фреймворком, хотя некоторые, в том числе сами авторы, позиционируют свой продукт как некую тему-прародительницу для создания законченных тем. Как бы там ни было, использование Underscores позволит существенно сэкономить время и усилия, затраченные на разработку тем для Wordpress.

Основные особенности Underscore:

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

Заключение

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

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

Старый лендинг

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

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

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

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

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

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

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

Где взял бабки на новый дизайн?

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

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

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

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

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

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

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

Для каких целей создается тема вручную

Тема (шаблон) — это совокупность функциональных и стилевых файлов, которые в сумме определяют дизайн ресурса. От темы зависит то, как будет выглядеть сайт, потому очень важно правильно подойти к процессу создания шаблона. Многие сейчас задаются вопросом: «А зачем создавать свою тему, если можно скачать уже готовую в Интернете, причем бесплатно?». Это логичный вопрос и на него есть вполне исчерпывающий ответ: «Чтобы сделать идеальный шаблон, который полностью отвечает вашим требованиям».

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

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

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

• узнаете все о HTML, CSS и кое-что о PHP;
• сможете творить, ведь веб-дизайн — это тоже искусство;
• можно будет зарабатывать на продаже тем;
• откроете для себя новый навык;
• создадите оформление, которое 100 % будет подходить под ваш будущий сайт.

Каким стандартам отвечает тема

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

Все темы WordPress содержатся на хостинге в папке wp-content/themes/. Внутри этой папки есть другие папки с отдельными темами, файл с дополнительными функциями (functions.php), стилевые файлы и изображения. Чтобы найти данные по отдельной теме, вам необходимо зайти в соответственную директорию. Так тема «Vestern» будет размещена в папке wp-content/themes/vestern/.

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

Вы заметите, что шаблон, как правило, состоит из файлов трех форматов:

1. Style.css — стилевой файл, ответственный за внешнее оформление сайта.
2. Functions.php — функциональный файл, добавляющий на страницы различные возможности.
3. Другие php-файлы, которые отвечают за особенности вывода шаблона на сайте, интеграцию темы с WordPress. Именно эти файлы позволяют перевести psd макет в полноценный шаблон.

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

Правила создания файла style.css

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

1. Имя шаблона.
2. URL, который ведет к теме.
3. Описание с указанием основных особенностей шаблона. Кратко.
4. Имя автора. В данном случае укажите свое имя.
5. Ссылка на автора, то есть на вас. Можете указать ссылку на профиль в социальных сетях.
6. Название родительской темы — это указывать необязательно.
7. Версия темы. Если только создали, тогда v. 1.0.
8. Полное описание шаблона. Можно писать развернуто.

Чтобы создать самую простую тему WordPress, достаточно добавить редактированную версию с одним файлом style.css. В этом файле возле строки «template» укажите имя родительской темы. К примеру, Classic, если вы редактируете стандартный шаблон. Теперь созданная тема будет полностью соответствовать шаблону Classic. Потому файлы вам нужно будет загружать именно в директорию wp-content/themes/classic.

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

Особенности файла дополнительного функционала functions.php

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

Основное предназначение файла functions.php — это определение доступных функций настройки в админке для данной темы. То есть все функции, которые вы впишите в functions.php будут отображаться в админпанели, либо на странице для пользователя. Обычно, это смена цветового решения для сайта WordPress, изменение шрифта и многое другое. Но есть множество вариантов использования этого файла. Однако, это уже совсем другая история…

Особенности php файлов шаблона

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

Если хотите добавить на сайт минимальную тему, или испытать свой psd макет, тогда вам понадобится только два файла в директории шаблона:

1. Style.css.
2. Index.php.

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

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

• header.php — отвечает за шапку сайта;
• sidebar.php — боковые колонки;
• footer.php — подвал ресурса (его нижняя часть);
• comments.php и comments-popup.php — комментарии.

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

• чтобы добавить файл шапки сайта (header.php) пропишите тег

  get_header () tamplate tag;

• для футера аналогично, только вместо header укажите footer и т. д.

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

Выбор функционала шаблона

Со временем вы столкнетесь с дилеммой — какой тип шаблона выбрать. Движок предоставляет выбор. Либо вы сможете выбрать шаблон с подключенной иерархией Template Hierarchy, либо макет с тегами Conditional Tags.

Первый вариант уже был рассмотрен. Все файлы php шаблона — это и есть иерархия Template Hierarchy. То есть следуя правилам этой иерархии, вы постепенно генерируете отдельные файлы макета. Таким образом, у вас создастся полноценный шаблон из ряда функциональных php-составляющих. Иерархия в этом случае работает по принципу загрузки по запросу. К примеру, если у вас есть файл категорий (category.php) и пользователь запросил его, то в браузере загрузится именно эта составляющая сайта. Если же его нет, тогда будет загружен ключевой файл шаблона index.php.

Таким образом, вы сможете изменять внешний вид для отдельных частей сайта при помощи принципа Template Hierarchy. У каждой страницы есть свой определенный ID. Добавьте в директорию с темой файл category-6.php и при запросе рубрики с ID, равным 6, откроется именно это оформление. Если же его не будет, то настройки останутся стандартными — развернется index.php.

Порой принципа Template Hierarchy оказывается недостаточно, чтобы обеспечить максимально комфортное отображение шаблона. В таком случае программисты прибегают к использованию второго принципа — они вводят условные теги Conditional Tags. Эти теги проверяют сайта на соблюдение определенных условий, и если таковые не соблюдаются, они изменяют его внешний вид. То есть эти теги работают по принципу if/else (если/тогда). Так вам не придется добавлять море файлов php с номером каждой категории, а сможете единожды прописать условия для каждого ID.

Как происходит верстка psd макета в Вордпрессе

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

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

PSD — это файл из приложения Photoshop. Это как бы графическое изображение вашего дизайна. Чтобы его сверстать, необходимо в текстовом редакторе добавить html-разметку. Постепенно вы будете изменять каждый из пунктов этой разметки, добиваясь конечного результата, который изображен на макете. Сразу укажите центрирование вашего шаблона, а также размеры разных его частей.

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

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

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

1. Frontend блога

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

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

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

2. Photoshop-макеты

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

3. HTML и CSS

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

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

4. Как работает тема WordPress

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

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

5. Дублирование файлов шаблонов

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

6. Style.css

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

7. Разделение файлов

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

8. Header.php

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

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

9. Sidebar.php

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

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

10. Footer.php

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

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

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

11. Index.php

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

12. Разбор цикла

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

13. Копирование цикла

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

14. Предпросмотр темы

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

15. Single.php

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

16. Page.php

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

17. Удаление файлов HTML

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

18. Шаблон страницы WordPress

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

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

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

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

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

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

Помимо плагинов и сервисов, ещё имеется следующие виды создания мобильной версии:

• Отдельный сайт/версия
• Технология RESS
• Адаптивная верстка

Разбирать каждый способ мы не будем, т.к. в этом нет никакой необходимости. Лично для себя я выбрал 4 способ, то есть адаптивную верстку, поэтому именно о ней и пойдет речь в данной статье. Сразу хочется предупредить что для адаптации сайта Вам понадобятся хотя бы минимальные знания html, css и веб-дизайна.

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

Адаптивная верстка своими руками

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

В чем же вся прелесть адаптивного дизайна?

1. Нет необходимости создавать новый/отдельный дизайн.
2. Нет необходимости создавать отдельный сайт.
3. Относительно простое внедрение.
4. Google любит адаптивные сайты 🙂

Для адаптации мы будем использовать спецификацию для CSS3 под названием Media queries. С помощью этого правила мы сможем создавать различные варианты отображения одного элемента сайта под разные разрешения или устройства. Это очень удобно!

Но перед тем, как мы пойдем «ковыряться» в стилях, необходимо зайти в файл header.php и в тег вписать следующий важный мета-тег, позволяющий устройству подстроить ширину сайта под размеры экрана:

Сейчас, для начала, мы сделаем адаптацию контейнера (div"а), в котором отображаются все элементы сайта, шапку и подвал, а остальное оставим на следующую часть статьи.

Так вот, в первую очередь нам нужно сделать анализ шаблона и собрать некоторые данные, а именно определить идентификатор нужного блока и его первоначальную ширину. Для этого я рекомендую использовать функцию «Просмотр кода элемента» в Chrome или «Панель разработчика» в FireFox — очень удобно. Я буду использовать первый вариант и возьму тестовый шаблон, который ещё не адаптирован и буду показывать всё на нем.

Как мы видим из изображения выше, в моем случае контейнер так и называется «#container» и имеет ширину 960px.

Но что нам это дает? А все очень просто. Ширина нашего главного контейнера, это и есть первая точка, в которой нам необходимо прописать медиа-запрос. А для этого нужно зайти в файл со стилями, обычно это Style.css и в самом конце прописать следующий кусочек кода:

@media screen and (max-width:960px) { содержание запроса }

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

После этого нам нужно вписать новые показатели блоков, чтобы они подстраивались под разрешения шириной менее 960px. Все очень просто! Для начала вместо текста «содержание запроса» впишите следующее:

Img {max-width: 100%; height: auto;} /*адаптация изображений*/ #container {width: 100%; height: auto;} /*адаптация контейнера*/

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

Так вот, сохраняем файл Style.css, обновляем сайт и видим следующее:

То есть, как мы видим из скриншота выше, сайт автоматически сжался до нужной ширины экрана, в моем случае 662px. Здорово, не так ли? А если ничего не произошло, то рекомендую прописать правило!important для ширины контейнера, то есть получится:

#container {width: 100%!important; height: auto;} /*адаптация контейнера*/

Для проверки адаптация я использую функцию той же панелью «Просмотр кода элемента».

Так же, после адаптация контейнера Ваш сайт может начать отображаться неправильно. Может съехать шапка, сайдбар, подвал и т.д. — это нормально! Потому что необходимо проводить данную операцию практически со всеми элементами сайта.

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

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

@media screen and (max-width:960px) { img {max-width: 100%; height: auto;} /*адаптация изображений*/ #container {width: 100%; height: auto;} /*адаптация контейнера*/ }

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