Как разместить контент на блоге WordPress

Майнд Мап инструкции
Mind Map инструкции “Как разместить контент на блог WordPress”

Добавление новой записи на WordPress

Для того, чтобы разместить контент на блоге в WordPress, заходим в админку WordPress, она ещё называется “Консоль”. После этого нажимаем на раздел Запись и нажимаем кнопку “Добавить новую”. После этого откроется окно размещения статьи в блоге на WordPress.

Добавление новой записи на блоге WordPress в админ панели (Консоли)
Добавление новой записи на WordPress

Создание заголовка H1

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

На примере статьи “Стратегия назначения ставок “, которая размещена на блоге sotnik.biz.ua мы рассмотрим, как разместить такой контент, ыы можете её посмотреть по адресу https://sotnik.biz.ua/blog/strategii-naznacheniya-stavok-google-ads/. Статья приходит в формате либо Google Docs, либо в Word-документе.

В рассматриваемом примере исходный файл статьи был прислан автором в Google Docs, вот пример: https://docs.google.com/document/d/14_3qPKr11UEt4NslcyB7kePCOJr3Ok8Xva8b0ofFPkg/edit?usp=sharing

Для того, чтобы прописать заголовок статьи, мы копируем заголовок из исходного документа и вставляем его соответственно в поле “Заголовок”.

Добавление заголовка H1
Добавление заголовка H1 в пост на WP

Настройка постоянной ссылки

Следующий элемент, который нужно оптимизировать – это Постоянную Ссылку статьи, нужно подготовить так называемую ЧПУ-URL (так называемый, Человеку-понятный-URL), для того, чтобы содержались не “рандомные” символы, которые автоматически генерирует WordPress. На английском языке это хорошо, на русском необходимо подготовить URL вручную.

Нажимаем кнопку Изменить, удаляем то, что нам нагенерировала система, копируем наше название статьи и идём в Google Translate — https://translate.google.com/. Вставляем в Google Translate название нашей статьи и копируем то, что Google translate выдал в транслитерации.

Подготовка постоянной ссылки для статьи WordPress с помощью Google Translate

Кстати говоря, переводчик Google Translate мы настраиваем в левой части русский язык, в правой – английский, получаем название в транслитериции. Транслитерация – это русское название, но английскими буквами. Копируем это название и вставляем в поле Постоянной Cсылки, но тут тоже нужно кое-что поменять, а именно:

  • делаем все маленькие буквы;
  • между словами проставляем дефисы.

Нажимаем кнопочку “Окей”, таким образом мы получаем нашу Постоянную ссылку.

Настройка постоянной ссылки
Настройка постоянной ссылки для записи WordPress

Добавление тела статьи

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

  • визуальный редактор;
  • текстовый редактор.

Эта настройка находится в правой верхней части от окна размещения контента.

