Создаем простую тему на wordpress: часть 2

На предыдущей статье – Создаем простую тему на wordpress – можно было бы остановиться, но мы продолжим, а именно: создадим динамичный сайдбар (functions.php), а также форму комментариев на сайте (comments.php, single.php, post.php).

Скачать исходники для статьи можно ниже

Создаем файл functions.php.

Если вы зайдете в панель управления wordpress сайта с нашей новой темой, то наверняка заметите, что в пункте “Внешний вид” отсутствует подпункт “Виджеты”, что очень не удобно.

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

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

Приступим:

Создаем файл functions.php со следующим кодом:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
?>

Где переменные:

‘name’ — имя блока для виджетов. Здесь можете придумать любое имя.

‘before_widget’ — в эту строчку прописывается HTML код, который Вы хотите добавить перед виджетом

‘after_widget’ — Html код после виджета

Параметры ‘before_widget’ и ‘after_widget’ нужны для придания определенного стиля оформления блока с виджетами с помощью CSS.

Параметры ‘before_title’ и ‘after_title’ — соответственно для придания стиля оформления заголовкам виджета.

В вышеуказанном коде мы обернули заголовок виджета в блок div и задали ему стиль оформления title, а сайдбару с виджетами – стиль newsidebar, который описывается в файле stily.css.

Далее заходим в созданный нами ранее файл – sidebar.php.

Здесь мы вручную выводили нужные нам виджеты, однако, это очень не удобно (лучше добавлять виджеты через панель управления wordpress), поэтому меняем его код на следующий:

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>

, то есть мы вставили код для вывода блока виджета.

Все теперь заходим в панель управления нашим сайтом и видим – в пункте “Внешний вид” новый подпункт “Виджеты”, в котором мы с легкостью можем создать нужные нам виджеты, например, те же самые “Рубрики”, “Архивы”, “Последние записи”.

Создаем форму комментариев на сайте:

Здесь нам придется создать еще несколько файлов для темы, а именно файл single.php, page.php и comments.php.

Создаем файл – comments.php

Здесь пожалуй возьмем код данного файла с моей простой темы – glossyblue:

<?php // Do not delete these lines
	if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

        if (!empty($post->post_password)) { // if there's a password
            if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
				?>

				<p class="nocomments">This post is password protected. Enter the password to view comments.<p>

				<?php
				return;
            }
        }

		/* This variable is for alternating comment background */
		$oddcomment = 'alt';
?>

<!-- You can start editing here. -->

<?php if ($comments) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

	<ol class="commentlist">

	<?php foreach ($comments as $comment) : ?>

		<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
			<cite><?php comment_author_link() ?></cite> Says:
			<?php if ($comment->comment_approved == '0') : ?>
			<em>Your comment is awaiting moderation.</em>
			<?php endif; ?>
			<br />

			<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('e','',''); ?></small>

			<?php comment_text() ?>

		</li>

	<?php /* Changes every other comment to a different class */
		if ('alt' == $oddcomment) $oddcomment = '';
		else $oddcomment = 'alt';
	?>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

 <?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">Comments are closed.</p>

	<?php endif; ?>
<?php endif; ?>

<?php if ('open' == $post->comment_status) : ?>

<h3 id="respond">Leave a Reply</h3>

<?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 the_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>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><strong>Name</strong> <?php if ($req) echo "(required)"; ?></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><strong>Mail</strong> (will not be published) <?php if ($req) echo "(required)"; ?></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><strong>Website</strong></label></p>

<?php endif; ?>

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>

<?php endif; // if you delete this the sky will fall on your head ?>

Комментарии выводятся в записях (постах), а также на страничках сайта на wordpress, поэтому придется создать еще два php файла (шаблона) – single.php (вывод постов, записей), а также page.php (вывод страниц).

Создаем файл – single.php

Код данного файла также возьму с темы glossyblue:

<?php get_header(); ?>
  <div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">
	  <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
	  <div class="post-title">
	  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<span class="post-cat"><?php the_category(', ') ?></span> <span class="mini-add-comment"><a href="#respond">Add comments</a></span>
	  </div>
	  <div class="entry">
		<?php the_content('Read the rest of this entry &raquo;'); ?>
		<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
		<?php edit_post_link('Edit', '', ''); ?>
	  </div>

		<?php comments_template(); ?>

	  </div><!--/post -->

			<?php endwhile; else: ?>

		<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

  </div><!--/content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Здесь, пожалуй, нет ничего лишнего, а форма комментариев подключается с помощью строки: <?php comments_template(); ?>

Создаем файл – page.php

Код данного файла также возьму с темы glossyblue:

<?php get_header(); ?>
  <div id="content">
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
        <div class="post-content">
			<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

			<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
        </div>
    </div>

  <?php endwhile; endif; ?>

	<?php comments_template(); ?>

  </div><!--/content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Здесь, пожалуй, нет ничего лишнего, а форма комментариев подключается с помощью строки: <?php comments_template(); ?>

В итоге в нашей созданной теме уже 9 файлов, которые мы и создавали выше:

header.php,

index.php,

footer.php,

sidebar.php,

404.php,

comments.php,

single.php,

page.php,

style.css.

Можно сказать полноценная wordpress тема (осталось добавить скриншот темы, картинки для красивого оформления и подкорректировать стили оформления)!