Разработка и создание сайта в системе "WordPress"
МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ
Учреждение образования
«Гомельский государственный университет
имени Франциска Скорины»
Физический факультет
Кафедра теоретической физики
Курсовая работа
Разработка и создание сайта в системе WordPress
Исполнитель
студент группы Ф-36у
Н.В. Сикорский
Научный руководитель
кандидат физ.-мат. наук, доцент
В.В. Андреев
Гомель 2012
Реферат
Курсовая работа 20 страниц, 2 таблицы, 7 источников.
Ключевые слова: система WordPress, подключение локального сервера XAMPP, плагины, виджеты, создание сайта.
Цель работы: разработка сайта в системе WordPress.
Метод исследования: система создания сайтов и WordPress.
Основные конструктивные и технико-эксплуатационные характеристики: персональный компьютер, минимальные требования: ОС: Windows 98/2000/XP;
Полученные результаты: полноценный сайт Город над Сожем, подключенный к локальному серверу.
Область применения: Web-технологии, основы языков PHP и html
Практическая значимость работы: создан информационный сайт, готовый к запуску в интернет.
Содержание
Реферат
Содержание
Обозначения
Введение
О системе «Wordpress»
.1 Функциональные особенности «Wordpress»
.2 История версий
.3 Преимущества «Wordpress»
.4 Возможности «Wordpress»
Дополнения к системе «Wordpress»
.1 Плагины
.2 Виджеты
.2.1 Создание нескольких областей для виджетов
.2.2 Активация областей для виджетов
Создание сайта на «Wordpress»
.1 Установка сервера XAMPP и WordPress
.2 Настройка WordPress
.2.1 Выбор и настройки шаблона
.2.2 Установка плагинов
.2.3 Установка виджетов
.3 Наполнение сайта
.3.1 Создание страниц и меню сайта
Добавление записей и рубрик сайта. Наполнение их информацией
.3.2 Создание формы подписки
Заключение
Список использованных источников
Обозначения
CMS <#"justify">Введение
В ходе работы предстоит изучить работу сервера XAMPP, разобраться в работе системы WordPress, в ее особенностях, возможностях и дополнениях. Также изучить основы языка PHP и html.
На основе системы разработать и создать сайт, готовый к запуску в интернет. Целью сайта должен являться рассказ о городе и информация о последних новостях. Вместе с этим, сайт должен быть ярким и запоминающимся. Темой сайта станет Город над Сожем. Чтобы сайт мог открыть более полную картину о городе Гомеле перед подписчиками, будут созданы раздела и подразделы. С помощью этого разделения пользователям должно быть легче и быстрее найти интересующую их информацию. Сайт должен быть удобным в применении и имнть многофункциональную структуру.
1. О системе «Wordpress»
WordPress -система управления содержимым сайта (CMS <#"justify">1.2 История версий
Номера версий, кодовые имена, даты релиза и примечания к каждой из версий приведены ниже «таблица 1».
Таблица 1
ВерсияКодовое имяДата релизаПримечания0.7027 мая 2003Первый релиз.1.2Mingus <#"justify">.3 Преимущества «Wordpress»
При выборе для создания сайта системы «Wordpress», мы можем сразу заметить следующие ее преимущества:
Простота в установке и настройке;
Наличие удобного, настраиваемого административного интерфейса;
Легкость при непосредственном создании сайта;
В дальнейшем, простое управление сайтом и его редактирование;
Наличие простого и удобного консоля;
Поддержка «тем», позволяющих легко менять как внешний вид, так и способы вывода данных;
Наличие громадных библиотек «тем» и «плагинов»;
Наличие системы контроля безопасности сайта;
Наличие системы автосохранения набираемого в редакторе текста, для предотвращения потери информации из-за программного или аппаратного сбоя;
Наличие инструмента автоматического обновления до белее свежей версии;
1.4 Возможности «Wordpress»
«Wordpress» - это полностью бесплатная, свободно распространяемая система программ, написанных на скриптовом языке РНР. В ней применяются и CSS-стили, позволяющие мгновенно менять внешний вид сайта, доступно множество готовых тем - наборов стилей для оформления текста и страницы в целом, плюс необходимые графические элементы дизайна, наборы скриптов и специальных дополнений - виджетов, помогающих создать на сайте меню, удобную систему рубрик, архивы записей, поиск по сайту и прочие дополнительные удобства. Темы весьма разнообразные, выглядят солидно и профессионально. Каждая тема состоит из нескольких файлов-шаблонов, которые разрешается редактировать для изменения оформления сайта или создания своих собственных тем. Кроме стандартного набора возможностей, прописанных в той или иной теме, WordPress позволяет усложнять оформление и функциональные возможности за счет тех или иных дополнений - плагинов «...подробнее в разделе 2.1 ». Плагины пишутся уже не столько разработчиками «Wordpress», сколько сторонними программистами.
Итак, система «Wordpress» имеет следующий ряд возможностей:
Шаблонный дизайн графического оформления страниц создает гибкость, простоту редактирования и дает возможность установить стандарт выполнения любых шаблонов для данной системы управления;
Создание чистого HTML-кода при помощи графического редактора текста;
Возможность подключать плагины, с уникально простой системой их взаимодействия с основным кодом;
Возможность в реальном времени осуществлять мониторинг уязвимостей и изменений в потенциально-опасных файлах;
Возможность встроенными средствами защитить определенные папки веб-сервера, от посещения пользователями, путем полного запрета доступа конкретным подсетям или установки режима авторизации;
Возможность ограничения доступа к интерфейсу администратора по спискам разрешенных IP-адресов;
Возможность редактирования непосредственно самого PHP кода;
Встроенный редактор ЧПУ, делающий ссылки на записи сайта более привлекательными для роботов поисковых систем;
Возможность создания современного динамического многофункционального сайта с ярким внешним видом на совершенно любую тематику;
2. Дополнения к системе «Wordpress»
Система «Wordpress» имеет ряд встроенных дополнений:
более 1000 страниц документации, с полным описанием всех функций и переменных исходного когда проекта, на английском языке;
более 4000 бесплатных компонентов, добавляющих дополнительный функционал;
более 1000 бесплатных графических шаблонов, распространяемых бесплатно на сайте проекта;
.1 Плагины
Плаги?н - независимо компилируемый программный модуль <#"justify">2.2 Виджеты
Виджеты в WordPress играют роль модулей. С помощью виджетов можно вывести информацию на сайт. Например: страницы, категории (рубрики), облако тегов, архив записей и т.д. Устанавливаются они вместе с плагинами.
Виджеты - это блоки, которые можно размещать в колонках сайта. Встроенные в WordPress виджеты позволяют добавить следующую информацию в колонках блога:
- список категорий;
- список страниц;
- архивы;
- ссылки;
- последние сообщения;
- последние комментарии;
- календарь;
- RSS потоки;
И самое полезное: текстовые блоки. В текстовом виджете можно разместить html-код, JavaScript или простой текст. Этот виджет можно использовать для размещения кода различных счетчиков, рекламных блоков и тому подобного. Количество текстовых виджетов можно варьировать от 1 до 9.
Темы, которые имеют большой выбор мест для размещения различных виджетов, нравятся пользователям и удобны для настройки. Первый шаг на пути к использованию виджетов на создаваемом сайте под управлением WordPress - сделать тему сайта доступной для применения виджетов. Задача достаточно просто решается, если поместить правильный код в правильное место.
.2.1 Создание нескольких областей для виджетов
Чтобы получить несколько областей для использования виджетов нужно зарегистрировать их в файле functions.php выбранной темы WordPress. Допустим, у нас используется трехколоночная тема, и мы хотим получить две разных боковых панели справа и слева:
<?php register_sidebar( array(
'name' => 'left-sidebar', 'id' => 'left-sidebar',
'before_widget' => '<div id="%1$s">
'before_title' => '<h3>
) ); register_sidebar( array(
'name' => 'right-sidebar', 'id' => 'right-sidebar',
'before_widget' => '<div id="%1$s">
'before_title' => '<h3>));
2.2.2 Активация областей для виджетов
После создания нескольких областей нужно поместить код динамической боковой панели в нужный файл. В зависимости от структуры темы, код может быть расположен в файле sidebar.php или другом. Вот пример кода для использования:
<?php if (!dynamic_sidebar("left-sidebar") ) : ?>;Код для левой боковой панели по умолчанию располагается здесь...
<?php endif; ?>; <?php if (!dynamic_sidebar("right-sidebar") ) : ?>;Код для правой боковой панели по умолчанию располагается здесь...
<?php endif; ?>
Код между тегами PHP будет выводиться, если не используется никаких виджетов в соответствующей области. Например, если никаких виджетов не подключено к левой боковой панели, то будет выведено "Код для левой боковой панели по умолчанию располагается здесь...".[3]
3. Создание сайта на «Wordpress»
Разобравшись более подробно в преимуществах и возможностях системы WordPress, я перешел непосредственно к созданию сайта. Определиться с темой сайта было не так сложно. Ей стал родной город над Сожем - Гомель. Целью сайта должен был являться рассказ о городе и информация о последних новостях. Вместе с этим была поставлена цель сделать сайт ярким и запоминающимся.
Реализация поставленных целей заняла несколько этапов:
а) Установка сервера XAMPP;
б) Установка WordPress;
в) Настройка WordPress;
1) выбор и настройки шаблона;
2) установка плагинов;
3) установка виджетов;
г) Наполнение сайта;
1) создание страниц и меню сайта;
2) создание формы подписки;
3) добавление записей и рубрик сайта;
4) добавление информации на сайт;
Далее более подробно о каждом из этапов работы.
.1 Установка сервера XAMPP и WordPress
- кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб - сервер. работает со всеми 32-х разрядными ОС Microsoft , а также с Linux, Mac OS X и Solaris. Программа является бесплатным, удобным в работе web-сервером, способным обслуживать динамические страницы.
Веб-сервер - это сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, обычно вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными.
После скачивания XAMPP c официального сайта [4], производится обычная процедура установки. Такая же как и установка любой из программ. Выполнив установку, сервер требуется запустить.
Открывшееся окно, означает, что сервер заработал. После окончания работы сервер требуется останавливать.
Далее в браузере следует перейти по адресу, по которому будет открываться локальный сайт. Там настраивается безопасность сервера: пароли MySQL и пароль на директорию XAMPP. Настройка сервера полностью завершена.[5]
Следующий шаг - настройка непосредственно самого WordPress. В phpMyAdmin, создаем новую базу данных под именем: "wordpress" в кодировке utf8_general_ci. Далее открываем файл "wp-config-sample.php" в любом текстовом редакторе и редактируем его изменяя имя БД, имя пользователя и пароль. Затем в браузере набирается адрес вида: localhost/blog. Открывается страничка с установкой WordPress. Здесь записывается заголовок блога и email-адрес. Жмем на "Установить WordPress". После процедуры, которая займет несколько минут можно считать "WordPress" и локальный сервер XAMPP установленными.
3.2 Настройка WordPress
3.2.1 Выбор и настройки шаблона
При настройке WordPress в первую очередь выбирается шаблон будущего сайта. Так что же такое шаблон?
Страницы WordPress сайта собираются подобно пазлу из файлов-шаблонов. Некоторые шаблоны (например header.php и footer.php) задействованы на всех страницах, другие используются только при определенных условиях.
WordPress использует cтроку запроса <#"justify">3.3 Наполнение сайта
.3.1 Создание страниц и меню сайта. Добавление записей и рубрик сайта. Наполнение их информацией.
Создание страниц является одной из самых важных и неотъемлемых частей работы по созданию сайта. В WordPress создана отдельная вкладка консоля для создания страниц. В этой вкладке выбирается название создаваемой страницы, ее параметры и содержание. Редактировать страницу и ее содержимое можно в окне обычного текстового редактора, встроенного в систему, или в окне редактирования html-кода. Это позволяет людям, которые не особо хорошо разбираются в html создавать простенькие страницы, а остальным - увеличить их функциональность и возможности при редактировании кода вручную.
Можно создать материнскую страницу, в которую будут помещены подстраницы, либо воспользоваться функцией Меню и разместить на главной странице каталоги, в которых будут размещены все остальные.
Используя функцию Меню и публикации страниц, на сайте Город над сожем были созданы каталоги.
Страницы были заполнены всевозможной информацией и файлами. Были добавлены фото, аудио- и видеофайлы.
Наименования пунктов меню, созданных, страниц и краткая информация о них расположена ниже в «таблице 2».
Таблица 2
Название менюНаименования страницКраткая информация Главная ---На главной странице выводятся последние новости, функция поиска, форма подписки, а также все рубрики. О городеИстория городаКраткая информация об основании и истории города Достоприм-тиИнформация о достопримечательностях и некоторая интересная информация о нихСпортивная жизньИнформация о спортивных сооружениях, функционировании спорт. секций и профессиональных командКультура городаНаименованя Домов Культуры, театров, музеев. Информация о ежегодных фестивалях и концертах, проводимых в городеГалерея---Фотографии красивых мест и сооружений города МультимедиаАудиоЗагруженные аудиозаписиВидеоДобавлено видеоклипы с YouTube о ГомелеКонтактыЛичные e-mail контакты разработчика
После создания страниц и меню сайта необходимо было прибегнуть к использованию виджетов. С их помощью были установлены блоки Свежие новости, в котором показываются последние новости, загруженные на сайт, и Категории. В этом блоке были созданы следующие рубрики: Все новости, Культурно-массовые мероприятия и Спортивные новости. При дальнейшей загрузке новостей на сайт, стало возможным выбирать в каких рубриках отражать ту или иную новость. Это дает возможность подписчикам быстро и удобно находить, интересующую их информацию.
.3.2 Создание формы подписки
Для создания формы подписки потребовалось добавить виджет Текст и вставить туда html-код. Код можно сгенерировать на сайте [7]. Там создается собственный аккаунт, а затем выбираются параметры формы подписки: цвета, шрифты, размеры. Программа генерирует html-код:
<!-- SmartResponder.ru subscribe form code (begin) --><script language="javascript" type="text/javascript">SR_IsListSelected(el)
{(var i = 0; i < el.length; i ++)(el[i].selected ||[i].checked)i;-1;
}SR_trim(f)
{f.toString().replace(/^[ ]+/, '').replace(/[ ]+$/, '');
}SR_submit(f)
{["field_email"].value = SR_trim(f["field_email"].value);["field_name_first"].value = SR_trim(f["field_name_first"].value);((SR_focus = f["field_email"]) && f["field_email"].value.replace(/^[ ]+/, '').replace(/[ ]+$/, '').length < 1 || (SR_focus = f["field_name_first"]) && f["field_name_first"].value.replace(/^[ ]+/, '').replace(/[ ]+$/, '').length < 1) { alert("Укажите значения всех обязательных для заполнения полей (помечены звездочкой)"); SR_focus.focus(); return false; }(!f["field_email"].value.match(/^[\+A-Za-z0-9][\+A-Za-z0-9\._-]*[\+A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/)) { alert("Некорректный синтаксис email-адреса!"); f["field_email"].focus(); return false; } true;
}
</script>
<form style="margin: 0; padding: 0;" name="SR_form" target="_blank" action="#"justify"><table width="170">
<tr><td style="padding: 5px; border: 2px solid #ff0000;background-color: #b6f073;" align=center><table cellspacing=1 cellpadding=2 align=center>
<tr><td><input type=hidden name="did[]" value="168948"></td></tr>
<tr><td style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;" align="center">Ваш e-mail: <font color="#ff0000"><b>*</b></font></td></tr>
<tr><td align="center"><input type=text size="20" style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #ffffff; " name="field_email" value=""></td></tr>
<tr><td style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;" align="center">Ваше имя: <font color="#ff0000"><b>*</b></font></td></tr>
<tr><td align="center"><input type=text size="20" style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #ffffff; " name="field_name_first" value=""></td></tr>
<tr><td align="center"><input name="SR_submitButton" type=submit style="font-family: Arial; font-size: 12pt; color: #000000; background-color: #a1a187; font-weight: bold;" value="Подписаться"></td></tr>
</table><table cellspacing=1 cellpadding=1 align=center style="margin: 5 0 5 0"><tr valign=middle><td><span style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;">Подписчиков:</span></td><td><img alt="" title="" style="vertical-align: middle; margin: 0; padding: 0" src="http://smartresponder.ru/dcounter/153800_0_168948_1_verdana_16_ff0000_0eeeeee/counter.gif?1338032763678"></td></tr></table></td></tr></table></form><!-- SmartResponder.ru subscribe form code (end) -->
Далее, полученный код, вставляется в текст виджета и форма готова к работе. Посетитель сайта, введя свой E-mail адрес в эту форму, будет получать в свой почтовый ящик новые публикации, которые будут публиковаться на сайте.
Заключение
wordpress сайт виджет шаблон
В ходе выполнения курсовой работы была подробно изучена система WordPress и ее дополнения. Изучена работа сервера XAMPP и базы данных MySql. Задачи были выполнены в полном объеме. Были затронуты основы PHP- и html-языков.
Основным этапом в изучении системы WordPress, стало создание на ее основе полноценного интернет-сайта. Задачи по его выполнению также были полностью выполнены. Создан сайт, отвечающий всем современным нормам. Он сочетает в себе удобство, функциональность и яркий, запоминающийся внешний вид. На сайте есть возможность делиться информацией в соц.сетях, оставлять комментарии под статьями и имеется рабочая форма подписки. Созданы страницы меню и подробной информацией о городе и его жизни. Сайт содержит страницы с фотографиями, видео- и аудиозаписями, соответствующими выбранной тематике. Сайтом можно легко управлять и в дальнейшем, что делает его удобным для администрации.
Созданный сайт готов к запуску в интернет.
Список использованных источников
1. О системе «Wordpress» [Электронный ресурс] - Режим доступа: <http://www.designaero.ru/wordpress.html> - Дата доступа: 14.05.2012.
. История версий. WordPress [Электронный ресурс] - Режим доступа: <http://ru.wikipedia.org/wiki/WordPress> - Дата доступа: 17.05.2012.
. Работа с виджетами [Электронный ресурс] - Режим доступа: <http://ruseller.com/lessons.php?rub=40&id=1266> - Дата доступа: 23.05.2012.
. Сайт Xampp [Электронный ресурс] - Режим доступа: <http://www.apachefriends.org/en/xampp-windows.html>. - Дата доступа: 18.04.2012.
. Харрис Э. PHP/MySQL для начинающих. - С. Пб.:Издательство «КУДИЦ-Образ», 2005. -384 с.
. Wordpress. Темы [Электронный ресурс] - Режим доступа: <http://codex.wordpress.org/> - Дата доступа: 22.04.2012.
. Генерация кода формы подписки [Электронный ресурс] - Режим доступа: - Дата <http://smartresponder.ru> доступа: 29.04.2012.
Больше работ по теме:
Предмет: Информационное обеспечение, программирование
Тип работы: Курсовая работа (т)
Новости образования
КОНТАКТНЫЙ EMAIL: [email protected]
Скачать реферат © 2017 | Пользовательское соглашение
ПРОФЕССИОНАЛЬНАЯ ПОМОЩЬ СТУДЕНТАМ