Погружение в базы данных PostgreSQL
Данный курс является консолидацией теоретических основ и практических примеров, которые демонстрируют работу операторов и функций SQL в системе управления базами данных PostgreSQL.
Промокод на скидку: SALE_202411
Регулярные выражения в Python
В этом курсе вы освоите синтаксис регулярных выражений, научитесь создавать сложные шаблоны для поиска и обработки текста, а также изучите мощные функции модуля re в Python.
Модуль psycopg2 в Python
Модуль psycopg2 позволяет взаимодействовать с базами данных PostgreSQL в скриптах Python.
Модуль SQLite3 в Python
Встроенный модуль SQLite3 позволяет работать с базами данных SQLite в ваших приложениях, которые написаны на языке программирования Python.
Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #12. Интеграция вёрстки. Страница категории. Создание темы WordPress.
Категория (рубрика) в WordPress является очень важным элементом, так как именно категория позволяет структурировать материалы и упростить навигацию по сайту. Сейчас мы с вами и займёмся созданием этого важного элемента.
Подготовка к интеграции
0. Переименовываем файл category.html в category.php.
Разбиение на блоки: header, sidebar и footer
Выделяем весь код сверху до закрытия блока 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 с классом description-category.
Вместо названия категории вставляем функцию, которая будет автоматически выводить название категории.
#было <h1>Тестовая категория</h1> #стало <h1><?php single_cat_title(); ?></h1>
Затем у нас по плану идёт описание категории. Удаляем два абзаца с текстом, а на их место вставляем специальную функцию, которая будет выводить описание категории.
#было <p>Сегодня существует несколько вариантов lorem ipsum. Текста исключительно демонстрационная, то и зла средневековый книгопечатник.</p> <p>Иные буквы встречаются с использованием lorem ipsum. Широко используемый и на основе оригинального трактата, благодаря чему появляется возможность.</p> #стало <?php echo category_description(); ?>
Вывод записей
Перед блоком div с классом box-post вставляем обязательную конструкцию, которая запускает цикл по выводу записей.
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>
А после закрытия блока вставляем конструкцию, которая завершает цикл.
<?php endwhile; ?> <?php endif; ?>
Сейчас нам необходимо очистить блок div с классом thumbnail-post, но сам блок не удаляем. После того, как очистили блок вставляем функцию, которая будет выводить миниатюры записей.
#было <!-- Миниатюра записи--> <div class="thumbnail-post"> <img src="//artemsannikov.ru/wp-content/uploads/2017/07/install-xampp-windows-130x130.jpg" width="130" height="130"> </div> #стало <!-- Миниатюра записи--> <div class="thumbnail-post"> <?php the_post_thumbnail(); ?> </div>
С миниатюрами мы закончили.
Перемещаемся в блок div с классом description-post. Вместо заголовка записи вставляем функцию, которая будет выводить его автоматически.
#было <h2><a href="">Установка локального web-сервера Xampp</a></h2> #стало <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
Переходим к следующей строке, которая выводит информацию (категория, дата публикации и количество просмотров). Вставляем три функции, вместо статического текста.
Важный момент: если вы хотите, чтобы у вас отображалось количество просмотров записи/страницы, то вам необходимо установить плагин — WP-PostViews.
#было
<p class="info-post">Категория: Xampp / Опубликовано: 2017-07-24 / Просмотров: 30</p>
#стало
<p class="info-post">Категория: <?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>
Идём дальше, следующий абзац является — цитатой, то есть кратким описание статьи. Мы должны его удалить и вместо него вставить специальную функцию.
#было <p>Xampp — кроссплатформенный web-сервер поддерживающий множество готовых библиотек, которые позволяют развернуть полноценный web-сервер на вашем компьютере.</p> #стало <?php the_excerpt(); ?>
Ну и последний элемент, который необходимо подправить в блоке description-post — ссылка «Читать далее». В область href необходимо вставить функцию, для автоматической подставноки url адреса.
#было <a href="" class="readmore">Читать далее..</a> #стало <a href="<?php the_permalink(); ?>" class="readmore">Читать далее..</a>
Постраничная навигация
Выделяем блок div с идентификатором page-navi, и удаляем его. Ниже предоставлен код, который нужно удалить.
<!-- Постраничная навигация--> <div id="page-navi"> <span class="page-numbers current">1</span> <a class="page-numbers" href="">2</a> <a class="page-numbers" href="">3</a> <a class="page-numbers" href="">4</a> <a class="page-numbers" href="">5</a> <a class="page-numbers" href="">6</a> <a class="page-numbers" href="">7</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="">42</a> <a class="next page-numbers" href="">»</a> </div>
Вместо удалённого кода вставляем конструкцию, которая будет автоматически формировать постраничную навигацию.
<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>
Интеграция завершена
Мы успешно выполнили интеграцию нашей вёрстки для страницы category.php.
Окончательный вариант страницы предоставлен ниже.
<?php get_header(); ?>
<!-- Область для вывода контента -->
<div class="content">
<!-- Описание категории -->
<div class="description-category">
<h1><?php single_cat_title(); ?></h1>
<?php echo category_description(); ?>
</div>
<!-- Вид записи -->
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="box-post">
<!-- Миниатюра записи-->
<div class="thumbnail-post">
<?php the_post_thumbnail(); ?>
</div>
<!-- Описание записи-->
<div class="description-post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="info-post">Категория: <?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>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="readmore">Читать далее..</a>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div>
</body>
</html>
Если у вас остались какие-то вопросы или вы нашли непонятный момент в описании, пишите в комментариях ниже и я вам обязательно отвечу.
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
