Создание темы для WordPress. Часть 1. Верстка и разбивка на отдельные файлы.

Ромчик
3

Создание своей темы для WordPressДоброго времени суток. Мы с Вами продолжаем уроки по созданию своей темы для CMS WordPress. В прошлом уроке “Создание темы для WordPress. Введение.” мы с Вами разобрали основные понятия, рассмотрели файловую структуру темы WordPress, а также приготовили макет нашей будущей темы. Сегодня мы остановимся на верстке темы для WordPress, а также разобьем ее на отдельные файлы. Данную разбивка не является эталоном, поэтому Вы можете делать так, как Вам будет удобно. Ну что ж приступим…

Первое, что мы сделаем, так сверстаем нашу тему для WordPress (ну пока, еще не тему, а просто html) согласно нашему макету.

Макет создаваемой темы для WordPressСоздадим на виртуальном хосте два файла index.php и style.css. И приступим к верстке.
Добавим в файл index.php следующий код:


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Документ без названия
	<link href="style.css" rel="stylesheet" type="text/css" /></pre>
<div id="wrapper">
<div id="header">
            <b>Header</b></div>
<div id="clear"></div>
<div id="content">
<div id="center">
                <b>Content</b></div>
<div id="sidebar">
                <b>Sidebar</b></div>
</div>
<div id="clear"></div>
<div id="clear_div"></div>
</div>
<div id="footer">
        <b>Footer
</b></div>
<pre>

Я думаю, пояснять html не надо, тут и так все понятно.
Теперь займемся файлом style.css и добавим в него следующий код:


@charset "utf-8";
/* CSS Document */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

div#wrapper {
    margin:0 auto;
    width:1000px;
min-height:100%;
    /*height:600px;*/
    background:#099;
}

div#header {
    height:100px;
    width:1000px;
margin:0;
}

div#clear {
    clear:both;
}

div#content {
    width:1000px;;
    background:#000;
}

div#center {
    width:700px;
    background:#F00;
    float:left;
}

div#sidebar {
    width:300px;
    float:right;
    background:#0C9;
}
div#clear_div{
height:50px;
}

div#footer {
    width:1000px;
    background:#CCC;
height:50px;
margin:0 auto;
margin-top: -50px;
}

Отличненько, html мы сверстали.
Разбивка на отдельные файлы.
Разобьем наш index.php на логические составляющие: header.php, sidebar.php, footer.php.
Так например в файл header.php добавим следующий код:


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Документ без названия
	<link href="style.css" rel="stylesheet" type="text/css" />
<div id="wrapper">
<div id="header">
            <b>Header</b></div>
<div id="clear"></div>

и к index.php подключим файл header.php конструкцией include “header.php”. Все, что касается sidebar выделим в файл sidebar.php:

<div id="sidebar"><b>Sidebar</b></div>

и index.php добавим файл sidebar.php аналогичной конструкцией.
Теперь все, что касается footer добавим в файл footer.php:

<div id="clear"></div>
<div id="clear_div"></div>
<div id="footer">       <b>Footer </b></div>

и в index.php подключем его. В итоге мы разбили наш html шаблон на четыре логические части и подключили их в главный файл шаблона index.php. Таким образом наш index.php имеет следующий вид:


<?php include('header.php')?>
<div id="content">
<div id="center">               <b>Content</b></div>
<?php include('sidebar.php') ?>
<?php include('footer.php') ?>

Еще раз хочу отметить, что данная разбивка не является эталоном. И Вы можете разбить (или вообще не разбивать) html шаблон как Вам будет удобно. Скачать исходник данного урока Вы можете по этой ссылке.
На этом наш урок, посвященный созданию темы для WordPress закончен. В следующем уроке мы переделаем наш html шаблон в тему для WordPress. А в дальнейшем начнем увеличивать функционал для нашей темы WordPress. Так, что не пропускайте выхода новых статей, подписавшись на RSS-рассылку данного блога.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Создание темы для WordPress. Часть 2. Создание темы из html-шаблона. | Все о WEB программировании - 24.02.2012 в 14:47

    […] Хочу немного напомнить материал прошлого урока “Создание темы для WordPress. Часть 1. Верстка и разбивка на о…”. На прошлом уроке мы создали c Вами html-шаблон и […]

  • Создание темы для WordPress. Поиск | Все о WEB программировании - 06.06.2012 в 13:18

    […] тему для WordPress. И так мы с Вами уже сверстали и разбили html-шаблон на несколько файлов, создали из полученных файлов тему для WordPress, сделали […]

  • Artem - 29.01.2014 в 12:29

    https://disk.yandex.ua/
    просто набирать лень))) но мы её поборим )))
    Возможно, владелец удалил файлы
    или закрыл к ним доступ.
    А может быть, вам досталась ссылка с опечаткой.

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика