1.1 CMS WordPress. Настройка среды разработки WordPress

1 Система управления содержимым сайта (Content Manager Systems)

 

Система управления содержимым (контентом) (Content management system, CMS) — информационная система, используемая для создания, редактирования и управления сайтом.

Также CMS называют:

  • системой управления сайтом
  • движком для сайта

CMS представляет собой заготовку-каркас сайта с панелью управления. 

С помощью CMS можно:

  • быстро создавать сайты
  • подобирать и настраивать внешний вид и функционал сайта
  • управлять содержимым сайта

Основные функции CMS:

  • Предоставление инструментов для создания контента сайта, а также для работы над ним пользователей с разными правами доступа (администратора,  редактора, автора и др.).
  • Публикация материалов, в том числе с отложенной датой.
  • Управление контентом сайта: хранение в базе данных опубликованных материалов, а также их предыдущих версий с возможностью восстановления (контроль версий), соблюдение режима доступа пользователей  и т. д.
  • Представление информации на сайте в виде, удобном для навигации, поиска.

Большинство современных CMS имеют модульную архитектуру, что позволяет администратору самому выбирать и настраивать те компоненты, которые ему необходимы. Например:

  • динамическое меню,
  • блог (лента постов, или записей),
  • статические страницы
  • поиск по сайту,
  • доступ к архивам постов и т. д.

Обычно CMS также имеют такие опции:

  • Темы (шаблоны) позволяют легко изменять внешний вид сайта.
  • Редактировать контент легко благодаря встроенным редакторам. От пользователя не требуется знание языков программирования и разметки.
  • Можно расширять функциональность сайта за счет установки дополнительных модулей и плагинов.
  • Есть опция предварительный просмотр, благодаря которому пользователь может увидеть создаваемый контент до публикации его на сайте.
  • Автоматическое обновление и соответствие веб стандартам.
  • Возможность создания рубрик и тем, построения иерархии конттента.
  • Управление пользователями с различным уровнем доступа.

Существует множество различных CMS.

Самой распространенной из них является CMS WordPress.

2 Система управления контентом WordPress

WordPress — свободно распространяемая система управления содержимым сайта с открытым исходным кодом. Написана на PHP, в качестве сервера базы данных использует MySQL. Сфера применения — от простых блогов до интернет-магазинов, систем бронирования и систем обучения. Встроенная система тем и плагинов вместе с гибкой архитектурой позволяет создавать практически любые проекты.

На данный момент CMS WordPress является самой распространенной системой управления контентом. По данным Usage statistics of content management systems (W3Techs — World Wide Web Technology Surveys) по использованию в мире CMS WordPress стоит на первом месте и занимает к 2021 году 42.5% от всех сайтов и 65.2% среди всех CMS. 

Основные возможности CMS WordPress:

  • Удобная административная панель.
  • Простота установки и настройки.
  • Легкое создание и публикация записей.
  • Возможность запланировать публикацию записи на определенное время.
  • Большое количество бесплатных тем (шаблонов) и плагинов, позволяющих изменить внешний вид и расширить функциональность сайта.
  • Возможность редактирования тем и плагинов, а также создания собственных.
  • Система оптимизирована для поисковиков (SEO).
  • Наличие ЧПУ (человеко-понятный URL).
  • WordPress переведен практически на все языки мира.
  • Рубрики, теги, комментирование и многое другое.

3. Редактор Visual Studio Code

Visual Studio Code — кроссплатформенный редактор кода, созданный в Microsoft.

3.1 Установка редактора Visual Studio Code

  • Скачать инсталляцию Visual Studio Code с сайта https://code.visualstudio.com (можно выбрать вариант User Installer)
  • Запустить скачанный файл VSCodeUserSetup-x64-1.49.2.exe
  • Принять соглашения
  • Проставить галочки и нажать кнопку «Далее»:

  • Нажать кнопку Install (Установить):

3.2 Расширения (плагины) VS Code

Расширить функциональность VS Code можно с помощью расширений. Некоторые популярные расширения требуют установки программной платформы Node.js  (Recommended For Most Users).

Рекомендуемые плагины: 

  • AutoFileName — автодополние пути
  • open in browser — открыть в браузере по выбору
  • Auto Rename Tag — переименование парных тегов
  • Prettier — переформатированный вариант кода, выглядящего так, как он должен выглядеть в соответствии с заданными правилами
  • Path Intellisense — автодополнение пути к файлу
  • Russian Language Pack — для установки русского языка:

Для выбора языка нажмите клавиши CTRL+SHIFT+P, чтобы открыть Палитру команд, и начните вводить «config», далее нужно выбрать пункт Configure Display Language, далее — выбрать язык.

3. Локальный сервер XAMPP

XAMPP – кроссплатформенная сборка веб-сервера.

3.1 Установка локального сервера XAMPP

Скачать инсталляцию XAMPP, можно с официального сайта по адресу https://www.apachefriends.org/download.html (например, версию 7.4.10 / PHP 7.4.6 — файл xampp-windows-x64-7.4.10-0-VC15-installer.exe).

После запуска инсталляции  в открывшемся диалоговом окне нужно нажать на кнопку «Run». На появившемся диалоговом окне  нажать на кнопку Next. Минимальный необходимый набор сервисов — Apache, MySQL, PHP и PHPMyAdmin.

 Далее — нужно нажать на кнопку Next. После этого в диалоговом окне можно установить путь, по которому должен будет храниться каталог со всеми файлами сервера XAMPP. По умолчанию чаще всего это путь C://xampp. После этого нажмите «Install».

Во время установки может появиться окно предупреждения о безопасности Windows, нужно нажать кнопку «Разрешить доступ».

Также может появиться предупреждение

Это предупреждение от контроля доступа пользователей (User Account Control) о том, что не рекомендуется устанавливать XAMPP в C:/Program files, это предупреждение можно проигнорировать.

Также некоторые антивирусные программы могут вызывать проблемы при установке XAMPP, в этом случае их рекомендуется деактивировать.

После раскрытия файлов должно появится диалоговое окно, на котором нужно нажать на кнопку «Finish». На следующем диалоговом окне следует нажать кнопку «Yes».

После этого должна запуститься контрольная панель XAMPP, отображающая состояние запущенных сервисов программы. Возле каждого из сервисов расположена кнопка с предложением изменить состояние данной программы ( «Start» обеспечивает ее запуск,  «Stop» служит для ее остановки). Необходимо, чтобы были запущены серверы Apache и MySQL.

Далее следует открыть браузер и написать в адресной строке браузера «localhost», затем нажать «Enter». Перенаправление на служебную страницу программы XAMPP означает, что XAMPP успешно установлен.

Сервер Apache по умолчанию будет установлен как сервис (служба) Windows на порт 80. При этом необходимо выйти из программ, занимающих этот порт (например, Skype). В случае конфликта можно изменить порт 80 на 8080 (в файле c:\xampp\apache\conf\httpd.conf заменить строчку Listen 80 на строчку Listen 8080) и перезапустить сервер Apache. В этом случае в адресной строке нужно задавать адрес «localhost:8080».

Для повторного запуска сервера XAMPP после перезагрузки компьютера необходимо зайти в каталог XAMPP, путь к которому был прописан при установке (например, C ://xampp) и запустить контрольную панель «XAMPP control panel» (файл xampp-control.exe).

4 Установка WordPress на локальный сервер XAMPP 

Для установки CMS WordPress на XAMPP необходимо произвести следующие действия.

  • Скачать архив с локализацией WordPress с официального сайта https://ru.wordpress.org/download/ (например, wordpress-5.5.1-ru_RU.zip) и расположить его в папке C ://xampp/htdocs.
  • Разархивировать проект. Должна появиться новая папка wordpress-5.5.1-ru_RU, в которой, в свою очередь, находится папка wordpress.
  • Папку wordpress нужно перенести в папку C ://xampp/htdocs, в которой будет храниться локализация будущего проекта. Например, папка может называться landing.
  • В папке landing расположены три подкаталога папки wordpress – [wp-admin], [wp-content] и [wp-includes], а также другие файлы из папки архива.
  • Далее следует создать на XAMPP новую базу данных для своего проекта. Для этого нужно набрать в адресной строке браузера localhost (или localhost:8080), на странице XAMPP выбрать пункт вертикального меню в левой части окна PhpMyAdmin.
  • В PHPMyAdmin создайте базу данных landing (на локальном сервере удобно синхронизировать имена базы данных и каталога с локализацией WordPress). Для этого на левой панели выберите пункт New, в окошке DataBase name укажите имя базы данных и выберите из выпадающего списка пункт для указания кодировки utf8_general_ci.
  • Теперь нужно созданную базу данных подключить к WordPress, для этого набрать в браузере адрес
localhost/landing/

где landing — каталог с локализацией WordPress.

В случае, если порт был изменен на 8080, нужно указать адрес

localhost:8080/landing/

Этот путь впоследствии будет соответствовать пути к стартовой странице данного сайта. Однако, поскольку на данный момент база данных не настроена, а также не сгенерированы все необходимые файлы, произойдет временное перенаправление на страницу настроек.

Появится приветственная страница WordPress.

Нажмите кнопку «Вперед». Затем введите:

a) Имя базы данных — landing

b) Имя пользователя — root

c) Пароль – пустой пароль (для докальной базы данных)

d) Сервер базы данных – в данном случае оставляем localhost

e) Префикс таблиц можно оставить по умолчанию

 

Нажмите на появившейся странице кнопку «Отправить».

На следующей странице – на кнопку «Запустить установку».

На следующей странице наберите:

  • Название сайта (возможно на русском языке)
  • Имя пользователя – например, admin
  • Пароль – сгенерированный, или введите свой (обязательно сохранить!)
  • Ваш e-mail
  • Видимость для поисковых систем – для сайта в режиме отладки нажать «Попросить поисковые системы не индексировать сайт»

Нажмите кнопку «Установить WordPress»

  • В появившемся окне «Поздравляем! WordPress установлен. Желаем успешной работы!» нажмите на кнопку «Войти».
  • В открывшемся окне введите в поля логин (имя пользователя) и пароль, указанные на предыдущем шаге. Вы окажетесь в панели управления (консоли) WordPress.

Если набрать в окне браузера адрес создаваемого сайта

localhost/landing/

можно будет увидеть сайт с дизайном и контентом по умолчанию.

В панели управления перейти на сайт можно также, нажав на ссылку с названием сайта в левом верхнем углу.

Войти опять в панель управления можно, набрав в адресной строке браузера:

адрес_сайта/wp-admin

Например:

localhost/landing/wp-admin

Если Ваш браузер «помнит» о Вашем аккаунте, в верхней части страницы с Вашим сайтом находится меню, с помощью которого также можно быстро перейти в панель управления (консоль) сайта.