Создание и защита сайта средствами CMS WordPress

---

Урок 2. Дизайн и контент

Цель:

Отредактировать дизайн сайта и добавить контент

Задачи:

• Научиться редактировать шаблон
• Научиться форматировать текст
• Научиться добавлять ссылки

Дизайн

На данном этапе дизайн сайта представлен на рисунке 1.

Рисунок 1 - Сайт перед настройкой дизайна

Созданный в первом уроке сайт, будет иметь IT-тематику, а именно: «Новости в сфере IT» для этого требуется корректировка дизайна.

1. Входим под учетной записью администратора, по ссылке http://mysite.ru/wp-admin/ (рисунок 1).

Рисунок 1 - Ввод учётной записи администратора

2. В панели администратора, открываем меню Страницы – Добавить новую (рисунок 2).

Рисунок 2 - Добавить новую страницу

В новом окне выполняем последовательные действия:
1) указываем название заголовка (страницы) - Статьи
2) указываем название постоянной ссылки (url) - staty
3) нажимаем Опубликовать.
Выполнение действий показано на рисунке 3.

Рисунок 3 - Создание страницы

Теперь в панеле администратора имеется две страницы Пример страницы и новая страница Статьи (рисунок 4).

Рисунок 4 - Просмотр страниц

Необходимо изменить страницу Пример страницы, для этого нажимаем Изменить (рисунок 5).

Рисунок 5 - Создание страницы

В новом окне вновь выполняем последовательные действия:
1) указываем название заголовка (страницы) - Новости. Удаляя старые записи;
2) указываем название постоянной ссылки (url) - news
3) нажимаем Обновить.
Выполнение действий показано на рисунке 6.

Рисунок 6 - Изменение страницы "Пример страницы"

Теперь при переходе на главную страницу сайта отображается меню из трёх разделов (рисунок 7).

Рисунок 7 - Меню

2. Изменим виджеты, установленные в левой колонке макета сайта.
Для этого переходим в панель администратора. В панели администратора, открываем меню Внешний вид – Виджеты (рисунок 8).

Рисунок 8 - Изменение виджетов

В меню виджетов имеется бар Left Sidebar. Данный бар редактируется, под пожелания администратора (рисунок 9).

Рисунок 9 - Left Sidebar

В баре Left Sidebar удаляем установленные виджеты и добавляем новый виджет Календарь (рисунок 10).

Рисунок 10 - Виджет календарь

После редактирования виджета Left Sidebar переходим на главную страницу зайта, должен получиться результат как на рисунке 11.

Рисунок 11 - Главная страница сайта

Контент

Последний этап создания сайта - это добавление контента на сформированный сайт.

В первую очередь необходимо изменить информацию на главной странице, начнем изменения с оранжевого квадрата, в данном случаи данный квадрат входит в стиль установленного ранее шаблона, так что будем изменять только текст, для этого переходим по ссылке, где расположена установленная тема, а именно mysite.ru\wp-content\themes\GeekVillage и изменяем текст в файле welcome.php 
Новый текст: Добро пожаловать! Данный сайт посвещен новостям в сфере IT (рисунок 12).

Рисунок 12 - Изменение файла "welcome.php"

В результате, должен получиться результат как на рисунке 13.

Рисунок 13 - Главная страница сайта

Продолжаем редактировать главную страницу, на главной странице как правило указывается логотип, цель сайта и род деятельности.
Поэтому следует отредактировать запись, для этого возращаемся в панель администратора, открываем меню Записи – Все записи (рисунок 14).

Рисунок 14 - Настройка записей

Переходим в запись Привет мир и изменяем текст (рисунок 15)
Текст: Добро пожаловать!
Ищите актуальные статьи? Новости?
Данный сайт именно то, что Вы Ищите!

Рисунок 15 - Изменение текста

В результате при переходе на главную страницу сайта, откроется сайт, изображенный на рисунке 16.

Рисунок 16 - Главная страница сайта

Далее редактируем раздел Новости. Для этого переходим в раздел Страницы и над страницей Новости нажимаем изменить. Ранее мы это проделывали, но не меняли текст. Данное действие можно посмотреть на выше показанном рисунке 7.

Сформируем новость, для этого потребуется добавить:
- текст: Все ПК с Windows 10 смогут узнавать пользователя в лицо;

- фото: находится в папке WP-dop – файл zap2.png;

- текст: Ожидается, что в предстоящем году немало интересного будет показано компанией Microsoft, развивающей самую популярную ОС для ПК — Windows.

- текст в виде ссылки, для этого пишем текст: Читать далее... После чего выделяем данный текст и нажимаем сочитание клавиш Ctrl+K. Далее указываем ссылку http://www.mysite.ru/staty/ и нажимаем применить (рисунок 17).

Рисунок 17 - Добавление ссылки

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

Рисунок 18 - Редактирование страницы "Новости"

После нажимаем Обновить и переходим на сайт, открывая раздел Новости (рисунок 19).

Рисунок 19 - Раздел "Новости"

Теперь при нажатии в разделе Новости в конце поста, появился текст Читать далее при нажатии на который осуществляется переход в раздел Статьи.

По аналогии с разделом Новости необходимо заполнить раздел Статьи добавив информацию к ранее добавленой новости. Для этого в разделе Статьи добавляем:
- текст: Статья: Все ПК с Windows 10 смогут узнавать пользователя в лицо;

- фото: тоже самое. Так как мы уже использовали это фото в анонсе новости, то в статью фото вставьте из библиотеки файлов WordPress;

- текст: "Ожидается, что в предстоящем году немало интересного будет показано компанией Microsoft, развивающей самую популярную ОС для ПК — Windows. Очередное сообщение касается двух новых устройств от Microsoft. Одно из них предполагает, что любой компьютер, операционной системой которого является Windows 10, станет узнавать в лицо своего пользователя. Сообщается также, на основе какой технологии будет реализована новая функция.
Одна из грядущих камер добавит поддержку распознавания лиц Windows Hello в любой компьютер, работающий под управлением операционной системы Windows. Вторая камера, как сообщается, станет работать с Xbox One и станет обеспечивать поддержку функции Kinect, позволяющей пользователю автоматически осуществлять вход в аккаунты, расположившись перед камерой. Новинкой станут поддерживаться — вход в различные аккаунты и узнавание членов семьи."

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

Рисунок 20 - Редактирование страницы "Статьи".

После нажимаем Обновить и переходим на сайт, открывая раздел Статьи (рисунок 21).

Рисунок 21 - Раздел "Статьи"

Вопросы для самоконтроля.

1. Переходя по ссылке http://mysite.ru/wp-admin/ открывается ______
2. Url - это ______
3. Возможно ли добавлять ссылки в тексте страницы?
4. Страница "Пример страницы" является стандартной страницей WordPress, возможно ли её удалить?
5. В редактировании страницы присутствуют блоки, можно ли их менять местами?