На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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


В этой главе мы узнаем, что такое верстка для веба, а также о том, как создавать тему для 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. Теперь, если все это залить на сервер, то уже будет кнопочка «Активировать».



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

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




тегизаметки, wordpress, верстка





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




Как прокачать Академию в игре Спарта: Война Империй
Разница между == и === в JavaScript


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.