Погружение в базы данных PostgreSQL
Данный курс является консолидацией теоретических основ и практических примеров, которые демонстрируют работу операторов и функций SQL в системе управления базами данных PostgreSQL.
Промокод на скидку: SALE_202409
Регулярные выражения в Python
В этом курсе вы освоите синтаксис регулярных выражений, научитесь создавать сложные шаблоны для поиска и обработки текста, а также изучите мощные функции модуля re в Python.
Модуль psycopg2 в Python
Модуль psycopg2 позволяет взаимодействовать с базами данных PostgreSQL в скриптах Python.
Модуль SQLite3 в Python
Встроенный модуль SQLite3 позволяет работать с базами данных SQLite в ваших приложениях, которые написаны на языке программирования Python.
Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #10. Интеграция вёрстки. Главная страница. Создание темы WordPress.
С вёрсткой мы закончили в предыдущем уроке и теперь можно переходить на новый уровень — интеграция вёрстки. Интегрировать вёрстку мы начнём с главной страницы — index.html.
Подготовка к интеграции
0. Переименовываем файл index.html в index.php.
1. Создаём пустые файлы с именами: header.php, sidebar.php, footer.php и functions.php.
Важный момент: плотно работать с файлами header.php, sidebar.php и footer.php будем в других уроках.
Разбиение на блоки: header, sidebar и footer
Как я уже говорил ранее страницы WordPress напоминают конструктор, который собирается из нескольких файлов образуя тем самым полноценную страницу. Сейчас мы и займёмся созданием такого конструктора.
Открываем файл index.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. А на месте вырезанного кода прописываем конструкцию, которая будет подключать файл header.php в страницу index.php.
<?php get_header(); ?>
Находим блок div с классом sidebar и выделяем его полностью. У вас должен быть выделен следующий участок кода:
<!-- Боковая колонка --> <div class="sidebar"> <div id="title-widget"> <h6>CMS системы</h6> </div> <div class="widget_nav_menu"> <ul> <li><a href="">Wordpress</a> <ul class="sub-menu"> <li><a href="">Настройки</a></li> <li><a href="">Функции</a></li> <li class="current-menu-item"><a href="">Плагины</a></li> <li><a href="">Хаки</a></li> <li><a href="">Создание темы</a></li> </ul> </li> <li><a href="">Программы</a> <ul class="sub-menu"> <li><a href="">Google Chrome</a></li> <li><a href="">Balsamiq Mockups</a></li> <li><a href="">Sublime Text</a></li> <li><a href="">Adobe Photoshop</a></li> </ul> </li> </ul> </div> <div id="title-widget"> <h6>Текстовый блок</h6> </div> <div class="textwidget"> <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он <a href="">веб-дизайнерами</a> для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. </p> </div> <div id="title-widget"> <h6>Изображение</h6> </div> <div class="textwidget"> <center><img src="//artemsannikov.ru/mc/40collage-instagram/images/box.png" width="200"></center> </div> </div>
Перемещаем выделенный код в файл — sidebar.php, и на месте старого кода прописываем конструкцию для подключения файла sidebar.php в страницу index.php.
<?php get_sidebar(); ?>
Выделяем блок div с классом footer.
<!-- Подвал--> <div class="footer"> <p>Использование и копирование материалов сайта без согласия автора категорически запрещено.</p> <p>Артём Санников © 2014 - 2017</p> </div>
Перемещаем выделенный код в файл — footer.php. На месте старого кода прописываем конструкцию для подключения файла footer.php в страницу index.php.
<?php get_footer(); ?>
Каркас страницы index.php после перемещения участков кода в файлы header.php, sidebar.php и footer.php.
<?php get_header(); ?> <!-- Область для вывода контента --> <div class="content"> <!-- Вид записи --> <div class="box-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="description-post"> <h2><a href="">Установка локального web-сервера Xampp</a></h2> <p class="info-post">Категория: Xampp / Опубликовано: 2017-07-24 / Просмотров: 30</p> <p>Xampp — кроссплатформенный web-сервер поддерживающий множество готовых библиотек, которые позволяют развернуть полноценный web-сервер на вашем компьютере.</p> <a href="" class="readmore">Читать далее..</a> </div> </div> <!-- Постраничная навигация--> <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> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> </div> </body> </html>
Вывод записей
Перед блоком 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>
Функцию для вывода миниатюр мы вставили, но чтобы она работала нам необходимо включить поддержку миниатюр и установить их размер в файле functions.php.
Открываем functions.php и сразу же после открывающего тега <?php, вставляем следующий код.
/**
* Поддержка миниатюр
**/
add_theme_support('post-thumbnails'); //добавляем поддержку миниатюр
set_post_thumbnail_size(130, 130, true); //устанавливаем размер миниатюр, в нашем случае 130х130
С миниатюрами мы закончили.
Перемещаемся в блок 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>
Каркас страницы index.php после внесения изменений в блок box-post.
<?php get_header(); ?>
<!-- Область для вывода контента -->
<div class="content">
<!-- Вид записи -->
<?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; ?>
<!-- Постраничная навигация-->
<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>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div>
</body>
</html>
Постраничная навигация
Выделяем 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(); ?>
После того, как мы написали конструкцию для вывода постраничной навигации нам необходимо создать эту функцию в файле functions.php.
Открываем functions.php и перед закрывающим тегом ?> вставляем следующий код.
/**
* Постраничная навигация
**/
function wp_corenavi() {
global $wp_query;
$pages = '';
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
$a['total'] = $max;
$a['current'] = $current;
$total = 0; //1 - выводить текст "Страница N из N", 0 - не выводить
$a['mid_size'] = 5; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = '«'; //текст ссылки "Предыдущая страница"
$a['next_text'] = '»'; //текст ссылки "Следующая страница"
if ($max > 1) echo '<div id="page-navi">';
if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</div>';
}
Интеграция завершена
Вот и всё, мы закончили интеграцию вёрстки главной страницы для WordPress.
<?php get_header(); ?>
<!-- Область для вывода контента -->
<div class="content">
<!-- Вид записи -->
<?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, Создание темы.
Добрый день. Не сосем понятно как должен выглядеть фаЙл functions.php. Можно пожалуйста его конечный код?
Финальный файл functions.php можете посмотреть в следующих уроках.