Владимир Молочков Санкт-Петербург «БХВ-Петербург» '236 -018 М75 Молочков В. П. М75 WordPress с нуля. — СПб.: БХВ-Петербург, 2021. — 304 с.: ил. — (С нуля) Подробно рассмотрена установка и настройка WordPress на локальных серверах Denwer и OpenServer. Рассказано об установке и настройке тем (шаблонов) WordPress, методиках разработки собственных шаблонов оформления. Дана инструкция по созданию "шапки" сайта, многоуровневого меню, адаптации дизайна для компьютеров, ноутбуков и различных типов мобильных устройств. Рассматриваются наиболее популярные плагины: визуальные редакторы, галереи изображений. Даны советы по созданию сайта-визитки, блога, корпоративного портала, приводится инструкция по разработке интернет-магазина на WordPress. Отдельно рассмотрен выбор хостинга для размещения сайта и процедура его переноса с локального сервера в Интернет. От читателя не требуется наличия профессиональных знаний в сфере программирования и дизайна. Для начинающих разработчиков '236 -018 Группа подготовки издания: Руководитель проекта Зав. редакцией Компьютерная верстка Дизайн обложки Павел Шалин Екатерина Сависте Ольги Сергиенко Карины Соловьевой "БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20. © ООО "БХВ", 2021 © Оформление. ООО "БХВ-Петербург", 2021 <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> ОГЛАВЛЕНИЕ Общее представление о программе CMS WordPress ................................................ 9 Общие сведения о CMS WordPress ................................................................................................9 О преимуществах WordPress ........................................................................................................ 10 Некоторые термины ...................................................................................................................... 11 Обозначения, принятые в книге ................................................................................................... 11 ЧАСТЬ I. ЗНАКОМСТВО С ОСНОВАМИ WORDPRESS.................................... 13 . Установка локального сервера Denwer для работы с CMS .................. 15 Что такое PHP и Denwer? .............................................................................................................. 15 Установка Denwer на ОС Windows .............................................................................................. 15 Что такое MySQL, SQL и phpMyAdmin?..................................................................................... 20 Настройка Denwer (создание БД и пользователя БД) ..................................................... 21 Проверяем нашу работу ................................................................................................................ 24 Способ 1. Используем эмулятор sendmail ........................................................................ 25 Способ 2. Используем файл *.php .................................................................................... 26 Пример 1. Выполнение PHP-скрипта "Викторина" на локальном сервере Denwer ................ 26 Пример 2. Пишем PHP-скрипт сами ............................................................................................ 26 Пример 3. Проверяем работу HTML-сайта на локальном сервере Denwer .............................. 28 Как удалить Denwer? ..................................................................................................................... 28 Вопросы для самопроверки .......................................................................................................... 29 Задания ........................................................................................................................................... 29 . Установка локального Web-сервера Open Server на ПК ....................... 31 Что лучше: Denwer или Open Server? .......................................................................................... 31 Установка Open Server .................................................................................................................. 33 Проверка работоспособности Open Server .................................................................................. 34 Пример 1. Проверяем работу двух скриптов на Open Server..................................................... 35 Пример 2. Проверяем работу PHP на Open Server...................................................................... 36 Как обновить версию PHP на Open Server?................................................................................. 37 Возможные проблемы с Open Server и их решение ................................................................... 38 Решение проблемы с антивирусами и брандмауэром ..................................................... 38 Решение проблемы с прокси-сервером ............................................................................ 38 Решение проблемы с файлом hosts ................................................................................... 41 Решение проблем совместимости локального сервера и ОС Windows ......................... 42 Вопросы для самопроверки .......................................................................................................... 43 Задание ........................................................................................................................................... 43 . Краткое знакомство с PHP .......................................................................... 45 Зачем изучать PHP? ....................................................................................................................... 45 Пример 1. Условный оператор if в PHP ....................................................................................... 45 Пример 2. Цикл в PHP ................................................................................................................... 46 Пример 3. Что такое Cookie и как с ними работать в PHP? ....................................................... 47 Пример 4. Узнаем курс доллара и евро на сайте Центробанка ................................................. 49 Пример 5. Создаем динамический сайт на PHP.......................................................................... 50 Одностраничный сайт на PHP ........................................................................................... 50 Создаем блочный HTML-сайт........................................................................................... 50 Создаем блочный PHP-сайт............................................................................................... 54 Резюме ............................................................................................................................................ 56 Задание ........................................................................................................................................... 56 . Первое знакомство с WordPress ................................................................. 57 Что такое CMS? ............................................................................................................................. 57 Какие бывают CMS? Конкуренты WordPress ............................................................................. 57 Joomla или WordPress? ....................................................................................................... 57 Drupal ................................................................................................................................... 59 Почему именно WordPress? ............................................................................................... 59 Плюсы и минусы WordPress ......................................................................................................... 59 Что еще нужно знать для создания сайтов? ................................................................................ 61 HTML и CSS ....................................................................................................................... 61 JavaScript ............................................................................................................................. 62 PHP и MySQL ..................................................................................................................... 62 CMS ..................................................................................................................................... 62 Adobe Photoshop и CorelDRAW ........................................................................................ 62 Вопросы для самопроверки .......................................................................................................... 63 . Установка WordPress на локальный сервер Denwer.............................. 65 Проверка Denwer ........................................................................................................................... 65 Установка WordPress на локальный сервер Denwer ................................................................... 66 Создание базы данных .................................................................................................................. 68 Задание ........................................................................................................................................... 73 . Установка CMS WordPress на Open Server .............................................. 75 Работа с программой phpMyAdmin.............................................................................................. 75 Устанавливаем WordPress на Open Server ................................................................................... 79 Как добавить баннер в сайдбар на WordPress? ........................................................................... 83 Пример 1. Готовый баннер уже есть в Сети ................................................................................ 83 Пример 2. Размещаем свой собственный баннер ....................................................................... 85 Задание ........................................................................................................................................... 87 . Выполняем настройку консоли WordPress .............................................. 89 Пример 1. Знакомство с настройками консоли Панель администратора............................... 89 Настройка экрана................................................................................................................ 89 Настройка профиля пользователя WordPress .................................................................. 89 Как получить граватар? ..................................................................................................... 93 Общие настройки ...............................................................................................................95 Настройки чтения ............................................................................................................... 96 Настройки обсуждения ...................................................................................................... 97 Настройки медиафайлов .................................................................................................... 97 Пример 2. Базовые настройки WordPress-сайта ......................................................................... 98 Обновления ......................................................................................................................... 98 Настройка постоянных ссылок ......................................................................................... 99 Задание ......................................................................................................................................... 101 . Знакомство с плагинами ............................................................................ 103 Установка плагинов WordPress ..................................................................................................103 Пример 1. Установка плагинов методом поиска ...................................................................... 104 1.1. Ставим плагин Rus-To-Lat ........................................................................................ 104 1.2. Кнопки соцсетей для WordPress............................................................................... 106 Пример 2. Установка плагина, архив которого предварительно скачан на компьютер........ 108 Пример 3. Как настраиваются плагины? ................................................................................... 109 Пример 4. Решение проблем с установкой плагинов на Denwer............................................. 115 Задание ......................................................................................................................................... 116 ЧАСТЬ II. ТЕМЫ (ШАБЛОНЫ) WORDPRESS ................................................... 117 . О выборе темы (шаблона) для сайта ....................................................... 119 Устанавливаем тему WordPress ..................................................................................................119 Пример 1. Устанавливаем тему из библиотеки шаблонов в Интернете ................................. 120 Пример 2. Устанавливаем тему из ZIP-архива ......................................................................... 123 Как решить проблему "Архив не удалось установить"?............................................... 123 Стоит ли платить за тему WordPress? ........................................................................................ 124 Способы оценки шаблона WordPress......................................................................................... 125 Скорость загрузки сайта .................................................................................................. 125 Валидность шаблона ........................................................................................................ 127 Адаптивность шаблона .................................................................................................... 127 Пример 3. Проверка шаблона на лишние (паразитные рекламные) ссылки и их уничтожение ........................................................................................................................ 129 Пример 4. Убираем из шаблона рекламную фразу "Сайт работает на WordPress" или аналогичную ......................................................................................................................... 133 Задания ......................................................................................................................................... 134 Вопросы для самоконтроля ........................................................................................................ 134 . Настройка темы для WordPress с помощью дочерних тем ............... 135 Зачем нужно создавать дочернюю тему? .................................................................................. 135 Плагин Child Theme Configuration .............................................................................................135 Задание ......................................................................................................................................... 143 . Способы создания логотипа и шапки для WordPress-сайта ............. 145 Пример 1. Создание шапки для сайта в программе XHeader .................................................. 145 Пример 2. Меняем шапку сайта на WordPress .......................................................................... 151 Пример 3. Шаблон с логотипом (logo) ...................................................................................... 155 Несколько советов по созданию "правильной" шапки сайта .................................................. 158 Задание ......................................................................................................................................... 159 . Работа с меню сайта в WordPress ........................................................... 161 Выбор темы для создания меню .................................................................................................161 Окно управления меню ............................................................................................................... 162 Вводим название нового меню ...................................................................................................162 Добавление пунктов меню .......................................................................................................... 163 Формируем структуру пунктов меню сайта .............................................................................. 164 Создаем все страницы для меню сайта ...................................................................................... 164 О выборе области темы ............................................................................................................... 167 Задание ......................................................................................................................................... 167 . Создаем шаблон WordPress в Artisteer .................................................. 169 Плюсы и минусы Artisteer........................................................................................................... 169 Приемы редактирования шаблона в программе Artisteer ........................................................ 169 Выбираем дизайн ............................................................................................................. 171 Редактируем шаблон ........................................................................................................ 172 Меняем шапку на свою .................................................................................................... 172 Пример работы над шаблоном сайта для агентства недвижимости ....................................... 175 Выбираем и редактируем шаблон ................................................................................... 175 Задание цветовой схемы шаблона .................................................................................. 177 Как менять цвета в шаблоне (способ 1) ..................................................................................... 179 Меняем цвет любых элементов шаблона ....................................................................... 179 Как менять цвета в шаблоне (способ 2) ..................................................................................... 181 Экспорт шаблона Artisteer в тему WordPress ............................................................................ 182 Установка шаблона Artisteer на локальный сервер с движком WordPress ............................. 182 Резюме .......................................................................................................................................... 184 Задание ......................................................................................................................................... 184 . Создание адаптивного WordPress-шаблона в программе TemplateToaster .................................................................................... 185 Первый запуск программы ......................................................................................................... 186 Выбор нового шаблона ............................................................................................................... 188 Что такое адаптивный Web-дизайн и зачем он нужен? ........................................................... 189 Адаптивный дизайн в генераторе шаблонов TemplateToaster ................................................. 190 Экспорт шаблона ......................................................................................................................... 192 Задание ......................................................................................................................................... 194 ЧАСТЬ III. ПОЛЕЗНЫЕ ПЛАГИНЫ ДЛЯ WORDPRESS ................................. 195 . Плагины для создания форм отзывов ................................................... 197 Пример 1. Плагин отзывов клиентов WP Customer Reviews ................................................... 197 Настройка плагина ........................................................................................................... 199 Пример 2. Контактная форма обратной связи Usernoise.......................................................... 202 Задание ......................................................................................................................................... 204 . Плагины — визуальные редакторы ...................................................... 205 Плагин Elementor ......................................................................................................................... 205 Виджеты Elementor .......................................................................................................... 207 Добавление виджетов ...................................................................................................... 209 Настройка виджетов ......................................................................................................... 209 Проверка адаптивности сайта с помощью Elementor.................................................... 210 Плагин Mammoth.docx converter ................................................................................................212 Задания ......................................................................................................................................... 214 . Создаем галерею изображений................................................................ 215 Пример 1. Плагин NextGen Gallery ............................................................................................ 215 Пример 2. Плагин Gallery by Supsystic ...................................................................................... 222 Пример 3. Галерея без использования плагинов ...................................................................... 225 Задание ......................................................................................................................................... 229 . Создаем интернет-магазин ...................................................................... 231 О плагине WooCommerce ........................................................................................................... 231 Преимущества ..................................................................................................................231 Недостатки ........................................................................................................................ 231 Как установить и настроить WooCommerce ............................................................................. 231 Еще раз о настройках плагина .................................................................................................... 236 Как создать простой товар в WooCommerce ............................................................................. 238 Категории товаров ....................................................................................................................... 240 Настройка темы Storefront (Витрина) ........................................................................................ 241 Свойства сайта .................................................................................................................. 241 Заголовок........................................................................................................................... 242 Подвал ............................................................................................................................... 243 Фон .................................................................................................................................... 243 Типографика ..................................................................................................................... 245 Кнопки ............................................................................................................................... 245 Разметка ............................................................................................................................ 245 Меню ................................................................................................................................. 245 Задаем главную страницу сайта ...................................................................................... 246 Текстовый контент сайта ................................................................................................. 247 Магазин готов .............................................................................................................................. 247 Задание ......................................................................................................................................... 248 . Шесть полезных плагинов ....................................................................... 249 Contact Form 7 — форма обратной связи .................................................................................. 249 Download Manager ....................................................................................................................... 253 Logaster Logo Generator ............................................................................................................... 255 WP Smush и WP Smush PRO.......................................................................................................258 Akismet Anti-Spam ....................................................................................................................... 260 Duplicate Post ................................................................................................................................ 264 Как создать дубликат? ..................................................................................................... 265 Резюме .......................................................................................................................................... 267 ЧАСТЬ IV. ХОСТИНГ ............................................................................................... 269 . Установка WordPress на серверах в Интернете .................................. 271 Получаем хостинг ........................................................................................................................ 271 Что такое SSH-доступ и зачем он нам нужен?.......................................................................... 274 Получаем доменное имя сайта ...................................................................................................274 Установка WordPress на хостинг................................................................................................274 Пример установки счетчика на сайт .......................................................................................... 279 Задание ......................................................................................................................................... 283 . Миграция сайта ......................................................................................... 285 Этап 1. Операции на локальном Web-сервере .......................................................................... 285 Этап 2. Операции на глобальном Web-сервере ........................................................................ 288 Задание ......................................................................................................................................... 291 ПРИЛОЖЕНИЯ........................................................................................................... 295 Приложение 1. Словарь Web-мастера (глоссарий по WordPress) ..................... 297 Русский глоссарий ....................................................................................................................... 297 Английский глоссарий ................................................................................................................ 299 Приложение 2. Описание электронного архива .................................................... 303 <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> <0> ОБЩЕЕ ПРЕДСТАВЛЕНИЕ О ПРОГРАММЕ CMS WORDPRESS В этом разделе приведены общие сведения о программе WordPress и об используемых в книге обозначениях. Книга посвящена технологии разработки сайтов на базе самой популярной системы управления контентом (CMS) — WordPress версии 5.хх. Программа WordPress — система управления содержимым сайта с открытым исходным кодом. Программный продукт написан на языке PHP; сервер базы данных — MySQL. Издание ориентировано на рядового пользователя, имеющего базовые навыки работы на ПК. Для демонстрации излагаемого материала и практического закрепления навыков приведены примеры и иллюстрации, касающиеся различных аспектов создания Web-сайтов. Помимо самой CMS на страницах книги подробно рассматриваются наиболее популярные плагины, расширяющие базовый набор функций WordPress. На примерах показан не только процесс создания сайтов, но и хостинг динамических сайтов (методы их размещения в Интернете). В книге описаны два локальных сервера: Denwer и OpenServer. По языку PHP приведен только самый необходимый минимум сведений. Скрипты даны лишь для проверки работоспособности локального сервера и для понимания общей концепции работы с WordPress. Главная идея книги, отличающая ее от конкурирующих изданий: WordPress — это подходящий "движок" как для создания простых сайтов (блогов, сайтов-визиток), так и достаточно сложных (новостных, интернет-магазинов) с большим ассортиментом различных функций. Много полезного содержат практические примеры, представляющие собой ряд готовых решений, предназначенных для конкретных ситуаций. Возможно, что некоторые примеры из книги покажутся читателю знакомыми. Однако зачастую задача одна, а ее решение может быть разным, поскольку каждый автор старается внести в алгоритм выполнения примеров свои новаторские идеи. Общие сведения о CMS WordPress WordPress представляет собой систему управления сайтом. Как написано на сайте производителя: "WordPress родился из стремления к элегантной, хорошо структурированной личной издательской системе, построенной на PHP и MySQL и лицен-