Домой / Самообразование / Верстка в bootstrap Урок шестой

Верстка в bootstrap Урок шестой

верстка в bootstrap
верстка в bootstrap

Продолжается верстка в bootstrap Урок шестой

Добавление комментариев в новую тему на WordPress

Здравствуйте, мои уважаемые посетители и гости сайта «Блог Валерия Бородина»!


Сегодня мы продолжим с вами работать над новой темой для WordPres. И в этом уроке добавим комментарии в новую тему.

И так, начнем ...

Давайте прежде, чем продолжиться наша верстка в bootstrap сделаем небольшие правки в новой теме.

Первое это исправим файлы single.php и page.php, убрав из них лишнее.

Убирает оттуда вот этот код:

<a href="<?php the_permalink(); ?>">Читать далее</a>

Второе, вставим в файл style.css необходимые стили для дальнейшего нормального функционирования нашей новой темы:

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

Теперь как обещал еще в прошлом пятом уроке, отредактируем файл single.php. Для этого нужно совершить два действия:

  • Первое действие, выводим теги. Добавим код в sigle.php после <?php the_content () ;?>. Код вот этот:
    <div class="tags"><?php the_tags(); ?></div>
  • Второе действие, добавляем дополнительные стили в файл style.css. Вот они:
    .tags {
    padding-bottom: 5px;
    margin-top: 20px;
    }

Ну а теперь основная тема нашего сегодняшнего урока «Верстка в bootstrap».

Добавляем комментарии в нашу новую тему на WordPress

Для этого нам нужно вставить данный код в файл comments.php

<?php

// ########## Не удаляйте данные стоки
if (isset($_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"><?php _e('Этот пост защищен паролем. Введите пароль для просмотра комментариев.', 'kubrick'); ?></p>
<?php
 return; }
// ########## Конец секции

// Отображение комментариев
if ( have_comments() ) : ?>
 <h4 id="comments"><?php comments_number('Нет комментариев', 'Один комментарий', '% Комментариев');?> <?php printf('для “%s”', the_title('', '', false)); ?></h4>
 <div class="navigation">
 <div class="alignleft"><?php previous_comments_link() ?></div>
 <div class="alignright"><?php next_comments_link() ?></div>
 </div>
 <ol class="commentlist">
 <?php
 wp_list_comments(array(
 // see http://codex.wordpress.org/Function_Reference/wp_list_comments
 // 'login_text' => 'Login to reply',
 // 'callback' => null,
 // 'end-callback' => null,
 // 'type' => 'all',
 // 'avatar_size' => 32,
 // 'reverse_top_level' => null,
 // 'reverse_children' =>
 ));
 ?>
 </ol>
 <div class="navigation">
 <div class="alignleft"><?php previous_comments_link() ?></div>
 <div class="alignright"><?php next_comments_link() ?></div>
 </div>
 <?php
 if ( ! comments_open() ) : // There are comments but comments are now closed
 echo"<p class='nocomments'>Комментарии закрыты.</p>";
 endif;

else : // I.E. There are no Comments
 if ( comments_open() ) : // Comments are open, but there are none yet
 // echo"<p>Be the first to write a comment.</p>";
 else : // comments are closed
 echo"<p class='nocomments'>Комментарии закрыты.</p>";
 endif;
endif;

comment_form(array(
 // see codex http://codex.wordpress.org/Function_Reference/comment_form for default values
 // tutorial here http://blogaliving.com/wordpress-adding-comment_form-theme/
 'comment_field' => '<p><textarea style="height:130px; width:auto;" name="comment" id="comment" cols="58" rows="10" tabindex="4" aria-required="true"></textarea></p>',
 'label_submit' => 'Отправить',
 'comment_notes_after' => ''
 ));
?>

Следующий шаг, в файл single.php вставляем код, после тегов the_tags. Вот он этот код:

<?php comments_template( '', true ); ?>

Дальше в файл footer.php, после </script> вставим код, который подключает класс btn для кнопки. Этот класс придаст презентабельный вид кнопке. Вот этот код:

<script>
jQuery(document).ready(function($) {
$('input#submit').addClass('btn');
$('input#searchsubmit').addClass('btn');
});
</script>

И закончим тем, что вставим еще один код в файл style.css, чтобы наши комментарии выглядели красиво. Вот этот код:

/* Комментарии */

#comments {
margin: 25px 0 15px 0;
}
.comment-meta {
margin: 8px 0;
}
.comment {
margin: 10px 0;
}
#reply-title {
font-size: 17.5px;
margin:10px 0;
}
/* Конец комментарии */

И давайте посмотрим теперь, что у нас получилось? А получиться должно вот так:

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

Все таки давайте улучшим вид нашего сайдбара еще немного, прописав дополнительные стили в файл style.css. Вот эти стили:

/* Сайдабр */

.homepage-widget-block {
list-style:none;
border-bottom: 1px dashed #C2C2C2;
padding-bottom: 20px;

}
.homepage-widget-block form, .homepage-widget-block #searchform div input {
margin:0;
}
.homepage-widget-block h1 {
font-size: 18px;
text-transform: uppercase;
}
/* Конец сайдбар */

Вот сейчас стало намного лучше!

сайдбар
сайдбар

Теперь посмотрим видеоурок: Верстка в bootstrap Урок шестой

Верстка в bootstrap Урок шестой Добавление комментариев в новую тему для WordPress

Давайте сегодня закончим на этом.
И встретимся в следующем, заключительном уроке, где с вами адаптируем новую тему для WordPress.
А пока всего Вам хорошего! Удачи во всех ваших начинаниях! До встречи в шестом уроке!

С уважением, ваш Валерий Бородин

Все уроки по верстке в bootstrap адаптивной, уникальной темы для WordPress

 



Про Валерий Бородин

Проверьте также

пруф что это

Пруф что это и как им правильно пользоваться?

Пруф что это за слово такое и что оно означает в интернете? Здравствуйте, уважаемые друзья …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу