Написание статей через визуальный редактор WordPress

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

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

Панель «Записи»

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

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

2. Добавить новую — отправляет вас в редактор записей для создания новой статьи.

3. Рубрики — отображает список всех рубрик на вашем блоге.

4. Метки — содержит список всех меток (тэгов), используемых в статьях. 

WordPress тем хорош, что это простой и функциональный движок для блога среди прочего выбора CMS. Как видите в панели Записи нет ничего лишнего, все интуитивно понятно. А раз все понятно, то жмем «Добавить новую» и перейдем к созиданию своей первой статьи.

Визуальный редактор WordPress

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

Заголовок

Первой строчкой будет отображаться блок ввода названия статьи (заголовка).

Я не буду подробно останавливаться на том, как составлять правильно заголовки к статьями. Это тема отдельного поста.

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

Как видите, имеется возможность написать свой адрес ссылки. Жмите кнопку «Изменить» и в поле ввода набиваете желаемый текст. Рядом кнопка «Получить короткую ссылку» позволяет получить укороченную ссылку на статью, вроде такой http://tech-geek.ru/?p=1109.

Панель форматирования текста

Тут представлены все доступные варианты извращения над текстом: делать его жирным, курсивом, ставить подчеркивание, устанавливать выравнивание и прочее.

Теперь порежем этот скриншот на части и рассмотрим каждый из них по очереди.

— Тут все ясно. Все тоже самое, что и в Word. Выделение текста жирным, курсивом и перечеркивание. Жирным удобно делать акцент на значимых словах и ключевиках. Курсивом можно пользоваться для выделения цитат, советов, отступления или применение каких-либо терминов. Перечеркивание можно применить в разных случаях. Все зависит от вашей фантазии.

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

 — Ну тут все до безобразия просто. Выравнивание текста слева, справа и по центру. Все как в Ворде.

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

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

1. Вставка адреса ссылки.

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

3. Поставив галочку вы добавите к ссылке атрибут target=»_blank», который позволяет открывать ссылку в новом окне. Рекомендую его всегда ставить, чтобы пользователь не терял ваш блог после перехода по ссылке, так как возможно он еще захочет породить по вашему сайту.

4. Поле для поиска статьи или страницы с вашего блога.

5. Список всех страниц и статей с вашего блога, который облегчает внутреннюю перелинковку.

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

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

Про добавление тэга more можно было бы и не говорить, но мне хотелось бы открыть вам небольшой секрет как можно повысить его функциональность. Хотя это, конечно, не такой уж и секрет, но все-таки не все об этом знают. Честно сказать, я сам не так давно об этом узнал, спасибо Сергею Myblaze. Вместо стандартного слова «далее» или «подробнее» которое по умолчанию настроено в вашем шаблоне WordPress, можно написать какое-либо другое. Заменить их можно легко и просто, тем самым привлекая посетителей. Пример такой замены вы можете видеть на главной странице моего блога в анонсе к этой статье, да и к другим тоже.

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

И там уже находим в коде этот тэг и просто-напросто дописываем желаемый текст внутри него. Только сделать это нужно так, чтобы между словом more в тексте кода и вписанным словом не было пробелов, также и в конце. Выглядеть это будет так <!—moreЧего же я могу не знать про редактор?—>. Пользуйтесь.

— Эти функции являются как-бы дополнительными. Тут есть включение проверки орфографии, полноэкранное отображение и включение/выключение дополнительной панели форматирования (второй строчки).

 — У меня вы можете заметить такую кнопку. Она позволяет вставлять код в текст статьи. Подключается она следующим плагином WP-Syntax вместе с плагином WP-Syntax Button. Эта функция помогает для блогов в которых описываются разные коды, например по программированию, о seo или про создание сайтов и блогов. Выглядеть они будут вот так:

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

 — Еще одни кнопки форматирования: подчеркивание текста, выравнивание по ширине и выбор цвета шрифта.

 — Этими опциями вы можете воспользоваться для вставки текста из других текстовых редакторов со снятием форматирования. Также вы можете удалить форматирование и после вставки.

 — Если вам необходимо вставить спец символ, например амперсант &, то жмите на значок Омеги. Далее два значка для применения табуляции к тексту. Табуляция применяется ко всему абзацу.

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

Вставка изображения (медиафайлов)

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

Нажав на этот символ вы переходите в окно вставки. Далее можно воспользоваться технологией drag-and-drop просто перетащив мышкой необходимый файл в специальное поле (оно большое, так что не промахнетесь ). Или нажав кнопку, выбрать файл с жесткого диска через проводник.

И далее переходите к настройкам вставки.

1 — Здесь отображается вся информация по добавленному вами изображению.

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

3 — Можно поставить ссылку в изображение. Тогда картинка станет кликабельной и будет отправлять посетителя по ссылке. Я предпочитаю убирать их, хотя может это и не правильно. Кто может подскажет, влияет ли ссылка в изображении на что-нибудь? 

4 — Выравнивание в тексте слева, справа и по центру.

5 — Можно настроить размер отображаемого изображения.

6 — И последняя кнопка «Вставить в запись» произведет вставку изображения в то место, где у вас был установлен курсор.

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

Кликнув на первое вы попадете в окно описанное выше, кликнув на второе вы удалите картинку.

Вставка видео

Вставить видео на блог также довольно просто. Я расскажу вам о том способе, которым пользуюсь сам. Установив себе малокушающий плагин Video Embedder вы сможете вставлять себе видюхи в блог с более чем 20 источников. Но меня больше интересует YouTube. Для этого находим понравившееся видео на этот видео-хостинге и копируем часть ссылки, которая идет после знака «=».

Далее вставляем этот идентификатор внутри следующих тэгов

И все. Видюха у вас в статье.

HTML Редактор WordPress

Помимо визуального редактора, в котором сразу видно отображение текста, его форматирование, вставленные картинки и ссылки, WordPress предлагает вариант написания статьи через html редактор WordPress.

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

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

Подготовка к статьи публикации

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

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

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

Если вы используете плагин Platinum SEO Pack или All in SEO (а я надеюсь, что вы их используете, потому что…ну без них нельзя, а почему нельзя я расскажу в следующей статье), то необходимо заполнить поля Title, Description и keywords.

Ну и последнее, что остается сделать это настроить публикацию самой статьи.

Настройка публикации

Для этого мы воспользуемся блоком «Опубликовать».

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

1 — Месяц

2 — День

3 — Год

При установлении графика, ваша статья будет предъявлена на всеобщее обозрение только в тот момент, который вы указали. Это очень удобный инструмент, который позволяет контролировать поток публикуемых статей на вашем блоге. Настройка графика может помочь в случае, если вы знаете, что какое-то время не сможете получить доступ к блогу и решили подготовить несколько статей, которые будут публиковаться в этот промежуток времени. Также такой способ может быть полезен, когда у вас предвидеться много дел и вы знаете, что времени на написание статей у вас практически не будет. Или вы можете воспользоваться таким способом, чтобы опережать график, так сказать. Продуктивно поработав несколько дней над написанием постов и настроив их выпуск по дням, вы можете просто балдеть.

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