Анна Шабан в 23:50, 15.02.2009


6 комментариев

Одноколоночный шаблон с древовидными комментариями для wordpress

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

Начну с шаблона, его еще называют темой. Существует несколько способов работы с темами в wordpress:

  • использовать тему “как есть”
  • переделать существующую по своему усмотрению
  • написать оригинальную тему

Самый простой способ – использование созданной кем-то темы. В этом случае нужно скачать понравившуюся тему, распаковать ее в “..\wordpress\wp-content\themes”, потом в админке wordpress выбрать и применить ее. Тема готова – можете заполнять контентом ваш блог!

Относительно второго и третьего способов однозначно сказать какой лучше пожалуй можно только в конкретном случае, когда вы видите перед собой дизайн и реально оцениваете уровень своих знаний и умений. Для меня легче было написать все с нуля (не обошлось без подглядываний в другие темы за советом ;) ). Поэтому я уделю больше внимания именно созданию оригинальной темы своими руками.

Рассмотрим одноколоночный вариант, т.е. блог состоит (зрительно) из одной большой колонки. На деле в такой блог включены шапка (header.php), центральная часть (index.php) и подвал (footer.php). Для полной функциональности может понадобится еще несколько файлов (comments.php, comments-popup.php, single.php, functions.php и т.д.), но о них речь пойдет позже.

Чтобы не забыть какие именно файлы вам нужны и что в них должно быть, вы можете воспользоваться классической темой в wordpress (..\wordpress\wp-content\themes\classic).

Наглядная структура

Структура шаблона

Структура шаблона

Для нашего случая страница index.php заменяет страницу поста с комментариями (single.php), главную страницу (home.php). На схеме вы можете посмотреть иерархию шаблонов страниц для темы, а более подробное описание можно прочитать на английском. Я не буду останавливаться на этой иерархии, т.к. для простоты в нашей теме будет минимальное количество страниц.

Чтобы не запутаться в открывающихся и закрывающихся тегах, можно написать html-файл, который потом будет разбит на части в соответствии с шаблоном. Файл может быть таким:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Блог</title>
  <style type="text/css"> @import 'style.css';  </style>
</head>
<body>
  <div id="container">
    <div id="header">
        <h1><a href="#">Блог</a></h1>
        <span class="subTitle">Описание вашего блога</span>
    </div><!-- header -->
    <div id="index">
      <div class="rss">
        <a href="#">RSS</a>
      </div>
        <div>
          <h2><a href="#">Заголовок поста</a></h2>
          <p>
             <a href="#">Автор</a>,
			 20.01.2008
			 <a href="#">количество комментариев/a>
          </p>
        </div>
        <div>
          <p>
		    А тут будет тескт вашего поста
		  </p>
        </div>
    </div><!-- index -->
    <div id="footer">
      	© Копирайты
    </div><!-- footer -->
  </div><!-- container -->
</body>
</html>

Стилей пока не пишем никаких.

Преобразовываем html-файл в три файла для wordpress. Айдишники выбраны таким образом, чтобы легче можно было сориентироваться в какой файл переносить ту или иную часть.

header.php

В него переносим все от первой строки html-файла до <!– header –>, добавляем немного функционала и в результате должны получить файл с названием header.php и с таким содержимым:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>
		<?php bloginfo('name'); ?>
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="language" content="ru" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
	<?php wp_head(); ?>
</head>

<body>
  <div id="container">
    <div id="header"> 

		<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
		<span><?php bloginfo('description'); ?></span>

    </div><!-- header -->

<?php bloginfo(‘name’); ?> – выводит название вашего блога

<?php bloginfo(‘url’); ?> – ссылка на главную страницу

<?php bloginfo(‘description’); ?> – описание к вашему блогу

<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” /> – ссылка на стили

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> – указываем кодировку страницы

<meta name=”language” content=”ru” /> – язык страницы

<?php wp_head(); ?> – «точка», указывающая, что этот код является шапкой, т.е. (header.php); помогает при установке плагинов определить куда добавить служебный код плагина (если есть такая необходимость)

<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?> – эта строка является одной из составляющих, необходимых для нормальной работы древовидных комментариев; она добавляет джаваскрипт для ссылки «Ответить» в комментариях

index.php

Приступаем к центральной части. Копируем все, что лежит внутри тегов с айдишником “index”. Добавляем шапку, подвал, цикл вывода постов. Получаем:


<?php get_header(); ?>
   <div id="index">   

		<div class="rss">
			<a href="<?php bloginfo('rss2_url'); ?>">RSS</a>
		</div>

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>                  

			<div>
				<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
				<p>
					<a href="<?php bloginfo('wpurl'); ?>/about/#authors"><?php the_author(); ?></a>
					<?php the_time('G:i, d.m.Y'); ?>
					<?php comments_popup_link('пока нет комментариев', 'комментарий 1', 'комментарии %'); ?>
				</p>		

				<?php the_tags('Таги: ',', ',' '); ?> 						

			</div>

			<div>
			  <?php	the_content('Дальше ...'); ?>
			</div>    		

		<?php endwhile; else: ?>
			<h3><?php _e('По вашему запросу ничего нет.'); ?></h3>
		<?php endif; ?>  

		<?php previous_posts_link('Назад'); ?>
		<?php next_posts_link('Вперед'); ?>

		<?php comments_template(); ?>
    </div><!-- index -->
