Как писать статьи в WordPress — визуальный и Html редакторы, заголовки и выделение ключевых слов

Обновлено 22 сентября 2022 Просмотров: 22 969 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодняшнюю публикацию я решил посвятить вопросу написания статей в HTML редакторе WordPress (в продолжении, как создать блог, описанной здесь).

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

Как писать статьи в Вопрдпрессе

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


Использование только HTML редактора в WordPress

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

Но мне этого было недостаточно, т.к. в тексте статей я активно использовал внутренние заголовки различных уровней (от H2 до H5), выделял код (PHP, CSS и т.п.) специальными тегами плагина SyntaxHighlighter и делал многое другое.

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

Но эта проблема успешно разрешилась благодаря замечательному WP плагину Post Editor Buttons, с помощью которого можно добавить сколько угодно много дополнительных кнопок на панель инструментов HTML редактора, запрограммировав их на определенные действия.

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

Т.е эта публикация будет представлять собой развернутое приложение к статье Проекту KtoNaNovenkogo.ru исполнилось 10 месяцев, 2000 посетителей в сутки. Как? (это не оригинальное название, а взятое из ретвитта одного из читателей, но оно, по-моему, даже более удачное, чем мое оригинальное название).

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

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

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

Для тех у кого пока нет своего WP блога, но желание стать блогером имеется, или же для тех, кто хочет переехать с другого блогового движка или бесплатной платформы на WordPress, я приведу ссылки на материалы по его установке и первоначальной настройке:

  1. Как установить Вордпресс на сервер (в деталях и картинках)
  2. Настройки, которые вы должны сделать сразу после установки
  3. Настройка ЧПУ (человеко-понятные URL) для WordPress
  4. Создание правильной страницы ошибок 404
  5. Оптимизируем блог для снижения его нагрузки на сервер
  6. Как устроены темы и шаблоны в WordPress

Приступаем к написанию статьи в HTML редакторе WordPress

Итак, для написания новой статьи вам нужно будет зайти в админку (http://sait.ru/wp-admin/) и выбрать из левого меню (если у вас используется стандартное оформление админки WP) пункт «Добавить новую» в области «Записи».

Добавить новую запись в админке Вордпресса

В результате откроется стандартная страница добавления статьи (поста), в которой будет присутствовать поле для ввода ее заголовка и большое поле для ввода текста поста.

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

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

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

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

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

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

А при чем здесь тогда заголовок поста в WP? А при том, что правильный TITLE должен формироваться из названия статьи плюс названия всего блога, и именно в таком порядке. Кстати, настроить правильное формирование TITLE в WordPress сможете с помощью плагина All in One SEO Pack описанном здесь. Плагин просто замечательный, одновременно позволяющий решить массу вопросов по внутренней оптимизации.

Итак, кроме непосредственно текста статьи, нам наверняка понадобится добавлять в текст картинки, ссылки, создавать списки, вставлять какой-либо код, цитаты, выделять определенные ключевые слова и словосочетания тегами акцентирования (теги логического выделения жирным STRONG и курсивом EM, а так же теги заголовков Н1 — H6). Подробнее об использовании тегов акцентирования вы можете почитать здесь .

Обращаю ваше внимание на различие между HTML тегом логического выделения «STRONG» и еще одним тегом выделения жирным «B», а так же между «EM» и «I». Первые из этих тегов (STRONG и EM) следует использовать не только для привлечения внимания читателей к важным моментам текста.

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

Выбор оптимальной структуры заголовков уровня H1-H6

Теперь что касается тегов заголовков H1-H6, которые тоже могут использоваться в статьях блога для расставления акцентов на нужных словах и фразах.

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

Кроме того, что внутренние подзаголовки (обычно начиная с уровня H2, H3 и далее) предоставляют дополнительную возможность структурирование текста, что улучшает их восприятие читателями.
Но есть еще один вопрос внутренней оптимизации сайтов, который связан с уровнями заголовков (от H1 до H6), используемыми на страницах WordPress блога.

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

Кстати, хочу посоветовать вам очень удобный способ, позволяющий наглядно увидеть в WordPress, где и какого уровня заголовки используются на том или ином сайте. Это плагин для FireFox (тут полный список плагинов для Фаерфокса найдете) под названием Web Developer.

Так вот, если вы выберите из меню этого плагина (его меню добавляется в верхнюю часть браузера) пункты «Контуры» — «Контуры заголовков», то все найденные на открытой в данный момент в браузере вебстранице будут обведены разноцветными прямоугольниками, рядом с которыми будет подписан их уровень H1 -H6.

Теги заголовков для статей

Как видно из приведенного выше рисунка, я для заголовка статьи установил уровень не H1, а H2, в то время как H1 используется для заключения в него описания всего проекта, т.е. не к какой-то конкретной статье, а ко всему блогу целиком.

Этот Маул в какой-то из своих статей упомянул, что заголовок уровня H1 должен быть на сайте одинаков для всех вебстраниц, но правда свою идею он никак не аргументировал. Тем не менее, я использую именно его схему. Для внутренних подзаголовков использую теги H3 и H4 (иногда и H5).

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

Теперь еще надо немного рассказать о том, как можно в WordPress поменять урони HTML тегов заголовков, например, для статей, или добавить, как это сделал я, один общий для всех уровня H1.

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

/wp-content/themes/Название темы/

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

Давайте посмотрим, где можно изменить уровень основных названий статей, расположенных на главной (за ее вид отвечает файл INDEX) и на страницах с полными версиями статьями (файл SINGLE).

Откроем сначала на редактирование INDEX. У меня в нем названия статей WordPress заключены в HTML тег H2 (второго уровня) и кроме этого они являются ссылками, ибо заключены в тег ссылки A:

 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка <?php the_title(); ?>">
 <?php the_title(); ?>
 </a></h2>

В постах же (за их внешний вид отвечает файл SINGLE) основные заголовки уже не будут являться ссылками, хотя тоже имеют уровень H2:

<h2>
 <?php the_title(); ?>
 </h2>

Если вас не устроит второй уровень, то просто поменяйте в этих файлах (INDEX и SINGLE) теги H2 на теги H1 и сохраните произведенные изменения (хотя, для главной этого делать нельзя, ибо будет больше одного H1 на странице, что не есть хорошо).

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

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

Инструменты Html редактора вордпресса для написания статей

Обратите внимание, что кнопки с надписями «b» и «i» на самом деле служат для вставки тегов STRONG и EM.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (36)

Дэн Гамбург

А разве не проще использовать Windows.live для опубликования? Нафига напрямую через Вордпресс, по моему очень неудобно.

Дмитрий

Дэн Гамбург: HTML редактор WordPress всем устраивает, но Windows.live давно хотел попробовать, даже начал искать материалы по этому поводу, но пока что не сложилось знакомство.

yrygvay

А можно поинтересоваться, ну когда всё тоже вы по джумле напишите,

Там гораздо больше приложений, и очень не хватает вашего обзора на них

Расскажите!!!!

Дмитрий

yrygvay: стараюсь писать и про Joomla, просто WordPress мне сейчас немного ближе и актуальней, ибо на нем сейчас блог веду. Приношу извинения всем Джумлаводам за наметившийся перекос в сторону Вордпресс, думаю, что это временное явление.

yrygvay

Вот вот... а то приходится адаптировать все ваши статьи по WordPress для себя.

А ведь изначально было равновесие))))

Плюс вы раньше много писали про VirtueMart, а сейчас тишина,

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

Вот щас например уже прогнал по всем предложенным ресурсам с вашего сайта магазин. Теперь сижу и всё мониторю.

Поэтому ждём, ждём и ещё раз ждём.

Мало такого контента в сети как Вас

armo

Спасибо, очень познавательная статья по поисковой оптимизации WordPress, про заголовки H1-H6 вообще не знал, как и про значение b и strong

Konstanin

Напишите как поставить код счетчика в WordPress. На каждую страницу вручную ставить код как то не удобно.

Konstanin

Cпасибо, все получилось. Вот такой вопрос еще по( СMS-WP ). Размещаю ссылки (продаю) вручную, как вы и советовали. Вот необходимо установить ссылку только на главную страницу WordPress. Как это сделать? Разместил ссылку в footer (подвале), так она отображается на всех страницах Вордпресс, меня это естественно не устраивает. Как разместить нормально? И то же самое касается и внутренних страниц.Искал инфо по вашему блогу — не нашел. Заранее благодарен за ответ.

Ваш ученик.

P.S — Просто в заметках размещать не устраивает, поскольку одна ссылка размещается на 2 страницах — потеря прибыли.

Konstanin

Спасибо вам Дмитрий. Как поставить ссылку только на главную страницу WordPress — разобрался. Подписался на RSS. Жду статьи, думаю не только мне одному она пригодится.

volos_86

Дэн Гамбург: Ему нужна win7 так что пока Валит лесом.

Артём Савельев

Дмитрий: попробуйте Windows.live, вполне решает проблему.

Хотя, в свой блог приятнее как-то из его админки писать, а не через какие-то приложения. Уютнее что ли.

Сергей

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

Это из-за чего может быть?

И где надо код плагина подправить, для приведения в русский вид надписи «Subscribe without commenting»?

General Dexter

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

barnaul

В моём редакторе при нажатии b вставляется тэг

...

Я раньше не обращал на это внимания!

Уизерспун

очень полезная статья, спасибо.

У меня к вам такой вопрос:

Важно ли то, что мой домен .Ru хостится на сервере, размещённом в в другой стране (хостинг трамо)? ни на что это не влияет? на СЕО продвижение.

