Рисунок 23. Инсталлятор WordPress
Установка WordPress закончена. Нажимаем на кнопку «Войти», которое откроет форму авторизации (см. рисунок 24).
Рисунок 24. Форма авторизации
Здесь вводим логин и пароль, которые мы сами выбрали и опять нажимаем на кнопку «Войти». В результате мы окажемся в админ панели WordPress, где необходимо настроить внешний вид. В верхней правой части экрана нажимаем на вкладку «Настройки экрана», в которой и происходит правка всех разделов.
2.2.2 Настройка WordPress
Переходим в админ панель WordPress в меню настроек под названием «Параметры (см. рисунок 25).
Рисунок 25. Меню настроек под названием «Параметры»
Переходим во вкладку «Общие» и делаем необходимые здесь настройки (см. рисунок 26).
Рисунок 26. Вкладка «Общие»
1 Вписываем название нашего сайта;
2 Вписываем краткое описание ресурса;
3 Пропишисываем URL - адрес сайта. Обычно используют одинаковые адреса;
4 Указываем e-mail адрес. На него будут приходить любые уведомления;
5 Данный пункт будет актуален для форумов. Если ваш ресурс из разряда блога или сайта, лучше галочку не ставить;
6 Выбираем роль нового пользователя;
7 Указываем часовой пояс;
8 Выбираем формат отображения даты;
9 Выбираем формат времени;
10 Указываем первый день недели;
11 После установки всех необходимых настроек обязательно нажимаем кнопку «Сохранить изменения». В противном случае придется все повторить.
Переходим во вкладку «Написание» и меняем последний пункт «Сервисы обновления» (см. рисунок 27).
Рисунок 27. Вкладка «Сервисы обновления»
Переходим к настройкам полей вкладки «Чтение» (см. рисунок 28).
Рисунок 28. Вкладка «Чтение»
1 Оставляем стандартную настройку отображения записей, галочка в поле «Ваши последние записи»;
2 Выбираем то количество страниц, которое нам хотелось бы видеть на главной странице;
3 Выбираем, сколько страниц будет отображаться в RSS - ленте;
4 Указываем, как должны отображаться транслируемые в RSS - ленте посты - полностью;
5 Кодировка страниц и лент установлена UTF-8;
6 Сохраняем изменения.
Во вкладках «Обсуждение» и «Медиафайлы» ничего не изменяем.
Установка и настройка WordPress завершены [3].
2.3 Установка шаблона
Twenty Thirteen для WordPress заново открывает для нас ведение блога, предоставляя полный набор форматов записей, каждый из которых отображается в своём неповторимом стиле. Дизайн изобилует тщательно подобранными элементами, начиная с яркой цветовой схемы и соответствующих изображений заголовка, красивой типографики и иконок, а также гибкой разметки, которая превосходно выглядит на любых устройствах, больших и маленьких.
Заходим в раздел «Внешний вид» - «Темы» (см. рисунок 29).
Рисунок 29. Раздел «Внешний вид»
Сверху нажимаем на кнопку «Добавить новую» (см. рисунок 30).
Рисунок 30. Раздел «Темы»
Ищем тему через WordPress. Наводим на Twenty Thirteen и нажимаем «Установить» (см. рисунок 31).
Рисунок 31. Установка темы
На этом установка шаблона на WordPress завершена [1].
2.4 Установка плагинов
Плагин - это модуль к программе, который создается отдельно и в случае необходимости может быть подключен к уже работающему приложению. Основная задача плагина - расширение функциональности основной программы.
Для их работы обязательно, чтобы в основной программе была предусмотрена возможность подключения дополнительных модулей (плагинов). Таким образом, плагин является полностью зависимым от основной программы и не может использоваться отдельно от неё.
В боковом меню выбираем вкладку -- «Плагины» и нажимаем на ссылку -- «Добавить новый» (см. рисунок 32).
Рисунок 32. Вкладка «Плагины»
На странице добавления плагина нажимаем «Загрузить» затем «Выберите файл» (см. рисунок 33).
Рисунок 33. Страница добавления плагина
После того как мы выбрали файл скачанного плагина, нажимаем на кнопку установки и ждем до тех пор, пока плагин не установится (см. рисунок 34).
Рисунок 34. Установка плагина
Затем активируем установленный плагин (см. рисунок 35).
Рисунок 35. Активизация плагина
Установка плагинов на WordPress завершена [1].
Установленные плагины:
1 bbPress - форум от разработчиков WordPress.
2 Gallery Carousel Without JetPack - галерея.
3 Social Share Buttons - кнопки «Поделиться в социальных сетей.
4 Contact Form to Email - контактная форма, которая отправляет данные по электронной почте.
5 WPFront Scroll Top - позволяет посетителю легко вернуться к верхней части страницы.
6 Another WordPress Classifieds Plugin (AWPCP) - плагин, который дает возможность запустить бесплатные или платные объявления на сайт.
7 Meta Keywords Generator - автоматический генератор ключевых слов для WordPress.
8 WP DS Blog Map - карта сайта WordPress.
Заключение
В ходе выполнения работы был получен многофункциональный web-сайт, готовый к применению. Данный сайт ориентирован на любителей собак. С его помощью пользователи смогут получать необходимую информацию, общаться на интересующую тему, оставлять свои сообщения или материалы.
При разработке сайта были использованы готовые плагины галереи, социальных сетей, доски объявлений, форума и карты сайта, а также широко настраиваемая тема WordPress, которая была настроена с учетом специфики web-сайта. Так же был доработан графический интерфейс с целью повышения привлекательности и удобства.
Список используемых источников
1.WordPress [электронный ресурс]. - режим доступа: http://ru.WordPress.org.
2.denwer [электронный ресурс]. - режим доступа: http://www.denwer.ru.
3.макейчик е. г., электронный учебно-методический комплекс по дисциплине «web-технологии в инфокоммуникациях» / е. г. макейчик. - минск : бгуир, 2013.
Приложение А
Index.php
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme and one of the
* two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* @link https://codex.WordPress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if ( have_posts() ) : ?>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
информационный приложение редактирование
Приложение Б
Style.css
/**
* 4.0 Header
* ----------------------------------------------------------------------------
*/
/**
* 4.1 Site Header
* ----------------------------------------------------------------------------
*/
.site-header {
position: relative;
}
.site-header .home-link {
color: #141412;
display: block;
margin: 0 auto;
max-width: 1080px;
min-height: 230px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}
.site-header .site-title:hover {
text-decoration: underline;
}
.site-title {
font-size: 60px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 10px;
}
.site-description {
font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;
margin: 0;
}
/**
* 4.2 Navigation
* ----------------------------------------------------------------------------
*/
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
}
ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li a {
color: #edc49a;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color: #45161c;421e25
color: #fff;
}
.nav-menu .sub-menu,
.nav-menu .children {
background-color: #320a18;ffbb8a
border: 2px solid #f7f5e7;220e10
border-top: 0;
padding: 0;
position: absolute;
left: -2px;
z-index: 99999;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
color: #fff;
margin: 0;
width: 200px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
background-color: #45161c;
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
color: #ffbb8a;
font-weight: bold;
font-style: italic;
}
.menu-toggle {
display: none;
}
/* Navbar */
.navbar {
background-color: #1f0e11;
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
.site-header .search-form {
position: absolute;
right: -120px;
top: -5px;
}
.site-header .search-field {
background-color: #fdd5b1;
border: 1px solid #220e10;
background-image: url(images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
cursor: pointer;
height: 48px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 1px;
}
.site-header .search-field:focus {
background-color: #fff;
border: 2px solid #220e10;
cursor: text;
outline: 0;
width: 230px;
}
}
.imagetip span{
border-radius: 5px 5px 5px 5px;
visibility: hidden;
position: absolute;
left: 190px;
background: #fff;
box-shadow: -2px 2px 10px -1px #333;
border-radius: 5px;
width: 20%;
z-index: 9999;
}
.imagetip:hover span{
visibility: visible;
}