оформить статью WordPress

Как оформить статью WordPress

От автора

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

Что значит оформить статью WordPress

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

  • В статье должна быть, минимум одна фотография, с тегом alt;
  • Статья должна быть разбита на параграфы по 5-6 смысловых предложений;
  • Параграфы статьи нужно объединить в смысловые разделы с заголовками;
  • Заголовки разделов должны быть выделены тегами HTML h2-h3-h4, имеющими древовидную подчиненность;
  • При необходимости важный текст должен быть выделен жирным шрифтом, курсивом, цветом или подчеркиванием (не увлекаясь);
  • В текст могут быть добавлены цитаты;
  • В статье должны быть внутренние и внешние ссылки.

Всё это и есть оформление статьи, и оформить статью WordPress можно коробочными инструментами системы.

Как можно оформить статью

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

Разделение статьи на параграфы

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

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

При вставке статьи из редактора Word, система WordPress очистит специальную разметку Word редактора, но оставит списки, выделение, курсив.

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

очистить форматирование
Кнопка очистить форматирование текста

Для разбиения текста статьи на параграфы НЕ нужно переходить в текстовой редактор и использовать знания html. Достаточно делать простой перенос текста на клавиатуре, кнопкой «Enter».

параграф
Параграф в визуальном редакторе

Для контроля разметки всегда можно перейти в текстовой редактор, кнопкой «Текст». Правда и здесь вы не увидите тегов параграфа <p>, но увидите все другие теги html.

параграф текстовой редактор
Параграф в текстовом редакторе

Выделение подзаголовков разделов h2-h4 (SEO разметка)

SEO или оптимизированная разметка текста предполагает смысловое разделение статьи на разделы с заголовками h2 и подзаголовками h3, h4.

Теги h1-h2-h3-h4 это HTML теги, указывающие поисковым роботам смысловую разметку текста. Тег h1, в теле статьи использовать НЕ нужно. Начинать нужно с тегов h2.

В редакторе WordPress это можно сделать кнопкой «Оформление». Просто выделяешь нужный текст, и выбираешь на кнопке «Оформление» нужный тег.

заголовки оформление

заголовок h2 в тексте
оформление заголовков и подзаголовков в статье

заголовок h2 в текстовом редакторе

Добавляем фото

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

Чтобы добавить в статью фото, есть кнопка «Добавить медиафайл». Нажмем на неё и посмотрим, что она может.

кнопка добавить медиафайл
кнопка «Добавить медиафайл»

В системе три возможности добавить фото:

  • Из медиабиблиотеки. Доступно любое фото из ранее загруженных в библиотеку, для поиска есть фильтр по имени.
  • С локального компьютера.
  • Из любого хранилища файлов по URL картинки.
медиафайл записи
Оформить статью WordPress фотографией

Стоит отметить, что система ограничивает размер загружаемого в библиотеку файла, настройками вашего сервера в файле php.ini. Обычно это 64 МБ.

Для вставляемого в статью фото можно:

Задать любой размер на настройке размера «Произвольно», или использовать быстрые размеры оригинал, большой, средний и миниатюра, по параметрам, выставленным в настройках Общие>>>Медиабиблиотека.

параметры изображения
Вкладка параметры изображения

Указать ссылку для фото из вариантов:

  • Нет (убрать ссылку);
  • Медиафайл (для модального окна);
  • Произвольный URL (любая ссылка, в том числе, внешняя);

Можно дать фото подпись.

Обязательно нужно дать альтернативное название фото. Это будет тег alt в HTML картинки.

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

фото в статье
Кнопки быстрого редактирования фото

Обрати внимание: Через кнопку медиафайлы в статью можно добавлять, видео, аудио файлы, а также создавать галереи из фотографий.

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

Примечание:  шорткод (shortcode) WordPress это набор функций из Shortcode API (появился в WP 2.5.) вызываемых специальными кодовыми фразами, заключенными в квадратные скобки.

Расставляем ссылки

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

добавление ссылки
Оформить статью WordPress ссылками

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

  • Выделяете в тексте слово или фразу, она будет анкором ссылки;
  • В панели редактора жмете значок ссылки;
  • На анкоре появится окно, в которое, либо нужно вставить URL стороннего ресурса, либор открыть редактор ссылок;
  • В редакторе ссылки можно также вставить URL стороннего ресурса, добавить на ссылку тег target (открыть в новом окне) или найти статью/страницу сайта и сделать внутреннюю ссылку на эту страницу.

изменить ссылку

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

Если ссылку нужно оформить дополнительными тегами, например, noindex, nofollow, это можно сделать в текстовом редакторе (кнопка «Текст»).

Анонс/Отрывок

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

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

Создать анонс

Чтобы создать анонс статьи, нужно в тексте в выбранном месте поставить тег more. Для этих целей есть специальная кнопка. Особенность этого тега, в том, что анонс попадает в архивы и попадает в основное тело статьи. Когда мы будем разбирать проблему дублей сайта, ты поймешь, почему это плохо. Сейчас просто прими к сведению, если тег more поставить в паре с тегом noteaser, то анонс в основное тело статьи не попадёт.

тег more
тег more визуальный редактор
тег more текстовой редактор
тег more текстовой редактор
теги more noteaser
как правильно поставить теги more noteaser

Добавляем миниатюру

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

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

миниатюра записи

Метки

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

метки записи

Вывод

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

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

©WPkupi.ru

Еще статьи

Похожие посты:

Оставьте комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.