Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #13. Интеграция вёрстки. Страница записи. Создание темы WordPress.
Сейчас мы будем производить интеграцию вёрстки для самой сложной страницы — single.html, поскольку нужно будет модифицировать не только стандартные блоки, такие как: название, мета данные и текст записи, но и еще блок — похожие записи и форма комментариев. Хотя это всё не так уж и сложно, как говорится «глаза боятся, а руки делают!».
Подготовка к интеграции
0. Переименовываем файл single.html в single.php.
Разбиение на блоки: header, sidebar и footer
Открываем файл single.php для внесения изменений.
Выделяем весь код сверху до закрытия блока div с классом header и удаляем его. У вас должен быть удалён этот участок кода.
<!DOCTYPE html> <html> <head> <!-- Charset --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Page info --> <title>Страница записи</title> <meta name="language" content="ru"> <!-- Favicon --> <link rel="shortcut icon" href="favicon/favicon.png" type="image/png"> <link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" sizes="60x60" href="favicon/favicon_apple_60.png"> <link rel="apple-touch-icon" sizes="76x76" href="favicon/favicon_apple_76.png"> <link rel="apple-touch-icon" sizes="120x120" href="favicon/favicon_apple_120.png"> <link rel="apple-touch-icon" sizes="152x152" href="favicon/favicon_apple_152.png"> <!-- Style CSS--> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <!-- JQuery Library --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> </head> <body> <!-- Обёртка --> <div id="wrapper"> <!-- Шапка --> <div class="header"> <!-- Название блога и описание --> <div class="bloginfo"> <h1><a href="">Блог Артёма Санникова</a></h1> <p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.</p> </div> <!-- Навигация --> <div class="nav"> <ul> <li class="current_page_item"><a href="">Главная</a></li> <li><a href="">Об авторе</a></li> <li><a href="">Контакты</a></li> <li><a href="">Карта сайта</a></li> </ul> </div> </div>
Вместо удалённого кода вставляем функцию для подключения файла header.php.
<?php get_header(); ?>
Выделяем блоки sidebar и footer, а затем удаляем их. На их место вставляем конструкции для подключения файлов sidebar.php и footer.php.
<?php get_sidebar(); ?> //подключение файла sidebar.php <?php get_footer(); ?> //подключение файла footer.php
Область для вывода текста записи
Перед блоком div с классом information-post вставляем конструкцию, которая запускает цикл для вывода информации на текущей странице.
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>
После закрытия блока div с классом text-post вставляем конструкцию, которая завершит выполнение цикла.
<?php endwhile; ?> <?php endif; ?>
Переходим к блоку information-post в котором необходимо написать четыре функции для вывода названия страницы, категории, даты публикации и количества просмотров.
Важный момент: если вы хотите, чтобы у вас отображалось количество просмотров записи/страницы, то вам необходимо установить плагин — WP-PostViews.
#было
<!-- Информация о записи страницы/записи-->
<div class="information-post">
<h1>Тестовая страница</h1>
<p>Категория: Тест / Опубликовано: 2017-07-24 / Просмотров: 30</p>
</div>
#стало
<!-- Информация о записи страницы/записи-->
<div class="information-post">
<h1><?php the_title(); ?></h1>
<p>Категория: <?php $category = get_the_category(); echo $category[0]->cat_name; ?> / Опубликовано: <?php the_time('Y-m-d'); ?> / Просмотров: <?php if(function_exists('the_views')) { the_views(); } ?></p>
</div>
Блок text-post очищаем от ненужной тестовой информации. Вместо тестовой информации напишем функцию, которая будет выводить текст записи.
#было <!-- Текст страницы/записи --> <div class="text-post"> <p>Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.</p> <p>И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта.</p> <p>Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p> </div> #стало <!-- Текст страницы/записи --> <div class="text-post"> <?php the_content(); ?> </div>
Похожие записи
Перемещаемся в блок div с классом related-post, и произведём небольшую модификацию этого блока.
Похожие записи у нас выводятся маркированным списком, который начинается с <ul>. Сразу после открытия <ul> вставляем этот код:
<?php
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids, //сортировка по тегам (меткам)
'post__not_in' => array($post->ID),
'showposts'=>3, //количество выводимых ячеек
'orderby'=>rand, // в случайном порядке
'caller_get_posts'=>1); //исключаем одинаковые записи
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
Сейчас нужно изменить элемент списка <li>, то есть вставить две функции, которые будут выводить название похожей записи и ссылку на нее.
#было <li><a href="">Урок #1. Структура темы WordPress.</a></li> #стало <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
Перед закрывающим <ul> вставляем еще небольшой фрагмент кода:
<?php } echo ''; } wp_reset_query(); } ?>
Вот что у нас получилось в результате модификации блока «Похожие записи».
<!-- Похожие записи -->
<div class="related-post">
<p>Еще записи по теме</p>
<ul>
<?php
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids, //сортировка по тегам (меткам)
'post__not_in' => array($post->ID),
'showposts'=>3, //количество выводимых ячеек
'orderby'=>rand, // в случайном порядке
'caller_get_posts'=>1); //исключаем одинаковые записи
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
}
echo '';
}
wp_reset_query();
}
?>
</ul>
</div>
Форма комментариев
После разделительной линии (блок div с классом devide-line), которая идёт после блока с похожими записями вставляем функцию для вывода встроенной формы комментариев.
<!-- Форма комментариев --> <?php comments_template(); ?>
Для того, чтобы форма комментариев отображалась корректно необходимо добавить следующий код в файл style.css.
/*Форма комментариев*/
#commentform p.comment-form-author > label,
#commentform p.comment-form-comment > label,
#commentform p.comment-form-email > label,
#commentform p.comment-form-url > label {
display: block;
margin: 0 0 10px 0;
font-size: 14px;
color: #666;
line-height: 1;
}
#commentform input[type="text"] {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
width: 240px;
height: auto;
color: #666;
padding: 10px 5px 10px 5px;
margin: 0 10px 10px 0;
border: 1px solid #dedede;
border-radius: 2px;
}
#commentform textarea {
font-family: 'Open Sans', sans-serif;
width: 97.8%;
height: 100px;
font-size: 14px;
color: #666;
padding: 1% 1%;
margin: 0 0 10px 0;
border: 1px solid #dedede;
resize: vertical;
border-radius: 2px;
}
#commentform input[type="submit"]{
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #333;
background-color: #FFD15C;
margin: 10px 0 0 0;
padding: 6px 5px;
border: 1px solid #FFD15C;
border-radius: 2px;
transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-webkit-transition: 0.2s;
}
#commentform input[type="submit"]:hover{
color: #fff;
background: #2689b0;
border: 1px solid #2689b0;
transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-webkit-transition: 0.2s;
}
/*Количество комментариев*/
#comments-wordpress h3#comments {
font-size: 14px;
font-weight: normal;
color: #5f5f5f;
}
/*Текст с количеством комментариев*/
h3#comments {
font-size: 16px;
font-weight: bold;
color: #333;
line-height: 1;
}
/*Текст - Добавить комментарий*/
#respond > h3 {
font-size: 16px;
font-weight: bold;
color: #333;
line-height: 1;
margin: 30px 0;
}
#respond > h3 > a {
color: #2d3e50;
text-decoration: underline;
}
#respond > h3 > a:hover {
text-decoration: none;
color: #333;
}
/*отменить комментарий*/
a#cancel-comment-reply-link {
font-size: 16px;
color: #2d3e50;
text-decoration: underline;
}
a#cancel-comment-reply-link:hover {
text-decoration: none;
color: #333;
}
/*Текст в форме комментариев для зарегистрированного пользователя*/
#commentform p.comment-notes {
font-size: 14px;
color: #666;
line-height: 1;
margin: 0 0 30px 0;
}
#commentform p.comment-notes a {
text-decoration: underline;
color: #5b892f;
}
#commentform p.comment-notes a:hover {
text-decoration: none;
color: #333;
}
/*Текст для зарегистрованного пользователя (вы вошли как)*/
p.logged-in-as {
font-size: 14px;
color: #666;
line-height: 1;
margin: 0 0 30px 0;
}
p.logged-in-as a {
text-decoration: underline;
color: #666;
}
p.logged-in-as a:hover {
text-decoration: none;
color: #2d3e50;
}
/*Список комментариев*/
ol.commentlist {
width:100%;
list-style:none;
list-style-position:outside;
display:block;
margin: 30px 0;
padding:0 0;
}
ol.commentlist ul {
list-style-type:none;
list-style-position:outside;
margin:0;
}
/*Стиль комментария*/
ol.commentlist li {
padding: 0 0 10px 40px;
margin: 30px 0 0 0;
position:relative;
border-bottom:1px solid #f3f4f5;
background:none;
outline: 0px solid green;
}
/*Коментарий ожидает проверки*/
em.comment-awaiting-moderation {
font-size: 12px;
color: #fff;
font-style: normal;
background-color: #e0891f;
padding: 2px 2px 2px 2px;
margin: 2px 0 2px 13px;
}
/*Выделение комменария автора поста*/
.commentlist li.bypostauthor > .comment-body {
border-left:2px solid #2d3e50;
margin: 0 0 0 5px;
}
ol.commentlist li p {
font-size: 14px;
color: #333;
line-height: 1.8;
margin:10px 0 10px 13px;
}
ol.commentlist li p a {
text-decoration: underline;
color: #2d3e50;
}
ol.commentlist li p a:hover {
color: #333;
text-decoration: none;
}
/*Автор комментария*/
div.comment-author.vcard {
margin:0 0 3px 13px;
}
div.comment-author.vcard cite {
font-size: 14px;
color: #333;
font-style: normal;
}
div.comment-author.vcard cite a.url {
text-decoration: none;
color: #333;
}
div.comment-author.vcard cite a.url:hover {
color: #2d3e50;
text-decoration: underline;
}
/*Дата публикации комментария*/
div.comment-meta.commentmetadata {
display: inline-block;
margin:0 0 0 13px;
}
ol.commentlist li .comment-meta a {
font-size: 12px;
color: #ccc;
text-decoration: none;
}
/*Аватар комментатора*/
ol.commentlist li .avatar {
background:#fff;
padding: 2px 2px 2px 2px;
border:1px solid #ccc;
position:absolute;
left:0;
top:0;
border-radius:50%;
}
/*Кнопка - Ответить на комментарий*/
ol.commentlist .reply {
position:absolute;
right:0px;
top:0px;
}
ol.commentlist .reply span.comment-reply-link {
font-size: 14px;
color: #ccc;
text-decoration: none;
background-color: #fff;
border: 1px solid #f3f4f5;
padding: 3px 3px;
display:block;
border-radius: 2px;
cursor: pointer;
}
ol.commentlist .reply span.comment-reply-link:hover {
color: #fff;
background-color: #2689b0;
border: 1px solid #2689b0;
}
/*Дочерние комментарий*/
ol.commentlist li .children li {
margin-top: 20px;
padding-top: 20px;
padding-bottom:0;
border-top:1px solid #E5E8EA;
border-bottom:none;
overflow:hidden;
outline: 0px solid green;
}
/*Аватар коментатора*/
ol.commentlist li .children li .avatar {
top:20px;
}
/*Кнопка ответить*/
ol.commentlist li .children li .reply {
top: 20px;
}
.reply a.comment-reply-link {
font-size: 12px;
color: #ccc;
text-decoration: none;
padding: 0 2px;
border: 1px solid #ccc;
border-radius: 2px;
}
.reply a.comment-reply-link:hover {
background: #2d3e50;
color: #fff;
border: 1px solid #2d3e50;
cursor: pointer;
}
Интеграция завершена
Окончательный вариант станицы — single.php, представлен ниже.
<?php get_header(); ?>
<!-- Область для вывода контента -->
<div class="content">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Информация о записи страницы/записи-->
<div class="information-post">
<h1><?php the_title(); ?></h1>
<p>Категория: <?php $category = get_the_category(); echo $category[0]->cat_name; ?> / Опубликовано: <?php the_time('Y-m-d'); ?> / Просмотров: <?php if(function_exists('the_views')) { the_views(); } ?></p>
</div>
<!-- Текст страницы/записи -->
<div class="text-post">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<!-- Разделительная линия -->
<div class="devide-line"></div>
<!-- Похожие записи -->
<div class="related-post">
<p>Еще записи по теме</p>
<ul>
<?php
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids, //сортировка по тегам (меткам)
'post__not_in' => array($post->ID),
'showposts'=>3, //количество выводимых ячеек
'orderby'=>rand, // в случайном порядке
'caller_get_posts'=>1); //исключаем одинаковые записи
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
}
echo '';
}
wp_reset_query();
}
?>
</ul>
</div>
<!-- Разделительная линия -->
<div class="devide-line"></div>
<!-- Форма комментариев -->
<?php comments_template(); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div>
</body>
</html>
Если у вас остались какие-то вопросы или вы нашли непонятный момент в описании, пишите в комментариях ниже и я вам обязательно отвечу.
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
