Вы находитесь на странице: 1из 18

Малая компьютерная академия

Разработка сайтов на Wordpress

Урок №1. Введение в мир веб-разработки

■■ Обзор существующих систем CMS.


■■ Знакомство с платформой WordPress.com.
■■ Панель управления.
■■ Шаблоны и их настройка
Урок №1. Введение в мир веб-разработки
Глава. Внимание!

Внимание!
В ЭТОМ УРОКЕ ИСПОЛЬЗУЕТСЯ
В этом электронном уроке используются передо- МАСШТАБИРОВАНИЕ
вые возможности формата Adobe PDF, которые позво- ИЛЛЮСТРАЦИЙ
ляют создать интерактивные сменные иллюстрации,
Каждый раз, когда вы видите иллюстра-
а также поместить на страницы урока звуковые и ви- цию со значком , вы можете увеличить
деофайлы. масштаб изображения, кликнув по нему
Многие сторонние приложения для просмотра фай- мышкой. Если кликнуть мышкой еще
раз размер иллюстрации вернется
лов формата PDF — в том числе прос­мотр­щики, встро- к первоначальному.
енные в операционные системы, — а также средства
просмотра на мобильных устройствах могут не уметь
отображать такой контент.
Если у вас возникли проблемы с просмотром урока,
и какие-то элементы его некорректно работают или не
отображаются, вы можете бесплатно скачать и уста-
новить последнюю версию программы Adobe Reader
по этой ссылке и использовать её для просмотра элек-
тронных уроков.
К уроку прилагаются файлы изображений. Они
прикреплены к данному PDF-файлу.

Стр. 2
Урок №1. Введение в мир веб-разработки
Содержание

Содержание
Введение в мир веб-разработки Обзор существующих систем CMS................................. 4
CMS WordPress...................................................................... 4

Стр. 3
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Введение в мир веб-разработки


Обзор существующих систем CMS
CMS (content management system) или  система управ-
ления содержимым — это система управления контен-
том (текстовое или  графическое наполнение сайтов
или веб-страниц), которая позволяет нескольким разра-
ботчикам одновременно работать над проектом. Такие
системы часто используют для создания сайтов.
Существуют сотни CMS, условно их можно разделить
Иллюстрация 1
на  группы в  зависимости от языка программирования,
на  котором они написаны. Самые популярные созда- Стоит обратить внимание на то, что есть два отдель-
ны с  помощью языка PHP, среди них: WordPress, Drupal, ных сервиса WordPress.org и WordPress.com. Если корот-
Joomla, Magento. ко, то Word­Press.org требует чуть боле глубоких знаний,
У каждой из  них есть преимущества и  дополнитель- но, в свою очередь, предлагает больший функционал. На-
ные функции. Чтобы выбрать подходящую CMS, нужно пример, он позволяет использовать различные плагины,
четко знать, какого типа сайт вы хотите создать, какие пе- а также самостоятельно администрировать хостинг. Кро-
ред вами стоят цели. Например, одни системы имеютИллюстрация 1
рас- ме того, эту платформу часто использую веб-разработчи-
ширенные инструменты для работы с сайтами торгового ки. Мы будем работать именно с WordPress.org.
направления, а другие — для новостных страниц. Самое время перейти от теории к  практике! Давайте
создадим блог искателя приключений (рис. 2).
CMS WordPress Для создания своего сайта нам нужно зарегистри-
WordPress (https://wordpress.org) — это CMS с откры- роваться на  хостинге, например, на  000webhost (https://
тым исходным кодом, написанная на PHP, и использую- www.000webhost.com/). Хостинг — это сервис, который
щая для хранения информации систему управления база- предоставляет место и услуги для размещения сайтов. По
ми данных MySQL (рис. 1). сути, это хранилище нашего сайта.

Стр. 4
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Указываем email, придумываем пароль, вводим пароль


еще раз и нажимаем Sign Up (рис. 4).

Иллюстрация 2

Для создания сайта мы будем использовать бесплат- Иллюстрация 4


ный хостинг, а  потому на  нашем сайте будет встречать-
ся его реклама. Также бесплатный хостинг накладывает После этого на  указанную почту придет письмо для
определенные ограничения по объему доступного места подтверждения аккаунта — открываем его и  переходим
под сайт и его файлы. по ссылке (рис. 5).
Переходим на сайт хостинга и нажимаем «Sign Up for
FREE!» (рис. 3).

