Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #6. Вёрстка категории. Создание темы WordPress.
Категория или рубрика (допустимы оба названия) очень схожа с главной страницей, если конечно вывод записей не отличается по дизайну. В нашем случае дизайн записей идентичен, и это нам на руку. Давайте не буду затягивать вступление и приступим к созданию категории для темы WordPress.
Подготовка к вёрстке
0. Создаём копию файла index.html и переименовываем его в category.html.
HTML каркас
Копию файла успешно сделали, давайте откроем файл category.html и произведём небольшую модификацию.
Сразу после того, как открывается блок div с классом content добавляем новый блок div с классом description-category. Чтобы получилось следующее:
<!-- Область для вывода контента --> <div class="content"> <!-- Описание категории --> <div class="description-category"> </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>
Добавим в блок description-category несколько строк, которые будут выводить название категории и краткое описание.
<!-- Область для вывода контента --> <div class="content"> <!-- Описание категории --> <div class="description-category"> <h1>Тестовая категория</h1> <p>Сегодня существует несколько вариантов lorem ipsum. Текста исключительно демонстрационная, то и зла средневековый книгопечатник.</p> <p>Иные буквы встречаются с использованием lorem ipsum. Широко используемый и на основе оригинального трактата, благодаря чему появляется возможность.</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>
Готовый каркас страницы category.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="description-category"> <h1>Тестовая категория</h1> <p>Сегодня существует несколько вариантов lorem ipsum. Текста исключительно демонстрационная, то и зла средневековый книгопечатник.</p> <p>Иные буквы встречаются с использованием lorem ipsum. Широко используемый и на основе оригинального трактата, благодаря чему появляется возможность.</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 стили
Нам необходимо написать стили только для блока description-category, и его дочерних элементов. Давайте этим и займёмся.
Добавьте код который находится ниже в файл style.css.
/*Описание категории*/
.description-category {
width: 670px;
height: auto;
margin: 0 0 50px 0;
overflow: hidden;
}
.description-category h1 {/*Заголовок категории*/
font-weight: bold;
font-size: 16px;
color: #333;
line-height: 1;
margin: 0 0 20px 0;
}
.description-category p {/*описание категории*/
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0 0 10px 0;
}
.description-category p:last-child {
margin: 0 0 0 0;
}
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