Otpad

а в коде Вашего сайта все по другому почему??

святослав

как сделать что бы название рубрики отображалось в Title???

aleksandr

Дмитрий, какие программы Вы можете посоветовать для написания статей offline с возможностю вставки в текст различных тэгов? Как Вы относитесь к программам подобной textkit для подготовки и публикации по расписанию? Там к сожалению набор тэгов довольно скудный, на мой взгляд. Спасибо.

Дмитрий

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

Татьяна

Подскажите, как можно редактировать меню. Данной информации не нахожу на Вашем сайте.

Виталий

h1 в header . php я правильно поставил?

<h1><?php bloginfo('description'); ?> </h1> — сюда?

Владимир

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

Игорь

Почему-то у меня второй набор выделения слов не работает, я в HTML редакторе ставлю теги B и I а после опубликования статьи они автоматически заменяются на STRONG И EM, не знаете почему так?

Виктория

Дмитрий, скажите,пожалуйста, обязательно для оптимизации наличие в статье всех h1,h2,h3? На некоторых шаблонах Вордпресс h1 слишком большой, что порой и картинку не видно. Как же быть? Менять на меньший? Спасибо.Читаю вас постоянно не только на сайте, но и в соц.сетях.

С уважением,Виктория

Артур

Спасибо вам за данную статью, буквально вырос на вашем сайте

alexf14

Доброго время суток!! подскажите а как поменять «title» на главной странице. использую плагин All in One SEO Pack. В общем, хороший плагин, но вот только проблемка с главной страницей(((( стоит где-то жесткая функция, или жесткий title прописан((((.

очень надеюсь на вашу помощь. с уважением Александр

Елена

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

Сергей

можно ли в вордпрессе на каждой странице — отдельное изображение заголовка или без изображения?

Женя

Дополнение: Да, кстати, посмотрите сами, как у меня маячат ключевики под статьями. Вот мой адрес сайта http:/ /kakperevezti.ru

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

Set

Здравствуйте...вопрос такой...почему когда я добавил новые кнопки через плагин Post Editor Buttons они не появились в редакторе?

Камал

Здравствуйте, у меня один вопрос, как избавиться от этого хвоста почему зависает ноутбук | Всё о Ноутбуках и Компьютерах

Сначала как положено заголовок поста — а за ним хвост, заголовок сайта.

Как избавиться от заголовка сайта?

Буду очень признателен. С уважением Камал

Дмитрий

Камал: Здравствуйте! Думаю, что тут вы найдете ответ на свой вопрос. Спасибо.

Влад

А где же в комментариях графа «Веб-сайт(обязательно)»

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

Павел

Уважаемые Дмитрий и коллеги по цеху, подскажите пожалуйста. Начал заниматься наполнением сайта статьями, пишу в MS Word и копирую потом в WordPress. Но данный процесс копирования начал надоедать — и время тратишь, и ошибки возникают, и иногда даже не все копируется (баги). Есть какой-то инструмент который автоматизирует такие задачи переноса?

Кирилл

Присоединяюсь к вопросу. Как максимально автоматизировать постинг из MS Word в WordPress.

Пока есть такие варианты:

Плагин Mammoth .docx converter — можно указать docx фаил и он импортирует фаил с базовой разметкой (заглавие h1 h2, жирный, курсив и т.д. и даже ссылки) Но хотелось бы значительно большей гибкости, а именно: задать теги к примеру , для ссылок добавлять nofollow и вообще использовать html код, к примеру вставки картинки, а при импорте эти дополнительные теги режутся!

Есть плагин Seraphinite Post .DOCX Source — задумка очень интересная, но непонятно как с этим работать. Разработчик наш https://habrahabr.ru/post/311420/ , а даже поленился интерфейс перевести! И не подготовил мануал как пользоваться его творением!

Вопрос остаётся открытым. Пока в теории я вижу такую концепцию:

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

$h1 class="style1"% Заголовок новости $/h1%

$img src="https://123.png"%

А тут текст со стандартным форматированием (выделенный курсив и т.д.)

После того, как вы всё набьёте в Word скопируйте и вставьте это в визуальный редактор WordPress, и переключитесь в текстовый вариант — будет сохранено форматирование (выделенный текст, курсив и т.д.) а после скопируйте весь текст в Notepad++ и сделайте замену $ на и верните полученный текст в текстовый редактор WordPress.

Всё равно это костыли... но некоторая автоматизация прослеживается. Но хотелось бы полной автоматизации!!! Может есть варианты лучше???

Анатолий

Дмитрий, здравствуйте.

WP не сохраняет пост с заглавной «Й».

Если написать «Здравствуйте» — сохраняет.

Если слово написать заглавными «ЗДРАВСТВУЙТЕ» — не сохраняет.

Может вы сталкивались, в чем может быть проблема?

Ваш комментарий или отзыв