Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #8. Вёрстка страницы поиска. Создание темы WordPress.
Поиск — это немаловажный элемент на любом сайте, благодаря поиску пользователь сможет найти интересующую его информацию за считанные секунды. Сейчас мы будем создавать страницу поиска для нашей темы, которая будет адаптироваться длясистемы управления содержимым сайта WordPress.
Подготовка к вёрстке
0. Создаём копию файла index.html и переименовываем её в search.html.
HTML каркас
Открываем файл search.html для внесения изменений.
После открытия блока div с классом content вставляем новый div с классом search-result.
<!-- Область для вывода контента --> <div class="content"> <!-- Результаты поиска --> <div class="search-result"> </div>
В блок search-result вставляем две строки, которые будут выводить название страницы и результаты поиска.
<div class="content"> <!-- Результаты поиска --> <div class="search-result"> <h1>Результаты поиска</h1> <p>Вы искали "<strong>wordpress</strong>", результатов найдено: "<strong>28</strong>".</p> </div>
Готовый каркас страницы search.html.
<!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> <!-- Область для вывода контента --> <div class="content"> <!-- Результаты поиска --> <div class="search-result"> <h1>Результаты поиска</h1> <p>Вы искали "<strong>wordpress</strong>", результатов найдено: "<strong>28</strong>".</p> </div> <!-- Вид записи --> <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> <!-- Боковая колонка --> <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> <!-- Подвал--> <div class="footer"> <p>Использование и копирование материалов сайта без согласия автора категорически запрещено.</p> <p>Артём Санников © 2014 - 2017</p> </div> </div> </body> </html>
CSS стили
Ниже предоставлен css код для оформления блока search-result и его дочерних элементов.
Вставьте код в файл style.css.
/*Результаты поиска*/
.search-result {
width: 670px;
height: auto;
margin: 0 0 50px 0;
overflow: hidden;
}
.search-result h1 {/*Заголовок страницы поиска*/
font-weight: bold;
font-size: 16px;
color: #333;
line-height: 1;
margin: 0 0 20px 0;
}
.search-result p {/*текст с результатам поиска*/
font-size: 14px;
color: #666;
line-height: 1.5;
}
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
