Основы WordPres

ГАПОУ ПО многопрофильный техникум «Мокшанский интернат»

Учебное пособие

ОсновыWordPres

Для дисциплины

«Системы управления контентом»

Потёмин М.Ю.

Мокшан 2019 год

Содержание

Введение

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

Динамические сайты пишутся на PHP с использованием баз данных SQL. В базы данных помещается информация о картинках (их местоположение) и непосредственно сам текст.

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

Эта система бесплатная.

Имеется большое количество шаблонов.

Система обладает большой библиотекой расширений в виде плагинов, которые добавляют функционал CMS.

Интерфейс системы русифицированный и очень понятен.

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

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

Постоянно ведется выпуск новых версий.

Установка CMS WordPress

Есть два варианта установки вордпресс, установка на компьютер и установка на сервер хостинга.

Первый способ установки вордпресс

В первом случае нам потребуется дополнительное программное обеспечение для работы сервера.

Для примера мы используем виртуальный сервер PhpMyMdmin + MySQL об установке данного приложения можно прочитать в учебном пособии основы php.

Для того что бы установить вордпресс потребуется установщик WordPress который можно скачать с официального сайта

По ссылке https://ru.wordpress.org/latest-ru_RU.zip

Скачанный архив необходимо поместить в корневую директорию создаваемого сайта и распаковать. Запустите виртуальный хостинг и перейдите к установке, набрав в браузере ссылку на ваш сайт примерmysite.ru программа эмулятор сервера запустит стартовую страницу установщика вордпресс. Важно в этот момент отключиться от интернета, так как если адрес сайта будет идентичным с уже существующим доменом, то браузер будет подключать нас к ip данного сайта.

Рисунок 1 (запуск установщика)

После того как откроется стартовое окно установщика потребуется выполнить несколько действий и подтвердить их выполнение.

Рисунок 2 назване базы данных и сайта

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

После указания всех названий необходимо запустить установку. За нас все сделает система, создаст базу данных и таблицы. После установки у нас появится готовый сайт со стандартным шаблоном. Система перенаправит нас в редактор и попросит настроить сайт.

Второй способ установки вордпресс.

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

Для установки достаточно выбрать интересующую систему управления контентом и проделать операции, описанные для первого способа.

Настройка WordPress

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

Панель администратора вордпресс

Внешний вид

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

Вкладка темы

В данном разделе можно искать и устанавливать темы с официального сервера вордпресс, так же на данной странице можно устанавливать сторонние темы, купленные или созданные самостоятельно. После установки понравившейся темы можно посмотреть, как она выглядит. Для этого можно нажать на кнопку просмотр, или в верхней панели инструментов нажать правой кнопкой мыши на надпись с названием вашего сайта (Мой сайт на WordPress). Так просматривать шаблоны удобнее.

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

Большим минусом некоторых шаблонов является ограниченный функционал, но лишь этому эта платформа бесплатная.

Что такое ограниченный функционал?

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

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

Вкладка настроить

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

К основным настройкам относятся:

-шрифты, их цвет и начертание;

-логотип сайта и его расположение;

-расположение основного меню и дополнительного;

-содержимое подвала сайта;

-наличие сайдбара и его содержимое;

-наличие шапки сайта или слайдера (елси это предусмотрено темой);

-фон сайта, и страниц.

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

Вкладка виджеты

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

Какие виджеты существуют?

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

Новичку не стоит вдаваться в подробности этой функции для того что бы не отвлекаться от основных настроек.

Вкладка меню

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

Какие виды ссылок бывают?

В разделе меню можно задать ссылками созданные разделы (ленты новостей), отдельно созданные страницы, документы (формата doc и pdf), произвольные ссылки на сторонние ресурсы. Как правило меню составляется после того как на сайте имеется сам контент, страницы, документы, галереи и прочее.

Вкладка заголовок

Данная вкладка обладает минимальным функционалом, и ей можно не пользоваться, так как это можно сделать из раздела настройка. С помощью данной функции можно задать заголовок сайту.

Вкладка редактор

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

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

Вкладка плагины

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

Для чего нужны плагины?

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

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

Что можно сделать с помощью плагинов?

Задать анимацию тексту или изображениям;

Создать фотогаллерею;

Создать интернет магазин;

Создать форум;

Вставить анимационный баннер в любую часть сайта;

Установить слайдер;

Добавить дополнительное меню;

Создать мобильную версию сайта;

Создать формы обратной связи;

Организовать функцию регистрации и авторизации;

Установить фильтр от ботов;

Защитить свой сайт от взлома;

Добавить расширенные функции редактора вордпресс;

Установить различные проигрыватели.

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

Установка, активация и удаление плагинов

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

Добавление нового плагина

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

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

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

Настройка плагинов

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

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

Медиафайлы

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

Страницы и записи

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

Контент это содержимое сайта (текст, изображения, документы, аудио и видеофайлы).

Страницы

Для создания страницы сайта (предположим нам необходимо создать страницу с контактами), необходимо перейти на вкладку страницы на нажать добавить новую.

Откроется поле редактора. В редакторе мы можем задать заголовок страницы, набрать текст страницы с добавление ссылок и форматирование текста. При необходимости можно добавить изображение, для этого нажать на кнопку добавить медиафайл. Система перенаправит нас в библиотеку, после загрузки необходимого содержимого, можно скопировать ссылку на файл или нажать кнопку вставить в запись. После этого можно будет расположить изображение в нужном месте. После того как содержимое страницы будет набрано и отформатировано, можно нажать на кнопку сохранить. После сохранения наша страница будет отображаться во вкладке страницы-все страницы. Мы можем ее легко редактировать. В разделе пункта меню мы сможем вставить данную страницу в наше меню.

Записи

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

Расширенные возможности вордпресс

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

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

Вид рабочей области Elementor

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

На сегодняшний день существует некоторое количество расширений, позволяющих собирать страницы с чистого листа, но лидером на сегодняшний день является дополнение под названием Elementor. Конечно этот плагин тоже условно бесплатный, в платной версии как всегда возможностей больше. Но в большинстве случаев достаточно и обычной версии для того что бы сделать уникальный сайт. Более того с помощью данного расширения можно создавать сайт по прототипу (заранее нарисованному дизайну). Зная язык JawaScript и хорошо владея CSS, можно с легкостью придать сайту анимацию и интерактив.

Элементор позволяет создавать сайт с чистого листа, для этого потребуется установка шаблона который совместим с данным расширением, пример Ashe. После установки шаблона и Elementor в меню редактора Wordpress появится дополнительный пункт меню. А при создании страницы система сама будет предлагать создать страницу элементор, так же можно будет редактировать ранее созданные страницы.

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

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

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

В состав элементора уже включены некоторые функциональные расширения:

Прайс листы на товары;

Таймер;

Вставка анимированных изображений;

Вставка форм обратной связи;

Так же существуют дополнительные плагины, добавляющие функционал Elementor. Точнее это не плагины а расширения самого Elementor, с помощью данных дополнений можно добавлять в блоки различные функциональные возможности и применять разделители для данных блоков.

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

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

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

ФункционалElementor

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

Для организации на сайте площадки интернет магазина потребуется установка и настройка плагина WooCommerce. Данное расширение позволяет настроить интернет магазин с возможностью подключения к платежным системам. Так же этот плагин позволяет отслеживать динамику продаж, и автоматически выстраивает популярные товары на основании количества продаж.