Разработка и создание сайта в системе «WordPress»

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ Учреждение образования

«Гомельский государственный университет имени Франциска Скорины»

Физический факультет Кафедра теоретической физики Курсовая работа Разработка и создание сайта в системе «WordPress»

Исполнитель студент группы Ф-36у Н. В. Сикорский Научный руководитель кандидат физ.-мат. наук, доцент В. В. Андреев Гомель 2012

Реферат Курсовая работа 20 страниц, 2 таблицы, 7 источников.

Ключевые слова: система WordPress, подключение локального сервера XAMPP, плагины, виджеты, создание сайта.

Цель работы: разработка сайта в системе «WordPress».

Метод исследования: система создания сайтов и «WordPress».

Основные конструктивные и технико-эксплуатационные характеристики: персональный компьютер, минимальные требования: ОС: Windows 98/2000/XP;

Полученные результаты: полноценный сайт «Город над Сожем», подключенный к локальному серверу.

Область применения: Web-технологии, основы языков PHP и html

Практическая значимость работы: создан информационный сайт, готовый к запуску в интернет.

Содержание Реферат Содержание Обозначения Введение

1 О системе «Wordpress»

1.1 Функциональные особенности «Wordpress»

1.2 История версий

1.3 Преимущества «Wordpress»

1.4 Возможности «Wordpress»

2 Дополнения к системе «Wordpress»

2.1 Плагины

2.2 Виджеты

2.2.1 Создание нескольких областей для виджетов

2.2.2 Активация областей для виджетов

3 Создание сайта на «Wordpress»

3.1 Установка сервера XAMPP и «WordPress»

3.2 Настройка «WordPress»

3.2.1 Выбор и настройки шаблона

3.2.2 Установка плагинов

3.2.3 Установка виджетов

3.3 Наполнение сайта

3.3.1 Создание страниц и меню сайта

Добавление записей и рубрик сайта. Наполнение их информацией

3.3.2 Создание формы подписки Заключение Список использованных источников Обозначения

CMS — Системма управлемния содержиммым (контемнтом)

MySQL — свободная система управления базами данных (СУБД). Входит в состав серверов WAMP, AppServ, LAMP и в портативные сборки серверов Денвер, XAMPP.

HTML (от англ. Hyper Text Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине.

PHP (англ. PHP: Hypertext Preprocessor — Personal Home Page Tools — «Инструменты для создания персональных веб-страниц») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений.

Введение

В ходе работы предстоит изучить работу сервера XAMPP, разобраться в работе системы «WordPress», в ее особенностях, возможностях и дополнениях. Также изучить основы языка PHP и html.

На основе системы разработать и создать сайт, готовый к запуску в интернет. Целью сайта должен являться рассказ о городе и информация о последних новостях. Вместе с этим, сайт должен быть ярким и запоминающимся. Темой сайта станет «Город над Сожем». Чтобы сайт мог открыть более полную картину о городе Гомеле перед подписчиками, будут созданы раздела и подразделы. С помощью этого разделения пользователям должно быть легче и быстрее найти интересующую их информацию. Сайт должен быть удобным в применении и имнть многофункциональную структуру.

1. О системе «Wordpress»

WordPress —система управления содержимым сайта (CMS) с открытым исходным кодом. Написана на PHP, в качестве базы данных использует MySQL. Сфера применения — от блогов до достаточно сложных новостных ресурсов и даже интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты.

1.1 Функциональные особенности «Wordpress»

Одной из главных особенностей «Wordpress» является структура организации базы данных. Гибкость и функциональность связей позволяют создавать и выводить на страницу материал любого вида с любыми параметрами.

Встроенная система «тегирования» создает дополнительные связи для материалов сайта, что при необходимости, позволяет оперировать всеми записями, соответствующими определенным условиям.

В системе управления контентом «Wordpress» предлагается гибкая схема организации структуры сайта на основе таксономии. Таксономия — механизм, позволяющий создавать произвольное количество связей между объектами содержимого сайта и ассоциировать их с «Ключами записей», «Категориями записей» или «Категориями ссылок».

«Категории», «Ключевые слова» и «Ссылки» могут представлять плоские или иерархические списки, либо сложные структуры, где элемент может иметь несколько «родителей» и несколько дочерних элементов. С помощью подобной схемы одними и теми же компонентами системы управления контентом возможна организация различных вариантов структуризации, обработки, редактирования и вывода содержимого. 1]

