Как простой HTML шаблон сверстать под WordPress


Как простой HTML шаблон сверстать под WordPress

Наконец то я решился сверстать уже наш тестовый шаблон из HTML в WordPress. Ура 🙂 Теперь я хочу рассказать и показать Вам, дорогие читатели, сам процесс вёрстки. Как оказалось, что он не такой уж и сложный. В общем я понял, что каждый новый шаблон даётся на много легче чем прошлый.

Как простой HTML шаблон сверстать под WordPress

Ну а теперь давайте посмотрим сам результат.

Как простой HTML шаблон сверстать под WordPress
Ну а сейчас я постараюсь Вам как можно проще объяснить как сверстать шаблон для WordPress, если Вам были понятны прошлые мои уроки, то и этот урок будет прост для Вас. Но прежде чем начать давайте перечислим те инструменты, которые нам понадобятся:

Локальный сервер

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

Подобных серверов на просторах интернета огромное количество. Я, например, пользуюсь сервером Денвер. Он прост в установке и в настройке. Как его установить и настроить Вы сможете найти на официальном сайте http://www.denwer.ru там же Вы сможете его и скачать.

После того как Вы установите Денвер Вам нужно будет установить сам WordPress на локальный сервер. Устанавливается не сложно, Вам всего лишь нужно скинуть файлы движка в указанную папку на ПК, и установить движёк. Подробно на этом останавливаться не буду.

Браузер Опера

После того как WordPress уже работает на Вашем компьютере, нам нужно установить, если у Вас её нет, Оперу не выше 12 версии, так как после того как Опера перешла на Вебкит, она лишилась HTML редактора, что очень плохо.

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

И вот теперь когда у нас всё настроено и поставлено, а так же работает как часики 🙂 мы будем заниматься самым интересным процессом, а именно вёрсткой шаблона HTML в шаблон для WordPress.

Вступление

Сейчас хочу Вам немного рассказать как в настоящее время у меня проходит процесс верстки. Так как у меня шаблонов уже несколько, я наработал некий шаблон вёрстки, по которому проходит весь процесс. Таким образом я просто меняю изображения и стили, и немного редактирую код на локальном сервере, до то желаемого результата. Надеюсь понятно объяснил.

Самый сложный был первый шаблон, в который нужно было вставлять код отдельно. Ох и намучился я. Но всё же получилось. А второй шаблон я уже делал по первому и так далее.

Файлы

Теперь нам нужно создать файлы в которые мы потом будем помещать весь код шаблона. Для начала создайте новую папку и назовите её как угодно Вам. Открываем папку и создаём ещё одну папку под названием images. В этой папке у нас будут храниться все изображения шаблона. А изображения нужно скопировать с нашего HTML шаблона в папку images будущего шаблона для WordPress.

После этого создаём следующие текстовые файлы и не забываем менять формат *txt на формат *php. Вот полный список файлов:

  • archive.php
  • comments.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • page.php
  • search.php
  • sidebar.php
  • single.php

И ещё не забываем создать файл style.css обратите внимание, что разрешение у него должно быть именно CSS, в этом файле будут находиться все стили шаблона.

Как простой HTML шаблон сверстать под WordPress

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

header.php

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

Как простой HTML шаблон сверстать под WordPress

А вот сам код, который должен содержать этот файл:

<!doctype html>
<!--[if IE]>
<![endif]-->
<html lang=ru>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Begin #bottomMenu -->
<script type="text/javascript">
$(function() {
 //We initially hide the all dropdown menus
 $('#dropdown_nav li').find('.sub-menu').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
 $('#dropdown_nav li').hover(function() {
 //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
 $(this).find('.sub-menu').fadeIn(400);
 }, function() {
 //Do the same again, only fadeOut this time.
 $(this).find('.sub-menu').fadeOut(100);
 });
 });
</script>
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<div id="headerInner">
<nav class="topMenuRight">
<?php if ( function_exists( 'wp_nav_menu' ) ){
 wp_nav_menu( array( 'theme_location' => 'secondary-menu','fallback_cb'=>'secondarymenu') );
 }else{
 secondarymenu();
 }?>
</nav>
<div class="share-new">
<a class="icon-twitter" href="#" title="Следить в Twitter!" target="_blank"></a>
<a class="icon-rss" href="#" title="Подписаться на rss" target="_blank"></a>
<a class="icon-mail" href="#" title="Подписаться по e-mail" target="_blank"></a>
</div>
<!-- Начало логотипа -->
<div class="logo">
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png"/></a>
</div>
<!-- Конец логотипа -->
<!-- Begin #bottomMenu -->
<nav>
<?php if ( function_exists( 'wp_nav_menu' ) ){
 wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container_id' => 'dropdown_nav', 'container_class' => 'bottomMenu', 'fallback_cb'=>'primarymenu') );
 }else{
 primarymenu();
 }?>
 <!-- Конец #bottomMenu -->
