Создание и редактирование записи в WordPress

Первым делом необходимо определиться, что вы будете создавать страницу или запись. Если это блог, где на главной появляются последние записи, то это очевидно будет запись. Но можете создавать страницу, например вам нужно добавить в меню страницу «О компании» и пр. Разница в том, что записи имеют рубрику и могут быть сортированы по ним, это удобно для ведения блога, а страница не имеет такой функции. Но в любом случае первым делом заходим в админку сайта, вот тут https://m-fiz.ru/vhod-v-panel-administrirovaniya-adminku-wp-dlya-klientov/ написано как это сделать подбробно.

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

И у нас открывается страница для редактирования. Причем есть варианты редактирования. По умолчанию в WordPress используется встроенный блочный редактор Gutenberg. Он позволяет делать столбцы, строки, в какой-то мере это уже конструктор страниц. Но для начинающих он определенно не удобен, куда как проще использовать старый классический вид редактора, напоминающий чем-то привычный Word. Чтобы его включить должен быть установлен плагин Advanced Editor Tools (ранее TinyMCE Advanced), по этой же ссылке https://m-fiz.ru/vhod-v-panel-administrirovaniya-adminku-wp-dlya-klientov/ описано как установить плагин, если его нет на сайте. И затем зайти в плагины, найти этот плагин и нажать «Настройка» и отметить галочкой как показано ниже.

После чего не забыть внизу справа нажать «Сохранить изменения». И тогда при создании или открытии (редактировании) страницы или записи мы увидим вот такую картину…

Пример созадния записи

Вверху мы пишем название записи, оно должно быть кратким и понятным, ниже видим адрес записи (подписано редактор, это ошибка, не охото исправлять), где будет расположена запись на сайте. Плагин Cyr to Lat enhanced автоматически переводит кирилицу в латиницу, а дефис между словами это настройка самого WordPress, она делается в Настройки-Постоянные ссылки- Название записи.

Ниже мы видим кнопку «Редактировать в Elementor«, это для конструктора страниц, если нужно создать красивую подачу записи или страницы, в вольном стиле, где по сути можно рисовать страницу по своему замыслу, но не всегда это удобно. Для записи лучше использовать обычный редактор, к тому же он быстрее работает при открывании страницы. Вот тут https://m-fiz.ru/redaktirovanie-stranitsy-v-elementor/ моё описание как редактировать страницу в Elementor.

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

Выбор рубрики

Выбираем нужную нам рубрику, идем ниже и если нужно добавляем изображение к записи. Эта картинка. которая у меня выводится слева от записи на главной странице. Размер картинки или разрешение в пикселях нужно выбирать обдумано, в данной теме, которую использую на сайте (Kadence тема) по ширине на главной картинка записи имеет 270 точек, а значит картинка должна быть не меньше, чтобы была четкая. Но это зависит от темы, лучше выбирать разрешение не меньше 400 точек по горизонтали, так например в ВК при добавлении ссылки тогда автоматически добавляется изображение записи, которое вы установили. Если выберете изображение меньшего разрешения по горизонтали, то будет другая картинка установлена, первая в тексте, которая имеет подходящее разрешение.

Изображение записи

На картинке выше у меня уже изображение установлено, если его ещё нет, то будет надпись «Установить изображение записи», жмем и выбираем изображение. Для страницы тоже можно задать изображение, всё в точности тоже самое, только нет рубрики. Есть ещё много настроек справа для записи или страницы, это выбор макета, стиля страницы, всё это зависит от установленной темы, обычно она настраивается и все настройки страницы или запии делаются по умолчанию, но иногда нужно их изменить, например добавить справа сайтбар, это такая колонка справа, где отображаются виджеты, разная информация. Такая система удобна тем, что сайтбар отображается на всех страницах или записях, чтобы каждый раз не писать информацию. Это может быть полезная общая информация к странице или записи, а может быть сайтбар и на главной, как в этом блоге, где выведены рубрики и пр. информация. Сайтбаров обычно несколько в теме, поэтому можно выбрать для главной один, для записи другой. А можно вообще не использовать, как на этой странице.

Следующее, что лучше сделать это настроить SEO информацию, это информация для поисковиков, заголовок, описание… Она нужна, если вы даете ссылку в мессенджере, то видна информация по странице или записи. В поиске тоже это используется, т.н. сниппеты. которые рассказывают, что это за страница. Если нет SEO описания или это называется мета-информация, то поисковик сам напишет, а что он выберет может быть совсем не то, что нужно… Поэтому идем ниже редактора и зполняем мета-информацию. Использую Rank Math SEO плагин, поэтому описание будет для него.

Фокусное слово

Заполняем фокусное слово, оно обычно копируется из названия записи (выделяется заголовок записи Ctrl+C), потом вставляется (Ctrl+V) и нажимаете Enter, справа вы увидите цифры рейтинга, оценки SEO, они должны увеличится, было например 10 процентов, после добавления фокусного слова станет сразу 50 и более… На рисунке выше эти цифры не показаны, она напротив фокусного слова справа. Если цифры растут, значит вы все сделали правильно. Общий рейтинг SEO вверху справа показывается и снизу есть подсказки, идеально вы не сделаете, поэтому красные пункты всегда останутся, но чем больше процентов, тем лучше, хотбя бы больше 50% иметь желательно, чтобы поисковик хорошо оценивал (индексировал) страницу. Ниже показан рейтинг SEO для данной странице, после добавления фокусного слова.

Дальше нам нужно заполнить сниппет, т.е. описание для данной страницы, если мы не хотим, чтобы это делал поисковый робот, который обычно берет текст из начала страницы. Так же при передачи в мессенджере эта информация используется, как описание ссылки. Нам нужно написать, например, «На этой странице вы можете прочитать описание, как создавать и редактировать страницы и записи в WordPress в классическом редакторе (не блочном)». Нажимем кнопку «Edit Snippet» и в самом низу вставляем наше описание…

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

Ниже пример, как выглядит ссылка на эту запись с заполненным мета-описанием (сниппетом) в Telegram

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

Заголовок 1 это и есть H1 и так далее. Тип «Абзац» это обычный текст на странице. Таким текстом мы наполняем содержимое страницы. И далее мы начинаем писать или копировать текст… Он по умолчанию использется.

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

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

Выделяем «Открывать в новой вкладке«, чтобы открывалось новое окно, так всегда лучше, можно его закрыть, а старая страница останется. Это повышает рейтинг в поиске. Это отмечено красной стрелкой, ниже есть галочка «Добавить rel=»nofollow«, включенная эта функция говорит поисковикам, что не нужно переходить по этой ссылке. Её нужно выставлять, если это ссылка на внешний сайт или ресурс и не использовать (не отмечать), если ссылка на этот же сайт, например на другую статью. Логика простая, чтобы поисковики не убегали с вашего сайта, а индексировали его.

Что касается самого текста, то все тоже самое как в редакторе, разве что нет подчеркивания текста, но оно есть, находится вот тут как показано на картинке

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

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

Это удобно, если нужно получить единый стиль, например единый цвет выделеного текста, чтобы был в тон с оформлением сайта, в поле «#» цвет указывается или отдельно по компонентам RGB. Кстати, есть плагины для браузера Chrom, которые определяют цвет, а так же есть плагин, который определяет шрифт на сайте. Они называются:

What Font — find font— определяет фон
ColorZilla— определяет цвет

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

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

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

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

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

Можно просто скопировать из поля «Заголовок». Это поле нужно для поисковиков, эта надпись появляется если картинка не смогла загрузится на сайте. Поэтому поисковики требуют её наличие. Можно поле Alt заполнить потом в медиафайлах, но лучше это делать сразу.

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

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

Размер- полный, это значит картинка будет пиксель в пиксель показан, а значит будет резкая, как в оргинале. Если же размер не влезает на страницу, картинка имеет выше 1200 пикеселей по горизонтали, а вам нужен такой рисунок, то выставляем в поле «Ссылка» значение «Медиафайл», это значит при нажатии на картинку она откроется во всплывающем окне, где можно увеличить картинку, рассмотреть детально. Ниже пример такого способа для фото.

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

араметры отображения картинки на новой странице

Чтобы посмотреть результат нужно вверху нажать «Просмотреть запись» (для страницы будет написано «страница»). Только обязательно нужно нажать перед этим «Обновить» (справа вверху кнопка), чтобы данные сохранились, в противном случае будет предупреждение, что вы выходите из редактирования без сохранения.

Чтобы обратно вернуться в редактирование нужно нажать точно такую же кнопку вверху в панели «Редактировать запись» (для страницы будет написано «страница»).

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

Иногда необходимо использовать PNG формат, например для картинки, где вырезан фон, вот тут https://m-fiz.ru/obrezaem-fon-v-photoshop/ описание, как такие картинки создаются.

Так же нужно помнить, что в редакторе есть стрелки назад, вперед, отменить или восстановить действие, это удобно, если случайно стерли картинку и пр…

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

Если вы хотите сделать страницу или запись с использованием самого распространенного конструктора страниц Elementor (есть конечно и другие), то редактирование начинается так же, через редактирование, где можно выбирать как отображать страницу, как показано ниже

А потом вы нажимаете кнопку «Редактировать в Elementor» и редактируете страницу, по этому описанию https://m-fiz.ru/redaktirovanie-stranitsy-v-elementor/

Можно использовать стандартный шаблон, по умолчанию, а можно Elementor полная ширина. Последнее означает, что у вас будет чистая страница, созданная с помощью Elementor, не будет ни заголовка, ни хлебных крошек (это цепочки навигации типа Главная- Каталог- Товар), будет только шапка и подавал. При выборе Холст Elementor не будет даже шапки и подвала. Но есть и минусы, например цепочки навигации удобны при просмотре с телефона, когда меню закрыто, обозначается обычно три точки или три полоски и поэтому проще нажать в цепочке навигации, чтобы вернуться или перейти быстро на главную. Поэтому поисковики принимают это во внимание и увеличивают рейтинг сайту при наличии хлебных крошек. Хлебные крошки назвали по сказке, где посыпали крошки, чтобы выйти по ним обратно.

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

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

Приверно тоже самое на видео https://m-fiz.ru/primer-dobavleniya-zapisi-v-blog-na-wordpress/