Как сверстать сайт на wordpress

Верстка под 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

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http:///wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

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

Предварительный осмотр

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

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

Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

После добавления, список страниц должен выглядеть вот так:

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

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

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

function enqueue_styles() < wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); wp_enqueue_style( 'font-style'); >add_action('wp_enqueue_scripts', 'enqueue_styles'); function enqueue_scripts () < wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); wp_enqueue_script('html5-shim'); >add_action('wp_enqueue_scripts', 'enqueue_scripts'); 

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

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

Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:

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

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

Показать код

body < color: #8f8f8f; font: 12px Tahoma, sans-serif; background: #f8f8f8 url(images/bg.png); border-top: 5px solid #7e7e7e; margin: 0; >img < border: 0; >p < margin: 20px 0; >.alignleft < float: left; >.alignright < float: right; >.aligncenter < display: block; margin-left: auto; margin-right: auto; >.input < background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; >.button < color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: 'Oswald', sans-serif; >.image < border: 1px solid #fff; outline: 1px solid #c9c9c9; >figure img < display: block; >.wrapper < max-width: 960px; margin: auto; >header < padding: 20px 0; >.main-heading < background: transparent url(images/h1-bg.png); margin: 30px 0; padding-left: 20px; >.main-heading h1 < display: inline-block; color: #7e7e7e; font: 40px/40px 'Oswald', sans-serif; background: url(images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; >aside < float: left; width: 250px; >aside + section < margin-left: 280px; padding-bottom: 50px; >footer

В результате должна получиться вот такая картина:

Логотип

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

Форма поиска

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

А в файл стилей запишите стили для формы:

Показать код

.search-form

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

Навигация

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

if (function_exists('add_theme_support'))

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Показать код

.main-navigation < background: #f3f3f3; border: 1px solid #e7e7e7; >.top-menu < margin: 0; padding: 0; >.top-menu li < display: inline-block; padding: 10px 30px; margin: 0; text-transform: uppercase; list-style-position: inside; font: 14px 'Oswald', sans-serif; >.top-menu li.current_page_item < background: #29c5e6; >.top-menu a < color: #b2b2b2; text-decoration: none; >.top-menu li.current_page_item a

Футер

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

И прописываем стили в style.css:

Показать код

.footer-content < max-width: 960px; margin: auto; padding: 10px 0; height: 90px; >.footer-heading < font: 14px 'Oswald', sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; text-transform: uppercase; >footer a < color: #dbdbdb; >footer p < margin: 5px 0; >.twitter-time < color: #b4aeae; >.twitter < float: left; width: 300px; >.twitter p < padding-right: 15px; >.sitemap < width: 150px; float: left; margin-left: 20px; padding-right: 15px; >.sitemap .column < display: inline-block; margin-left: 40px; >.sitemap .column.first < margin-left: 0; >.sitemap a < display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; >.sitemap a:hover < text-decoration: underline; >.social < float: left; margin-left: 20px; width: 130px; >.social-icon < width: 30px; height: 30px; background: url(images/social.png) no-repeat; display: inline-block; margin-right: 10px; >.social-icon-small < width: 16px; height: 16px; background: url(images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; >.twitter-icon < background-position: 0 0; >.facebook-icon < background-position: -30px 0; >.google-plus-icon < background-position: -60px 0; >.vimeo-icon < background-position: 0 0; >.youtube-icon < background-position: -16px 0; >.flickr-icon < background-position: -32px 0; >.instagram-icon < background-position: -48px 0; >.rss-icon < background-position: -64px 0; >.footer-logo

В итоге главная страница сайта должна выглядеть вот так:

Главная страница

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

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

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

Показать код

Fusce vitae nibn quis diam fermentum
Etiam adipscing ultricies commodo.
Lorem ipsum dolop
  
Ultricies pellentesque
  
Aliquam ipsum
  
Nullam sed mauris ut

About whitesquare
 
 In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. 
Read more
A word from our ceo
 
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
Yane Naumoski, CEO
Services
 In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. 
Read more
Our teams
 
Lorem ipsum
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et
 
Lorem ipsum
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et
 
Lorem ipsum
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et
24/7/365 Support
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
Read more
Our clients
      

Не забудьте поправить пути до картинок. Они зависят от даты добавления.

Теперь осталось стилизовать данный код.

Показать код