</nav>
</div><!-- Конец верхнего блока -->
</header>
<!-- Конец хидер -->

Эта строчка


 

1
2
3
4
5
<?php if ( function_exists( 'wp_nav_menu' ) ){
wp_nav_menu( array( 'theme_location' => 'secondary-menu','fallback_cb'=>'secondarymenu') );
}else{
secondarymenu();
}?>

1
2
3
4
5
<?php if ( function_exists( 'wp_nav_menu' ) ){
wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container_id' => 'dropdown_nav', 'container_class' => 'bottomMenu', 'fallback_cb'=>'primarymenu') );
}else{
primarymenu();
}?>

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php get_header(); ?>
<div id="lpblock">
<h2>Последние записи</h2>
</div>
<!-- Начало врапер -->
<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
/* Начало последних постов */
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>/*########## Начало цикла ############*/
<!-- Начало .postBox -->
<article class="postBox">
<div class="postThumbbig"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>/*########## Вывод миниатюры поста ############*/
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2></*########## Заголовок записи ############*/
<div class="info"> /*Вывод информации о посте ############*/
<?php the_time('j') ?> <?php the_time('M') ?> <?php the_time('Y') ?> / <?php the_tags('', ', ', ''); ?> / <?php comments_popup_link('Комментариев 0', '1 комментарий', 'Комментариев %'); ?>
</div>
<div class="textPreview">
<?php the_excerpt(); ?>/*Просмотр текста в записи ############*/
</div>
<div class="more-link"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Далее >></a></div>/*##########Вывод кнопки далее ############*/
</article>
<div class="raz"></div>
<!-- Конец .postBox -->
<?php endwhile; ?>
/*-########## Конец последних постов ############*/
<?php else : ?>/*##########Конец цикла############*/
<h1>А здесь нет ничего :( 404 </h1>
<?php endif; ?>
<!--<div class="navigation">
 <div class="alignleft"><?php next_posts_link() ?></div>
 <div class="alignright"><?php previous_posts_link() ?></div>
 </div>-->
 <?php if (function_exists("emm_paginate")) {
 emm_paginate();
 } ?>/*##########Навигация############*/
</div>
 <!-- Конец #colLeft -->
<?php get_sidebar(); ?>/*##########Вывод боковой колонки (сайдбар) ############*/
<?php get_footer(); ?>/*##########Вывод футера ############*/

 sidebar.php

1
2
3
4
5
6
7
8
9
10
<aside id="colRight">
<form method="get" action="<?php bloginfo('url'); ?>" target="_blank">
<input name="s" id="form-query" value="" placeholder="Поиск по сайту">
<input id="form-querysub" type=submit value="">
</form>
<?php /* Виджеты сайдбара */
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?>
 </aside><!-- конец колрайт -->

footer.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->
<!-- Начало футер -->
<footer id="footer">
<div id="footerInner">
<div id="footerlogo">
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png"/></a>/* Отображение логотипа */
</div>
<nav class="footernav">/* Вывод списка страниц */
<?php if ( function_exists( 'wp_nav_menu' ) ){
 wp_nav_menu( array( 'theme_location' => 'secondary-menu','fallback_cb'=>'secondarymenu') );
 }else{
 secondarymenu();
 }?>
</nav>
</div><!-- Конец футериннер -->
</div>
</div>
</footer>
<!-- Конец футер -->
<?php wp_footer(); ?>
</body>
</html>

single.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php get_header();?>/* Вывод шапки сайта */
<div id="lpblock">
<div class="breadcrumb">/* Хлебные крошки */
<?php
 the_breadcrumb();
?>
</div>
</div>
<!-- Начало врапер -->
<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
<!-- Begin #colLeft -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <!-- Begin .postBox -->
<article class="singlecont">
<h1><?php the_title(); ?></h1>/*Заголовок поста */
<div class="infocont"><span> <?php the_author(); ?> / <?php the_time('M') ?>.<?php the_time('j') ?>.<?php the_time('Y') ?>. / <?php comments_popup_link('Нет комментариев', '1 комментарий ', 'Комментариев: %'); ?></span></a></div>/* Информация о посте */
<div class="cont">
<?php the_content(); ?>/* Вывод текста записи */
</div>
<div class="postTags"><?php the_tags($before, '', $sep, $after); ?></div>/* Вывод меток записи */
<?php comments_template(); ?> /* Вывод шаблона комментариев */
</div>
<?php endwhile; else: ?>
<p>Извините, но Вы ищете то чего здесь нет.</p>
<?php endif; ?>
</article><!-- Конец .синглконтент -->
 <!-- Конец #colLeft -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

archive.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?php get_header(); ?>
<div id="lpblock">/* Вывод названия меток и рубрик */
<!-- Архивы -->
 <?php if(is_month()) { ?>
 <div id="archive-title">
 <h2>Просмотр статей за "<strong><?php the_time('F, Y') ?></strong>"</h2>
 </div>
 <?php } ?>
 <?php if(is_category()) { ?>
 <div id="archive-title">
 <h2>Категория "<strong><?php $current_category = single_cat_title("", true); ?></strong>"</h2>
 </div>
 <?php } ?>
 <?php if(is_tag()) { ?>
 <div id="archive-title">
 <h2><span> Метка "<strong><?php wp_title('',true,''); ?></strong>"</h2>
 </div>
 <?php } ?>
 <?php if(is_author()) { ?>
 <div id="archive-title">
 <h2>Статьи "<strong><?php wp_title('',true,''); ?></strong>"</h2>
 </div>
 <?php } ?>
</div><!-- /Архивы -->
<!-- Начало врапер -->
<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Начало .postBox -->
<article class="postBox">
<div class="postThumbbig"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="info">
<?php the_author(); ?> / <?php the_tags('', ', ', ''); ?> / <?php the_time('j') ?> <?php the_time('M') ?> <?php the_time('Y') ?> / <?php comments_popup_link('0', '1', '%'); ?>
</div>
<div class="textPreview">
<?php the_excerpt(); ?>
</div>
<div class="more-link"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Далее >></a></div>
</article>
<!-- Конец .postBox -->
<div class="raz"></div>
<?php endwhile; ?>
<?php else : ?>
<h1>А здесь нет ничего :( 404 </h1>
<?php endif; ?>
<!--<div class="navigation">
 <div class="alignleft"><?php next_posts_link() ?></div>
 <div class="alignright"><?php previous_posts_link() ?></div>
 </div>-->
 <?php if (function_exists("emm_paginate")) {
 emm_paginate();
 } ?>
</div>
 <!-- Конец #colLeft -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

search.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?php get_header(); ?>
<div id="lpblock">
/* Вывод поискового запроса пользователя */
<h2>Результаты поиска для "<?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<strong>'); echo $key; _e('</strong>'); wp_reset_query(); ?>"</h2>
</div>
<!-- Начало врапер -->
<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Начало .postBox -->
<article class="postBox">
<div class="postThumbbig"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="info">
<?php the_time('j') ?> <?php the_time('M') ?> <?php the_time('Y') ?> / <?php the_tags('', ', ', ''); ?> / <?php comments_popup_link('Комментариев 0', '1 комментарий', 'Комментариев %'); ?>
</div>
<div class="textPreview">
<?php the_excerpt(); ?>
</div>
<div class="more-link"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Далее >></a></div>
</article>
<div class="raz"></div>
<!-- Конец .postBox -->
<?php endwhile; ?>
<?php else : ?>
<p>К сожалению, по Вашему запросу ничего не найдено. Пожалуйста, попробуйте ещё раз - использовать другие ключевые слова для поиска.</p>
<?php endif; ?>
<!--<div class="navigation">
 <div class="alignleft"><?php next_posts_link() ?></div>
 <div class="alignright"><?php previous_posts_link() ?></div>
 </div>-->
 <?php if (function_exists("emm_paginate")) {
 emm_paginate();
 } ?>
</div>
 <!-- Конец #colLeft -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 comments.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<?php
// Здесь ничего не удаляйте
 if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
 die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
 <p class="nocomments">This post is password protected. Enter the password to view comments.</p>
 <?php
 return;
 }
?>
<!-- Редактировать можете начать здесь -->
<?php if ( have_comments() ) : ?>
 <h2 class="h2comments"><span><?php comments_number('Нет комментариев', 'Комментариев 1', 'Комментариев %' );?> <a href="#respond" class="addComment">Добавить комментарий</a></span></h2>
<ul class="commentlist">
 <?php wp_list_comments('callback=mytheme_comment'); ?>
 </ul>
 <?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
 <!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
 <!-- If comments are closed. -->
 <p class="nocomments">Комментарии закрыты.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<div id="respond">
<h2 class="commenth"><span><?php comment_form_title( 'Оставить комментарий', 'Ответ пользователю %s' ); ?></span></h2>
<div class="cancel-comment-reply">
 <small><?php cancel_comment_reply_link( 'Отменить ответ' ); ?></small>
</div>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Вы вошли как <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Выйти &raquo;</a></p>
<?php else : ?>
<p><label for="author">Имя <?php if ($req) echo "(Обязательно)"; ?></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
</p>
<p><label for="email">Mail (Видно не будет) <?php if ($req) echo "(Обязательно)"; ?></label>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
</p>
<p><label for="url">Ваш веб сайт (Если есть)</label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
</p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><label for="comment">Комментарий</label>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Отправить" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>

page.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php get_header(); ?>
<div id="lpblock">
<h2><?php the_title(); ?></h2>
</div>
<!-- Начало врапер -->
<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Начало .singlecont -->
<article class="singlecont">
<div class="cont">
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</article><!-- Конец .синглконтент -->
</div>
<!-- Конец colleft -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<?php
/*******************************
 Хлебные крошки
********************************/
function the_breadcrumb() {
 echo '';
 if (!is_front_page()) {
 echo '<h3><a href="';
 echo get_option('home');
 echo '">Блог';
 echo "</a> > ";
 if (is_category() || is_single()) {
 the_category(' > ');
 if (is_single()) {
 echo " </h3> ";
 }
 } elseif (is_page()) {
 echo the_title('');
 }
 }
 else {
 echo 'Home';
 }
}
/*******************************
 Меню
********************************/
if ( function_exists( 'wp_nav_menu' ) ){
 if (function_exists('add_theme_support')) {
 add_theme_support('nav-menus');
 add_action( 'init', 'register_my_menus' );
 function register_my_menus() {
 register_nav_menus(
 array(
 'primary-menu' => __( 'Primary Menu' ),
 )
 );
 }
 }
}
/* CallBack functions for menus in case of earlier than 3.0 WordPress version or if no menu is set yet*/
function primarymenu(){ ?>
 <div class="ddsmoothmenu">
 <ul>
 <?php wp_list_categories('hide_empty=1&exclude=1&title_li='); ?>
 </ul>
 </div>
<?php }
function secondarymenu(){ ?>
 <ul>
 <?php wp_list_pages('&title_li='); ?>
 </ul>
<?php }
/*******************************
 Миниатюры
********************************/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 800, 300, true );
add_image_size('loopThumb', 140, 80, true);
/*******************************
 Количество символов в пост бокс
********************************/
function home_excerpt_length($length) {
 return 20;
}
add_filter('excerpt_length', 'home_excerpt_length');
/*******************************
 Виджеты
********************************/
if ( function_exists('register_sidebar') )
register_sidebar(array(
 'name' => 'sidebar',
 'before_widget' => '<div class="rightBox">
 <div class="rightBoxMid">',
 'after_widget' => '</div>
 </div>',
 'before_title' => '<h2> ',
 'after_title' => '</h2><div></div>',
));
register_sidebar(array(
 'name' => 'footer',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h2>',
 'after_title' => '</h2>',
));
/*******************************
 Навигация
********************************
 * Retrieve or display pagination code.
 *
 * The defaults for overwriting are:
 * 'page' - Default is null (int). The current page. This function will
 * automatically determine the value.
 * 'pages' - Default is null (int). The total number of pages. This function will
 * automatically determine the value.
 * 'range' - Default is 3 (int). The number of page links to show before and after
 * the current page.
 * 'gap' - Default is 3 (int). The minimum number of pages before a gap is
 * replaced with ellipses (...).
 * 'anchor' - Default is 1 (int). The number of links to always show at begining
 * and end of pagination
 * 'before' - Default is '<div>' (string). The html or text
 * to add before the pagination links.
 * 'after' - Default is '</div>' (string). The html or text to add after the
 * pagination links.
 * 'title' - Default is '__('Pages:')' (string). The text to display before the
 * pagination links.
 * 'next_page' - Default is '__('&raquo;')' (string). The text to use for the
 * next page link.
 * 'previous_page' - Default is '__('&laquo')' (string). The text to use for the
 * previous page link.
 * 'echo' - Default is 1 (int). To return the code instead of echo'ing, set this
 * to 0 (zero).
 *
 * @author Eric Martin <eric@ericmmartin.com>
 * @copyright Copyright (c) 2009, Eric Martin
 * @version 1.0
 *
 * @param array|string $args Optional. Override default arguments.
 * @return string HTML content, if not displaying.
 */
