RSS

Wordpress » Как сделать тему для WordPress (часть 2)

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

Если у вас исходный код отображается плохо, скопируйте с оригинала, спасибо.



Видео


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

  • K » Слайсы
  • Space Bar + Mouse Drag » Переместить экран
  • CTRL + ALT + SHIFT + S » Сохранить для веб


Повторяющееся изображение

Мы используем фон шапки, как повторяющееся изображение. В этом случае нужно действовать очень аккуратно. Пример на скриншоте ниже.
'Как сделать тему для WordPress (часть 2)' title='Как сделать тему для WordPress (часть 2)' /



Слайсы

Чтобы разрезать картинку на куски, необходимо увеличить масштаб. Иногда приходится использовать зум на максимум (1600), чтобы получить хороший результат. Например:
'Как сделать тему для WordPress (часть 2)' title='Как сделать тему для WordPress (часть 2)' /



Кодинг CSS/HTML

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

  1. Враппер (чтобы обернуть с его помощью весь наш макет, исключая футер)
  2. Шапка (включая навигацию)
  3. Контент (посты и сайдбар)
  4. Левая колонка (для постов и комментариев)
  5. Правая колонка (сайдбар, RSS, о сайте и форма поиск)
  6. Футер (подвал)


Подготовка

Я использовал DreamWeaver в качестве редактора. Перед тем, как мы начнем, создайте файл style.css и index.html. Поместите код ниже в index.html (он нужен, чтобы вызвать файл стилей):

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Шаг первый - главная структура

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

<!--wrapper--><br /><div id="wrapper"> <br />    <!--content--><br />    <div id="content"><br />        <!--left-col--><div id="left-col"></div><!--left-col-end--> <br />        <!--right-col--><div id="right-col"></div><!--right-col-end-->  <br />       </div><!--content-end-->  <br /></div><!--wrapper-end--><br /> <br /><!--footer--><div id="footer"></div><!--footer-end-->

Шаг второй - больше деталей

Добавляем больше деталей к нашим контейнерам.

<!--wrapper--><br /><div id="wrapper"><br /><!--header--><br />    <div id="header"><br />        <!--logo--><br />        <div id="logo"><!--logo-end-->    <br />        <!--page-navigation--><br />        <div id="menu"><br />            <ul>        <br />                <li class="page_item"><a href="#">Gallery</a></li><br />                <li class="page_item"><a href="#">Contact</a></li><br />                <li class="page_item"><a href="#">About</a></li><!--we need to float this to the right, so, we need to make it in reverse way--><br />            </ul><br />        </div><!--page-navigation--><br />    </div><!--header-end--><br /> <br />    <!--content--><br />    <div id="content"><br /> <br />        <!--left-col-->   <br />        <div id="left-col"><br /> <br />            <!--featured-post--><div id="featured-post"><!--featured post will goes here--></div><!--featured-post-end--><br />            <!--post--><div class="post"><!--blog posts will go here--></div><!--post-end--><br /> <br />        </div><!--left-col-end--> <br /> <br />        <!--right-col-->  <br />        <div id="right-col"><br /> <br />            <!--rss subscriber--> <div id="feed"></div><!--rss subscriber-end--><br /> <br />        <!--search--><div id="searchform"></div><!--search-end-->  <br /> <br />      <!--about--><div id="about"></div><!--about-end-->              <br /> <br />                <!--sidebar-->             <br />                   <div id="sidebar"><br />                    <!--sidebar1--><div id="sidebar1"></div><!--sidebar1-end--><br /> <br />                    <!--sidebar2--><div id="sidebar2"></div><!--sidebar2-end--> <br /> <br />                </div><!--sidebar-end-->     <br /> <br />        </div><!--right-col-end-->  <br />    </div><!--content-end-->  <br /></div><!--wrapper-end--><br /> <br /><!--footer--><div id="footer"></div><!--footer-end-->

Шаг третий - CSS для главных контейнеров

Теперь для наших контейнеров необходимо прописать стили.

#wrapper {
	width: 960px;
	margin: 0 auto;
}
 
#header {
	width: 960px;
	height: 100px;
	float: left;
}
 
#content {
	width: 960px;
	float: left;
}
 
#content #left-col {
	width: 600px;
	float: left;
	position: relative;
	padding-right: 30px;
}
 
#content #right-col {
	width: 330px;
	margin-top: 20px;
	float: left;
	position: relative;
}
 
#content #right-col #sidebar {
	width: 330px;
	float: left;
	position: relative;
}
 
#footer {
	width: 100%;
	float: left;
	background: url(images/footer-bg.png) repeat-x top left;
	height: 23px;
	padding-top: 40px;
	color: #fff;
}

Шаг четвертый - CSS для меню

Мы знаем, что меню у нас будет справа.

#header #menu {
	float: left;
	width: 500px;
	margin-top: 38px;
}
 
#header #menu ul {
	width: 500px;
	list-style: none;
	float: right;
	text-align: right;
}
 
#header #menu ul li.page_item { /* page_item is wordpress default class for page list */
	float: right;
}
 
#header #menu ul li.page_item a {
	padding: 4px 8px;
	display: block;
	margin: 0 7px 0 0;	
	float: left;
	text-decoration: none;
	font: 900 14px Arial, Helvetica, sans-serif;
	color: #a9bf78;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-topright: 2px;
}
 
#header #menu ul li.page_item a:hover {
	color: #fff;
}
 
#header #menu ul li.current_page_item a { /* current_page_item is wordpress default class for active page list */
	color: #fff;
	background-color: #2c4106;
}

Шаг пятый - структура сайдбара

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

<!--sidebar-->             <br /><div id="sidebar"><h3>Sidebar</h3><br />    <!--sidebar1--><br />        <div id="sidebar1"><br />            <ul><br />                <li><h2>Category</h2><br />                    <ul><!--the widget will start at the second level of the list--><br />                        <li></li><br />                    </ul><br />                </li><br />                <li><h2>Links</h2><br />                    <ul><br />                        <li></li><br />                    </ul><br />                </li><br />            </ul><br />        </div><!--sidebar1-end-->                 <br /></div><!--sidebar-end-->

Шаг шестой - CSS для сайдбара

Теперь пропишем стили для сайдбара.

#sidebar ul {
	list-style: none;
}
 
#sidebar1 {
	float: left;
	width: 160px;
	padding-right: 10px;
}
 
#sidebar2 {
	float: left;
	width: 160px;
}
 
#sidebar ul {
 
}
 
#sidebar ul li {
	float: left;
	width: 158px;
	background-color: #d7d39a;
	border: 1px solid #bbb875;
	margin-bottom: 10px;
}
 
#sidebar ul li h2 { /* this is the widget title */
	padding: 3px 4px 6px;
	font: 400 18px Arial, Helvetica, sans-serif;
	color: #4c6b0d;
}
 
#sidebar ul li ul {
 
}
 
#sidebar ul li ul li { /* begin for the widget list */
	float: left;
	width: 158px; 
	border: 0;
	margin-bottom: 0;
}
 
#sidebar ul li ul li a {
	border-top: 1px solid #bbb875;
	float: left;
	width: 150px;
	text-decoration: none;
	color: #5d5b35;
	padding: 2px 4px;
}
 
#sidebar ul li ul li a:hover {
	color: #fff;
	background-color: #bbb875;
}

Шаг седьмой - комментарии

Вот как мы сделаем вывод комментариев.

<!--comments--><br /><div id="comments"><br /><h3 id="comment-title">Comments</h3><br />    <ol><br />        <li><br />        <div class="comment-data"><!--the left comment box for the content--><br />        <p><!--comment goes here--></p><br />        </div><br /> <br />        <div class="comment-info"><!--the right hand side for the commentor gravatar and info--><br />            <!--author avatar--><br />            <br /><strong><a href="#"><!--author name--></a></strong><br /><!--date--> <br />        </div><br />        </li><br /> <br />        <li class="alt"><!--the alternative style for the comment box--><br />        <div class="comment-data"><br />        <p><!--comment goes here--></p><br />        </div><br /> <br />        <div class="comment-info"><!--the right hand side for the commentor gravatar and info--><br />            <!--author avatar--><br />            <br /><strong><a href="#"><!--author name--></a></strong><br /><!--date--> <br />        </div><br />        </li><br /> <br />    </ol><br /></div><!--comments-end-->

