Как писать посты во встроенном текстовом (HTML) и визуальном редакторе WordPress

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

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

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

Как написать пост и опубликовать его с помощью редактора WP

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

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

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

Практически все современные CMS имеют встроенный инструмент (тут все о системах управления контентом), где вы можете реализовать задуманное. Если вы являетесь приверженцем Вордпресс (тут - о самом популярном движке в мире), то имеете возможность его использовать, если после входа в админку перейдете в раздел «Записи» - «Добавить новую»:

Визуальный и текстовый редактор для WordPress - что выбрать?

Если вы отдадите предпочтение визуальному редактору, то весь текст, ссылки, изображения и другие элементы будут появляться в уже отформатированном виде, в котором они отображаются в браузере, то есть без указания HTML-тегов и их атрибутов, что удобно для неискушенного вебмастера:

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

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

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

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

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

Обычно заглавие статьи определено в файле single.php, который отвечает за вывод страниц записей. Но могут быть и варианты в зависимости от файловой структуры темы. Например, у меня заголовок страниц записей выводится с помощью content-page.php:

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

<php the_title(); ?>

Но продолжим. Итак, вписываем текст заголовка в специально отведенную для этого строку окна редактора:

Если сразу после ввода текста названия поста нажать на кнопку «Сохранить», то автоматически будет образована постоянная ссылка WP, изменяемую часть которой можно переделать по желанию (кстати, настоятельно советую произвести настройку permalinks сразу же после установки движка и модифицировать их в ЧПУ при помощи соответствующих плагинов транслитерации).

Причем, если вы используете на своем веб-ресурсе одно из этих расширений, то можно прописывать текст русскими буквами, которые после нажатия кнопки «ОК» будут вновь трансформированы в латиницу:

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

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

Использование кнопок форматирования в текстовом редакторе Вордпресс

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

Здесь хотелось бы отметить некоторые нюансы. Кнопки физического форматирования b и i на самом деле инициируют вставку логических тегов strong и em, которые по теории воспринимаются поисковиками по-другому.

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

Далее, <del> и <ins>, позволяющие отмечать фрагменты текста, соответственно удаленные и добавленные в новой версии документа, имеют специальный атрибут datetime, указывающий дату и время внесенных изменений. В веб-браузере данная информация не отображается, но она является сигналом для ботов поисковиков, фиксирующих HTML код страницы.

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

Для размещения программного кода (например, какого-нибудь скрипта) очень полезен <code>. Здесь тонкость заключается в том, что данный тег не предусматривает автоматического переноса текста, который не помещается в границы предусмотренной для данного контента области. Поэтому, чтобы перенести его на новую строку, используйте тег br в местах переноса.

Все подробности о некоторых выше указанных элементах веб-страницы (например, <del>, <ins>, <code>) вы можете почитать в этом материале, где даны конкретные образцы в разных вариантах.

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

Для вставки ссылки (здесь о создании гиперссылок в HTML вся нужная информация) в текстовом редакторе WP предусмотрена кнопка «link». При нажатии на нее появляется диалоговое окно, в котором можно либо вписать URL страницы внешнего ресурса, либо отыскать с помощью поиска имеющуюся на блоге или сайте статью, на которую вы желаете проставить внутренний линк:

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

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

Итак, подводите курсор мышки к нужному месту в окне редактора, жмете на ее левую кнопку, чтобы "застолбить место", а затем щелкаете по «more»:

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

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

Вставка картинок в окне текстового редактора WordPress

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

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

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

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

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

Кроме того, вы сразу можете настроить, будет ли картинка кликабельной либо нет (выбрать соответствующий пункт напротив опции «Ссылка»). Если да, то на какую страницу будет вести линк (медиафайл, страница вложения, произвольный URL).

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

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

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

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

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Создание сайтов