function emm_paginate($args = null) {
 $defaults = array(
 'page' => null, 'pages' => null,
 'range' => 3, 'gap' => 3, 'anchor' => 1,
 'before' => '<div>', 'after' => '</div>',
 'title' => __(''),
 'nextpage' => __('&raquo;'), 'previouspage' => __('&laquo'),
 'echo' => 1
 );
$r = wp_parse_args($args, $defaults);
 extract($r, EXTR_SKIP);
if (!$page && !$pages) {
 global $wp_query;
$page = get_query_var('paged');
 $page = !empty($page) ? intval($page) : 1;
$posts_per_page = intval(get_query_var('posts_per_page'));
 $pages = intval(ceil($wp_query->found_posts / $posts_per_page));
 }
 $output = "";
 if ($pages > 1) {
 $output .= "$before<span class='emm-title'>$title</span>";
 $ellipsis = "<span class='emm-gap'>...</span>";
if ($page > 1 && !empty($previouspage)) {
 $output .= "<a href='" . get_pagenum_link($page - 1) . "' class='emm-prev'>$previouspage</a>";
 }
 $min_links = $range * 2 + 1;
 $block_min = min($page - $range, $pages - $min_links);
 $block_high = max($page + $range, $min_links);
 $left_gap = (($block_min - $anchor - $gap) > 0) ? true : false;
 $right_gap = (($block_high + $anchor + $gap) < $pages) ? true : false;
if ($left_gap && !$right_gap) {
 $output .= sprintf('',
 emm_paginate_loop(1, $anchor),
 $ellipsis,
 emm_paginate_loop($block_min, $pages, $page)
 );
 }
 else if ($left_gap && $right_gap) {
 $output .= sprintf('',
 emm_paginate_loop(1, $anchor),
 $ellipsis,
 emm_paginate_loop($block_min, $block_high, $page),
 $ellipsis,
 emm_paginate_loop(($pages - $anchor + 1), $pages)
 );
 }
 else if ($right_gap && !$left_gap) {
 $output .= sprintf('',
 emm_paginate_loop(1, $block_high, $page),
 $ellipsis,
 emm_paginate_loop(($pages - $anchor + 1), $pages)
 );
 }
 else {
 $output .= emm_paginate_loop(1, $pages, $page);
 }
if ($page < $pages && !empty($nextpage)) {
 $output .= "<a href='" . get_pagenum_link($page + 1) . "' class='emm-next'>$nextpage</a>";
 }
$output .= $after;
 }
if ($echo) {
 echo $output;
 }
return $output;
}
/**
 * Helper function for pagination which builds the page links.
 *
 * @access private
 *
 * @author Eric Martin <eric@ericmmartin.com>
 * @copyright Copyright (c) 2009, Eric Martin
 * @version 1.0
 *
 * @param int $start The first link page.
 * @param int $max The last link page.
 * @return int $page Optional, default is 0. The current page.
 */
