Верстка под WordPress для чайников
Верстальщик рано или поздно сталкивается с версткой для какой-либо из существующих CMS. В этот момент возникает множество вопросов по поводу особенностей верстки под конкретную систему управления контентом. Я не знаю нюансов Bitrix и ModX Revolution. Однако проработав с WordPress 6 лет я могу рассказать об особенностях верстки, которые помогут избежать проблем во время натяжки верстки. Эта статья со временем будет дополняться новыми сведениями о верстке WordPress.
Темы WordPress
Для того чтобы внедрить свою верстку в WordPress используются так называемые темы (themes). Существуют тысячи готовых платных и бесплатных тем, но для использования в системе своей верстки мы можем использовать один из этих подходов:
Создание своей темы.
По сути тема — набор файлов php, js и css. Она определяет не только внешний вид сайта, а также и его функционал. Например можно написать тему в которой будет встроена система бронирования номеров в отеле. В этом варианте вы создаете всю структуру файлов и папок сами. Вот стандартная структура файлов и папок, позже коснемся ее чуть подробнее:
assets (dir) - css (dir) - images (dir) - js (dir) inc (dir) template-parts (dir) - footer (dir) - header (dir) - navigation (dir) - page (dir) - post (dir) 404.php archive.php comments.php footer.php front-page.php functions.php header.php index.php page.php README.txt rtl.css screenshot.png search.php searchform.php sidebar.php single.php style.cssИспользование пустой стартовой темы
Например очень популярная тема у разработчиков называется Underscrores. Либо это может тема со встроенным CSS-фреймворком, таким как Bootstrap. Пример такой темы — Understrap, это симбиоз темы Underscores и CSS-фреймворка Bootstrap.
Создать дочернюю тему
Дочерняя тема создается для готовой родительской темы. Например вы купили тему, но дизайн в ней вам не совсем подходит, это и будет нашей родительской темой. Тогда создается папка с названием theme_name-child и в ней создаются шаблоны, которые переопределяют внешний вид. Например если создать файл header.php, то он переопределит дизайн шапки. И так далее. Дочерняя тема как ребенок похожий на маму, но глаза не карие, а голубые. И родинка не на правой, а на левой щеке.
Шаблоны темы
Рассмотрим структуру шаблонов в теме. Тут все довольно просто, стандартная структура страницы сайта делится на 3 области и размещается каждая в своем отдельном файле header.php, page.php, footer.php
Порой к ним присоединяется боковая панель, если таковая предусмотрена в дизайне сайта, она живет в файле sidebar.php , к слову она не обязательно должна быть сбоку, ее можно вывести хоть в футере, хоть в хедере.
К слову, контент может содержать разные шаблоны, в зависимости от того, что нужно отобразить. Например шаблон archive.php , который отображает все записи блога. Или к примеру категорию блога category.php . Полный список и иерархию шаблонов смотрите тут Со структурой шаблонов разобрались, а теперь посмотрим на остальные нюансы.
Меню сайта
Про меню навигации сайта на WordPress можно сказать пару важных вещей: Меню сайта размечается при помощи маркированного списка, а именно:
Еще отмечу, что текущий пункт меню по умолчанию получает класс .current_page_item , вместо привычного .active , это конечно же можно изменить пересобрав структуру меню, но думаю понятно, что работу на бэкенде можно ускорить прописав дефолтный класс.
Digital-студия Маслоу — мы создаем дизайн сайтов, разрабатываем корпоративные порталы, интернет-магазины, каталоги и лендинги
Верстка для WordPress: особенности и нюансы
Актуальной областью использование системы выступает невероятное разнообразие направлений: от простейших блогов до многостраничных порталов новостей и крупных магазинов. Наличие внутренней конфигурации актуальных плагинов и всевозможных оформительских тем в компании с гармоничной архитектурой обеспечивает возможность заниматься конструированием проектов с широчайшим функционалом.
Особенности оформления контента в WordPress
Как и все современные системы, панель управления контентом сайта, сделанного на Вордпресс содержит редакторы Визивиг (WYSIWYG) позволяющие делать оформление текста.
Верстальщику нужно позаботится о том, чтобы теги форматирования HTML страницы имели соответствующие CSS стили. При правильно настроенных стилях элементов, редактировать текст через редактор сможет любой человек, умеющий пользоваться браузером.
Почему WordPress?
Выбор для создания всевозможных сайтов именно WordPress определяется рядом факторов:
- исключительное удобство админ-панели, разобраться в функционале которой способен даже начинающий или очень далекий от подобных манипуляций пользователей;
- скорость сборки сайтов – например, разработка их простых форм занимает не более дня;
- высокая скорость обучения разработчиков, ведь система проста, интуитивно понятна и отличается легкостью освоения.
Особенности WordPress
Даже при отсутствии опыта работы с WordPress нет необходимости слишком уж переживать. Подобный процесс не отличается невероятной сложностью, зачастую требуя 2лишь наличия знаний самых основных нюансов программирования посредством PHP.
WP отличается замечательной и подробной документацией, включая переводные ее варианты, что серьезно облегчает рабочий процесс с системой для разработки порталов. В большинстве случаев требуется лишь в определенном месте оформленного версткой шаблона HTML обозначить определенные функции WP, копирование которых доступно прямо из текста документации. В общем-то, это и является ключевым отличием и нюансом процесса верстки под WP от обычной шаблонной верстки. К примеру, необходимо решить банальную задачу с выводом на страничку формы обратной связи. Ознакомиться с документацией о цикле в WP и применить наиболее актуальный из имеющихся там примеров в собственной верстке вполне доступно каждому. А как создать HTML форму можно почитать в справочнике по HTML, например GuruWeba.
Естественно, когда необходимо создание либо верстка макетов, отличающихся какими-либо нюансами, то без наличия уверенных знаний о системе WordPress не обойтись, однако они приходят с наработкой опыта практикой. После HTML верстки нескольких сравнительно простых сайтов можно «набить руку» и переходить к проектам посложнее.
Особенности и нюансы верстки под WordPress
Разработка
Автор Webline Promotion На чтение 4 мин. Просмотров 13.6k. Опубликовано 17.01.2020
Верстка под WordPress сегодня очень популярна. Начинающим верстальщикам, которые еще не сталкивались с этой CMS, нужно быть готовым к тому, что знаний HTML и CSS будет недостаточно.
WordPress (WP) – это:
- система управления содержимым сайта с открытым исходным кодом; написана на PHP;
- сервер базы данных – MySQL;
- выпущена под лицензией GNU GPL версии 2.
Сфера применения – от простых блогов до сложных новостных ресурсов и интернет-магазинов. Встроенная система тем и плагинов вместе с удачной архитектурой позволяет конструировать проекты с широким функционалом.
Согласно последним отчетам BuiltWith, W3tech и многих других изданий, безусловные фавориты на мировом рынке сайтостроительства – это CMS WordPress, Joomla и Drupal.
Бесплатный движок WordPress занимает первое место с долей 58,8%; Joomla и Drupal следуют за ним с серьезным отрывом – 6,5 и 4,8% мирового рынка CMS.
| # | Websites using | Market share % | Active sites | # Of websites in million |
|---|---|---|---|---|
| 1 | WordPress | 58,5% | 20,580,941 | 311,682 |
| 2 | Joomla | 6,5% | 2,486,271 | 26,474 |
| 3 | Drupal | 4,8% | 1,194,014 | 31,218 |
| 4 | Blogger | 2,5% | 798,125 | 21,205 |
| 5 | Magento | 1,5% | 501,036 | 18,897 |
| 6 | TYPO3 | 1,5% | 425,730 | 8,481 |
| 7 | Bitrix | 1,4% | 217,541 | 4,057 |
| 8 | PrestaShop | 1,3% | 250,000 | 3,888 |
| 9 | Shopify | 1,3% | 201,900 | 8,590 |
| 10 | Squarespace | 1% | 233,752 | 8,440 |
Основные особенности верстки
Для начала вам необходимо ознакомиться с базовыми основами программирования на PHP и с самим шаблоном WP.
У WordPress есть хорошая документация, в том числе и переводная. Это делает работу с CMS намного проще. Как правило, достаточно в необходимом месте сверстанного обычного шаблона HTML вызвать функции WordPress, которые часто можно скопировать непосредственно из документации. Пожалуй, это все отличие верстки под WordPress от просто верстки шаблона.
Например, вы получили задачу – вывести на страницу записи. Самое простое решение – ввести в поисковике запрос «wordpress вывод постов» и прочесть в документации о цикле WordPress , использовать пример цикла из той же документации в своей верстке сайта.
Далее расскажу о самом интересном процессе – верстке шаблона HTML в шаблон для WordPress.
Этапы подготовки:
- Создаем папку для хранения всех файлов, которые входят в шаблон сайта.
- Добавляем HTML-разметку со следующим кодом, где будущий шаблон будет делиться на три части: header (шапка сайта), main (середина) и footer (нижняя часть сайта).
Важно не забыть создать файл style.css и папку для images.
На этом подготовку шаблона можно считать законченой, далее приступаем к верстке.
Какие нюансы следует учитывать при верстке проекта
- Шаблон должен легко разделяться на шапку сайта, собственно контент и подвал. Чтобы скрывать некоторые элементы шапки/подвала, WP предоставляет множество функций-условий (is front page(), is_404() etc.). Если необходимо изменять внешний вид – CSS умеет, body_class() имеется.
- При верстке различных меню, которые будут управляться через Внешний вид -> меню сайта, необходимо придерживаться следующей структуры:
Как вывод, могу сказать, что научиться верстать под WordPress – достаточно просто. Весь блок вышесказанного умещается в одну фразу – верстайте, стилизуя разметку, которую генерируют WP/плагины/сниппеты-функции, и у вас все получится.
Как натянуть самостоятельно верстку на WordPress
После создания сайта на WordPress можно воспользоваться стандартным шаблоном или установить другой, который не предлагается в комплекте платформы. После выбора темы со стороны ее нужно будет внедрить в код созданного сайта. Этот процесс называют версткой или натяжкой верстки. Рассмотрим подробнее этапы верстки новой темы для сайта на WordPress.
Натяжка верстки на WordPress: план действий
Предполагается, что уже создан сайт и есть в наличии код шаблона (для примера взят «Corpbiz»), который нужно установить на WordPress.
Как натянуть верстку шаблона на WordPress быстро и без ошибок, станет ясно из следующего описания последовательности действий:
- Зайти в панель управления сайта.
- В схеме кода сайта найти папку «themes» и создать в ней папку «сorpbiz», в которой будет проводиться верстка шаблона.
- В новую папку перенести все файлы из архива шаблона. Убедиться, что есть файлы «header.php», «index.php», «sidebar.php» и «footer.php». Если в архиве шаблона WordPress все коды находятся в файле index-html, то создать обозначенные 4 файла и перенести в них соответствующие участки кода.
- Интегрировать шаблон с платформой WordPress.
Далее статичную тему, которая уже загружена в WordPress, предстоит преобразовать в динамичную, чтобы подгружались настройки и данные CMS. В коде макета будут попадаться PHP-операторы, начинающиеся «?». Они, как правило, вызывают выполнение функций системы.
Интеграция шаблона с платформой
Дальнейшая верстка под WordPress предусматривает ряд самых сложных операций, требующих повышенного внимания и точности.
Адаптация header
Чтобы натянуть шаблон и придать ему динамичность, придется поработать с кодами основных файлов движка.
- Открыть файл верхней части «header.php», поменять в нем участок кода до тега «body» на код:
- Отредактировать «index.php» касательно header. Проверить, что в начале кода имеется оператор:
- Если он отсутствует, то прописать его. Данный оператор активирует шапку сайта.
- Заодно проверить, что в конце файла есть операторы:
- И если они отсутствуют, то прописать их. Последние два оператора активируют боковой бар и нижний отдел сайта.
После данных действий новая тема будет отображаться в ПУ и ее можно активировать. Но меню еще пока остается статичным и отображается только одна страница ресурса. Поэтому посадка верстки на WordPress будет продолжена.
Создание динамического горизонтального меню
В «header.php» участок кода с таблицей этого меню заменить на оператор:
Чтобы меню отобразилось в ПУ сайта, перейти во «Внешний вид» — «Настроить» — «Меню», назвать созданное меню как «menu» или создать новое меню, если его все-таки еще нет, и присвоить название «menu».
Это обязательное имя нужно потому, что файл «header.php» с функцией «wp_nav_menu(‘menu=menu’);» активирует меню строго под именем «menu». Хотя оно при необходимости может заменяться другим, но должно совмещаться с указанным в настройках ПУ сайта и в «header.php».
Создание динамического названия и описания сайта
Имя сайта и его описание удобно изменять в админ-панели. Они должны восприниматься из настроек, для чего следует заменить часть кода, отвечающего за текст в шапке, на следующий набор кода:
На этом корректировка «header.php» заканчивается.
Адаптация index.php
Дальнейшая верстка шаблона для платформы WordPress касается публикации контента. Для корректного отображения всех имеющихся страниц в файле «index.php» необходимо изменить блок «right», но проще поменять весь код файла одним махом на следующий:
»>
/ /
А здесь нет ничего �� 404
emm_paginate();
> ?>