<?php get_footer(); ?>

<?php get_header(); ?> и  <?php get_footer(); ?> – подключение шапки и подвала

<?php bloginfo(‘rss2_url’); ?> – ссылка на rss

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> – условие для вывода постов

<?php the_permalink() ?> – постоянная ссылка на пост

<?php the_title(); ?> – название поста

<?php the_author(); ?> – автор поста

<?php the_time(‘G:i, d.m.Y’); ?> – время в формате  15:03, 20.01.2009

Дополнительно о времени и дате на английском – Форматирование времени и даты.

<?php comments_popup_link(‘пока нет комментариев’, ‘комментарий 1′, ‘комментарии %’); ?> – выводит количество комментариев;  для этого необходим файл comments.php, но о нем чуть позже

<?php the_tags(‘Теги: ‘,’, ‘,’ ‘); ?> – если заданы теги/метки, то выводит их как список (по алфавиту); теги разделяются запятыми

<?php the_content(‘Дальше …’); ?> – отображает содержимое поста; если статья разделена на 2 части с помощью (< ! –more–>), то на главной отображается часть поста до разделителя и появляется ссылка “Дальше …”

<?php previous_posts_link(‘Назад’); ?> – ссылка “Назад” ведет к предыдущим постам

<?php next_posts_link(‘Вперед’); ?> – ведет к следующим постам

<?php comments_template(); ?> - подключаем файл комментариев (у нас его пока нет, это на будущее)

footer.php

В этом файле закрываются открытые в шапке теги, добавляются копирайты или любая информация по желанию. Так же в нем есть функция <?php wp_footer(); ?>, аналогичная <?php wp_head(); ?>. Содержимое подвала:


		<div id="footer">
			© Копирайты
		</div>
    </div><!-- container -->
    <?php wp_footer(); ?>
</body>
</html>

style.css

Поговорим о файле со стилями. Для нашей темы он выглядит так:


/*
Theme Name: oneColumnBlog
Theme URI: http://www.stanfy.com.ua/
Description: Простой и понятный дизайн для блога в одну колонку
Version: 1.0
Author: Stanfy
Author URI: http://www.stanfy.com.ua/
*/

	  body {margin: 0px auto; font-family: Arial, Sans-serif; font-size: 0.75em; color: #fff;}
	  #container {border: 0px solid grey; width: 800px; margin: 0px auto;}

	  #header {background-color: #edb844; padding: 5px 20px; color: #584621;}
	  #header h1 a{font-size: 42px; color: #584621;}

	  #index {background-color: #584621; padding: 20px; }
	  .rss{float: right; display: inline; padding: 8px 5px 10px 10px;}

	  h2, h2 a {font-size: 26px; color: #edb844;}
	  a {font-weight: bold; color: #8e8163;}
	  p {padding: 8px 0px 0px;}

	  #footer {background-color: #8e6306; text-align: center; padding: 20px;}
	  #footer a {font-weight: bold; color: #584621;}

В начале файла в комментариях указывается информация о теме. Название нашей темы OneColumnBlog.

Промежуточный результат – папка темы (OneColumnBlog), в ней должно быть следующее:

  • header.php;
  • index.php;
  • footer.php;
  • style.css;
  • screenshot.png;

Если в дизайне предусмотрено использование картинок для нарезки темы, то нужно создать папку images и поместить их в нее. Скриншот нашей темы (screenshot.png) должен быть 300х225 пикселей и лежать в корне, а не в папке с картинками (images). Но на этом создание шаблона не заканчивается.

comments.php

Необходим файл комментариев. Он может быть таким:


<?php

if (! e m p t y ($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
	die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) {
	echo 'This post is password protected. Enter the password to view comments.';
	return;
} ?>

<?php if ( have_comments() ) : ?>
	<h2 id="comments"><?php comments_number('Нет комментариев', 'Один комментарий', 'Комментариев % ' );?></h2>
	<ol class="commentlist">
		<?php wp_list_comments(); ?>
	</ol>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>	

<?php else : ?>
	<h2><?php _e('Нет комментариев'); ?></h2>
<?php endif; ?>

<?php if ( comments_open() ) : ?>
	<h2><?php comment_form_title('Оставить комментарий'); ?></h2>

	<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
		<p><?php printf(__('Вы должны <a href="%s">войти</a>, чтобы оставить комментарий.'), get_option('siteurl')."/wp-login.php?redirect_to=".urlencode(get_permalink()));?></p>
	<?php else : ?>

		<div id="respond">
		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
			<div id="cancel-comment-reply">
				<small><?php cancel_comment_reply_link() ?></small>
			</div>
			<?php if ( $user_ID ) : ?>

			<p>
				<?php printf(__('Вы вошли как %s.'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>'); ?>
				<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Выйти') ?>"><?php _e('Выйти »'); ?></a>
			</p>

			<?php else : ?>

			<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
			<label for="author"><small><?php _e('Имя'); ?> <?php if ($req) _e('(обязательно)'); ?></small></label></p>

			<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
			<label for="email"><small><?php _e('Эл. почта (будет скрыта)');?> <?php if ($req) _e('(обязательно)'); ?></small></label></p>

			<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
			<label for="url"><small><?php _e('Сайт'); ?></small></label></p>

			<?php endif; ?>
			<?php comment_id_fields(); ?>

			<p><textarea name="comment" id="comment" tabindex="4"></textarea></p>

			<p>
				<input name="submit" type="submit" id="submit" tabindex="5" value="<?php echo attribute_escape(__('Отправить')); ?>" />
			</p>
			<?php do_action('comment_form', $post->ID); ?>

		</form>
		</div>
	<?php endif; ?>

<?php else : ?>
	<p><?php _e('Извините, обсуждение закрыто.'); ?></p>
<?php endif; ?>

Проверка условия have_comments() говорит сама за себя – если есть комментарии, то мы выполняем некоторые действия для их вывода, иначе пользователи увидят надпись “Нет комментариев” (по желанию этот текст можно изменить).

Строка <h2 id=”comments”><?php comments_number(‘Нет комментариев’, ‘Один комментарий’, ‘Комментариев % ‘ );?></h2> сообщает читателю количество комментариев к статье (как можно было догадаться по предыдущим примерам, текст можно поменять например на такой “Вы будете первым, кто оставит свой коммент!”, “Коммент тут один одинешенек”, “До вас прокомментировали % раз”).

Функция <?php wp_list_comments(); ?>занимается выводом списка комментариев, т.е. в нашем случае отображается аватарка, автор, дата и время, текст комментария и ссылка “Ответить”. Если теги <ul></ul> заменить на <ol></ol>, то комментарии будут нумероваться.

Две функции <?php previous_comments_link(); ?> и <?php next_comments_link(); ?> – это ссылки типа “Старые комментарии” и “Новые комментарии”, которые появляются при постраничной разбивке. В админке есть такой пункт “Разбивать комментарии на страницы по 50 на каждой и по умолчанию отображать старую страницу “. Если этот пункт не выбран, то ссылки не появятся и весь список обсуждения будет на одной странице.

Далее идет проверка – разрешено ли комментировать статью. Если нет, то оставить свой отзыв не получится. Если же вам повезло и комментирование еще возможно, то вы увидите форму комментирования. Она должна быть заключена в <div id=”respond”></div>, это позволяет писать ответ на комментарий.

<?php comment_id_fields(); ?> – отображает два скрытых поля (comment_post_ID и comment_parent), которые необходимы для корректного отображения ответов на комментарии.

Вот теперь у нас есть все составляющие. В папке с названием темы лежат такие файлы:

  • header.php;
  • index.php;
  • footer.php;
  • comments.php;
  • style.css;
  • screenshot.png;

плюс папка images\.

Папку темы копируем в “..\wordpress\wp-content\themes\” на сервер. Если все выполнено правильно, вы увидите что-то похожее на скриншот к нашей теме.

Если вы видите что-то совсем другое и не знаете почему вы это видите, то скачайте архив onecolumnblog с темой и html-файлом (это был наш каркас) и сравните файлы со своими.

И все?

Не думайте, что на этом все заканчивается, работа над темой только начинается – вам еще нужно придумать/прописать/протестить оформление элементов блога (я не заморачивалась над стилями и цветовой гаммой ;) ), продумать стилизацию комментариев (а нужны ли вам древовидные, может и не нужны вовсе – тогда уберите галочку в админке; а если таки нужны, то для них тоже потребуется немного дизайна) и еще вас ожидает целая куча мелочей, с которыми вы столкнетесь при работе с wordpress.

Теги:
Sapka contest
Проект crazymenu – опыт интернет интеграций

Комментарии

Анна Шабан

в 16:03, 24.03.2009

Очень надеюсь, что предложенный мной вариант создания темы в одну колонку пригодится вам :)

Kostya

в 17:09, 26.06.2011

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

megaultraseo

в 2:57, 02.12.2011

fdg g456

megaultraseo

в 2:58, 02.12.2011

Для wordpress много шаблонов, но этот хорош.

megaultraseo

в 2:59, 02.12.2011

54

Стилизация древовидных комментариев в Wordpress < Stanfy Блог

в 15:07, 12.12.2011

[...] к статье о создании темы с древовидными комментариями расскажу как можно эти комментарии оформить. Если вы [...]

Оставить комментарий

Наверх Наверх