function emm_paginate_loop($start, $max, $page = 0) {
 $output = "";
 for ($i = $start; $i <= $max; $i++) {
 $output .= ($page === intval($i))
 ? "<span class='emm-page emm-current'>$i</span>"
 : "<a href='" . get_pagenum_link($i) . "' class='emm-page'>$i</a>";
 }
 return $output;
}
/*******************************
 Комментарии
********************************/
function mytheme_comment($comment, $args, $depth) {
 $GLOBALS['comment'] = $comment; ?>
 <li <?php comment_class('clearfix'); ?> id="li-comment-<?php comment_ID() ?>">
 <?php echo get_avatar($comment,$size='60',$default='http://www.gravatar.com/avatar/61a58ec1c1fba116f8424035089b7c71?s=32&d=&r=G' ); ?>
 <div id="comment-<?php comment_ID(); ?>">
 <div class="comment-meta commentmetadata clearfix">
 <?php printf(__('%s'), get_comment_author_link()) ?><?php edit_comment_link(__('(Edit)'),' ','') ?> <span><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?>
 </span>
 </div>
 <div class="text">
 <?php comment_text() ?>
 </div>
 <?php if ($comment->comment_approved == '0') : ?>
 <em><?php _e('Your comment is awaiting moderation.') ?></em>
 <br />
 <?php endif; ?>
<div class="reply">
 <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
 </div>
 </div>
<?php }

