WordPress: как устроена панель управления (dashboard)

Dec 26, 2022 11:01

У меня на компьютере с операционной системой «Windows 10» установлено локально веб-приложение (система управления сайтом/блогом) «WordPress» самой свежей на сегодня версии 6.1.1 (вышла 15 ноября).

Со справочными материалами у «WordPress», мне кажется, всё плохо. Их много, но они плохо организованы. Я пока что не нашел хорошего источника, по которому можно было бы обучиться работе с этим веб-приложением. Наверное, он есть, но пока что я его не нашел. (Возможно, разработчики «WordPress» надеются на интуитивность интерфейса их программы. И в этом есть смысл, интерфейс достаточно простой и в нем не так сложно разбираться.)

На мой взгляд, начинать обучение следует с изучения интерфейса программы. Это должна быть одна из первых глав при обучении, а вместо этого мы получаем миллион статей о том, что такое блог, чем он отличается от сайта; что такое посты и страницы, чем они отличаются друг от друга и так далее. Теория должна перемешиваться с практикой, а этого нет. Я решил в этом посте коротко описать интерфейс панели управления (dashboard) веб-приложения «WordPress». Это будет только первый взгляд, без лишних подробностей.

Экраны (screen) в веб-приложениях

В операционных системах «Windows» я привык пользоваться программами с оконным интерфейсом. В веб-приложениях тоже есть аналог окна, который называют по-английски «screen». По-русски, видимо, это можно перевести прямо, словом «экран». Хотя не следует путать этот «экран» с экраном (дисплеем) компьютера (в последнем случае экран - это физическое устройство). В интерфейсах веб-приложений не получается применять привычный термин «окно», потому что веб-приложение и так уже выполняется в окне браузера.

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

Что такое экран (screen) в интерфейсе веб-приложения? Это просто пространство, на котором размещены разные элементы интерфейса (controls) для работы с веб-приложением.

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

Как устроена панель управления

Грубо говоря, панель управления (dashboard) веб-приложения «WordPress» разбита на три части:

1. Главное меню слева;
2. Строка сверху (toolbar);
3. Текущий экран с элементами интерфейса (занимает бо́льшую часть пространства в окне браузера).

Иллюстрация 1.



Текущий экран с элементами интерфейса (пункт 3) можно прокручивать вниз и вверх, если его содержимое не влезает на дисплей вашего устройства. У моего дисплея разрешение 1280×1024 и на него полностью влезают не все экраны веб-приложения «WordPress», поэтому их приходится прокручивать вниз и вверх.

В левом верхнем углу текущего экрана (пункт 3) указано название экрана. На иллюстрации 2 ниже видно, что название текущего экрана - «Dashboard». Это «домашний» экран панели управления, который отображается по умолчанию. У каждого экрана слева выполнен указатель в форме выпирающего треугольничка (см. на иллюстрации 2 ниже), который указывает на пункт главного меню, экран которого отображается в данный момент.

Иллюстрация 2.



Когда в главном меню выбран какой-либо пункт верхнего уровня, под ним всегда открывается подменю с подпунктами главного пункта. На иллюстрации 2 выше видно, что для пункта главного меню «Dashboard» открылось подменю из двух подпунктов: «Home» и «Updates». Из этих двух подпунктов подпункт «Home» выделен ярким белым цветом, потому что именно этому подпункту принадлежит текущий экран с элементами интерфейса.

В правом верхнем углу текущего экрана (пункт 3) есть две плашки: «Screen Options» (настройки экрана) и «Help» (помощь), см. на иллюстрации 3 ниже. При нажатии на любую из этих плашек развернется дополнительное пространство с настройками текущего экрана или с помощью, которая включает короткие подсказки по работе с интерфейсом веб-приложения и ссылки на соответствующие статьи на сайте «WordPress.org».

Иллюстрация 3.



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

Иллюстрация 4.



На иллюстрации 4 выше я развернул плашку «Screen Options». При этом вторая плашка оказалась скрыта. Развернутую плашку можно в любой момент свернуть обратно.

Как видно на иллюстрации 4 выше, на плашке «Screen Options» экрана «Dashboard» расположено шесть включенных флажков: «Site Health Status» (сводка о работоспособности веб-приложения), «At a Glance» («одним взглядом»; блок назван так потому, что, взглянув на него, можно с одного взгляда оценить положение дел на сайте), «Activity» (активность на сайте, то есть свежие посты и комментарии), «Quick Draft» (быстрое создание черновика поста), «WordPress Events and News» (события и новости на сайте «WordPress.org»), «Welcome» (блок с приветствием).

Как можно уже было заметить, домашний экран «Dashboard» составлен из шести прямоугольных блоков (по-английски их также называют «widgets»), каждый из которых содержит свою информацию. Включая и отключая вышеописанные флажки, можно настраивать внешний вид экрана, убирая и возвращая указанные блоки с информацией. Например, самый крупный блок «Welcome» с надписью «Welcome to WordPress!», который находится вверху текущего экрана, можно временно убрать, отключив соответствующий флажок на плашке «Screen Options», либо нажав на надпись «Dismiss» в правом верхнем углу этого блока. Очевидно, что позже этот блок можно вернуть на экран, включив соответствующий флажок на плашке «Screen Options».