Шаг восьмой - CSS для комментариев

Теперь давайте пропишем стили для вывода комментов.

#comments {
	margin-top: 15px;
	float: left;
	width: 600px;
}
 
h3#comment-title {
	background: url(images/comments.png) no-repeat top left;
	width: 600px;
	float: left;
	text-indent: -9999em;
	padding-top: 5px;
}
 
#comments ol, #comments ol li {
	float: left;
	width: 600px;
	list-style: none;
	padding: 0;
}
 
#comments ol li .comment-data {
	float: left;
	width: 478px;
	margin-right: 10px;
	background-color: #d7d39a;
	padding: 5px 10px;
	min-height: 120px;
	_height: 120px; /* an IE6 hack */
	overflow: auto;
	border: 1px solid #c1bd85;
 
}
 
#comments ol li.alt .comment-data {
	float: left;
	width: 478px;
	margin-right: 10px;
	background-color: #eae8c6;
	padding: 5px 10px;
	min-height: 120px;
	border: 1px solid #c1bd85;
	_height: 120px; /* an IE6 hack */
	overflow: visible;
	margin-top: -1px;
	margin-bottom: -2px;
}
 
#comments ol li .comment-info {
	width: 90px;
	float: left;
	text-align: right;
	font-size: 10px;
	line-height: 12px;
}
 
#comments ol li .comment-info a img {
	border: 0;
	margin-bottom: 5px;
}
 
#comments ol li .comment-info a {
	text-decoration: none;
}

Результат

html.zip [6.14 Kb] (cкачиваний: 12)
Спасибо Themetation за оригинал на английском. Третья часть будет в течение недели.

26 октября 2008 6 wordpress, тема, скин

Подписаться на новые статьи

Подписаться на комментарии к этой статье



Похожие статьи

  • Градиентный текст с помощью CSS
  • Делаем анимированного робота на jQuery
  • Как сделать шаблон для Datalife Engine
  • Введение в 3D во Flash
  • Оформление картинок с помощью CSS


    • #1 Den написал 26 октября 2008 22:30
    Не понял про Враппер - это что?
    Ответить
    #2 admin написал 26 октября 2008 22:44
    Den, как-бы главный контейнер, в котором находятся все остальные.

    Похоже, исходный код сбился...
    Ответить
    #3 Никита написал 27 октября 2008 08:08
    Спасибо! Оперативно))

    А что с кодами всеми?
    Ответить
    #4 JonyGreen написал 23 ноября 2008 23:21
    Здравствуйте! Очень понравилась данная тема - большое спасибо!.В ближайшем будущем планирую создать свою собственную тему для WordPress по данным урокам.
    А пока, не могли бы вы сказать как отключить функцию Gravatar, то есть убрать аватары в каждом посте и поставить свое любое изображение в колонку "О блоге",

    З.Ы. данная проблема обсуждалась на форуме ThemeTation, но либо у меня код неправильный, либо со знанием англицкого плохо, вот ссылка -
    http://themetation.com/forum/viewtopic.php?f=10&t=8
    Ответить
    #5 admin написал 25 ноября 2008 00:22
    JonyGreen, возможно, я ошибаюсь, но в теме по умолчанию нет граватара.
    Ответить
    #6 artem написал 20 декабря 2008 23:23
    а 3 часть еще не вышла? очень интересно самому тему сделать.
    Ответить

    Добавить отзыв

    Ваше Имя:
    Ваш E-Mail (публикуется):
    Код: Включите эту картинку для отображения кода безопасности
    обновить код
    Введите код: