Погружение в базы данных 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-запросов.
Урок #14. Интеграция вёрстки. Страница поиска. Создание темы WordPress.
Приступаем к интеграции вёрстки страницы поиска — search.html. Несмотря на то, что поиск является не очень популярной функцией у пользователей, он должен присутствовать на вашем сайте. Потому что поиск решает достаточно большой процент всех проблем пользователей.
Подготовка к интеграции
0. Переименовываем файл search.html в search.php.
Разбиение на блоки: header, sidebar и footer
Открываем файл search.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 с классом search-result в котором у нас выводится название страницы и информация о результатах поиска.
Заголовок страницы мы оставляем без изменения, а вот строку с результатами поиска немного модифицируем. Строка с результатами поиска выводит пользователю, что он искал и сколько результатов нашлось по его запросу. Для того, чтобы всё работало в автоматическом режиме напишем несколько простых строк кода.
#было <!-- Результаты поиска --> <div class="search-result"> <h1>Результаты поиска</h1> <p>Вы искали "<strong>wordpress</strong>", результатов найдено: "<strong>28</strong>".</p> </div> #стало <!-- Результаты поиска --> <div class="search-result"> <h1>Результаты поиска</h1> <p>Вы искали "<strong><?php the_search_query();?></strong>", результатов найдено: "<strong><?php global $wp_query; echo $wp_query->found_posts; ?></strong>".</p> </div>
Вывод записей
Перед блоком div с классом box-post вставляем обязательную конструкцию, которая запускает цикл по выводу записей.
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>
Переходим в конец блока box-post и сразу же после его закрытия вставляем конструкцию, которая завершает цикл while.
<?php endwhile; ?>
А теперь перемещаемся в конец блока div с идентификатором page-navi, и точно так же после его закрытия вставляем код, который завершает условие if.
Важный момент: если вам нужно, чтобы система автоматически выводила текст «По вашему запросу ничего не найдено..» на месте для записей, то вам нужно вставить текст между else и endif.
<?php else : ?> <?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(); ?>
Интеграция завершена
Окончательный вариант станицы поиска — search.php, представлен ниже.
<?php get_header(); ?>
<!-- Область для вывода контента -->
<div class="content">
<!-- Результаты поиска -->
<div class="search-result">
<h1>Результаты поиска</h1>
<p>Вы искали "<strong><?php the_search_query();?></strong>", результатов найдено: "<strong><?php global $wp_query; echo $wp_query->found_posts; ?></strong>".</p>
</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 if (function_exists('wp_corenavi')) wp_corenavi(); ?>
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div>
</body>
</html>
Если у вас остались какие-то вопросы или вы нашли непонятный момент в описании, пишите в комментариях ниже и я вам обязательно отвечу.
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
Артём привет!
не в курсе, где в WP зарыта регулировка количества символов из поста, отображаемых в поисковой выдаче site.my?s=word? без использования плагинов )
* стоит: 4.9.8–ru_RU . я в PHP туп, но аккуратно интегрировать смогу
Немного не понял что вам нужно. Можете описать вопрос более детально?
p.s. взял у тебя h1. «Результаты поиска» , работает, спс! )
Да пожалуйста, не жалко.