Итак, основными функциональными особенностями Wordpress являются: публикация статей, защита от спама в комментариях, интегрированная лента дружественных блогов, управление страницами, паролирование записей и страниц, дополнительные поля, простая установка, настройка и обновление скрипта. Осуществляется поддержка 10 уровней пользователей с разными правами доступа, поддержка нескольких категорий и подкатегорий, запрограммированные публикации, полная поддержка веб-стандартов, для работы использует PHP и MySQL, полностью бесплатен.

1.2 История версий Номера версий, кодовые имена, даты релиза и примечания к каждой из версий приведены ниже «таблица 1».

Таблица 1

1.3 Преимущества «Wordpress»

При выборе для создания сайта системы «Wordpress», мы можем сразу заметить следующие ее преимущества:

— Простота в установке и настройке;

— Наличие удобного, настраиваемого административного интерфейса;

— Легкость при непосредственном создании сайта;

— В дальнейшем, простое управление сайтом и его редактирование;

— Наличие простого и удобного консоля;

— Поддержка «тем», позволяющих легко менять как внешний вид, так и способы вывода данных;

— Наличие громадных библиотек «тем» и «плагинов»;

— Наличие системы контроля безопасности сайта;

— Наличие системы автосохранения набираемого в редакторе текста, для предотвращения потери информации из-за программного или аппаратного сбоя;

— Наличие инструмента автоматического обновления до белее свежей версии;

1.4 Возможности «Wordpress»

«Wordpress» — это полностью бесплатная, свободно распространяемая система программ, написанных на скриптовом языке РНР. В ней применяются и CSS-стили, позволяющие мгновенно менять внешний вид сайта, доступно множество готовых тем — наборов стилей для оформления текста и страницы в целом, плюс необходимые графические элементы дизайна, наборы скриптов и специальных дополнений — виджетов, помогающих создать на сайте меню, удобную систему рубрик, архивы записей, поиск по сайту и прочие дополнительные удобства. Темы весьма разнообразные, выглядят солидно и профессионально. Каждая тема состоит из нескольких файлов-шаблонов, которые разрешается редактировать для изменения оформления сайта или создания своих собственных тем. Кроме стандартного набора возможностей, прописанных в той или иной теме, WordPress позволяет усложнять оформление и функциональные возможности за счет тех или иных дополнений — плагинов «…подробнее в разделе 2.1 «. Плагины пишутся уже не столько разработчиками «Wordpress», сколько сторонними программистами.

Итак, система «Wordpress» имеет следующий ряд возможностей:

— Шаблонный дизайн графического оформления страниц создает гибкость, простоту редактирования и дает возможность установить стандарт выполнения любых шаблонов для данной системы управления;

— Создание чистого HTML_кода при помощи графического редактора текста;

— Возможность подключать плагины, с уникально простой системой их взаимодействия с основным кодом;

— Возможность в реальном времени осуществлять мониторинг уязвимостей и изменений в потенциально-опасных файлах;

— Возможность встроенными средствами защитить определенные папки веб-сервера, от посещения пользователями, путем полного запрета доступа конкретным подсетям или установки режима авторизации;

— Возможность ограничения доступа к интерфейсу администратора по спискам разрешенных IP_адресов;

— Возможность редактирования непосредственно самого PHP кода;

— Встроенный редактор ЧПУ, делающий ссылки на записи сайта более привлекательными для роботов поисковых систем;

— Возможность создания современного динамического многофункционального сайта с ярким внешним видом на совершенно любую тематику;

2. Дополнения к системе «Wordpress»

Система «Wordpress» имеет ряд встроенных дополнений:

— более 1000 страниц документации, с полным описанием всех функций и переменных исходного когда проекта, на английском языке;

— более 4000 бесплатных компонентов, добавляющих дополнительный функционал;

— более 1000 бесплатных графических шаблонов, распространяемых бесплатно на сайте проекта;

2.1 Плагины

Плагимн — независимо компилируемый программный модуль, динамически подключаемый к основной программе, предназначенный для расширения и/или использования её возможностей. Плагины обычно выполняются в виде разделяемых библиотек.

Основное приложение предоставляет сервисы, которые плагин может использовать. К ним относится предоставляемая плагину возможность зарегистрировать себя в основном приложении, а также протокол обмена данными с другими плагинами. Плагины являются зависимыми от сервисов, предоставляемых основным приложением и зачастую отдельно не используются. В противоположность им, основное приложение независимо оперирует плагинами, предоставляя конечным пользователям возможность динамически добавлять и обновлять плагины без необходимости внесения изменений в основное приложение.

«WordPress является универсальной и наиболее популярной платформой для ведения блогов, функции которой возможно расширить с помощью различных плагинов.»

Плагины добавляют функциональности блогу. Плагинов для WordPress пожалуй даже больше, чем Тем. Поскольку большинство из плагинов узкоспециализированы, перевести все не представляется возможным. Только в официальном репозитории плагинов для «WordPress» более 2300, и это при том, что часть существующих плагинов там не представлена!

2.2 Виджеты Виджеты в WordPress играют роль модулей. С помощью виджетов можно вывести информацию на сайт. Например: страницы, категории (рубрики), облако тегов, архив записей и т. д. Устанавливаются они вместе с плагинами.

Виджеты — это блоки, которые можно размещать в колонках сайта. Встроенные в WordPress виджеты позволяют добавить следующую информацию в колонках блога:

— список категорий;

— список страниц;

— архивы;

— ссылки;

— последние сообщения;

— последние комментарии;

— календарь;

— RSS потоки;

И самое полезное: текстовые блоки. В текстовом виджете можно разместить html-код, JavaScript или простой текст. Этот виджет можно использовать для размещения кода различных счетчиков, рекламных блоков и тому подобного. Количество текстовых виджетов можно варьировать от 1 до 9.

Темы, которые имеют большой выбор мест для размещения различных виджетов, нравятся пользователям и удобны для настройки. Первый шаг на пути к использованию виджетов на создаваемом сайте под управлением WordPress — сделать тему сайта доступной для применения виджетов. Задача достаточно просто решается, если поместить правильный код в правильное место.

2.2.1 Создание нескольких областей для виджетов Чтобы получить несколько областей для использования виджетов нужно зарегистрировать их в файле «functions.php» выбранной темы WordPress. Допустим, у нас используется трехколоночная тема, и мы хотим получить две разных боковых панели справа и слева:

));

2.2.2 Активация областей для виджетов После создания нескольких областей нужно поместить код динамической боковой панели в нужный файл. В зависимости от структуры темы, код может быть расположен в файле sidebar. php или другом. Вот пример кода для использования:

Код между тегами PHP будет выводиться, если не используется никаких виджетов в соответствующей области. Например, если никаких виджетов не подключено к левой боковой панели, то будет выведено «Код для левой боковой панели по умолчанию располагается здесь…». 3]

3. Создание сайта на «Wordpress»

Разобравшись более подробно в преимуществах и возможностях системы «WordPress», я перешел непосредственно к созданию сайта. Определиться с темой сайта было не так сложно. Ей стал «родной город над Сожем» — Гомель. Целью сайта должен был являться рассказ о городе и информация о последних новостях. Вместе с этим была поставлена цель сделать сайт ярким и запоминающимся.

Реализация поставленных целей заняла несколько этапов:

а) Установка сервера XAMPP;

б) Установка «WordPress»;

в) Настройка «WordPress»;

1) выбор и настройки шаблона;

2) установка плагинов;

3) установка виджетов;

г) Наполнение сайта;

1) создание страниц и меню сайта;

2) создание формы подписки;

3) добавление записей и рубрик сайта;

4) добавление информации на сайт;

Далее более подробно о каждом из этапов работы.

3.1 Установка сервера XAMPP и «WordPress»

XAMPP — кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб — сервер.

XAMPP работает со всеми 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троку запроса — информацию, содержащуюся в каждой ссылке сайта — для того, чтобы определить какой шаблон или набор шаблонов использовать для отображения страницы.

Сперва «WordPress» находит каждую Строку Запроса по типам запросов — т. е. определяет какой тип страницы (страница поиска, страница категорий, главная страница и др.) был запрошен.

После этого шаблоны выбираются и содержимое страницы генерируется в порядке, предложенном иерархией шаблонов, в зависимости от доступности шаблонов конкретной темы «WordPress».

Система ищет файлы шаблонов со специальными именами в папке текущей темы и использует первый подходящий файл шаблона указанный в соответствующем запросе.

За исключением основного шаблона index. php, разработчики тем могут использовать или не использовать файлы шаблонов по желанию. Если WordPress не находит шаблон с указанным именем, он переходит к следущему по иерархии шаблону. Если не один из искомых шаблонов не подходит, WordPress использует index. php (шаблон главной страницы Темы).

[.согласно 6]

В выбранную тему мной были загружены, обработанные изначально в графическом редакторе, изображения для фона и заголовка сайта. Изображения подчеркивают, выбранную тематику сайта и придают ему красочность и яркость.

3.2.2 Установка плагинов Следующим этапом создания сайта является установка плагинов. Что такое плагины мы уже разобрали [cм. 2.1]. Мной были использованы только самые основные плагины:

а) Плагин"Akismet" является самым известным и используемым плагином в «WordPress». Он довольно прост в установке и использовании. Использует общую базу спам-комментариев, поэтому является с самого начала хорошо обученным специалистом в борьбе со спамом. Единственный упрек в его адрес — это то, что иногда в спам попадают и нормальные комментарии, но это не часто. Поэтому Akismet — отличный плагин для защиты от спама.

б) Плпгин «Mp3 Player». Назначение этого плагина не нуждается в объяснении. Множество различных видов mp3-плееров для воспроизведения аудио-файлов прямо с сайта.

в) Плагин «RusToLat» — oдин из плагинов, которые входят в список обязательных для любого блогера, ведущего блог на русском языке. Вместо множества различных символов, составляющих ссылку страницы сайта, мы будем видеть название страницы на латинице. Плагин будет тихо и незаметно работать, правильно переводя в латиницу в момент сохранения ссылки записей, страниц, рубрик и даже меток.

г) Плагин «Viper's Video Quicktags» — очень полезный, и пожалуй лучший плагин, который позволяет с легкостью добавить на создающийся сайт, в записи и страницы видео в форматах .flv, .avi, .mov. Также позволяет добавить видео с таких сайтов как: YouTube, Google Video, VimeoVeoh, Viddler, Metacafe, Blip, MySpaceTV. Плагин имеет очень много различных настроек, изменение размера и графической оболочки плеера индивидуально для каждого типа видео.

д) Плагин «Social Share Buttons». Этот плагин добавляет иконки соц. сетей в конце статей. С помощью этих иконок, можно поделиться информацией с сайта практически в любой из соц. сетей: Facebook, Google Buzz, Google Plus, LiveJournal, Mail.ru, Одноклассники, Twitter, Вконтакте, Яндекс.

Стоит отметить, что каждый из плагинов после установки настраивается отдельно вручную.

3.2.3 Установка виджетов Что такое виджеты уже было разобрано [.п.2.2] и поэтому останавливаться на этом не стоит.

Для увеличения функциональности сайта и удобства были установлены виджеты.

Виджет «Поиск» будет позволять подписчикам быстро и удобно найти любую информацию на сайте. Графа с поиском располагается на сайте в верхнем правом боку, что добавляет удобства в ее использовании.

Рядом были добавлены виджеты «Свежие новости», в которых будут отображаться последняя загруженная информация на сайт, и «Категории». Здесь можно будет найти любую информацию по категориям[.подробнее в п. 3.3.1].

Еще одним немаловажным виджетом, добавленным на сайт стал «Текст». Сюда можно вводить совершенно любой html-код, для создания различных усовершенствований сайта. Так была создана форма подписки сайта[.подробнее в п. 3.3.2]

3.3 Наполнение сайта

3.3.1 Создание страниц и меню сайта. Добавление записей и рубрик сайта. Наполнение их информацией.

Создание страниц является одной из самых важных и неотъемлемых частей работы по созданию сайта. В «WordPress» создана отдельная вкладка консоля для создания страниц. В этой вкладке выбирается название создаваемой страницы, ее параметры и содержание. Редактировать страницу и ее содержимое можно в окне обычного текстового редактора, встроенного в систему, или в окне редактирования html-кода. Это позволяет людям, которые не особо хорошо разбираются в html создавать простенькие страницы, а остальным — увеличить их функциональность и возможности при редактировании кода вручную.

Можно создать материнскую страницу, в которую будут помещены подстраницы, либо воспользоваться функцией «Меню» и разместить на главной странице каталоги, в которых будут размещены все остальные.

Используя функцию «Меню» и публикации страниц, на сайте «Город над сожем «были созданы каталоги.

Страницы были заполнены всевозможной информацией и файлами. Были добавлены фото, аудиои видеофайлы.

Наименования пунктов меню, созданных, страниц и краткая информация о них расположена ниже в «таблице 2».

Таблица 2

После создания страниц и меню сайта необходимо было прибегнуть к использованию виджетов. С их помощью были установлены блоки «Свежие новости», в котором показываются последние новости, загруженные на сайт, и «Категории». В этом блоке были созданы следующие рубрики: «Все новости», «Культурно-массовые мероприятия» и «Спортивные новости». При дальнейшей загрузке новостей на сайт, стало возможным выбирать в каких рубриках отражать ту или иную новость. Это дает возможность подписчикам быстро и удобно находить, интересующую их информацию.

3.3.2 Создание формы подписки

Для создания формы подписки потребовалось добавить виджет «Текст» и вставить туда html-код. Код можно сгенерировать на сайте. Там создается собственный аккаунт, а затем выбираются параметры формы подписки: цвета, шрифты, размеры. Программа генерирует html-код:

function SR_IsListSelected (el)

el[i]. checked)

return i;

return -1;

function SR_trim (f)

{

return f. toString ().replace (/^[ ]+/, '').replace (/[ ]+$/, '');

}

function SR_submit (f)

{

f[" field_email" ]. value = SR_trim (f[" field_email" ]. value);

f[" field_name_first" ].value = SR_trim (f[" field_name_first" ]. value);

if ((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; }

if (!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; }

return true;

}

Ваш e-mail: * Ваше имя: * Подписчиков:

Далее, полученный код, вставляется в текст виджета и форма готова к работе. Посетитель сайта, введя свой E-mail адрес в эту форму, будет получать в свой почтовый ящик новые публикации, которые будут публиковаться на сайте.

Заключение

wordpress сайт виджет шаблон В ходе выполнения курсовой работы была подробно изучена система «WordPress» и ее дополнения. Изучена работа сервера XAMPP и базы данных MySql. Задачи были выполнены в полном объеме. Были затронуты основы PHPи html-языков.

Основным этапом в изучении системы «WordPress», стало создание на ее основе полноценного интернет-сайта. Задачи по его выполнению также были полностью выполнены. Создан сайт, отвечающий всем современным нормам. Он сочетает в себе удобство, функциональность и яркий, запоминающийся внешний вид. На сайте есть возможность делиться информацией в соц. сетях, оставлять комментарии под статьями и имеется рабочая форма подписки. Созданы страницы меню и подробной информацией о городе и его «жизни». Сайт содержит страницы с фотографиями, видеои аудиозаписями, соответствующими выбранной тематике. Сайтом можно легко управлять и в дальнейшем, что делает его удобным для администрации.

Созданный сайт готов к запуску в интернет.

Список использованных источников

1. О системе «Wordpress» [Электронный ресурс] - Режим доступа: http://www.designaero.ru/wordpress.html — Дата доступа: 14.05.2012.

2. История версий. WordPress [Электронный ресурс] - Режим доступа: http://ru.wikipedia.org/wiki/WordPress — Дата доступа: 17.05.2012.

3. Работа с виджетами [Электронный ресурс] - Режим доступа: http://ruseller.com/lessons.php?rub=40&id=1266 — Дата доступа: 23.05.2012.

4. Сайт Xampp [Электронный ресурс] - Режим доступа: http://www.apachefriends.org/en/xampp-windows.html. — Дата доступа: 18.04.2012.

5. Харрис Э. PHP/MySQL для начинающих. — С. Пб.:Издательство «КУДИЦ-Образ», 2005. -384 с.

6. Wordpress. Темы [Электронный ресурс] - Режим доступа: http://codex.wordpress.org — Дата доступа: 22.04.2012.

7. Генерация кода формы подписки [Электронный ресурс] - Режим доступа: — Дата http://smartresponder.ru доступа: 29.04.2012.

www.