Адаптивный дизайн

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

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

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

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

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

Перемещение блоков с информацией на экране

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

Иллюстрация 5.



Строка сверху (toolbar)

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

Иллюстрация 6.




1. Иконка «WordPress» (буква «W» в кружочке):

1.1. About WordPress (скрипт «wp-admin/about.php»);
1.2. WordPress.org (сайт веб-приложения);
1.3. Documentation (документация);
1.4. Support (форумы поддержки);
1.5. Feedback (форум для отзывов).2. Иконка «Домик» и название сайта:

2.1. Visit Site (перейти на сайт: https://localhost/wp/).3. Иконка со стре́лками по кругу и числом 1 (аналог пункта главного меню «Dashboard - Updates», обновления ядра веб-приложения «WordPress», а также плагинов, тем оформления, переводов). Эта иконка будет отсутствовать, если проверка не обнаружит новых версий ядра веб-приложения, плагинов, тем оформления или переводов.
4. Иконка «Комментарии» с числом 0 (аналог пункта главного меню «Comments»).
5. Иконка со знаком плюса и словом «New» (добавить...):

5.1. Post (...новый пост; аналог пункта главного меню «Posts - Add New»);
5.2. Media (...новую картинку, видео, файл и т. п.; аналог «Media - Add New»);
5.3. Page (...новую страницу сайта; аналог «Pages - Add New»);
5.4. User (...нового пользователя сайта; аналог «Users - Add New»).6. Приветствие с именем пользователя справа:

6.1. Edit Profile (перейти к редактированию данных своей учетной записи; аналог «Users - Profile»);
6.2. Log Out (выполнить выход из панели управления).
Если у пункта меню вернего уровня есть подпункты, то обычно выбор пункта меню верхнего уровня аналогичен выбору первого подпункта. Чтобы просто просмотреть подменю, ничего при этом не выбирая, достаточно навести указатель мыши на пункт меню верхнего уровня. Это верно и для меню в строке сверху, и для главного меню слева.

Главное меню слева

Перечислю пункты этого меню:

1. Dashboard (панель управления):

1.1. Home (страница панели управления по умолчанию);
1.2. Updates (обновления ядра веб-приложения «WordPress», а также плагинов, тем оформления, переводов).2. Posts (посты):

2.1. All Posts (таблица со списком всех постов);
2.2. Add New (добавить новый пост);
2.3. Categories (управление категориями [рубриками] постов);
2.4. Tags (управление метками постов).3. Media (картинки, видео, файлы и т. п.):

3.1. Library (таблица со списком всех медиаданных);
3.2. Add New (добавить новый файл медиаданных).4. Pages (страницы сайта):

4.1. All Pages (таблица со списком всех страниц сайта);
4.2. Add New (добавить новую страницу сайта).5. Comments (таблица со списком всех комментариев к постам).
6. Appearance (внешний вид сайта):

6.1. Themes (управление установленными темами оформления сайта);
6.2. Editor [beta] (редактор внешнего вида сайта).7. Plugins (плагины):

7.1. Installed Plugins (таблица со списком установленных плагинов);
7.2. Add New (установить новый плагин).8. Users (пользователи сайта):

8.1. All Users (таблица со списком всех пользователей сайта);
8.2. Add New (добавить нового пользователя сайта);
8.3. Profile (данные текущей учетной записи).9. Tools (инструменты):

9.1. Available Tools (доступные инструменты [я пока не знаю, зачем вообще нужен этот пункт, в нем только одна ссылка в другой раздел главного меню]);
9.2. Import (инструменты для импорта данных из других систем управления контентом; в том числе здесь есть инструмент импорта данных из ЖЖ);
9.3. Export (инструмент для выгрузки данных сайта в файл в формате XML);
9.4. Site Health (инструменты диагностики «здоровья» сайта; проводится автоматический анализ среды, выдаются рекомендации по настройке веб-приложения «WordPress»);
9.5. Export Personal Data (инструмент для выгрузки данных пользователей сайта в файл-архив формата ZIP);
9.6. Erase Personal Data (инструмент для удаления или анонимизации персональных данных пользователей сайта);
9.7. Theme File Editor (инструмент для редактирования исходного кода тем оформления);
9.8. Plugin File Editor (инструмент для редактирования исходного кода плагинов).10. Settings (настройки веб-приложения «WordPress»):

10.1. General (основные настройки);
10.2. Writing (настройки, использующиеся при отправке постов, в т.ч. по электронной почте);
10.3. Reading (настройки, регулирующие отображение контента);
10.4. Discussion (настройки, относящиеся к управлению комментариями, ссылками и их отображению);
10.5. Media (настройки для медиаданных, в основном - для размеров картинок);
10.6. Permalinks (настройка постоянных ссылок на контент сайта);
10.7. Privacy (настройка содержимого страницы сайта с информацией о политике конфиденциальности).11. Collapse menu (свернуть меню в узкий столбик слева; тот же вид главное меню приобретает, если уменьшить ширину окна браузера меньше определенного значения).

Инструмент, Образование, Сайтостроение, Английский язык

Previous post Next post
Up