Создаем тему WordPress на базе статического HTML: Подготовка разметки

Окончательный результат: Что мы создаем.

WordPress

Скачать ИСХОДНЫЙ ФАЙЛ

Данная статья является 1 из 3 частей цикла «Создаем тему WordPress на базе статического HTML»:

  1. Создаем тему WordPress на базе статического HTML: Подготовка разметки
  2. Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов
  3. Создаем тему WordPress на базе статического HTML: Загружаем тему в WordPress

В прошлом году я провела небольшой (и по общему мнению очень ненаучный) опрос среди разработчиков WordPress.

Главные вопросы, которые я им задавала: Когда они создавали свою первую тему WordPress, как же они это делали? Переделывали существующую тему или же начинали с собственного статического HTML-кода и превращали его в тему?

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

И все они отвечали, что проще всего взять собственные HTML файлы и конвертировать их в тему.

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

Таким образом, в этом цикле статей я собираюсь рассказать вам, как сделать именно это.

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

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

Что вам потребуется

Для выполнения этого урока вам потребуются основные инструменты для редактирования HTML-кода:

Редактор по вашему выбору;
Браузер, чтобы проверять результаты работы.

1. Зачем готовить HTML?

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

Причина заключается в том, что, когда вы начинаете добавлять новые функции, такие как меню и виджеты, WordPress добавит еще и HTML-элементы и классы.

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

Еще одна причина это то, что нам нужно обеспечить соответствие разметки стандартам и синтаксису HTML5. Если вы конвертируете старый статический сайт в WordPress, вы можете работать и со старым кодом более ранней версии HTML, который, откровенно говоря, нуждается в серьезной чистке.

Я не могу сказать точно, как вам привести в порядок конкретную разметку, но я могу дать вам несколько советов по использованию HTML5 с WordPress и по структурированию документа.

2. HTML5 и WordPress — структурирование разметки

Есть ряд элементов HTML5, таких как <article> и <aside> которые должны использоваться в теме WordPress.

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

HTML-файл, который я собираюсь использовать для этого урока, имеет следующую структуру:

<header>
    <div>
    </div>
    <aside>
    </aside>
</header>
<nav>
</nav>
<div class="main">
    <div id="content">
        <article>
            <section class="entry-meta">
            </section><!-- .entry-meta -->
            <section class="entry-content">
            </section><!-- .entry-content -->
            <section class="entry-meta">
            </section><!-- .entry-meta -->
        </article>
    </div><!-- #content-->
    <aside class="sidebar">
    </aside>
</div><!-- .main -->
<footer>
    <div class="fatfooter">
    </div><!-- #fatfooter -->
</footer>

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

Если ваша разметка еще не структурирована подобным образом и не отформатирована в соответствии со стандартами HTML5, потребуется некоторое время, чтобы произвести все необходимые изменения.

Важно, чтобы в вашей странице были четко определены следующие разделы:

  • заголовок – в <header>;
  • контент – для него я использую <div id="content">. Я намеренно использую здесь идентификатор вместо класса, чтобы иметь возможность задействовать его, как анкор для экранных дикторов, пропуская меню;
  • боковая панель (если таковые у вас есть) – для нее я использую <aside class="sidebar">. Я также добавила дополнительные классы стилей — все они объектно-ориентированы, поэтому могут использоваться в рамках одной темы для всех других страниц, которые я добавлю в WordPress позже;
  • подвал – в <footer>. Как правило, я вставляю в футер еще один элемент, который содержит поле виджетов — я называю его <div class="fatfooter">. Это означает, что я могу применить к элементам footer полную гамму цветов фона, не изменяя при этом элемент .fatfooter, расположенный по центру страницы.

3. Добавление классов и идентификаторов, генерируемых WordPress

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

Фактически данный этап не влияет на конечную тему, так как эти классы и идентификаторы все равно будут автоматически добавлены через функции PHP, которые вы добавите позже.

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

Теперь нам следует обработать каждый из элементов структуры.

Заголовок

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

С левой стороны шапки выводится элемент с названием и описание сайта:

<div class="site-name half left"><!—Название и описание сайта --></div>
 
<div class="site-name half left">
    <h1 class="one-half-left" id="site-title"><a title="Creating a WordPress theme from static html - home" rel="home">WordPress Theme Building</a></h1>
    <h2 id="site-description">Creating a WordPress theme from static html</h2>
</div>

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

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

<!— Боковая часть заголовка – она будет заполняться с помощью виджета -->
<aside class="header widget-area half right" role="complementary">
    <div class="widget-container"> Здесь будет поле виджета в шапке сайта –
Здесь будут выводить контактные данные, адрес (или что угодно на ваше усмотрение)</div>
<!-- .widget-container -->
</aside><!-- .half right -->

Изображения

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

В коде моей условной страницы есть два изображения — одно большое, второе среднее, с выравниванием по правому краю.

Для первого я добавляю следующий код:

<img class="size-large" alt="" src="images/featured-image.jpg" />

Для второго:

<img class="alignright" alt="" src="images/another-image.jpg" />

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

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

Для этого добавим такой код:

/* Изображения */
 
img {
    max-width: 100%;
}
#content img {
    margin: 0;
    height: auto;
    width: auto;
}
#content .alignleft,
#content img.alignleft {
    float: left;
    margin: 4px 4% 4px 0;
}
#content .alignright,
#content img.alignright {
    float: right;
    margin: 4px 0 4px 4%;
}
#content .aligncenter,
#content img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
    margin-bottom: 12px;
}

Если вы посмотрите на мой пример страницы, то увидите, что первое изображение растянуто на 100% ширины области контента, а второе смещено вправо и имеет по краям поля отступа:

пример страницы

Сайдбар и подвал

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

Разметка сайдбара будет выглядеть следующим образом:

<!-- Сайдбар - в WordPress он будет заполняться через виджеты -->
<aside class="sidebar widget-area one-third right" role="complementary">
    <div class="widget-container">
        <h3 class="widget-title">A sidebar widget</h3>
        <p>This is a sidebar widget - in your WordPress theme you can set these up to display across your site.</p>
    </div><!-- .widget-container -->
    <div class="widget-container">
        <h3 class="widget-title">Another sidebar widget</h3>
        <p>A second sidebar widget - maybe you could use a plugin to display a social media feed, or simply list your most recent posts.</p>
    </div><!-- .widget-container -->
</aside>

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

Позже я задам конкретные стили для каждой из этих областей:

<footer>
    <!--.fatfooter aside – я использую его, чтобы можно было для фона
задавать цвета подложки страницы, в то же время стиль содержания
соответствовал  стилю всего макета сайта -->
    <div class="fatfooter" role="complementary">
        <div class="first quarter left widget-area">
            <div class="widget-container">
                <h3 class="widget-title">First footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .first .widget-area -->
        <div class="second quarter widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Second footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .second .widget-area -->
        <div class="third quarter widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Third footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .third .widget-area -->
        <div class="fourth quarter right widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Fourth footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .fourth .widget-area -->
    </div><!-- #fatfooter -->
</footer>

Заключение

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

Перевод статьи «Creating a WordPress Theme From Static HTML: Preparing the Markup» был подготовлен дружной командой проекта Сайтостроение от А до Я.