Стили CSS

1
2
3
4
5
6
7
/*
Theme Name: beloweb
Version: 1.0
Description: Проверочный шаблон от beloweb
Author: beloweb.ru
Author URI:
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* Выпадающее меню */
 #dropdown_nav ul li ul {
 margin-top:0px;
 z-index: 4;
 width:180px;
 padding:0px;
 position:absolute;
 top:40px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 }
#dropdown_nav ul li ul li {
 margin-top:0px;
 width:180px;
 padding:0px;
 }
#dropdown_nav ul li ul li a {
 margin-top:0px;
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;
 }
 #dropdown_nav ul li ul li a:hover {
 background:#222;
 color:#0dbfe5;
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
/*
Theme Name: psd_to_html_beloweb
Version: 1.0
Description: Проверочный шаблон от beloweb
Author: beloweb.ru
Author URI:
*/
* {
 margin: 0;
 padding: 0;
}
body {
 width: 100%;
 height: 100%;
 color:#333;
 background: #fff;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
}
aside, nav, footer, header, section { display: block; }
ul {
 list-style:none;
}
a {
 text-decoration:none;
}
a:hover {
 text-decoration: none;
}
/* -------------------------------
Главные блоки
----------------------------------*/
#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }
.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }
#headerInner {
 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}
#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }
#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}
#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}
/* -------------------------------
Шапка сайта
----------------------------------*/
.bottomMenu {
 width:1200px;
 height: 70px;
 position:absolute;
 left:0px;
 bottom:0px;
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }
#dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 }
#dropdown_nav li {
 margin-top:20px;
 float:left;
 position:relative;
 display:inline-block;
 }
