Пошаговое руководство по верстке на вордпресс. Глава первая: создаем тему

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

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

Итак, в данном цикле заметок мы научимся верстать сайты под вордпресс с нуля. Уровень читателя подразумевает знание HTML + CSS + JS на минимальном уровне. Иными словами: вы уже умеете немного верстать (даже если сами об этом не знаете), но не понимаете, как применить ваши знания относительно WP.

Немного теории

Во-первых, что такое верстка? Если говорить просто, для чайников, то верстка в веб-программировании – это создание особой (гипертекстовой) разметки из картинки. Простой пример. Есть у нас картинка up.jpg и текст «Мой первый сайт!»; чтобы браузер показал картинку и текст вместе на страничке, достаточно одной строки:

Мой первый сайт!<img src=”up.jpg” />

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

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

Особенности WP

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

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

Также, при верстке WP от нас требуется минимальное знание php. Да, да. Например, чтобы заработал функционал меню в теме, необходимо в файле functions.php добавить три строчки:

if (function_exists('add_theme_support')) {
	add_theme_support('menus');
}

Но, обо всем по порядку. Не пугайтесь, мы всему научимся.

Создание темы

Начнем с создания темы. Создайте скриншот вашей темы – просто экспортируйте для веб в формате png ваш исходник psd (именно в этом формате чаще всего получают верстальщики прототип сайта, его внешний вид). Файл сделайте 880 на 660 пикселей размером.

Ах да, все действие будет происходить по адресу /wp-content/themes/upread – где upread – это название вашей темы. Ну а что? Ничем не хуже других название.

В это папке создайте пару пустых файлов с названиями index.php и style.css, а также пустую папку images. Теперь, если все это залить на сервер, то уже будет кнопочка «Активировать».



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

Продолжение следует...