Подготовка и публикация материала блога для контентного шаблона

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

• Введение (опция).
• Основные текстовые блоки, чьё количество блоков зависит от объёма статьи.
• Заключение (опция).

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

С технической точки зрения каждый логический блок имеет следующий элементный состав:

• Введение: текст (обязательный элемент при наличии данного блока).
• Основной текстовый блок: заголовок (опция), изображение (опция), текст (обязательно).
• Заключение: текст (обязательный элемент при наличии данного блока).

Для реализации разметки статьи используются стандартные HTML теги-контейнеры блочного уровня <div></div> с уникальными именными идентификаторами в качестве атрибута для каждого контейнера.

<div id="intro"></div>

<div id="heading_01"></div>
<div id="block_01"></div>

<div id="heading_02"></div>
<div id="block_02"></div>

<div id="heading_03"></div>
<div id="block_03"></div>

<div id="heading_04"></div>
<div id="block_04"></div>

<div id="heading_05"></div>
<div id="block_05"></div>

<div id="heading_06"></div>
<div id="block_06"></div>

<div id="heading_07"></div>
<div id="block_07"></div>

<div id="heading_08"></div>
<div id="block_08"></div>

<div id="heading_09"></div>
<div id="block_09"></div>

<div id="heading_10"></div>
<div id="block_10"></div>

<div id="conclusion"></div>

Удобно просматривать и редактировать в бесплатном блокноте с расширенными возможностями Notepad++.

Для подсветки HTML синтаксиса: Меню -> Синтаксисы -> H -> HTML.

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

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

<!-- intro -->

<div id="intro">

</div>

<!-- 01 -->

<div id="heading_01">

</div>

<div id="block_01">

</div>

<!-- 02 -->

<div id="heading_02">

</div>

<div id="block_02">

</div>

<!-- 03 -->

<div id="heading_03">

</div>

<div id="block_03">

</div>

<!-- 04 -->

<div id="heading_04">

</div>

<div id="block_04">

</div>

<!-- 05 -->

<div id="heading_05">

</div>

<div id="block_05">

</div>

<!-- 06 -->

<div id="heading_06">

</div>

<div id="block_06">

</div>

<!-- 07 -->

<div id="heading_07">

</div>

<div id="block_07">

</div>

<!-- 08 -->

<div id="heading_08">

</div>

<div id="block_08">

</div>

<!-- 09 -->

<div id="heading_09">

</div>

<div id="block_09">

</div>

<!-- 10 -->

<div id="heading_10">

</div>

<div id="block_10">

</div>

<!-- conclusion -->

<div id="conclusion">

</div>

Здесь всё предельно просто: нужный заголовок блока копируется из оригинала статьи и вставляется внутрь соответствующего тега-контейнера.

<div id="heading_XX">Заголовок блока XX</div>

Абсолютно не требуется использование привычных HTML тегов заголовков типа <h2></h2>, <h3></h3> и т.п. За обёртывание заголовков в подобные теги, а также за стиль заголовков отвечает шаблон.

На скриншоте свёрнуты теги-контейнеры с текстовым наполнением, чтобы позволить лучше видеть размеченные заголовки. Да, в Notepad++ можно и так.

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

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

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

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

На скриншоте показан правильный вариант форматирования текста в Ворде.

Текст внутри тегов-контейнеров должен быть корректно отформатирован с помощью минимального набора HTML тегов без добавления каких-либо атрибутов. Речь идёт о тегах абзацев и списков.

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

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

В самом скромном варианте можно проводить форматирование вручную внутри редактора материалов Joomla. Это путь для редких ценителей.

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

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

Правильный вариант HTML форматирования текстового фрагмента-примера приведен в следующем шаге.

На скриншоте результат полностью автоматического форматирования с помощью приложения DreamWeaver.

Правильный вариант HTML форматирования текстового фрагмента-примера:

<p>Параллельно с увеличением спроса  на грузовики (и на седельные тягачи в частности) наблюдается интерес к  китайскому автопрому. Если лидером 2023 года стал «КамАЗ» с 31 тысячей проданных  грузовиков, то следующие четыре бренда представляют Китай. Это:</p>
<ul>
  <li>SITRAK  (23,6 тысяч грузовиков);</li>
  <li>Shacman  (20,8 тыс.);</li>
  <li>FAW  (15,8 тыс.);</li>
  <li>Howo  (6,9 тыс.).</li>
