CMS
Веб-дизайн и разработка
“
В этом уроке мы познакомимся с CMS WordPress и посмотрим, как просто можно сделать сайт, похожий по функционалу на тот, что мы делали в прошлых уроках.
Глоссарий
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
CMS
Система управления содержимым. Информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым, иначе — контентом
FTP
Протокол передачи файлов по сети, является одним из старейших прикладных протоколов, появившихся задолго до HTTP и даже до TCP/IP, в 1971 году
Хостинг
Услуга по предоставлению ресурсов для размещения информации на сервере, постоянно имеющем доступ к сети
Видеолекция
Конспект
Что такое CMS
Для начала поговорим о том, что такое CMS. CMS — это система управления контентом. Она позволяет управлять оформлением и содержимым сайта практически без знаний программирования. С ее помощью вы можете менять дизайн, блоки и содержимое вашего сайта в режиме конструктора, не прибегая к программированию. Мы будем использовать WordPress, т.к. эта система развивается с 2003 года и по данным на март 2020 — уже более 36% сайтов в интернете работают на WordPress.
Совет
Скачать WordPress можно бесплатно с официального сайта wordpress.org.
CMS скачивается в виде архива, который нужно будет распаковать на нашем сайте
CMS скачивается в виде архива, который нужно будет распаковать на нашем сайте
Установка WordPress
Распаковка WordPress
- Распаковываем архив с WordPress в заранее подготовленном домене wordpress.
- Открываем сайт в браузере.
Важно
Если WP еще не установлен, то мы увидим экран приветствия, на котором говорится, что нам потребуется база данных
Создание базы данных
1. В phpMyAdmin создаем новую базу данных с именем Wordpress и необходимой кодировкой.
2. Продолжаем установку.
3. На следующем экране вводим информацию о подключении к нашей базе.
2. Продолжаем установку.
3. На следующем экране вводим информацию о подключении к нашей базе.
4. Указываем имя базы данных, которую мы создали, логин и пароль для доступа к базе и нажимаем Отправить.
Важно
Если данные верны, то мы увидим информацию, что соединение есть и можно начинать установку
Распаковка WordPress
Указываем название сайта, придумываем имя пользователя, пароль для доступа к панели администратора и указываем свой email.
Вход в панель администратора
Установка завершена и мы можем войти.
Перед нами открывается панель администратора.
Для доступа к сайту нужно нажать на ссылку с именем вашего сайта в верхнем меню.
Темы
В WordPress существуют темы и именно они определяют дизайн сайта. Установить темы можно несколькими способами.
Способ 1
- Переходим в раздел Внешний вид —> Темы.
- Нажимаем кнопку Добавить.
- Видим каталог тем, которые можно найти и установить. Так как мы пользуемся локальным сервером, у нас может не получиться установить тему таким способом, потому что если мы попробуем сделать это, то CMS потребует от нас ввести FTP-данные для доступа к хостингу.
Но у нас сейчас нет хостинга, поэтому рассмотрим другой способ.
Способ 2
На официальном сайте есть раздел с темами, откуда их можно скачать в виде архива и установить одним из двух способов:
1. выбрать файл с архивом на странице с темами
2. переместить напрямую в папку с темами.
1. выбрать файл с архивом на странице с темами
2. переместить напрямую в папку с темами.
Темы можно скачать и на других сайтах или даже купить. Но мы все-таки сделаем так, чтобы при установке напрямую от нас не требовали доступ к FTP. Сделать это можно одной строчкой в файле wp-config
1. Откроем его и в самом конце определим константу FS_METHOD со значением direct.
1. Откроем его и в самом конце определим константу FS_METHOD со значением direct.
...
define('FS_METHOD', 'direct');
2. После этого CMS не будет требовать от нас доступ по FTP.
3. В каталоге тем найдем тему Neve и установим ее.
3. В каталоге тем найдем тему Neve и установим ее.
4. После установки тему необходимо активировать.
5. После активации некоторые темы рекомендуют установить плагины, необходимые для их работы, обычно это различные галереи или формы. После активации темы главная страница сразу меняется в дизайне, но не так как на картинке.
5. После активации некоторые темы рекомендуют установить плагины, необходимые для их работы, обычно это различные галереи или формы. После активации темы главная страница сразу меняется в дизайне, но не так как на картинке.
6. Сейчас некоторые темы предлагают выбрать шаблон с наполненным контентом, чтобы не наполнять сайт с нуля, в этой теме такое есть. Давайте сделаем это. Тема Neve предоставляет множество вариантов, мы выберем Freelancer.
После выбора нам предлагают установить все необходимое.
7. Устанавливаем. После наполнения сайта контентом мы видим, что сайт изменился: на главной появилось больше секций, появилась страница обо мне, портфолио и контакты.
Страницы
Все страницы можно редактировать через панель администратора. Перейдем в раздел Страницы и выберем, например, Портфолио. Страница открывается в редакторе Elementor — это сторонний редактор. Помимо него есть стандартный редактор Gutenberg.
Посты
Помимо страниц в WordPress есть еще и посты, вариантов их использования много, но в основном это какие-то записи, например, новости.
Плагины
Если мы посмотрим на страницу контактов, то увидим форму, которая, как и все, оформлена через редактор Elementor.
Но в этом редактор формы являются частью PRO-версии, поэтому нам нужно установить какой-то другой плагин.
Поиск и установка плагина
1. Переходим в раздел с плагинами и устанавливаем тот, который позволяет создавать формы.
2. Выбираем WPForms — он позволяет создавать разные формы.
3. После установки плагина его нужно активировать.
3. После установки плагина его нужно активировать.
Работа с плагином
1. Переходим в сам плагин, чтобы создать новую форму.
2. Указываем имя формы и выбираем шаблон.
2. Указываем имя формы и выбираем шаблон.
3. Сохраняем и нажимаем на шорткод чтобы получить его.
4. Копируем его и идем на страницу с контактами.
Использование шорткода
1. Удаляем стандартную форму: для этого в контекстном меню выбираем Удалить.
2. На место старой формы добавляем блок с шорткодом.
Важно
Шорткоды позволяют вставить какой-то контент в любое место, где этот шорткод будет вставлен
3. Вставляем его, и вместо него на странице будет та форма, которую мы только что создали.
4. Обновляем страницу и можно проверять.
Форма действительно появилась, но если мы ее отправим, то в панели администратора нигде эти данные не найдем. Дело в том, что данный плагин позволяет просматривать данные напрямую в панели только в Pro-версии, которую нужно купить.
Мы так делать не будем, а установим еще один плагин, решающий эту проблему.
Установка плагина для хранения сообщений с формы обратной связи в базе
1. Переходим в раздел плагинов и дальше в добавление нового плагина.
2. Находим в каталоге плагин по запросу wpforms database.
3. Устанавливаем WPForms Database Addons, который расширяет возможности другого плагина.
2. Находим в каталоге плагин по запросу wpforms database.
3. Устанавливаем WPForms Database Addons, который расширяет возможности другого плагина.
4. После установки активируем плагин.
5. После активации в боковом меню находим секцию только что установленного плагина и переходим в него. Как видим, тут уже отображается наша форма, но в ней пока нет записей.
5. После активации в боковом меню находим секцию только что установленного плагина и переходим в него. Как видим, тут уже отображается наша форма, но в ней пока нет записей.
6. Отправим еще одну форму и снова проверим, что отображается в плагине. Отлично, отображается запись, полученная с формы.
“
Теперь вы знаете, что такое WordPress и как с его помощью можно сделать полноценный сайт практически без знаний программирования. У WordPress много возможностей благодаря большой коллекции тем, плагинов и сообщества разработчиков. С ее помощью можно сделать многое, но есть и границы. Теперь вы можете попробовать самостоятельно установить WordPress, выбрать понравившуюся тему, а также набор необходимых плагинов и сделать свой сайт самостоятельно. Небольшие задания помогут вам закрепить новые знания.
Дополнительные материалы
Интерактивное задание
Тест
Для закрепления полученных знаний пройдите тест
| Стартуем! |
Что отвечает за дизайн и оформление в WordPress?
| Дальше |
| Проверить |
| Узнать результат |
В какой файл необходимо внести изменения, чтобы темы и плагины можно было устанавливать на локальный сервер непосредственно через каталог?
| Дальше |
| Проверить |
| Узнать результат |
Каким способом можно установить тему в WordPress?
| Дальше |
| Проверить |
| Узнать результат |
Что нужно знать для работы с WordPress?
| Дальше |
| Проверить |
| Узнать результат |
Какую функцию выполняют посты в WordPress?
| Дальше |
| Проверить |
| Узнать результат |
К сожалению, вы ответили неправильно
Прочитайте лекцию и посмотрите видео еще раз
| Пройти еще раз |
Неплохо!
Но можно лучше. Прочитайте лекцию и посмотрите видео еще раз
| Пройти еще раз |
Отлично!
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями
| Пройти еще раз |