Разработка и создание сайта в системе "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:&nbsp;<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">Ваше имя:&nbsp;<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 | Пользовательское соглашение

Скачать      Реферат

ПРОФЕССИОНАЛЬНАЯ ПОМОЩЬ СТУДЕНТАМ