Иллюстрация 5

Для создания первого сайта, нажимаем Create your


Иллюстрация 3 first website (Создайте ваш первый веб-сайт). Затем ука-

Стр. 5
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

зываем название нашего сайта и пароль и снова нажима- В открывшемся окне прописываем логин и пароль ад-
ем Create (рис. 6). министратора. В URL будет прописан адрес вашего сайта.
Когда все поля заполнены, нажимаем Install (рис. 8).

Иллюстрация 6

Откроется страница выбора CMS. Поскольку мы бу-


дем создавать сайт на WordPress, нажимаем Install именно
под этой CMS (рис. 7). Иллюстрация 8

Иллюстрация 7 Иллюстрация 9

Стр. 6
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

После установки переходим на  страницу конфигура-


ции (Configuration Page) и вводим свои регистрационные
данные. Нажимаем Log in и переходим в Dashboard (рис. 9).
Dashboard — это административная панель (другими
словами, это панель управления сайтом или админка). На
ней находится множество различных инструментов для
Иллюстрация 11
создания сайта. Мы будем знакомиться с  ними по  мере
изучения курса. На главной странице Dashboard публику-
ют последние новости и изменения вашего сайта и плат-
формы в целом.
В левом верхнем углу находится значок домика с  на-
званием нашего сайта — он включает режим просмотра
сайта (рис. 10).
Иллюстрация 12

Теперь перейдем к  наполнению нашего сайта — соз-


данию постов (Posts) и страниц (Pages). Давайте создадим
наш первый пост! Для этого перейдем в  соответствую-
щую вкладку в меню слева (рис. 13).
Иллюстрация 10

В административную панель также можно попасть


через сам сайт. Для этого на странице нашего сайта есть
ссылка Log in — она позволит залогиниться через Dash-
board (рис. 11).
Затем в левом верхнему углу наведите на название сай-
та и выберите Dashboard (рис. 12). Иллюстрация 13

Стр. 7
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Здесь можно создавать, удалять и  администрировать Для создания и  редактирования публикаций Word-
все наши посты. Изначально у  нас создан шаблон Hello Press использует редактор Gutenberg. Он позволяет соз-
World!, его и  будем менять. Столбец Author указывает давать контент из  блоков, как конструктор. Когда мы
на имя пользователя (admin), создавшего пост, а Date — наводим мышку на  нужный блок, нам открываются
на дату публикации. особые действия. Например, «Hello World» (рис. 15) —
Если навести курсор на название поста, под ним поя- это заголовок, он редактируется так же, как и в обычном
вятся кнопки управления публикацией: Edit (редактиро- текстовом редакторе. Давайте изменим текст заголовка
вание), Quick Edit (быстрое редактирование), Bin (удале- (рис. 16).
ние), View (просмотр) (рис. 14).
Нажимаем Edit

Иллюстрация 14 Иллюстрация 16

и переходим на страницу публикации (рис. 15). Мы также можем изменить ссылку на  данный пост,
которая находится в строке Permalink.
Перейдем к редактированию текста публикации. Нам
представлены основные функции работы с текстом. При-
смотревшись, станет понятно, что они дублируют функ-
ционал простого текстового редактора. Например, мы
можем выровнять текст, вставить ссылки, применить
полужирное или  курсивное начертание к  тексту и  т.д.
Иллюстрация 15 (рис. 17).

Стр. 8
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Иллюстрация 17 Иллюстрация 19

Первая кнопка — Change block type — позволяет Давайте добавим картинку к нашему посту. Для этого
изменить тип конкретного блока. Например, мы можем нажмем More Option, а затем выберем Insert Before (доба-
сделать его заголовком (Heading), списком (List), или даже вить блок до) или Insert Afer (добавить блок после). Для
превратить в цитату (Quote) (рис. 18-19). удаления блока нужно перейти к значку с тремя точками
и выбрать из списка Remove Blocks (рис. 20).

Иллюстрация 18 Иллюстрация 20

Стр. 9
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Еще один способ добавить блок — навести курсор Когда пост будет готов, можно переходить к  его на-
на границу блоков, а затем нажать + (рис. 21). стройкам. Справа от поста находятся дополнительные
функции и инструменты по управлению. Для начала рас-
смотрим блок категорий (Categories). Для удобства кон-
тент можно разбивать по определенным категориям. Сей-
час у нас всего один пост, но представьте, что их будет сто
и более. Как их различать (рис. 23)?

Иллюстрация 21

Создадим блок после основного текста и  загрузим


изображение. В окне Image нажимаем Upload и выбираем
нужный файл. Также можно загрузить нужное изображе-
ние по ссылке (Insert from URL), или перетащив выбран-
ную картинку в область окна (рис. 22).
Иллюстрация 23

Изначально нам доступна только 1 категория — Uncat-


egorised. Добавим еще одну категорию. Нажмем Add new
Category и в New Category Name прописываем ее название.
В Parent Category можно указать имя родительской катего-
рии, создав вложенные друг в друга структуры. Например,
у нас было бы две категории: Книги и Комиксы, а катего-
Иллюстрация 22 рию Комиксы мы могли бы разбить на DC и Marvel.

Стр. 10
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Создадим категорию Intro. Закрепленный за ней пост После того, как изображение загрузится, нам станут
будет отображаться на  главной странице нашего блога. доступны его свойства (Attachment details). Например, мы
Нажимаем Add new Category. можем изменить его название (Titile) или добавить опи-
Но это не все! Мы также можем добавить картинку пе- сание (Description). Добавим описание изображения в Alt
ред постом. Для этого справа в блоке Document нажимаем Text, чтобы, если изображение не прогрузится, посетите-
Featured image (рис. 24). ли сайта увидели его описание (рис. 26).

Иллюстрация 24

После этого отроется библиотека изображений (Media


Library). Тут можно выбрать предзагруженные изображе-
ния, которые хранятся на сервере. Изначально библиотека
пуста. Чтобы добавить новое изображение, нужно перета- Иллюстрация 26
щить в активную зону понравившийся рисунок (рис. 25).
Вернемся к  блоку Document. В  самом низу есть оп-
ция Allow Comments, она позволяет посетителям остав-
лять комментарии под постами. Если мы не хотим, что-
бы пользователи оставляли комментарии, нужно просто
убрать галочку (рис. 27).

Иллюстрация 25 Иллюстрация 27

Стр. 11
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Самое время перейти к  публикации поста, но перед Первый пост готов. Самое время выбрать красочную
этим давайте его просмотрим, нажимаем Preview (рис. 28). тему для нашего сайта. Перейдем в  Appearance — здесь
находятся все предустановленные темы. Для того, чтобы
добавить новую, нажимаем Add New (рис. 30).
Иллюстрация 28

Также любой пост можно превратить в черновик, на-


жав Save Draft, чтобы потом отредактировать его содер-
жимое.
Наша публикация готова! Давайте же опубликуем ее.
Нажимаем Publish и  видим окно с  настройками поста
(рис. 29). Visibility: Public означает, что страница будет до-
Иллюстрация 30
ступна все пользователям. Publish: Immediately означает,
что страница будет сразу опубликована. Чтобы опублико-
вать публикацию, нажимаем Publish.

Иллюстрация 31

Откроется список доступных тем, выберем понра-


Иллюстрация 29 вившуюся и нажмем Install. В примере мы будем исполь-

Стр. 12
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

зовать тему Roda. Чтобы посмотреть, как выглядит тема


прежде, чем устанавливать ее, нажмите Details & Preview
(рис. 31).
Все установленные темы переносятся в  «библиоте-
ку» — они не будут отображаться, пока мы не нажмем Ac-
tivate. Нужно учесть, что некоторые темы взаимодейству-
ют с определенными плагинами. Соответственно, при их
установке WordPress запросит у вас установку этих плаги-
нов. Детально тему плагинов и работу с ними мы рассмо-
трим на следующих занятиях. Сейчас просто подтвердим
их установку (рис. 32).
Иллюстрация 33

Любой сайт начинается с  логотипа. Чтобы добавить


логотип, переходим в раздел General и в блоке Upload your
logo загружаем логотип сайта. Логотип для сайта искате-
лей приключений вы найдете в дополнительных материа-
лах. Обратите внимание, все внесенные изменения сразу
же отобразятся в правом окне (рис. 34).

Иллюстрация 32

Давайте изменим тему, настроив ее под тематику сай-


та. Переходим Appearance => Theme => Customize. Это
окно настройки конкретной темы (рис. 33). Иллюстрация 34

Стр. 13
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Чтобы вернутся в меню, нажимаем стрелочку назад. Фавиконка должна быть квадратной, но, если это не
Перейдем в  раздел Site Identity. Давайте пропишем так, — WordPress предложит ее обрезать (Crop Image). Этот
заголовок сайта и  его описание. А  также разместим фа- шаг также можно пропустить (Skip Cropping) (рис. 36).
виконку — особую иконку, которая отображается рядом
с названием сайта во вкладке браузера. Нажимаем Select
Image и  выбираем понравившийся рисунок из  дополни-
Иллюстрация 36
тельных материалов (рис. 35).
В разделе Colours можно настроить цветовую схему
сайта: цвет заднего фона (Background Colour), основной
цвет (Primary color), цвет футера (Footer) и т.д. Поэкспе-
риментируйте с  разными цветами, чтобы выбрать инте-
ресное и гармоничное оформления для сайта (рис. 37).

Иллюстрация 37

Во вкладке Fonts мы можем изменить стандартный


Иллюстрация 35 шрифт темы (рис. 38).

Стр. 14
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Откроется окно создания новой страницы (рис. 40).

Иллюстрация 40
Иллюстрация 38
Пускай наша страница будет посвящена Финну — герою
Наконец, когда сайт готов, нажимаем Publish. мультсериала «Время приключений» («Adventure time»).
Учтите, каждая тема содержит множество различных Назовем страницу About Finn, загрузим картинку из  до-
настроек, а  мы рассмотрели только некоторые из  них. полнительных материалов и добавим текст про Финна. Об-
В свободное время продолжите работы над сайтом и рас- ратите внимание, мы можем задать размер изображения,
смотрите, какие еще настройки можно к нему применить. добавленного на  страницу. Для этого выделяем картинку
Не забудьте добавить еще несколько постов! и  переходим к  ее свойствам и  выбираем в  выпадающем
Давайте создадим еще одну страницу. Переходим во списке размер изображения — Large, или  прописываем
вкладку Pages и нажимаем Add New (рис. 39). размер вручную: Width => 1024, Height => 580 (рис. 41).

Иллюстрация 39 Иллюстрация 41

Стр. 15
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

После изображения добавим к странице Classic Block Помните, чтобы привлечь посетителей на сайт, нужно
(рис. 42). грамотно оформить страницы сайта, а  также регулярно
публиковать интересные и красочные посты (рис. 44).

Иллюстрация 42 Иллюстрация 44

Classic Block — это общий блок. В него можно встав- Рассмотрим примеру сайтов, созданных на WordPress.
лять текст, ссылки, картинки, списки, цитаты. Давайте на- Какие элементы сайтов вам нравятся, что вы бы взяли для
пишем в нем пару слов о самом Финне (рис. 43). своего проекта (рис. 45-46)?

Иллюстрация 43

Когда все готово, нажимаем Publish. Мы создали нашу


страницу! Иллюстрация 45

Стр. 16
Урок №1. Введение в мир веб-разработки
Глава. Введение в мир веб-разработки

Иллюстрация 46

Стр. 17
Разработка сайтов на Wordpress
Урок №1. Введение в мир веб-разработки

© Компьютерная Академия «Шаг», www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения, фрагменты которых использованы
в материале, принадлежат их законным владельцам. Фрагменты произведений используются в иллюстративных
целях в объёме, оправданном поставленной задачей, в рамках учебного процесса и в учебных целях, в соответствии
со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і суміжні права». Объём и способ цитируемых
произведений соответствует принятым нормам, не наносит ущерба нормальному использованию объектов авторского
права и не ущемляет законные интересы автора и правообладателей. Цитируемые фрагменты произведений на момент
использования не могут быть заменены альтернативными, не охраняемыми авторским правом аналогами, и как таковые
соответствуют критериям добросовестного использования и честного использования.
Все права защищены. Полное или частичное копирование материалов запрещено. Согласование использования
произведений или их фрагментов производится с авторами и правообладателями. Согласованное использование
материалов возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое использование материалов определяется
действующим законодательством Украины.

Оценить