Рассказано о выборе хостинга и регистрации домена для сайта. Подробно рассмотрена установка и настройка WordPress. Рассказано об установке и настройке тем (шаблонов). Дана инструкция по созданию «шапки» сайта, многоуровневого меню, адаптации дизайна для компьютеров, ноутбуков и различных типов мобильных устройств. Рассматриваются наиболее популярные плагины, способы публикации на сайте видеороликов, аудиофайлов, опросов. Описаны способы обработки графики. Приведена подробная инструкция по созданию лендинга с использованием конструктора Elementor. От читателя не требуется наличия профессиональных знаний в сфере программирования и дизайна.
Для начинающих разработчиков
Создай свой сайт с WordPress и Elementor!
WordPress — бесплатная система управления содержимым сайта с открытым исходным кодом. С помощью WordPress можно создавать как простые сайты «визитки», так и сложные проекты — блоги, корпоративные порталы, интернет-магазины.
Прочитав книгу, вы узнаете, как установить и настроить WordPress, как выбрать подходящий хостинг и самостоятельно зарегистрировать домен. Вы научитесь создавать сайты с нуля, адаптированные для компьютеров, ноутбуков и различных типов мобильных устройств. С помощью конструктора Elementor вы сможете разработать лендинг с современным адаптивным дизайном. Книга поможет выбрать подходящий шаблон оформления, подготовить необходимые графические элементы и иллюстрации. Используя плагины, вы превратите ваш сайт в популярный блог или корпоративный портал.
Эта книга поможет вам с нуля построить свой первый веб-сайт на WordPress и Elementor без знаний программирования и навыков дизайна, даже если до этого вы никогда не занимались веб-разработкой.
Вы узнаете, как:
- выбрать хостинг для сайта и зарегистрировать домен,
- самостоятельно установить и настроить WordPress,
- создать современный веб-сайт,
- подключить шаблоны оформления,
- создать лендинг с адаптивным дизайном,
- настроить необходимые для вашего сайта плагины,
- создать элементы графического оформления для сайта,
- разработать современный дизайн одностраничного сайта с использованием конструктора Elementor.
Предисловие. 9
Об этой книге. 9
История WordPress. 11
Почему стоит делать сайты на WordPress?. 12
Используемые в книге обозначения. 13
Глава 1. Домен и хостинг. 15
Основные понятия. 15
Сайт. 15
Хостинг. 15
Домен. 16
Покупка домена и хостинга для сайта. 17
Пример настройки службы DNS. 22
Резюме. 24
Глава 2. Создаем сайт на WordPress. 25
О бесплатном хостинге. 25
Пример 1. Бесплатный хостинг на Sprinthost.ru. 26
Шаг 1: регистрация. 26
Шаг 2: изучаем панель управления хостингом.. 27
Шаг 3: установка WordPress. 28
Пример 2. Бесплатное создание сайта на хостинге Beget 31
Шаг 1: получаем доступ на хостинг. 31
Шаг 2: устанавливаем на хостинг WordPress. 32
Запуск сайта. 33
Пример 3. Платное создание сайта на хостинге Timeweb. 35
Шаг 1: регистрация и покупка хостинга на Timeweb. 35
Шаг 2: покупаем домен на Timeweb. 39
Шаг 3: чистим хостинг. 40
Шаг 4: установка WP на хостинг Timeweb. 40
В чем разница двух панелей управления?. 42
Кодекс веб-мастера. 43
Глава 3. Первичные настройки WP-сайта после установки на хостинг. 45
Делаем все востребованные обновления. 45
Обновление версии PHP. 46
Настройка консоли сайта. 47
Раздел Общие настройки. 48
Раздел Чтение (главной страницы) 49
Раздел Постоянные ссылки. 50
Раздел Обсуждения. 51
Первые плагины.. 51
Латинизация ссылок: плагин Rus-To-Lat 51
Делаем ссылки короткими: плагин Bring Back the Get Shortlink Button. 54
Создаем заглушку: плагин WP Maintenance Mode. 55
Исключаем спам на своем сайте: плагин Akismet Spam Protection. 56
Глава 4. Выбор и установка темы.. 61
Пример установки темы через поиск. 61
Пример установки темы из ZIP-архива. 62
Замена темы.. 62
Структура темы WordPress. 63
Удаление лишних записей и страниц, присутствующих в теме по умолчанию.. 64
Проверка темы на паразитные ссылки: плагин Theme Authenticity Checker. 66
Граватар — аватар для сайта. 67
Фавикон — значок сайта. 70
Установка фавикона на WP-сайт с помощью плагина
Favicon by RealFaviconGenerator. 74
Логотип. 75
Установка фона сайта. 78
Глава 5. Шапка и подвал сайта. 79
Шапка сайта. 79
Пример создания шапки в программе XHeader. 80
Добавление шапки на сайт. 84
Пример оформления шапки сайта в теме Astra. 84
Добавим на шапку свои соцсети. 85
Добавим на шапку свою почту. 87
Остальные настройки шапки. 88
Корректировка вида шапки для показа сайта на смартфоне. 89
Подвал сайта. 90
Содержание подвала сайта. 91
Советы.. 92
Пример оформления подвала сайта в теме Astra. 92
Редактируем нижний колонтитул: плагин Remove Footer Credit 94
Использование пространства подвала: плагин Podamibe
Simple Footer Widget Area. 96
Глава 6. Создание страниц сайта. Виджеты.. 97
Создаем обязательные страницы.. 97
Колонки на странице. 98
Виджеты.. 98
Настройка меню: плагин Simple page ordering. 101
HTML-карта сайта: плагин WP DS Blog Map. 102
Защита страниц сайта паролем.. 104
Рубрики (категории) и метки. 106
Создание рубрик. 106
Создание меток. 107
Создание записей. 108
Кнопка Наверх. 109
Плагин jQuery Smooth Scroll 109
Плагин WPFront Scroll Top. 110
Советы по структуре сайта. 111
Глава 7. Форма обратной связи. Создание кнопок. 113
Создание формы Контакты.. 113
Пример 1: плагин Contact Form by BestWebSoft 113
Настройки формы.. 115
Пример 2: плагин Contact Form 7. 117
Создание кнопки. 117
Ссылка на сайте на номер телефона, Skype и отправку СМС.. 119
Глава 8. Меню сайта. Политика конфиденциальности. 121
Создание меню.. 121
Оформление в меню главной страницы сайта. 123
Пример настройки вида меню для темы Astra на ПК.. 124
Пример настройки вида меню для темы Astra на смартфоне. 125
Политика конфиденциальности. 127
Создание политики конфиденциальности. 127
Исключаем из меню соглашение об обработке персональных данных. 130
Глава 9. Полезные плагины. Приемы работы с сайтом.. 135
Защита текста от копирования: плагин WP-CopyProtect 135
Оглавление: плагин Table of Contents Plus (TOC+) 136
Защита сайта от взлома: плагин Limit Login Attempts. 137
Как опубликовать на сайте видео?. 139
Берем видео с YouTube. 139
Способ 1: использование блока HTML. 139
Способ 2: использование блока YouTube. 141
Добавляем на сайт свое видео. 142
Публикуем на сайте звуковые (аудио) файлы.. 143
Публикация неуникального контента: плагин Yoast SEO.. 143
Опрос: плагин WP-Polls. 144
Выводим опрос на странице. 144
Размещаем опрос в сайдбаре. 146
Организация скачивания файла с сайта. 147
Установка цепочки «Хлебные крошки»:
плагины Head, Footer and Post Injections и Flexy Breadcrumb. 149
Глава 10. Наполнение сайта контентом.. 155
Блочный редактор контента Gutenberg. 155
Изменение размера шрифта в редакторе Gutenberg. 160
Классический редактор WordPress. 162
Плагин Classic Editor. 162
Текстовый редактор Advanced Editor Tools. 162
Изменение страниц WordPress на записи и обратно. 164
Создание гиперссылок. 165
Создание ссылки на файл. 166
Вставка баннера на сайт. 167
Загрузка в WordPress PDF-файлов. 168
Скриншот страниц сайта. 170
Глава 11. Работаем с изображениями. 173
Размер изображения. 173
Количество изображений на странице. 173
Правильно называем картинку для сайта. 173
Уменьшение веса картинок. 174
Сервис уменьшения веса изображений https://tinypng.com/ 174
Сжатие изображений: плагин EWWW Image Optimiser. 174
Графический редактор vistacreate. 177
Сервис работы с графикой Сanva. 178
Создание электронной подписи: сервис Signature Generator. 179
Настройка изображений в статьях WordPress. 180
Миниатюра статьи. 181
Грамотная загрузка изображений на сайт. 182
Защита изображений на сайте: плагин водяного знака Image Watermark. 185
Поиск изображений без авторских прав. 188
Ищем анимацию для сайта. 191
Создание слайдера: плагин Smart Slider 3. 194
Публикация слайдера. 199
Глава 12. Сайт на поддомене. 201
Создание поддомена 3-го уровня. 201
Глава 13. Elementor — конструктор лендингов. 207
Чем лендинг отличается от сайта?. 207
Установка Elementor. 209
Практический пример: первый экран лендинга. 210
Создание разделителя между экранами. 215
Добавление анимации. 217
Второй экран лендинга. 218
Третий экран лендинга. 221
Четвертый экран лендинга. 222
Пятый экран лендинга. 224
Шестой экран с формой сообщения от посетителя. 225
Настройка отступов. 226
О работе с графикой. 228
Глава 14. Elementor: инструменты и приемы работы.. 231
Адаптивность лендинга. 231
Включение лендинга в меню сайта. 234
Что дальше?. 234
Кнопка. 235
Блок Прогресс. 235
Динамичный фон. 236
Работа с шаблонами (темами) 238
Если вы случайно что-то нужное удалили… 240
Если лендинг «глючит» (о плохих особенностях Elementor) 241
Инструмент Навигатор. 241
Поиск виджетов (строка поиска Finder) 241
О шрифтах. 242
Стоит ли использовать Elementor PRO?. 243
Генерируем «рыбу» из текста. 244
Бесплатные изображения для лендинга. 245
Ленивая загрузка изображений. 246
Плагин a3 Lazy Load. 246
Плагин Smush — Lazy Load Images, Optimize & Compress Images. 248
Глава 15. Пример создания на Elementor сайта-визитки. 249
Начинаем работу: первый экран сайта-визитки. 249
Тиражирование экранов. 251
Высота макета. Настройка размеров изображения в секции. 252
Разделитель. 254
Положение объекта в секции. 254
Цвет кнопки. 255
Второй экран сайта-визитки. 256
Третий экран сайта-визитки. 257
Четвертый экран сайта-визитки. 258
Пятый экран сайта-визитки: спойлеры и аккордеоны.. 261
Шестой экран сайта-визитки. 262
Подключение меню сайта к Elementor 264
Ставим якорные ссылки. 265
Экран Наши услуги. 266
Шапка лендинга. 267
Якоря для меню шапки. 267
Соцсети. 269
Проверяем адаптивность. 271
Elementor: резюме. 271
Глава 16. Taplink — сервис мгновенного создания лендинга. 273
Предварительная информация. 273
Регистрация. 273
Создание сайта. 277
Создание ссылок. 279
Приложение. Глоссарий. 283
Предметный указатель. 287
Владимир Петрович Молочков — кандидат педагогических наук, преподаватель высшей квалификационной категории Политехнического колледжа Новгородского госуниверситета им. Ярослава Мудрого. Автор 18 книг по компьютерной тематике и более 200 статей в СМИ.