#dropdown_nav li a {
 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:17px 22px 19px 22px;
 background: url(images/linemenu.png) right no-repeat;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 }
 #dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
 }
 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }
/* Выпадающее меню */
 #dropdown_nav ul li ul {
 margin-top:0px;
 z-index: 4;
 width:180px;
 padding:0px;
 position:absolute;
 top:40px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 }
#dropdown_nav ul li ul li {
 margin-top:0px;
 width:180px;
 padding:0px;
 }
#dropdown_nav ul li ul li a {
 margin-top:0px;
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;
 }
 #dropdown_nav ul li ul li a:hover {
 background:#222;
 color:#0dbfe5;
 }
/* -------------------------------
 Блок "Последние посты"
----------------------------------*/
#lpblock {
 background: #eee;
 position:relative;
 width: 1200px;
 height:100px;
 margin:0 auto;
 margin-top:193px;
 }
#lpblock h2 {
 text-align: center;
 font-family: "Segoe UI Semilight";
 color:#b2b2b2;
 font-weight:100;
 padding-top:35px;
 font-size:3em;
 }
/*----------------------------
 Логотип
------------------------------*/
.logo {
 position:absolute;
 left:0px;
 top:90px;
 }
/* Верхнее правое меню */
.topMenuRight {
 height:57px;
 position:absolute;
 left:0px;
 top:0px;
 border: 0px solid #1FA2E1;
 }
.topMenuRight ul li {
 background: url(images/line.png) 0px 0px no-repeat;
 float:left;
 height: 57px;
 }
.topMenuRight ul {
 padding-left:0px;
 }
.topMenuRight ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:16px 20px 21px 20px;
 }
.topMenuRight ul li a:hover{
 background: #fff;
 color:#555;
 }
/*----------------------------
 Основной контент
------------------------------*/
/*----------------------------
 Инфо панель
------------------------------*/
.info {
 width:100%;
 margin-bottom:20px;
 margin-top:20px;
 font-size:14px;
 line-height:100%;
 color:#999;
 }
.info a {
 color:#777;
 }
.info a:hover {
 color:#4991bb;
 }
/*----------------------------
 Конец Инфо панель
------------------------------*/
.raz {
 margin:0 auto;
 border:0px solid #333;
 background: #fff;
 width:116px;
 height:29px;
 margin-bottom:50px;
 background: url(images/raz.png) 0px 0px no-repeat;
 }
.postBox {
 border:0px solid #333;
 background: #fff;
 width:700px;
 margin-top:0px;
 margin-left:0px;
 margin-bottom:50px;
 }
.postBox h2 a {
 font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif;
 color:#000;
 font-style:normal;
 font-weight:100;
 font-size:33px;
 line-height:35px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }
.postBox h2 a:hover {
 color:#0dbfe5;
 }
.postBox .textPreview {
 border:0px solid #333;
 width:800px;
 margin-bottom:30px;
}
.postBox .textPreview p{
 margin-top:0;
 }
.postBox .postThumb{
 margin:0px 0px 15px 0;
 }
.postBox .postMeta {
 padding-bottom:15px;
 clear:left;
 overflow:hidden;
}
.more-link a {
 border-radius: 3px;
 background: #0dbfe5;
 margin-top:30px;
 font-weight:600;
 color:#fff;
 font-size:17px;
 padding:6px 25px 9px 25px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }
.more-link a:hover {
 background:#000;
 color:#0dbfe5;
 }
/* --------------------------------
 Сайдбар
-----------------------------------*/
.rightBox {
 margin-top:0px;
 margin-left:0px;
 width:330px;
 margin-bottom:30px;
 }
.rightBox h2 {
 width:335px;
 background:#f7f7f7 url(images/h2img.png) 320px 14px no-repeat;
 font-size:18px;
 font-family: "Segoe UI Semibold", Tahoma, Helvetica, Sans-Serif;
 color:#333;
 display:block;
 padding:10px 0 15px 20px;
}
.rightBox ul li{
 width:350px;
 padding:10px 0px;
 border-bottom:1px solid #f6f6f6;
 font-size:14px;
 line-height: 16px;
 }
.rightBox a {
 color:#333;
 }
.rightBox a:hover {
 color: #0dbfe5;
 }
/*----------------------------
FOOTER ELEMENTS
------------------------------*/
#footer {
 margin-top:50px;
 height:100px;
 width:100%px;
 background: #0dbfe5;
 }
#footerInner {
 position:relative;
 border:0px solid #000;
 width:1200px;
 margin:0 auto;
 height:100px;
 }
#footerlogo {
 position:absolute;
 left:0px;
 top:25px;
 }
.footernav {
 position:absolute;
 right:0px;
 top:35px;
 }
.footernav ul li {
 float:left;
 }
