Установка и настройка системы cms. редактирование шаблона cms

Лабораторная работа 26

УСТАНОВКА И НАСТРОЙКА СИСТЕМЫ CMS. РЕДАКТИРОВАНИЕ ШАБЛОНА CMS

ЦЕЛЬ РАБОТЫ: научиться устанавливать CMS WordPress на локальный сервер, задавать базовые настройки и настройки темы.

Для выполнения работы необходимо знать языки программирования для разработки серверной части веб-приложений, организацию хранения данных с применением MySQL; необходимо уметь создавать web-сайты, соответствующие текущим стандартам W3C, разрабатывать программный код серверной части веб-приложений с доступом к базе данных.

ОБОРУДОВАНИЕ: ПК IMB, OS Windows, браузер (Opera, Google Chrome, Mozilla), Notepad++, Sublime Text, локальный сервер Open Server, WordPress.

ВРЕМЯ ВЫПОЛНЕНИЯ: 90 минут

КРАТКАЯ ТЕОРИЯ И МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Система управления содержимым (контентом) (англ. Content management system, CMS)— информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым, иначе — контентом.

По-простому говоря, CMS – это визуализация процесса размещения и редактирования контента (статей, изображений, музыки, видео) на сайте в виде удобного и понятного интерфейса.

Самой распространённой CMS на сегодняшний день является WordPress. WordPress является бесплатным программным обеспечением с открытым исходным кодом, которое можно загрузить и установить за несколько минут. Кроме того, подключаемые модули и темы расширяют заложенные в платформу возможности.

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

Плагин - это расширение WordPress, которые добавляют функцию или функциональность, не заложенные в ней изначально.

Платформа WordPress существуют в двух видах: WordPress.org и WordPress.com. На сайте WordPress.org находятся последние версии данной cms, подключаемые модули, темы и локализации. WordPress.com является сервисом компании Automattic, которая была основана с целью предоставления бесплатного хостинга для WordPress. WordPress.com построен на ответвлении от WordPress, называемом WordPress MU, что позволяет при помощи единственной установленной копии данной cms, контролировать одновременнно несколько сайтов.

ПОРЯДОК ВЫПОЛЕНИЯ И ФОРМА ОТЧЕТНОСТИ

Задание 1. Установить WordPress на локальный сервер Open Server

1. Создайте в папке domains папку wpfolder1 (для 1 подгруппы) или wpfolder2 (для 2 подгруппы)

2. Распакуйте архив WordPress в созданную папку.

При этом, распакованные файлы нужно будет перенести в корневую папку (в примере – «wpfolder»), иначе сайт будет открываться не по адресу «wpfolder», а по адресу «wpfolder/wordpress»:

1. Запустите OpenServer

Создание пользователя и базы данных для WorldPress

1. Откройте PhpMyAdmin и перейдите на вкладку «Пользователи», нажмите «Добавить пользователя»:

1. В открывшемся окне выполните следующие действия:

• Заполните имя пользователя: wpfolder1 (для 1 подгруппы) или wpfolder2 (для 2 подгруппы).

• Сгенерируйте пароль для него (чем сложнее пароль, тем лучше – злоумышленники не смогут получить доступ к базе данных методом подбора пароля).

• Отметьте флажками поля «Создать базу данных с именем пользователя в названии и предоставить на нее полные привилегии», «Предоставить полные привилегии на базы данных подпадающие под шаблон (имя пользователя\_%)».

• Предоставьте пользователю возможность производить любые действия с этой базой данных (нажимаем на ссылку «Отметить все», после чего в блоках «Данные», «Структура» и «Администрирование» все поля будут отмечены флажками).

• Сохраните логин и пароль в текстовом файле у себя на компьютере в текстовом документе и нажмите «Вперед».

В результате этих действий вы получили базу данных и пользователя.

4. Установите созданную базу данных на WordPress. Для этого выполните следующие действия:

• в папке с WordPress переименуйте конфигурационный файл из «wp-config-sample.php» в «wp-config.php». «Sample» - означает «шаблон», переименовав файл мы делаем его рабочим конфигурационным файлом для WordPress.

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

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

1. Сохраните файл

Установка WorldPress

1. Запустите процесс установки WordPress через команду Мои проекты в меню OpenServer.

2. Откроется окно установки WordPress, где необходимо заполнить следующие поля:

• Название сайта. Это НЕ домен сайта, это то, что будет показано в шапке сайта.

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

• Пароль – чем сложнее, тем лучше. WordPress – самая распространенная CMS в мире, поэтому и ломают ее методом перебора чаще, чем другие. Используйте сложный пароль (имя пользователя и пароль от WordPress также сохраните в текстовый документ)

• Адрес вашей электронной почты. Наобум указывать не нужно, т.к. при запросе восстановления пароля он будет отправлен именно на этот адрес.

• Должен стоять флажок «Разрешить поисковым системам индексировать сайт»

• Нажмите «Установить WordPress».

1. Если все предыдущие шаги были выполнены без ошибок, то вы увидите окно, подтверждающее корректную установку WordPress.

1. Проверьте администраторскую часть (чтобы попасть в админ панель WordPress нужно ввести логин и пароль администратора, после перехода по ссылке название сайта/wp-admin.php).

На этом процесс установки WordPress на OpenServer закончен.

Задание 2. Установить базовые настройки WordPress

1. Зайдите в административную панель WordPress

2. Выберите тему Twenty Nineteen из стандартного набора WordPress с помощью команды Внешний вид – Темы и нажмите кнопку Активировать.

Нажмите на кнопку Сайт - Перейти на сайт и просмотрите внешний вид установленной темы с содержимым.

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

