Верстка шаблона для WordPress. Часть 1

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

Наша задача, сделать  шаблон для wordpress на html5 с адаптивной версткой. За основу  будущей темы мы возьмем фреймворк Twitter Bootstrap. Данный курс будет своеобразными уроками bootstrap, а так же наглядным примером как строятся шаблоны на bootstrap.

1. Приступим


Создадим отдельную web папку на вашем хостинге (подразумевается что у вас уже есть свой сайт), если вы еще только хотите купить дешевый хостинг, могу посоветовать friendhosting.net, сам размещаю сайт у них, очень доволен качеством, советую. После того как вы создали папку, скачиваем фреймворк нажав на кнопку Download Boostrap. И разархивируем его в ранее созданную папку web.

Создание шаблона на twitter bootstrap для wordpress

2. Создаем макет


  • Для начала создадим файл index.php в котором и начнем строить наш макет сайта. Прописываем стандартную разметку, подключаем кодировку utf-8, и указываем русский язык для html ( Указав lang=”ru” в html теге, виджеты twiitter, facebook и вконтакте будут автоматически отображаться на русском языке ).


<meta charset="utf-8" />
Шаблон для WordPress

  • Добавляем мета теги в отсек head. Добавим мета тег author который в будущем поможет нам с подтверждением авторских прав на контент. После чего прописываем meta og (Open Graph), которые помогут выводить информацию в социальные сети.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Имя автора" />

<meta content="Название сайта" />
<meta content="website" />
<meta content="Ссылка на изображение логотипа" />
    • Подключаем стили, фикс html5 для IE6-8

	<link href="./css/bootstrap.css" rel="stylesheet" />
			<link href="./style.css" rel="stylesheet" />
	<link href="./css/bootstrap-responsive.css" rel="stylesheet" />

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
		<script src="./js/html5shiv.js"></script>
	<![endif]-->

Вот что должно получиться у нас в итоге

<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>Шаблон для WordPress</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="Имя автора">

 <meta content="Название сайта" />
 <meta content="website" />
 <meta content="Ссылка на изображение логотипа" />

 <link href="./css/bootstrap.css" rel="stylesheet">
 <link href="./style.css" rel="stylesheet">
 <link href="./css/bootstrap-responsive.css" rel="stylesheet">

 <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
 <!--[if lt IE 9]>
 <script src="./js/html5shiv.js"></script>
 <![endif]-->

 </head>

Создаем файл style.css для дальнейшей стилизации и подключения шаблона на wordpress. После чего скачиваем js файл фикса для html5.

В архиве заходим в папку dist и копируем оттуда файл html5shiv.js который вставляем в нашу js папку.

      • Разметка шаблона. Для разметки я выбрал стандартный каркас для блога.

 

<body>
<div id="wrap"><!-- Фиксированная респонсив навигация -->
<header>

<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container"><a class="brand" href="#">Имя сайта</a>

<div class="nav-collapse collapse">
<menu></menu></div>
</div>
</div>
</div>
</header>

<div class="container">

<div class="row">

<div class="span7">Тест контент</div>

<div class="span3">
<aside>Тест сайдбар</aside></div>
</div>
</div>

 <!-- Прижимаем футер к низу -->

<div id="push"></div>
</div>

<footer>

<div id="footer">

<div class="container">Подвал</div>
</div>
</footer>

    <!-- Подключаем скрипты --><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</body>
</html>

и в файл style.css

 header {
      	padding-bottom: 70px;
      }
	/* Стили для подвала внизу страницы */
      html,
      body {
        height: 100%;
      }

      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;

        margin: 0 auto -60px;
      }

      /* Высота футера */
      #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }

      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }

	/* Ширна контейнера */
      .container {
   		max-width:970px;
        width: auto;
      }

      }
      .container .credit {
        margin: 20px 0;
      }

  • Теперь наша разметка готова. Напомню что мы создаем responsive дизайн шаблона, и уже на данном этапе вы можете заметить как ведет себя навигация при уменьшении окна браузра.

Создаем шаблон на twitter bootstrap

В следующем уроке как создать шаблон для wordpress мы приступим к оформлению шаблона, созданием стиля записи, оформим сайдабр и подвал. Думаю после того как мы закончим уроки, вы перестанете задавать себе вопрос как создать дизайн сайта? Я буду рад если моя статья поможет кому нибудь создать шаблон сайта для wordpress. Если возникли вопросы, задавайте в комментарии.



Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной

27 Комментария к “Верстка шаблона для WordPress. Часть 1”

  • […] является головной болью всех веб мастеров при создании шаблона, но если использовать ее с умом, из этого можно взять […]

  • […] и вы сможете использовать приобретенные знания в верстке шаблона для wordpress или же для любой другой cms. Не забудьте […]

  • […] движок wordpress. Также советую прочитать нашу статью по Как сделать шаблон для wordpress. В следующем уроке вы узнаете как установить шаблон на […]

  • Владислав ·
    11.05.2014 в 16:13
    #

    Добрый день, прошу прощения.
    По-моему, в данном достаточно подробном сообщении кое-что упущено, например в чем работать над файлами (ведь если работать просто в текстовом редакторе то не хватает часте, видимо которые достаточно стандартные но для меня как чайника совершенно не известные), и надо отдельно гуглить стандартную разметку и не понятно в тексте куда прописывать “lang=»ru»”.
    Спасибо

    • Admin ·
      12.05.2014 в 01:36
      #

      Приветствую, ну в чем работать это дело каждого, я например люблю notepad++, по поводу разметки она по кусочкам есть в уроке. По поводу lang=»ru, я отредактировал немного статью и показал как должен выглядеть кусок кода до

      , смотрите в пункте 2 Вот что должно получиться у нас в итоге. Спасибо за замечание :) Буду рад ответить на ваши вопросы.
  • Владислав ·
    12.05.2014 в 22:02
    #

    Большое спасибо, очень оперативно)

    • Admin ·
      12.05.2014 в 23:47
      #

      Будут вопросы, обращайтесь :)

  • Ксения ·
    13.09.2014 в 06:10
    #

    Мир Вам! Не совсем понятно как необходимо назвать файл в который поместить разметку шаблона. Подскажите пожалуйста.

    • Admin ·
      25.09.2014 в 01:53
      #

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

  • Сергей ·
    24.09.2014 в 18:16
    #

    Статьи не плохие(я про все 7 уроков сразу). Дают общее представление создания темы для Вордпресс. Но вот с точки зрения HTML – верстки очень много нареканий. Во первых, очень много лишнего кода. Во вторых, нарушается семантика. Или Вордпресс не понимает никаких тегов кроме DIVов? Это, конечно всего лишь критика, а учитывая познания админа, которые действительно показывают знание самой CMS, мой отзыв еще и предложение админу проработать код на HTML 5. Тогда его статьям цены не будет. HTML код я готов предоставить… Правда вот не знаю, возможно его адаптировать под Бутстрап? Ведь все эти классы – мусор и лишние обертки именно оттуда. Поэтому все эти фреймвоки я не приемлю в принципе. Лучше руками написать несколько правил в CSS, чем загаживать основной код, который должен пройти валидацию в первую очередь. Ведь есть не менее 5 способов CSS, чтобы добраться к любому нужному тегу, а не громоздить такие длинные, но ненужные классы, причем используя при этом к обезличенным DIVам еще одновременно и идентификаторы. В общем, Admin, я оставил отзыв и сделал предложение… А вот что касается темы для Вордпресс – огромное спасибо!

    • Admin ·
      25.09.2014 в 02:01
      #

      Огромное спасибо за отзыв, я учту ваши пожелания. Данными уроками я хотел донести общее представление об создании темы для wordpress с использованием bootstrap. В следующих уроках буду более щепетильно относиться к html )

  • Ромуальд ·
    15.10.2014 в 15:49
    #

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

    • Admin ·
      08.11.2014 в 21:18
      #

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

  • Никита ·
    27.10.2014 в 17:15
    #

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

    Единственное я верстал по своему. Имеет ли это значение? Все арвно должно хоть что-то отображаться))

    • Admin ·
      08.11.2014 в 21:13
      #

      Однозначно должно что то отображаться, проверьте, может вы забыли что то.

  • Стас ·
    04.12.2014 в 13:28
    #

    У вас небольшая ошибка. После хеда идет боди. Когда добавляем разметку, то необходимо закрыть боди, а он остается открытым. То есть в конце разметки не хватает иначе ничего не будет отображаться.

    • Admin ·
      01.10.2015 в 18:49
      #

      Огромное спасибо за внимательность! :)

  • Сергей ·
    30.09.2015 в 08:44
    #

    Сделал всё по инструкции. На сайте пустота. Что не так? Единственное что добавил от себя, это в конце прописал

    • Admin ·
      01.10.2015 в 19:17
      #

      Пожалуйста проверьте чтобы у вас тег body и html был как “сейчас” на примере, была опечатка, пользователь Стас в этом комментарии указал мне на мою опечатку. Проверьте пожалуйста еще раз код

  • Сергей ·
    30.09.2015 в 09:28
    #

    Сделал все по инструкции. На сайте пустота. Просто белый экран. Что не так?

  • нина ·
    29.03.2016 в 02:26
    #

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

    • Admin ·
      05.07.2016 в 18:02
      #

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

  • Нина ·
    05.07.2016 в 18:20
    #

    Нет, я создавала сайт по видеоурокам, которые скачала в инете. И сама коды и скрипты по уроку вставляла. Но теперь у меня другая проблема) не могу ссылки закрыть. Сделала анализ сайта, а у меня заспамленность ссылками. Хотя я их не оставляла и не печатала. Откуда они взялись, не пойму

    • Admin ·
      05.07.2016 в 18:21
      #

      Вы сами видите эти ссылки? Скорее всего у вас вирус, или комментарии со спам ссылками

  • Оставить отзыв

    (обязательно)

    (обязательно)


    Наши друзья
    - ARTtime - Блог о Photoshop и Дизайн
    - Блог о дизайне и арте
    Реклама