.slider < margin-top: 30px; font-family: 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; >.slider .content < height: 220px; padding: 30px 40px; background: #e2e2e2; >.slider .title < color: #5a5a5a; font-size: 42px; >.slider .subtitle < color: #acacac; font-size: 20px; >.slider .links < display: block; margin: 0; padding: 10px; background: #f3f3f3; border-bottom: 1px solid #e7e7e7; counter-reset: list 0; color: #8f8f8f; >.slider .links li < display: inline-block; font-size: 18px; line-height: 23px; margin-right: 55px; cursor: pointer; >.slider .links li.active < color: #29c5e6; >.slider .links li:before < display: inline-block; counter-increment: list; content: counter(list) " "; background: #8f8f8f; color: #fff; width: 23px; text-align: center; margin-right: 10px; font-size: 16px; cursor: pointer; >.slider .links li.active:before < background: #29c5e6; >.teaser < display: inline-block; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: top; >.teaser .heading < background: transparent url(images/h1-bg.png); margin: 40px 0 20px; height: 16px; >.teaser .bullet < display: inline-block; width: 16px; height: 16px; background: #29c5e6; vertical-align: top; >.teaser .heading-text < display: inline-block; text-transform: uppercase; font: normal 14px/16px 'Oswald', sans-serif; margin: 0; padding: 0 10px; background: url(images/bg.png); >.teaser .image < float: left; margin-right: 20px; >.teaser .small-block < margin-bottom: 10px; >.teaser .small-block .image < margin-right: 10px; >.teaser .more, .teaser .more a < color: #525252; margin-bottom: 0; >.teaser-small-heading < display: block; color: #525252; margin: 0; font-weight: normal; font-size: 11px; text-transform: uppercase; >.teaser-small-paragraph < margin: 4px 0; font-size: 11px; >.clients img

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

После этого, главная страница должна отобразиться правильно.

Сайдбар

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

Для этого создайте файл sidebar.php и поместите в него следующий код:

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:

Далее нам нужно добавить стили для вёрстки:

Показать код

.aside-navigation < background: #f3f3f3; border: 1px solid #e7e7e7; >.aside-menu < margin: 0; padding: 0; text-transform: uppercase; >.aside-menu li < font-weight: 300; list-style: square inside; border-top: 1px solid #e7e7e7; font: 14px 'Oswald', sans-serif; padding: 10px; font-weight: 300; >.aside-menu li:first-child < border: none; >.aside-menu li.current-menu-item, .aside-menu li.current-menu-item a < color: #29c5e6; >.aside-menu a < color: #8f8f8f; text-decoration: none; >.sidebar-heading < background: #29c5e6; font: 14px 'Oswald', sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; text-transform: uppercase; >.map

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Страница About us

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

Показать код

 
 
“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
 John Doe, Lorem Ipsum 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 
Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat.
 
Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.
  
Our team
 
 
    
 
    
 
    
 
    
 
    
 
 
 
    
 
    
 
    
 
    
 
    
 
 

И стили в style.css:

Показать код

.main-blockquote < margin: 0; background: #29c5e6; padding: 10px 20px; font-family: 'Oswald', sans-serif; font-weight: 300; >.main-blockquote p < color: #fff; font-style: italic; font-size: 33px; margin: 0; >.main-blockquote cite < display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; >.content-heading < background: #29c5e6; font: 30px 'Oswald', sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; text-transform: uppercase; >.team-row figure < display: inline-block; margin: 20px 0 0; font-family: 'Oswald', sans-serif; font-weight: 300; >.team-row figure + figure < margin-left: 43px; >.team-row figcaption < font-size: 16px; font-weight: 300; margin-top: 5px; >.team-row .occupation

Шаблон поста

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

Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.

Страница поиска

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

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

Страница архива

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:

Заключение

На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.

• Создание меню теперь описано не на основе wp_list_pages, а с помощью wp_nav_menu.
• Все фразы, используемые в шаблоне вставляются через функцию локализации __(»)
• Стили и скрипты подключаются не в файле header.php, а через специальные функции в functions.php
• Код главной страницы в шаблоне перенесен из page-home.php во front-page.php

Верстка сайтов

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

• Что значит сверстать сайт?
• Основные разновидности верстки
• Что такое верстка с точки зрения подхода к работе?
• Как выбрать верстальщика?

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

Что значит сверстать сайт?

Это сложный вид работ, который предусматривает безупречное знание JavaScript, HTML и CSS – три кита, на которых основана работа верстальщика. HTML – это язык разметки и основа любой веб-страницы. С его помощью удается создать каркас сайта, расположив в нужном месте необходимые текстовые элементы. Дальше за работу берется CSS – отвечает за визуальную составляющую. Используя HTML и CSS удается создать статическую страницу, но, чтобы вдохнуть в проект жизнь, необходима помощь JavaSсript. Он дает сайту возможность откликаться на определенные действия пользователей, делая его динамичным.

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

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

Веб-верстка сайта на WordPress: основные разновидности

Существует несколько основных видов вёрстки, среди них выделяют следующие:

