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

Опубликовано: 01.09.2018

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

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

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

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

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

Создание Wordpress Темы (Шаблона) с нуля - Урок 1 Установка, создание и активация темы

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

Приступим:

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

3 лучших WordPress темы для любого конструктора страниц: Elementor, Divi 3, Beaver Builder

<?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), поэтому меняем его код на следующий:

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

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

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

Здесь нам придется создать еще несколько файлов для темы, а именно файл 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'; ?>  <?php if ($comments) : ?> <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</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) : ?>  <?php else : // 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 »</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 »'); ?> <?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?> <?php edit_post_link('Edit', '', ''); ?> </div> <?php comments_template(); ?> </div> <?php endwhile; else: ?> <p>Sorry, no posts matched your criteria.</p> <?php endif; ?> </div> <?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 »</p>'); ?> <?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?> </div> </div> <?php endwhile; endif; ?> <?php comments_template(); ?> </div> <?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 тема (осталось добавить скриншот темы, картинки для красивого оформления и подкорректировать стили оформления)!