.footernav ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:0px 0px 0px 25px;
 }
.footernav ul li a:hover{
 color:#333;
 }
/* --------------------------------
Формы
-----------------------------------*/
#form-query {
 position:relative;
 background:#eeeeee;
 border:0px solid #e4e4e4;
 width:335px;
 height:31px;
 padding:8px 10px 7px;
 font-weight:100;
 font-size:18px;
 color:#000;
 margin-bottom: 30px;
}
#form-querysub {
 position:absolute;
 right:15px;
 top:15px;
 width:17px;
 height:17px;
 background:url(images/search.png) 0px 0px no-repeat;
 border:0px dashed #333;
 }
#form-querysub:hover {
 cursor: pointer;
}
.share-new {
 z-index: 1;
 position:absolute;
 right:0px;
 top:14px;
 }
 .share-new a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; }
 .share-new .icon-twitter {
 background: url(images/twitter-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 3px;
}
.share-new .icon-rss {
 background: url(images/rss-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;
}
.share-new .icon-mail {
 background: url(images/email-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;
}
/*----------------------------
 Сингл контент
------------------------------*/
.breadcrumb h3 {
 color:#999;
 font-size:20px;
 line-height:23px;
 display: block;
 border:0px solid #000;
 width:100%;
 margin-bottom:0px;
 padding-top:37px;
 padding-left:20px;
 }
.breadcrumb a {
 color:#0dbfe5;
 font-size:20px;
 }
.breadcrumb a:hover {
 color:#4991bb;
 }
.singlecont {
 background: #fff;
 color:#444;
 font-size:15px;
 line-height:23px;
 display: block;
 border:0px solid #000;
 width:100%;
 position:relative;
 margin-bottom:40px;
 }
.singlecont h1 {
 font-family: "Segoe UI Light", Tahoma, Helvetica, Sans-Serif;
 color:#000;
 font-size:33px;
 font-style:normal;
 padding:0px 0 0px;
 line-height:100%;
 margin-bottom:20px;
 }
.singlecont .hrdown {
 width:655px;
 height:16px;
 background: url(images/post.png) 0px 0px repeat-x;
 margin-bottom:25px;
 margin-top:27px;
 }
.singlecont .infocont {
 margin-bottom:10px;
 margin-top:15px;
 font-size:11px;
 line-height:100%;
 color:#888;
 }
.singlecont .infocont a {
 color:#333;
 border-bottom:1px solid #ddd;
 }
.singlecont .infocont a:hover {
 color:#999;
 }
.singlecont a {
 color: #4991bb;
 border-bottom:1px solid #ddd;
 }
.singlecont a:hover {
 color: #5cbfd7;
 border-bottom:1px solid #d1d1d1;
 }
.singlecont .textPr {
 margin-top:20px;
 }
.singlecont .textPr h3 {
 font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
 color:#dc5a54;
 font-size:25px;
 font-style:normal;
 padding-top:10px;
 line-height:100%;
 margin-bottom:20px;
 }
.singlecont ul {
 margin-top:10px;
 margin-bottom:10px;
 }
.cont ul li {
 width:100%;
 background: url(images/list.png) 0px 9px no-repeat;
 padding:5px 0 5px 18px;
 color:#000;
 font-weight:normal;
 line-height:18px;
 }
.cont ol li {
 width:660px;
 padding:5px 0 5px 5px;
 color:#000;
 margin-left:25px;
 font-weight:normal;
 line-height:18px;
 }
.cont h1 {
 background: none;
 border-bottom: 1px solid #ccc;
 color:#444;
 font-size:33px;
 font-weight:normal;
 margin-top:20px;
 line-height:100%;
 margin-bottom:20px;
 padding-bottom:7px;
 }
.cont h2,h3,h4 {
 width:100%;
 border-top: 1px solid #ccc;
 color:#5cbfd7;
 font-size:25px;
 font-weight:normal;
 margin-top:20px;
 line-height:100%;
 margin-bottom:20px;
 padding-top:10px;
 }
.singlecont p {
 margin-bottom:15px;
 }
/* Теги */
.postTags{
 margin-bottom:50px;
 margin-top:50px;
 }
.postTags a{
 border:none;
 color:#999;
 padding: 7px 15px 10px 15px;
 font-size:14px;
 background: #f9f9f9;
 margin-right:10px;
 -moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;
 }
.postTags a:hover{
 border:none;
 background: #0dbfe5;
 color:#fff;
 }
/* Комментарии
-----------------------------------*/
.h2comments {
 font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
 color:#555;
 padding: 0px 0px 25px 0px;
 margin-left:0px;
 border:0px solid #333;
 font-weight: 100;
 font-size:28px;
 }
.h2comments a.addComment {
 border:none;
 color:#fff;
 padding: 10px 15px 14px 15px;
 font-size:18px;
 background: #0dbfe5;
 margin-top:-10px;
 margin-right:0px;
 display:block;
 float:right;
 -moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;
 }
.h2comments a.addComment:hover {
 background: #000;
 color:#fff;
 }
h2#commentsForm {
 margin:0;
 padding-top:0;
}
#content #colLeft ul.commentlist {
 width:100%;
 list-style:none;
 list-style-position:outside;
 display:block;
 margin:20px 0;
 border-top:0px dotted #7a9e0e;
 border-bottom:0px dotted #7a9e0e;
 padding:0;
}
#content #colLeft ul.commentlist ul {
 list-style-type:none;
 list-style-position:outside;
 margin:0;
}
#content #colLeft ul.commentlist li {
 padding:0 0 20px 40px;
 position:relative;
 border-bottom:1px solid #E5E8EA;
 margin-top:25px;
 background:none;
}
#content #colLeft ul.commentlist li p{
 font-size:13px;
 margin:10px 0;
 margin-left:10px;
}
#content #colLeft ul.commentlist li .comment-meta, #content #colLeft ul.commentlist li .text {
 margin-left:20px;
}
#content #colLeft ul.commentlist li .comment-meta span {
 font-size:11px;
 color:#999;
}
#content #colLeft ul.commentlist li .comment-meta {
 font-size:18px;
 margin-left:30px;
}
#content #colLeft ul.commentlist li .avatar {
 background:#fff;
 border:1px solid #eee;
 position:absolute;
 left:0;
 top:5px;
}
#content #colLeft ul.commentlist .reply {
 position:absolute;
 right:10px;
 top:0px;
 text-align:center;
 font-size:21px;
}
#content #colLeft ul.commentlist .reply a {
 border-bottom:none;
 display:block;
 color:#e1e1e1;
 -moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;
}
#content #colLeft ul.commentlist .reply a:hover {
 color:#0dbfe5;
}
#content #colLeft ul.commentlist li .children li {
 margin-top:20px;
 padding-top:20px;
 border-top:1px solid #E5E8EA;
 border-bottom:none;
 overflow:hidden;
 padding-bottom:0;
}
#content #colLeft ul.commentlist li .children li .avatar {
 top:25px;
}
#content #colLeft ul.commentlist li .children li .reply {
 top:15px;
}
/* Формы комментариев */
.commenth {
 font-family: "Segoe UI Regular", Tahoma, Helvetica, Sans-Serif;
 color:#555;
 padding: 0px 20px 25px 20px;
 margin-left:35px;
 border:0px solid #333;
 font-weight: 100;
 font-size:22px;
 }