Текстовый и визуальный редактор
Текстовый и визуальный редактор на WordPress`е

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

Текстовый и визуальный редакторы в блоке WordPress
Текстовый и визуальный редакторы также доступны в обновленной версии WordPress

Непосредственно, для размещения контента мы копируем по абзацу. Мы не копируем полностью весь контент за один раз, а мы копируем сначала один абзац и размещаем этот абзац в текстовом редакторе. Смотрим на него визуально, если всё ОК, размещаем следующий абзац…

Размещение Маркированного Списка

Дальше в статье мы видим, что идёт Маркированный список. То есть, перечисление пунктов и пункты обозначаются специальным обозначением (маркером) с отступом. Копируем эти пункты, нажимаем Ctrl+C. Здесь в редакторе нам необходимо после предложения поставить двоеточие, нажать снова 2 раза Enter и после этого вставить 2 этих пункта. После этого переходим в визуальный редактор, выделяем 2 этих пункта и нажимаем специальную кнопку Маркированный список. После того, как мы её нажали, выделилась только одна строчка, нужно, чтобы обе строчки были обозначены Маркированным списком.

Для этого перед невыделенноё строчкой ставим курсор, нажимаем Backspace и далее нажимаем Enter. Таким образом, оба пункта у нас выделяются специальным обозначением Маркированного списка. Если пунктов больше, мы таким же образом нажимаем Backspace и Enter для того, чтобы получить обозначение маркированного текста перед каждым пунктом. Возвращаемся в текстовый редактор и видим, что наш маркированный список обозначается тегами <ul> и каждый пункт списка обозначается тегами <li>.

Маркированный список
Маркированный список в WP

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

Как разместить изображение в WP

Переходим к размещению изображения.

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

  • на первом шаге надо нажать правую кнопку, вызвать контекстное меню и сохранить изображение в Google Keep. После этого у Вас появится в правой части вот такое меню Google Keep и изображение сохранится в Google keep;
  • далее переходим в Google keep по адресу keep.google.com и видим здесь наше изображение.

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

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

То есть, это изображение о настройке ставок. Я перехожу в Google Translate, пишу на русском языке Настройка стратегии назначения ставок. И уже знакомым нам образом я копирую текст на латинице в транслитерации. Иду в Google Keep, нажимаю правую кнопку на этом изображении и выбираю пункт Сохранить как”. Открывается папка, где я храню эти изображения и здесь я в имени файла вставляю в текст транслитерации и важно сохранить его, использую дефисы между пробелами. Потому что Windows нам не позволит имя файла сохранить с пробелами. Нажимаем кнопку Сохранить, всё, мы сохранили это изображение.

WaterMark

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

Для того, чтобы поставить watermark, мы на изображении нажимаем правую кнопку мыши, снова вызываем Контекстное меню и нажимаем пункт Открыть с помощью, здесь мы выбираем Paint (или любой другой визуальный редактор) и в Paint мы наносим watermark.

Поскольку изображение размещается для сайта sotnik.biz.ua, то и watermark мы поставим соответствующую. Как это делается?

Я выбираю в Paint инструмент создания текста, выбираю красный цвет. Нужно выбрать такой цвет, который бы выделялся на фоне изображения. Поскольку тут много белого и есть пустое место, то в этом месте я создаю watermark, то есть, нужно смотреть, где есть пустое место. Это может быть правый верхний угол, нижний правый угол, или там левый нижний угол. В данном случае вот здесь место, и я пишу сюда название сайта sotnik.biz.ua. Очень важно написать правильно название сайта, без грамматических ошибок. Если допущена грамматическая ошибка, то эта работа по представлению watermark будет сделана напрасно.

WaterMark
WaterMark

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

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

Добавление медиафайла
Добавление медиафайла в WordPress

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

добавление медиафайла
Добавление и настройка медиафайла на WordPress`е

Я выбираю подпункт Загрузить файлы и нажимаю кнопку Выберите файлы. Вот мой файл, я его выбираю, он загружается на WordPress и здесь надо подписать. Подпись должна быть релевантная тому, что изображено на самом изображении. Я пишу здесь “Настройки стратегий назначения ставок”. Подпись сделал, также важно прописать атрибут alt, потому что это необходимо по SEO-требованиям , это важно делать на этапе размещения контента.

Оптимизация атрибута изображения — “alt”

Есть 2 варианта того, что должно быть прописано в alt:

  1. Первый вариант, мы возвращаемся в Google Translate, копируем английский перевод того, что мы здесь изображали и вставляем в поле alt английскую версию.
  2. И второй вариант – это написать просто на русском языке, например, “настройка ставок Google Аds”. Почему так? Потому что у нас вся статья про Google Аds, я могу эту приставку ставить к любому alt.

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

То есть, в изображении важно:

  • правильное название файла,
  • прописать alt
  • прописать названия самого изображения.

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

Добавление подзаголовков в контент статьи

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

Подзаголовок второго уровня
Заголовок второго уровня (H2)

Мы переходим в текстовый редактор, вставляем этот Подзаголовок в текстовом редакторе, возвращаемся на визуальный редактор. Выделяем этот Подзаголовок и в этом пункте выбираем Заголовок второго уровня (H2). Тут важно понимать, что все заголовки нужно делать второго уровня в самом теле статьи. Потому что Заголовок первого уровня у нас создаётся здесь, а он на странице должен быть только один по правилам SEO. Значит, все остальные заголовки – второго, третьего, четвёртого уровня. В данном случае у нас Подзаголовок второго уровня. Поскольку, у нас в контенте находится посредине, мы тоже, нажав соответственную кнопку делаем его посредине. Вот так у нас получился заголовок.

Если мы в текстовом редакторе посмотрим, то увидим, что заголовок у нас выделен с помощью тега<h2 style-“text-align: center, то есть, атрибут тега <h2, который ставит его по центру, всё нормально у нас получилось.

Выделение текста жирным

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

Выделение жирным
Выделение текста жирным шрифтом

Всё, получили такой же вид текста, каким он у нас является в нашем тексте.

Нумерованный список

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

Выбор рубрики для статьи

Что ещё важно сделать? Важно выбрать подходящую рубрику на WordPress. Поскольку, у нас речь идёт про значение ставок в Google Аds, то что мы здесь выберем? Вот эту рубрику Всё про Google Аds”, поставим галочку в соответствующем окне.

Выбор подходящей рубрики для контента

Метки для статьи

Метки можно выбрать из часто используемых, вот у нас всплывает:

  • “Google Аds”
  • Контекстная реклама
  • Полезно
Метки для статьи...
Выбор меток для статьи…

Подобным образом, мы подбираем подходящие метки для статьи…

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

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

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

Изображение записи в главной ленте блога
Вид изображения записи в главной ленте блога SOTNIK

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

Оглавление статьи

Оглавление статьи
Оглавление статьи “Стратегия назначения ставок”

На что ещё важно обратить внимание? Важно ещё создать оглавление. Как создаётся оглавление? Давайте посмотрим, как оно создаётся. Мы пишем “Оглавление:” и выбираем Заголовок 3 или можно Заголовок 2. И просто маркированным списком пишем все важные названия пунктов, которые есть в нашей статье. Названия мы видим в исходном файле документа в Google docs оно удобно вытягивается в левом меню.

Структура документа — Оглавление
Структура документа Google Docs по сути и является Оглавлением…

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

Как это делается? В маркированном списке оглавление для каждого пункта списка оглавления устанавливается ссылка и в ссылку ставится идентификатор. Он пишется следующим образом: # (решеточка) и уникальное имя идентификатора. Пишем “Оглавление:”, как я уже говорил, выбираем для этой надписи Заголовок 3 и далее создаём маркированный список оглавления.

В данном случае, у нас будет “Ручная стратегия назначения ставок”. Выбираем Маркированный список, пишем “Ручная стратегия назначения ставок”. Потом у нас будет второй пункт и так далее…

Далее важно установить идентификатор данного подраздела. Выделяем пункт Оглавления, нажимаем на ссылку и здесь ставим # (решеточку) и создаём уникальный идентификатор данного пункта… Как создать уникальный идентификатор? Я, для того, чтобы не путаться ставлю просто текущую дату, а это у нас 10.09.2020 и ставлю цифру “1”. Получаем идентификатор “#100920201”. Это у нас будет первый этап оглавления, нажимаю Enter.

Переходим в текстовый редактор, мы видим, что наш пункт преобразился, появилась ссылка, за ссылку отвечает тег и есть атрибут тега <а href со значением в котором находится сам идентификатор данного пункта. И для того, чтобы при нажатии на эту ссылку статься автоматически скролилась на соответственный раздел, а в нашем случае это раздел Ручная стратегия назначения ставок, то для тега <h2 я прописываю уникальный id и значение этого id должно полностью совпадать с этим значением, на которое ссылается этот пункт меню, но без решётки. То есть, я копирую просто значение этого атрибута href и вставляю в id для тега <h2>, всё.

Интерактивное Оглавление
Создание интерактивного Оглавления

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

Как можем видеть, для каждого пункта меню есть уникальное значение атрибута href и каждое уникальное значение проставлено в атрибуте id.

html-код интерактивного оглавления на блоге SOTNIK
html-код интерактивного оглавления

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

ВидеоСкринкаст “Как разместить контент на блоге на WordPress”

Смотрите скринкаст на скорости x2, чтобы сэкономить время:

Подпишитесь: