WordPress – самая популярная в мире CMS, которую используют для создания интернет-ресурсов. В этой статье мы разберем создание простого сайта на WordPress, что позволит Вам начать разрабатывать собственные проекты.

Выбор места хранения интернет-сайта и установка движка

Перед тем, как начать работу над созданием интернет-ресурса, для начала требуется выбрать где будущий веб-сайт будет хранится. И в соответствии от выбора, процесс установки WordPress будет происходить по-разному. Существует 2 варианта:

• Хостинг (платный или бесплатный);
• Локальный сервер.

При установке на хостинг действия будут следующими:

1. Регистрируемся на официальном сайте хостинга. Мы будем работать с хостингом https://www.ukraine.com.ua/, но работа на других хостингах будет похожей.
2. После регистрации в зависимости от выбора тарифа будет предложено количество возможных веб-ресурсов.
   

   Важно! После регистрации будет доступно 30-дневный тестовый период для оценки работы хостинг-провайдера. Этого времени достаточно чтобы разработать сайт, запустить его и оценить работоспособность. При этом не обязательно покупать домен. На время тестового периода можно воспользоваться сервисным адресом сайта.

3. Далее существует 2 варианта установки движка: автоматический и ручной:
   1. Если использовать автоматический вариант, то последовательность будет следующая:
      1. Выбираем пункт «Установка CMS» (на других хостингах название может быть другое).

         

      2. В открывшемся окне выбираем «WordPress».

         

      3. Далее открывается окно непосредственной установки. Здесь указана версия движка. Часто она отличается от версии на официальном сайте, но переживать не стоит. Часто хостинги предлагают к установке последние стабильные версии движков, в то время как на официальных сайтах указывается последняя разработанная версия платформы. В открывшейся форме заполняем все строчки. Сайт и БД создаются при регистрации. Как это сделать описано в разделе «FAQ» на веб-сайте хостинга, поэтому описывать этот процесс в статье не будем. В пункте «Site name» указываем название будущего интернет-ресурса («Первый сайт» и т.п.). По умолчанию устанавливается английская локализация движка, но для понятности установим русский WordPress. Обязательно соглашаемся с лицензией и очищаем папку сайта и указанную БД чтобы позже не возникло проблем. В результате должно получится следующее:

         

      4. Дальше нажимаем «Установить» и дожидаемся завершения автоматической установки:

         

      5. Сайт успешно установлен и готов к работе! Если забыли, то нажатию на шестеренку возле столбца «Настройки» можно увидеть детали установки: логин и пароль, почту, название сайта и язык интерфейса.

         

   2. При ручной установке список действий будет немного отличаться от автоматического варианта:
      1. Для начала требуется скачать последнюю версию WordPress из официального сайта платформы. Если желаете скачать сразу русскоязычный движок, то переходите по ссылке https://ru.wordpress.org/download/. В случае если требуется английская локализация платформы, то она расположена по адресу https://wordpress.org/download/. На момент написания статьи доступна версия WordPress 5.4.2. Для загрузки движок предлагается в двух архивах. Первый – классический .zip-архив для развертывания на собственном локальном сервере. Мы о нём поговорим позже. И архив .tar.gz – для развертывания на хостинге. Его и скачиваем.

         

         Важно! На хостинге для автоматической установки версия движка может отличаться от представленной на официальном сайте платформы, как в нашем случае. Это случается потому, что хостинги предлагают только последние работоспособные варианты CMS, но это не означает что на официальном интернет-ресурсе движок не работает. Просто его пока протестировала малая аудитория пользователей. Как только он будет протестирован достаточным количеством юзеров, релиз обновят для автоматической установки и на хостингах.

      2. После скачивания архива на хостинге переходим в раздел «Файл-менеджер».

         

      3. Среди списка ищем адрес будущего интернет-портала, переходим во внутреннюю папку «www» и удаляем все имеющееся там файлы и папки.

         

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

         

      5. Файлы движка на хостинге, переходим к непосредственной установки. Для этого переходим по адресу разрабатываемого интернет-сайта. Если его пока нет, но существует сервисный адрес, то переходим по нему (как его найти смотрите инструкции Вашего хостинга). В результате на экране будет следующая информация:

         

      6. После нажатия «Вперёд!» откроется форма для указания доступа к БД, в которой будет хранится контент портала:

         

      7. Информацию для заполнения первых четырех строк находится в разделе «Базы данных» хостинга. Блок «Префикс таблиц» можно оставить как есть, но для улучшения безопасности его стоит изменить по своему усмотрению. Главное использовать латинские символы и после оставить знак «_» как в примере по умолчанию. Так как это учебный вариант установки, то префикс оставим прежним.

         

      8. Если все правильно заполнено и связь с БД установлена, то после нажатия «Отправить» будет следующее уведомление:

         

      9. После подтверждения запуска установки открывается страница с информацией о самом будущем интернет-ресурсе:

         

      10. Заполняем все поля по своему усмотрению и ставим галочку возле пункта «Попросить поисковые системы не индексировать сайт». Это делается для того, чтобы портал не попал в поиск до того, как будет готов к работе полностью. Позже мы эту функцию включим иначе ресурс так и не получит посетителей из поиска.
      11. По завершению установки появится окно об успешности и ссылкой для перехода в администраторскую панель. WordPress установлен!

С установкой движка на хостинг разобрались. Дальше разберемся как это сделать на локальный сервер.

Создано много разных локальных веб-серверов, но в этой статье мы рассмотрим «Denwer». Это мощный инструмент, имеющий в своем функционале все что требуется для работы интернет-сайта включая поддержку PHP, CSS и JavaScript. Его возможно скачать с официального сайта http://www.denwer.ru/. На момент написания статьи возможно скачать версию «Денвер 3».

Чтобы установить локальный сервер к себе на компьютер делаем следующее:

• Для начала закрываем все открытые браузеры. Это требуется для корректной установки программы.
• Далее запускаем скачанный файл, подтверждаем, что доверяем программе и соглашаемся с установкой базового пакета.

• После того как распаковка Денвера завершится, откроется браузер с уведомлением об установке программы на компьютер. Его также закрываем для продолжения установки.

• Затем выполняем команду «Enter», которые предлагает инсталятор.

• Когда инсталятор предложит указать букву локального диска, где будет расположена программа, укажите действительную букву иначе программа не сможет завершить установку. Если желаете сохранить все будущие наработки даже после «сноса» ОС, то лучше выбрать диск с буквой «D» или любой другой где имеется свободное место. Мы установим в данном случае на диск «D», и укажем название директории «D:\WebServers» при запросе.

• Дальше подтверждаем создание указанной папки на локальном диске с помощью команды «y», соглашаемся с созданием нового диска, который будет считаться диском локального сервера. В появившейся строке запроса указываем букву нового диска. Она не должна повторять букву уже существующих дисков. Назовем её «A», нажимаем «Enter» и соглашаемся с копированием файлов в директорию «D:\WebServers».

• Дальше выбираем как будет запускаться «Денвер». Если не планируется работа с локальным сервером каждый день, то лучше поставить «2» и соглашаемся на создание ярлыков на рабочем столе.

• После завершения установки запустится браузер с соответственным уведомлением.

• Теперь запускаем программу с помощью ярлыка «Start Denwer»

Итак, в случае если желаете работать с будущим интернет-ресурсом на локальном сервере, требуется сделать следующие шаги:

1. Переходим на появившейся новый локальный диск. В нашем случае это диск А.

1. Дальше переходим в папку «home» и создаем внутри папку с названием будущего интернет-сайта. Для примера, сайт назовем «test-wordpress.com».

1. После того как папка создана перезагружаем сервер с помощью иконки «Restart Denwer», которая размещена на рабочем столе.
2. Папка с сайтом создана, но для того чтобы проверить все ли работает как надо в папке «test-wordpress.com» создаем ещё одну папку с названием «www» и внутри файл «index.php». Как создать этот файл возможно посмотреть в нашей статье «Создание простого HTML-сайта», где мы рассматривали как и чем лучше создать такой файл. Так как нам не обязательно выводить какой-то контент, а требуется только протестировать работу локального веб-сервера, то в файле «index.php» мы напишем слово «Test».

1. После редактирования и сохранения файла для проверки переходим в браузер и вводим адрес нашего сайта на локальном сервере, т.е. «test-wordpress.com». Если сделали все правильно, то на экране появится надпись «Test».

Итак, все хорошо работает и можно начинать установку движка WordPress. Принцип установки такой же, как и в ручной установке на хостинг. Отличие только в том, что для начала требуется создать необходимую БД:

• Переходим по ссылке http://localhost/Tools/phpMyAdmin/ для открытия менеджера БД на локальном сервере. У него присутствует уже 4 БД, которые нельзя удалять иначе сервер перестанет корректно работать.

• Здесь переходим в раздел «Базы данных» и создаем новую базу, с которой и будет работать наш будущий веб-сайт. Назовем её «test_wp» и обязательно указываем сравнение «utf8_general_ci». Это требуется для правильного отображения информации сайта.

• Дальше появится новая БД в списке, но для того чтобы сайт работал с базой требуется также создать ей собственного пользователя. Для этого переходим в нашу БД в раздел «Привилегии», и выбираем пункт «Добавить пользователя».

• В открывшемся окне указываем логин, пароль и хост. В качестве хоста указываем «localhost» так как будем работать на локальном сервере. В конце проверяем стоит ли галочка напротив пункта «Выставить полные привилегии на базу данных «test_wp»» и нажимаем на «Отметить все» в разделе «Глобальные переменные».

• После внесения этих правок и подтверждения добавления нового пользователя в случае успеха он появится среди списка пользователей.

• Дальше идёт установка как в варианте с ручной установкой на хостинг с пункта 3.2.4., только в поля для соединения с БД требуется указать правильную информацию (имя БД, логин и пароль, сервер БД — localhost).

В итоге после выполнения любого из 3 вариантов установки WordPress, движок уже готов к работе и начинаем непосредственную настройку платформы под будущий интернет-ресурс.

Настройка WordPress

Для работы нам требуется войти в администраторскую панель движка. Для этого переходим по адресу http://svoy-sayt.com/wp-login.php, но не забываем заменить адрес на собственный. Затем вводим логин и пароль, который добавляли при установке движка и попадаем непосредственно в админку. Она выглядит следующим образом:

Здесь уже установлены базовые функции интернет-сайта: шаблон дизайна, комментарии, возможность регистрации и т.д. Далее в статье мы разберем каждую функцию, но пока начнём с самого главного – выбора дизайна будущего веб-сайта.

У нас уже установлено по умолчанию 3 базовых шаблона: Twenty Twenty, Twenty Nineteen и Twenty Seventeen. Они разработаны программистами команды WordPress и предоставляются бесплатно в комплекте с движком. Чтобы их увидеть переходим в раздел «Внешний вид» — «Темы».

Как видите тема «Twenty Twenty» уже активна и возле неё появилась кнопка «Настроить». Если её нажать, то сможем редактировать главные части нашего веб-сайта.

Если перейти на главную страницу сайта, то увидим, что правая часть в настройках темы похожа на сам сайт. Отличие только в том, что нет всех тех что показано в настройке страниц, пунктов меню и некоторых других вещей.

В работе мы будем использовать эту тему для примера, но если требуется сделать другой дизайн, то его возможно добавить на сайт следующим способом:

• Выбираем и скачиваем понравившейся шаблон. Их список и демо-версии возможно посмотреть в нашем каталоге шаблонов для WordPress.
• Затем переходим в админке в раздел «Внешний вид», подраздел «Темы» и нажимаем кнопку «Добавить». Далее в открывшемся окне нажимаем на «Загрузить тему» и выбираем её архив на компьютере.

Дальше после загрузки тема появится среди списка других шаблонов. Для её активации требуется только навести курсор на добавленную тему и нажать на кнопку «Активировать».

Переходим непосредственно к настройкам темы. Для начала создадим недостающие страницы и добавим их в верхнее меню. Нам требуется создать такие страницы:

• Главная страница;
• О нас;
• Блог;
• Контакты.

Для начала этого достаточно. В платформе WordPress все страницы разделяются на 3 категории:

1. Страницы;
2. Рубрики;
3. Записи.

Возможно конечно создавать все по шаблону страниц, но это неправильно. Гораздо лучше все разделять как это задумано разработчиками. Так у нас «Главная страница», «О нас» и «Контакты» будут иметь шаблон страниц, «Блог» — шаблон рубрик, а записями будут выступать посты, которые мы будем помещать в рубрику «Блог».

Начнём со страниц. Чтобы создать новую страницу требуется перейти в пункт меню «Страницы».

Как видите, в списке страниц уже присутствует 2 страницы: Политика конфиденциальности и Пример страницы. При этом возле страницы «Политика конфиденциальности» стоит надпись «Черновик». Это означает, что пока эта страница не опубликована и её не видно на самом сайте.

Важно! Страница «Политика конфиденциальности» обязательна для всех интернет-ресурсов независимо от типа и рода деятельности. Отсутствие страницы может повлечь за собой наказание в виде штрафов, объём которых определяется законами государства, в которых используется веб-сайт.

Пока оставим эти страницы и добавим недостающие. Для этого нажимаем на кнопку «Добавить новую».

После загрузки у нас появится блок с информацией как работать с редактором блоков в WordPress.

Для ознакомления можете прочитать это небольшое объявление и руководство в конце, но в примере мы это пропустим и начнём работу непосредственно с добавлением новых страниц. «Главная страница» у нас формируется автоматически, поэтому создадим остальные 2 странички «О нас» и «Контакты». В открывшемся окне после прочтения появится возможность добавить заголовок, т.е. название страницы, и «тело» страницы – информацию, которая будет выводится на странице.

Добавляем всю эту информацию и нажимаем кнопку «Опубликовать». Чтобы вернуться назад к списку страниц в админке и добавить новую, нажимаем на значок вордпресса в верхнем левом углу. В результате у нас должно получится 4 страницы: Контакты, О нас, Политика конфиденциальности и Пример страницы.

Чтобы отредактировать созданную страницу требуется просто нажать на её название или при наведении нажать на ссылку «Изменить» под названием. Для примера воспользуемся страницей «Политика конфиденциальности».

Как видите, на странице уже предоставлен шаблон с информацией. Вам остается только его подкорректировать под себя и опубликовать страницу. Если появились трудности во время составления собственной страницы пользовательского соглашения, то воспользуйтесь ссылкой, которую предлагает вордпресс.

И так, страницы созданы. Добавим ещё рубрику «Блог». Для этого перейдём в раздел «Записи» в пункт «Рубрики».

У нас также, как и в случае со страницами, существует рубрика от разработчиков с названием «Без рубрики». Но в этом случае чтобы не удалять лишнее, мы переименуем эту рубрику в требуемое название. Для этого переходим в эту рубрику, точно также как мы редактировали страницы.

Как видите дизайн рубрик слегка отличается от страниц. Здесь нет редактора для описания страниц, который мы скоро добавим, меньше разных пунктов и нет правой колонки. Но этого достаточно для работы. Чтобы изменить рубрику, как все, наверное, догадались, требуется заменить название. Пункт «Ярлык» отвечает за урл страницы (его пока не будем менять), а «Родительская рубрика» помогает создать древовидную структуру рубрики. Например, если создается сайт с рецептами блюд, то главной рубрикой будет общее название «Рецепты», и она выбирается в этом пункте как родительская для создания подрубрик «Первые блюда», «Напитки» и т.д. Но так как у нас будет только одна рубрика «Блог», то пункт «Родительская рубрика» остается без изменений. В конце после всех изменений нажимаем на кнопку «Обновить» и возвращаемся в список рубрик. В результате на экране будет следующее:

Теперь, когда все пункты меню у нас готовы, создадим и его. Для этого переходим в раздел «Внешний вид» в пункт «Меню».

Чтобы не запутаться в меню, мы рекомендуем подписывать каждый блок меню. Подписывать можете как угодно, так как название будете видеть только Вы. Назовем наше меню «Верхнее» для удобства и перенесем туда все пункты, которые должны там быть. Список страниц и рубрик находятся в соответственных блоках. После добавления всех пунктов ставим галочки напротив пунктов «Горизонтальное меню для компьютера» и «Мобильное меню».

Проверяем наши правки на сайте.

Пункты меню появились, но если пощёлкать по этим страницам и посмотреть на их урл, то видно, что с ним не все в порядке. В особенности это заметно на страничке «Блог».

Дело не в том, что вместо «блог» в урле стоит «без-рубрики», а в том, что часть урла латинскими буквами, а часть русскими. Такого быть не должно. Чтобы поисковики хорошо «воспринимали» сайт, то должен быть один язык в «ЧПУ» (человеко-понятных урлах). Для лучшей оптимизации мы рекомендуем пользоваться латинскими буквами в ЧПУ и в доменах. И чтобы этого достичь нам потребуется плагин «RusToLat». Он предназначен для транслитерации (своего рода перевода букв кириллицы в латиницу). Чтобы его добавить в админке переходим в раздел «Плагины» — «Добавить новый». Там вводим название «RusToLat» в поиск и дожидаемся пока вордпресс выдаст нам список. Среди них ищем нужный и нажимаем установить.

После установки нажимаем на кнопку «Активировать». Нажатие активирует устанавливаемый плагин и перенесет нас в раздел со списком установленных плагинов.

Теперь остается сделать некоторые настройки для правильного построения ЧПУ на нашем портале. Для этого переходим в раздел «Настройки» — «Постоянные ссылки». Там находим пункт «Произвольно» и меняем содержимое на «

/%category%/%postname%/

». Таким образом у нас получится древовидный вывод страниц в ЧПУ. Другими словами, теперь при создании новых рубрик или записей, вордпресс сразу будет создавать урлы типа «рубрика/подрубрика/запись». Это правильное отображение структуры сайта в ЧПУ, что позже хорошо отобразится во время продвижения этого сайта.

Когда постоянные ссылки настроены, остается только перегенирировать ярлыки страниц, рубрик и записей. Для этого переходим в них, удаляем существующий текст и сохраняем. После проделанных ранее манипуляций, нам больше не требуется самостоятельно вводить текст для ЧПУ для каждой страницы. Вордпресс все делает за нас сразу же после сохранения.

В записях все делается аналогично к страницам, за исключением того, что в записях требуется добавлять рубрику записи как на скриншоте:

Когда на сайте только одна рубрика, то все записи добавляются прямо в неё (как в нашем случае). Но когда существует несколько рубрик, то вордпресс автоматически добавит статью в рубрику, которая была после установки. Чтобы этого не происходило, требуется выбирать куда необходимо добавить тот или иной пост.

После того как все изменения в урлы внесены, проверяем их на самом сайте. Как видите, все работает как требуется. Вместо «без-рубрики» теперь «blog» и так далее. Но есть одно «но». Возле названия сайта вверху выводится текст «Ещё один сайт на WordPress». Он здесь не очень к месту и давайте его уберем. Для этого мы опять откроем настройки темы и перейдем в раздел «Свойства сайта».

В нём мы видим название сайта, краткое описание и возможность добавить логотип и иконку для браузеров (фавикон). Предлагаем вместо обычного текста с названием добавить логотип сайта. Для него возьмем любую картинку для теста, но при разработке сайта для себя или компании лучше позаботится о фирменном логотипе. Чтобы загрузить логотип сайта вместо текста требуется нажать на соответствующую кнопку с названием «Загрузить логотип». После нажатия нам появляется окно для загрузки изображения и рекомендуемые размеры.

После загрузки картинки она появится в библиотеке медиафайлов и будет доступна для применения без повторных загрузок. Для подтверждения выбора картинки нажимаем на кнопку «Выбрать».

Далее вордпресс предложит обрезать картинку до нужных размеров если она будет не тех пропорций. Выбираем как требуется обрезать и нажимаем «Обрезать изображение». Если Вы не хотите обрезать, тогда нажимаем «Не обрезать».

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

После всех изменений нажимаем на кнопку «Опубликовать» и проверяем изменения на сайте. И чтобы вернуться в админку нажимаем на кнопку с крестиком в левом верхнем углу настроек сайта.

Теперь настал черед добавить страницу «Политика конфиденциальности» на наш сайт. Для этого мы создадим одно дополнительное меню «Внизу» с ссылкой на главную страницу, о нас и пользовательское соглашение, и другое дополнительное меню «Внизу-2», где разместим ссылки на блог и контакты. Чтобы это сделать нажимаем на ссылку «создайте новое меню».

После добавления новых меню появится возможность выбирать какое меню требуется редактировать.

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

Как видите, здесь присутствуют блоки «Подвал #1» и «Подвал #2», и в них присутствуют по 3 блока. На сайте они размещены внизу сайта:

Они добавляются, но как правило эти блоки не выводятся внизу интернет-сайта, а боковой колонке (сайдбаре). Но так как наш шаблон не предусматривает боковых колонок, то мы их просто удаляем из списка виджетов подвала и добавляем наши пункты меню. Для этого нажимаем на каждую позицию в блоках «Подвал #1» и «Подвал #2» и удаляем каждый из них. А для того чтобы добавить наши дополнительные меню, перетаскиваем блок «Меню навигации», выбираем там по очереди меню «Внизу» и «Внизу-2» и нажимаем на «Сохранить» в каждом из блоков. В результате должно получится следующее:

На сайте это будет выглядеть следующим образом:

Так возможно вывести любую необходимую информацию используя виджеты.

Наш интернет-сайт начинает потихоньку вырисовываться. И чтобы добавить ему некой красоты давайте добавим на главную страницу над списком статей блок со слайдером. Для этого нам понадобится ещё один плагин «MetaSlider». Это мощный плагин, позволяющий создать элегантный слайдер с визуальными эффектами. Чтобы его добавить повторяем ту же процедуру, что и в случае с «RusToLat».

После установки у нас в левой колонке появится пункт «MetaSlider», где находятся настройки и все остальное связанное со слайдером.

После первой установки плагин предлагает воспользоваться подсказками как с ним работать. Мы это разбирать не будем, а перейдем непосредственно к созданию нашего первого слайдера. Для него мы подготовим 3 тестовых картинки, но Вы при создании собственного слайдера можете использовать столько картинок, сколько потребуется. Чтобы создать новое слайдшоу требуется для начала добавить его название. Это необходимо для различия между слайдшоу, что удобно, когда на сайте добавляется не один слайдер, а несколько. Само название нигде не выводится, поэтому называем слайдер как удобно, к примеру, «Слайдер на главной странице».

После того как название добавлено настало время добавить наши подготовленные картинки в виде слайдов. Для этого нажимаем на «+ Добавить слайд» вверху плагина и загружаем наши картинки на сайт как мы добавляли логотип. Но в отличие от загрузки логотипа, картинки для слайдера возможно загружать не по одной, а целым пакетом по несколько штук за один раз.

После того как загрузка завершиться, у нас в библиотеке медиафайлов появится новых 3 картинки (или столько, сколько Вы их загрузили) с отметкой в виде галочек в верхнем правом углу каждой картинки. Снизу также будем надпись сколько выбрано картинок.

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

Важно! Если требуется выбрать одну картинку, то возможно воспользоваться кликом ЛКМ. Если требуется выбрать некоторые картинки, которые в списке находятся НЕ рядом, то при выборе требуется зажать клавишу «Ctrl» и кликать в это время по необходимых картинках ЛКМ. Когда требуется выбрать целый диапазон картинок, которые идут одна за другой, то возможно зажать клавишу «Shift» на клавиатуре и в это время ЛКМ нажать на первую и последнюю картинку из требуемого диапазона.

После выбора картинок для слайдера нажимаем на кнопку «Add to slideshow». Далее картинки загрузятся в наше слайдшоу в виде отдельных слайдов.

В каждый из слайдов возможно добавить разную информацию и настройки. Например:

• Возможно добавить собственный заголовок или описание картинки, а можно оставить те, которые добавились во время загрузки картинок. Для этого требуется переключить с «Media library caption» (Название из медиабиблиотеки) на «Media library description» (Описание из медиабиблиотеки) или «Enter manually» (Собственное описание). При этом в первых двух вариантах текст, который будет выводится на сером фоне, если такой текст присутствует и этот текст нельзя редактировать. Если выбирается пункт «Enter manually», то текст возможно добавлять и изменять по необходимости.
• Возможно добавить собственные СЕО-теги «Title» и «Alt» или оставить по умолчанию.
• Обрезать картинку с разными вариациями.
• Добавить ссылку, по которой будут переходить пользователи после клика на слайд.
• Добавить или убрать переход по ссылке в новой вкладке браузера.

Пока мы это трогать не будем, а просто добавим наш слайдер на главную страницу над списком постов из блога, но сначала сохраняем наше слайдшоу с помощью кнопки «Сохранить» в верхнем правом углу плагина. Чтобы это сделать требуется скопировать шорткод (короткий код, который сформировал для нас плагин) и вставить в файл программного кода главной страницы. Он находится чуть ниже и выглядит следующим образом:

Копируем этот текст и переходим в папку с нашим сайтом на хостинге или локальном сервере. Там переходим по следующему пути: «www» — «wp-content» – «themes» – «twentytwenty». Ищем в этой папке файл «index.php» и открываем его для редактирования.

Перед нами появится программный код, который отвечает за формирование главной страницы нашего интернет-сайта.

В этом файле сразу после строчки «

<main id="site-content" role="main">

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

После сохранения переходим на наш сайт на главную страницу и обновляем её чтобы увидеть изменения.

Как видите слайдер добавился, но изображения выводятся не чётко. Чтобы это исправить перейдем обратно в админку в настройки нашего слайдера.