10 отзывов

  1. Евгений

    Хорошая и полезная стать! У меня вопрос, можно ли изменять формат ,, заголовков? Я имею ввиду в визуальном редакторе, уж слишком громоздкие они... Если я изменю шрифт и размер, но тег останется - как на это отреагируют поисковик и?

    1. Игорь

      Евгений, шрифт и размер никак не влияют на ранжирование сайта поисковыми системами. Настраивайте таким образом, чтобы юзабилити сайта был максимально продуманным и удобным для ваших читателей. Главное - теги заголовков, именно они имеют значение. Для того, чтобы изменить тип шрифта и его размер, нужно отредактировать файл Вашей темы style.css. Это можно сделать в админ панели Вордпресс: «Внешний вид» → «Редактор» и справа находите файл стилей CSS. Однако я все-таки рекомендую воспользоваться замечательным редактором notepad++ (здесь все о нем). Если Вы не совсем пока уверенно чувствуете себя в этой области, воспользуйтесь плагином Файрбуг для браузера Файрфокс (тут почитайте), который позволяет увидеть, что в визуальном формате будет происходить при редактировании html и css файлов прямо в окне браузера, так сказать, в прямом эфире. Советую почитать статью внимательно, там все разжевано. В других популярных браузерах (Opera, Google Chrome, IE) похожие инструменты уже встроены в последних версиях изначально (для вызова редактора в браузерах IE и Google Chrome достаточно нажать клавишу F12). Попробуйте, в любом случае, это новые знания. Я так понимаю, Ваш ресурс пока еще на Денвере? Если не получится редактирование, как только Ваш сайт появится в сети, напишите еще раз, указав при комментировании сайт, дам все инструкции по изменению необходимых свойств CSS.

      1. Евгений

        Игорь, огромное спасибо вам за ответ. У меня есть опыт работы с css стилями, файрбагом тоже пользуюсь время от времени. Копаться в css дело тонкое, требующее времени - я отношусь к этому как к тривиальной задаче и откладываю на потом, все потому, что есть у меня проблема: когда я начинаю редактировать один параметр css, то во мне просыпается перфекционист и начинает доводить до ума другие области сайта. Все это чревато большой потерей времени. А сайт я давно переместил на хостинг. Больше денвером стараюсь не пользоваться.
        Первоочередная задача на данный момент состоит в том, чтобы написать сео статьи - чем я собственно занимаюсь последние три дня. Хотя, признаюсь, в этой области (SEO) я полный новичок. Помогает плагин seo от Yoast (может слышали), однако я не знаю что делать с оптимизированными готовыми статьями, их же добавлять куда-то надо для индексации и ссылки где-то покупать, но я не бум-бум в этом вопросе)))
        Извините за столь длинный коммент,

        1. Игорь

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

          1. Евгений

            Игорь, спасибо. Буду ждать с нетерпением новой информации от вас, нисколько не пожалел что подписался на ваш блог.

  2. Константин

    Доброго времени суток.
    У меня вопрос по поводу закрытия внешних ссылок.

    У меня на сайте размещен скрипт конвертора валют со стороннего сайта, на который с этого скрипта ведет ссылка.

    Как закрыть и можно ли вообще закрыть подобные ссылки?
    Пробовал удалить ссылку непосредственно из скрипта - не получается...

    1. Игорь

      Константин, ну и в чем проблема? Прописываете nofollow и все...

  3. ilianna

    Влияет ли большое колличесвто html тегов на индексацию страницы?

    1. Игорь

      ilianna, Вы некорректно подписались при отправке комментария, поэтому он попал автоматом в спам. Я случайно при ручной модерации его обнаружил и увидел, что текст сообщения корректен, поэтому на первый раз его пропускаю, правда, мне пришлось немного его подкорректировать. При заполнении графы «Имя» в форме комментариев указывайте только имя или ник. Форма ilianna.ru является ссылкой на ресурс. В следующий раз будьте, пожалуйста, внимательнее.
      Что касается существа вопроса, какие теги HTML Вы имеете ввиду? Ведь тег А, который формирует гиперссылку, тоже HTML тег. А по рекомендациям поисковиков ссылок на странице не должно быть более 100. Другие теги, думаю, не влияют на индексацию. А почему Вы спрашиваете? У Вас какие-то подозрения на этот счет?

  4. Андрей Зиновьев

    Спасибо ! Все полезно ! - пригодилось !

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.