• табличная – то, с чего началась эпоха сайтостроения. Этот метод предполагает использование различных ячеек, наполненных информацией. Минус в том, что для отображения сайта, нужно дождаться, когда прогрузиться вся таблица. Если код массивный и было использовано много информации, то этот процесс может занять много времени;
• блочная – более современная и универсальная разновидность. Блоки представляют собой независимые элементы, которые можно легко менять местами, что открывает безграничные возможности для верстальщика. Это очень удобно, например, если футер, шапка сайта или любой другой элемент нуждается в доработке;
• слоевая – здесь верстка страниц это масштабная работа. Данный метод нравится дизайнерам, так как он не ограничивает фантазию для создания разнообразных эффектов. Но с технической точки зрения он сложно реализуется и отличается нестабильностью. Здесь требуется глубокое познание языков и технологий программирования. Но даже это не гарантирует то, что один и тот же сайт будет по-другому отображаться на разных устройствах и в разных браузерах;
• адаптивная – самый популярный метод, который сегодня активно используется. Он позволяет подстроить сайт под любое устройство.

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

Верстка сайта: что это с точки зрения подхода к работе?

Помимо различных типов верстки, существуют еще разные подходы. Рассмотрим основные этапы:

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

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

Как выбрать верстальщика?

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

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

Сколько стоит сделать верстку и подключить к WordPress

Интересует стоимость услуг на подключение к движку WordPress.

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

Вот пример лендинга 3d-pol.com.ua.

Напишите стоимость по следующим пунктам:

1. Подключить к движку так, чтобы каждый текстовый блок можно было редактировать из админ панели. Подключить формы. (Цена/ Время выполнения)
2. Простой вариант. Подключить страницу целиком не разбивая на блоки. Важно только подключить форы. (Цена/ Время выполнения)
3. Интересует также отдельно стоимость верстки лендинга такого размера 3d-pol.com.ua (10-12 разворотов/экранов). Верстка включет десктопную и мобильную версию. (без подключния к движку). (Цена/ Время выполнения)
4. Укажите стоимость с подключение к движку (если вы этим тоже занимаетесь). Уточняйте с какой системой вы работаете.

В сообщение укажите несколько ссылок как пример верстки.

Если вы находитесь в Одессе, Украина, — это замечательно, но если нет, то это е проблема.

1 день 111 UAH

1 день 111 UAH

Здравствуйте.
1) от 1000 грн / 2-3 дня
2) имелось ввиду вставить только html в шаблон и подключить формы. От 100 грн / 1-3 часа
3) 2000 грн / 3-5 дней
4) 3000 грн / 5-7 дней (CMS WordPress)

Мои работы в портфолио. Которых нету в портфолио, могу скинуть в ЛС

5 дней 2326 UAH

5 дней 2326 UAH

Добрый день.
Адаптивная верстка 4000р. 3-4 дня.
Посадка с редактированием блоков и подключением форм 2000р. 1-2 дня.
Посадка с подключением форм 700р. 1 день
Верстка + посадка полностью — 5000р. 5-7дней

Мои последние работы на WordPress:
https://gypsumpro.com.ua
http://advance-st.ru/
… https://aptekakgl.ru/
http://skyavtotrans.com.ua/
http://oknaplusdnr.com/
http://kpdrsu.org/

1 день 100 UAH

1 день 100 UAH

Здравствуйте.
Сделаю все быстро и качественно. Большой опыт в подключении к разным CMS. Особенно хорошо в WordPress.
1) 100 грн / 1 день
2) 100 грн / 1 день
3) 2000 грн / 3-5 дней
4) 2000 грн / 5-7 дней (CMS WordPress)

Пример работы:

1 день 250 UAH
1 день 250 UAH

Здравствуйте. Могу сегодня приступить к выполнению проекта. Стоимость/сроки указано примерные. Более точнее после ознакомление с полным ТЗ.

1. Посадка верстки на WordPress (страницы 3d-pol.com.ua) — 3000грн/2дня
2. Не могу ответить, не смог полностью понять этот пункт.
3. Примерно 3200грн/2дня(адаптивная верстка, без отдельной мобильной)
4. Тоже самое, что и пункт 1. Только cms WordPress

Качественная чистая адаптивная верстка с помощью sass+gulp, c оптимизацией по google page speed, валидацией, кроссбраузерностью, настройкой форм. Без бутстрапа(с помощью FlexBox где есть необходимость)

… Посадка на WordPress верстки на чистом шаблоне. Редактирование контента с помощью дополнительных полей(плагин ACF PRO, с лицензией) и дополнительных типов постов.

Могу показать админку WP внутри на примере последних работ:
https://redvike.com/
http://saunagroup.ru/
http://kuxnimi.ru/
http://beltechsoft.by

Работы в портфолио профиля. По необходимости предоставлю более полное портфолио.