#commentform p {
 margin:0;
}
#commentform label {
 color:#777;
 display:block;
 padding:5px 0;
}
#commentform input, #commentform textarea {
 border:1px solid #ddd;
 padding:8px;
 width:50%;
 margin-bottom:10px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
}
#commentform input:focus, #commentform textarea:focus {
 border:1px solid #0099FF;
}
#commentform textarea {
 width:96%;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
}
#commentform input#submit{
 font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
 border:none;
 border-radius:0px;
 color:#fff;
 padding: 10px 15px 14px 15px;
 font-size:18px;
 background: #0dbfe5;
 width:150px;
 margin-right:0px;
 display:block;
 cursor:pointer;
 -moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;
}
#commentform input#submit:hover {
 color:#fff;
 background: #000;
 }
blockquote {
 width:90%;
 border-left:5px solid #ccc;
 padding-left:20px;
 margin:15px 0 15px 25px;
 font-size:14px;
 color:#777;
}
blockquote:hover {
 border-left:5px solid #5cbfd7;
 color:#444;
}
/* Навигация */
.emm-paginate { margin-bottom:60px; clear:both; }
.emm-paginate a { border: 0px solid #ccc; background: #ebebeb; color:#333; margin-right:7px; padding:6px 14px; text-align:center; text-decoration:none;}
.emm-paginate .emm-title {color:#555; margin-right:4px;}
.emm-paginate .emm-gap {color:#999; margin-right:4px;}
.emm-paginate a:hover, .emm-paginate a:active, .emm-paginate .emm-current { color:#fff; background:#0dbfe5; border: 0px solid #63800c; margin-right:7px; padding:6px 14px;}
.emm-paginate .emm-page {}
.emm-paginate .emm-prev, .emm-paginate .emm-next {}

Установка шаблона

Демо ι Скачать

Previous Пак необходимых плагинов – WordPress Plugins Pack
Next Настройка панели администратора WordPress

Suggested Posts

Кнопка для сайта с дополнительной информацией

Как написать robots.txt для WordPress

Simple Account Page Простой личный кабинет 2.x 1.1

Продвинуть сайт без покупки ссылок

Как создать адаптивный шаблон сайта на CSS3

Вертикальное многоуровневое меню для сайта