Как видите, сбоку у нас присутствует информация с размерами в пикселях. Дело в том, что вордпресс обрезает все изображения по заданным размерам и выводит в пользовательскую часть сайта уже обрезаные изображения, а не оригиналы, которые мы загружали в админке. Это сделано для того чтобы уменьшить нагрузку на сервер. И в случае, когда на веб-сайт перейдет колоссальное количество пользователей, серверу не требуется загружать большие изображения и сжимать до требуемых программным кодом размеров, что вызывает нагрузку и из-за чего сайт начинает долго загружаться. Но разработчики плагина позаботились об удобстве пользователей, не изменяя главный программный код движка добавив возможность менять размеры выводимых на сайт изображений слайдера чем мы и воспользуемся. В поле ширина мы добавим размер в 1349 пикселей, а высоту сделаем в 578 пикселей.

После сохранения проверяем наши изменения на сайте.

Как видите, слайдеры стали намного чётче, чего мы и пытались добиться. Но чтобы заранее ослабить нагрузку на сервер ещё во время создания будущего интернет-сайта, мы советуем добавить ещё один полезный плагин под названием «Smush». Этот плагин обрабатывает изображения на этапе их загрузки на сайт путём сжатия в размерах. Это позволяет сжать изображение из 3 мегабайт, например, в 150-200 килобайт. Такое сжатие уменьшает нагрузку на сервер и позволяет загрузится веб-сайту в пару секунд.

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

Нажимаем на кнопку «Оптимизировать все изображения» и дожидаемся пока плагин их обработает. Скорость обработки зависит от количества имеющихся на сайте изображений и их размера. По завершению получаем результат обработки с количеством сэкономленного места на жестком диске сервера.

Конечно, 22.9 килобайт не так уж и много, но при этом стоит помнить, что было загружено всего лишь 4 изображений плюс «обрезки» вордпресса. Когда же будет загружено пару тысяч картинок, то вот тут и ощутится реальная экономия.

И последний «трюк», который понадобится в разработке интернет-сайта на вордпресс, который мы разберем в этой статье, это очистка «мусора» для облегчения веб-сайта и последующего его ускорения. Под мусором мы имеем ввиду неактивные темы и плагины, не нужные страницы и т.д. Для этого переходим сначала в раздел «Темы», так как они имеют много дополнительных программных файлов и изображений. После перехода кликаем по неактивным шаблонам. У нас это Twenty Nineteen и Twenty Seventeen. В результате у нас появится окно с описанием темы и кнопками среди которых есть для удаления:

Нажимаем на неё и подтверждаем удаление каждого неактивного шаблона. В итоге у нас должна остаться только одна активная тема.

Важно! Существуют шаблоны, которые при установке показывают в разделе «Темы» несколько связанных между собою шаблонов. В этом случае такие темы удалять НЕЛЬЗЯ, потому что возможно нарушение работы интернет-сайта.

Дальше переходим к удалению лишних плагинов. Они также делают нагрузку на сервер, хотя и будут неактивными. В нашем случае такими плагинами являются «Akismet Anti-Spam» и «Hello Dolly». Они идут в комплекте с вордпрессом и в случае, когда не используются в работе, то лучше их удалить. Для этого ставим галочки напротив каждого из них, в выпадающем меню с надписью «Действия» выбираем «Удалить», нажимаем напротив «Применить» и подтверждаем удаление.

В результате у нас также останутся только активные плагины, которые используются в работе. Страницы, рубрики и записи не несут нагрузки на сервер, но их возможно удалить для собственного удобства по желанию. Для этого мы переходим в раздел «Страницы», где у нас осталась одна лишняя страница с названием «Пример страницы». Наводим на неё курсор и нажимаем на ссылку «Удалить».

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

Заключение

Как видите, создать собственный интернет-ресурс на платформе WordPress просто. Достаточно только разобраться какой должен быть функционал у будущего веб-сайта и дизайн. Практически всё остальное достигается путём добавления расширений в виде плагинов.

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

Но каким бы ни был сайт, обязательно позаботьтесь об хорошем хостинге. Ведь от того как «качественно» работает хостинг-провайдер, настолько стабильно будет работать Ваш интернет-сайт. И ещё, если Вы собираетесь создать коммерческий интернет-сайт или сайт с большим потоком пользователей в будущем, то мы рекомендуем использовать исключительно платные хостинги, так как они предоставляют все требуемые параметры сервера и услуги.

Удачи в разработке и до скорой встречи на страницах портала!