1. В разделе «Написание» оставьте дефолтные настройки форматирования. Укажите хотя бы один надежный сервис слежения за обновлениями (например, http://rpc.pingomatic.com/). Сохраните изменения.

1. В разделе «Чтение» указывается, что должно отображаться на главной странице сайта. Если создаете блог, на главной должны быть последние записи. Если создаете сайт со статическими страницами, то на главной должна отображаться одна из них. Выберите пункт Ваши последние записи. Укажите, количество записей на одной странице – 5 записей и в лентах RSS – 5 записей. Выберите отображение в ленте анонсов статей. Сохраните изменения.

2. В разделе «Обсуждение» выберите подходящие параметры. В большинстве случаев подойдут дефолтные настройки. Уделите внимание полям «Модерация комментариев» и «Черный список». Можете указать признаки, по которым комментарии будут перед публикацией поставлены в очередь на модерацию или окажутся в списке «Спам». Эти настройки сработают, если вы пользуетесь дефолтными комментариями WordPress. Сохраните изменения.

1. В разделе «Медиафайлы» оставьте настройки по умолчанию.

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

Разработка сайта для сети школ робототехники

«Techno Robot» на WordPress

Задание 1. Настройка темы WordPress

1. В консоли WordPress выберите меню «Внешний вид – Настроить». Откроется страница настройки темы или кастомайзер. Доступные пункты настройки можно увидеть в меню в левой части экрана.

1. В разделе «Свойства сайта»:

   1. загрузите логотип – иконку, подходящую по тематике сайта

   2. укажите название сайта: Techno Robot и краткое описание сайта: Школа робототехники.

   3. добавьте иконку сайта (файвикон).

Нажмите кнопку Опубликовать.

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

2. В разделе «Меню» настройте меню сайта.

   1. Нажмите кнопку «Создать меню».

   2. Укажите название – Главное меню и область меню – Основное, меню подвала.

   3. Нажмите кнопку Далее, в появившемся окне нажмите Добавить элементы и добавьте Страницы меню: Наши школы, Расписание занятий, Новости, Наши услуги, Преподаватели, Отзывы, Контакты).

Нажмите кнопку Опубликовать.

1. Рассмотрите остальные команды кастомайзера.

Задание 2. Наполнение сайта содержимым

1. Перейдите в админ панель. В настройках сайта в разделе Чтение выберите отображать Статическую страницу, для главной страницы укажите – Пример страницы, для страницы записей – Новости. Посмотрите, как изменится внешний вид сайта.

2. Перейдите во Внешний вид – Виджеты. Удалите все виджеты из подвала сайта.

Настройка главной страницы

1. Выберите Страницы – Все страницы – Пример страницы. Откроется окно редактирования главной страницы сайта.

2. Удалите все имеющееся содержимое.

3. Нажмите на знак «+» и добавьте Изображение. Выровняйте его по ширине содержимого. Обновите страницу.

1. Ниже добавьте элементы Заголовок и Список для описания преимуществ школы. В правом окне с настройками измените цвет шрифта или фона у списка.

1. Ниже добавьте элемент Последние записи. Установите параметры: Содержимое записи, Показать отрывок, максимальное количество слов 20, отображать дату публикации.

2. Выйдите из режима редактирования главной страницы.

Создание записей

1. Перейдите в меню Рубрики. Добавьте новую рубрику news

2. Перейдите в меню Записи – Все записи, удалите имеющуюся запись Привет мир.

3. Добавьте 5 записей с новостями (заголовок и текст новостей имеются в текстовом документе). Для каждой записи установите рубрику news, задайте изображение записи, разрешите комментарии.

4. Проверьте, что записи автоматически добавились на главную страницу и страницу с новостями.

5. Отредактируйте главную страницу так, чтобы на ней выводилось не более трех последних новостей.

6. На странице «Новости» должно выводиться не больше 4 последних новостей (в настройках сайта, в разделе Чтение). Если новостей больше должна выводится пагинация, каждая последующая новость добавляется вниз ленты без перезагрузки страницы.

Создание внутренних страниц сайта

1. Создайте 5 новых пустых страниц с заголовками: Москва, Санкт-Петербург, Казань, Нижний Новгород, Самара. Для каждой страницы атрибутом выберите Родительскую страницу – Наши школы.

2. Перейдите в меню Внешний вид – Меню. Слева выделите созданные страницы и нажмите Добавить в меню. В структуре меню перетащите созданные страницы под меню наши школы. Сохраните меню. Просмотрите на сайте добавление внутренних страниц.

1. Наполните страницы контентом. На страницах со школами отображается изображение и контактная информация школы.

Страница Расписание занятий

1. Добавьте таблицу с расписанием занятий

Задание 3. Работа с плагином

1. Перейдите в меню Плагины – Добавить новый. Выберите из папки media плагин contact-form. После загрузки плагина нажмите Активировать плагин.

2. В меню админ панели должен появиться пункт Contact Form. Выберите «Добавить новую». Заголовок – Запись на пробное занятие, элементы: имя, возраст, e-mail, телефон.

1. Сверху должен появиться шорткод. Скопируйте его.

2. Откройте редактирование страницы Наши услуги и вставьте шорткод под заголовок. Обновите сайт и просмотрите результат.

3. Установите плагин для работы custom-social-media-widget. Через кастомайзер добавьте виджет Custom Social Network Profiles в подвал сайта. Вставьте ссылки на социальные сети.

Заполните остальные страницы, используя текстовый файл.

КОНТРОЛЬНЫЕ ВОПРОСЫ

1. Что такое CMS?

2. Какие возможности у современных CMS?

3. В чем преимущества и недостатки CMS WordPress?