</ul>
<p>Кстати, из 10,5 тысяч проданных  за январь-апрель тягачей около 7000 пришлось на «китайцев». Это две трети от  общего числа и в 100 раз больше, чем год назад — за четыре месяца 2022 года  бренды из Поднебесной продали всего 68 тягачей. Тенденции очевидны.</p>
<p>Растет спрос и на технику с  пробегом. Средняя цена на тягач б/у в апреле 2023 года составляла 3,3 млн.  рублей. Почти две трети вторичного рынка поделили пять брендов:</p>
<ul>
  <li>Volvo  (17,8%);</li>
  <li>Scania  (13,4%);</li>
  <li>DAF  (11,7%);</li>
  <li>MAN  (11,1%);</li>
  <li>«МАЗ» (9,8%).</li>
</ul>
<p>Эксперты объясняют популяризацию  тягачей с пробегом дефицитом новых грузовиков, который возник в марте 2022  года. Тогда из России ушли Volvo Trucks,  Scania, Mercedes, Iveco, MAN, DAF, другие именитые бренды. Очевидно, их места в ближайшие пару  лет займут российские и китайские производители.</p>

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

Сколько не старайся всё стандартизировать, а всё равно случиться ситуация, когда статья под формат не подходит. Так и в этом примере.

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

Поскольку внутри текста все заголовки блоков шаблон превращает в заголовки <h3></h3>, то логично повысить заголовок рейтинга до <h2></h2>. Такой вариант реализации совершенно не будет противоречить логике.

Вот как мы это сделаем: для публикации заголовка <h2></h2> используем следующий по порядку свободный текстовый блок, ведь любой HTML код внутри блока используется для отображения в конечном виде. Заголовок блока при этом оставим пустым, а лучше вовсе удалим.

<div id="block_04">
<h2>Топ-5 седельных тягачей 2023 года</h2>
</div>

Далее продолжим публикацию позиций рейтинга по стандартной схеме.

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

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

На скриншоте завершающий фрагмент шаблона разметки с наполнением.

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

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

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

• Заголовок (поле ввода) –> Заголовок статьи.
• Алиас (поле ввода) –> Перевод заголовка статьи.
• Материал (вкладка) -> Описание (поле ввода текста) -> Тело статьи, размеченное тегами-контейнерами и отформатированное прочими HTML тегами.
• Материал (вкладка) -> Категория (поле выбора) -> Выбрать подходящую подкатегорию блога.
• Блог (вкладка) -> Выбор контентного шаблона (поле выбора) -> Одна колонка (не отражено на скриншоте).
• Сохранить.

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

Статья успешно опубликована и доступна на сайте по адресу https://www.howo.pro/blog/ratings-and-tops/top-tractors-2023-comparison-of-technical-characteristics.

Теперь самое время переходить к подготовке изображений для статьи. В качестве основной части имен файлов изображений будет использоваться алиас статьи, он получился таким: top-tractors-2023-comparison-of-technical-characteristics.

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

Здесь и далее будем рассматривать процесс подготовки изображений на примере иллюстрации к первой позиции рейтинга статьи – седельном тягаче DAF XF 105.

Изображение нужно получать легальным путём, чтобы избежать претензий по авторским правам. Да и вообще: тырить в наглую – очень плохо.

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

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

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

Данный шаг является не обязательной опцией.

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

Для удаления фона оптимально использовать доступные онлайн инструменты. Для работы некоторых из них может потребоваться включение VPN. Основные отличия схожих по сути сервисов:

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

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

Данный шаг является необязательной опцией.

Потребуется Adobe Photoshop или его аналог.

Хорошо работает с изображениями без фона. Сначала потребуется выполнить триминг (подрезку) по прозрачным пикселям, затем холст нужно нарастить, но так, чтобы пропорции немного отличались от исходника. Файл без фона: 1152 x 864
Файл с измененными пропорциями: 900 x 800

Поскольку файл имеет формат PNG, а значит весьма объёмен, то стоит его хотя бы немного уменьшить перед публикацией на сайте, хотя бы до 600 точек по горизонтали или и того меньше.

Доступно использование двух форматов файлов: PNG и JPG.

Имя файла будем собирать из следующих компонентов:

• Алиас статьи (top-tractors-2023-comparison-of-technical-characteristics).
• Знак подчёркивания.
• Номер блока назначения (05)
• Расширение файла (.png)

В итоге (для данного примера) должно получиться:

top-tractors-2023-comparison-of-technical-characteristics_05.png

Используя медиа-менеджер Joomla, загрузить файл в папку хранения изображений блога.

В примере это images/blog.

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

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