
Как разместить статью на своем блоге? Этот простой, казалось бы, вопрос часто вызывает у новичков трудности. Визуальный wordpress редактор во многом облегчает эту задачу.
Всем привет! Сегодня продолжаем копаться в админке WordPress блога. С помощью моего осознанного стучания по клавишам и моего блога – blogmonet.ru – я расскажу, как можно разместить статью на wp блоге, используя для этого визуальный wordpress редактор.
Я уже говорил, что пока ваш блог на локальном сервере denwer, пока вы устанавливаете плагины, меняете дизайн и пр., – потихоньку наполняйте блог контентом. Пишите статьи, вставляйте изображения, добавляйте видео и аудиофайлы… Потом, когда вы выберете и оплатите хостинг и выложите свой блог в интернет, ваш ресурс не будет уже «голеньким новорожденным».
Конечно, основная составляющая большинства блогов (если это не фото-, видео- и музыкальные ресурсы) – статьи, посты. Добавить, или разместить статью на ваш WP блог можно с помощью встроенного визуального wordpress редактора. Как это сделать, я сейчас расскажу.
Как можно добавить статью на wordpress
Для того, чтобы добраться до этого самого визуального редактора (он же – форма для добавления статьи), в админке wordpress открываем экран «добавить запись».
В поле заголовка («введите заголовок») впишите название вашей статьи. Далее переходим собственно в поле визуального редактора.
Разместить статью в поле wordpress редактора можно несколькими способами:
- Писать сразу в редакторе
- Перенести текст из блокнота (Notepad) или подобного простого редактора
- Перенести текст с помощью адаптированного редактора, например, Windows Live Writer
- Писать в HTML редакторе, например, в бесплатном редакторе html Notepad++ (это больше подходит для продвинутых)
- Писать в обыкновенном Microsoft Word
Тут уж кому как удобнее, кто как привык. Кстати, про бесплатный редактор Notepad++ я уже писал.
Уже много лет для написания любых текстовых документов я пользуюсь Microsoft Word. Я привык к его полезным функциям, таким, как автоматическое написание слова с большой буквы после точки или в начале абзаца, подчеркивание многих ошибок, маркирование, выделение и многим другим.
Поэтому мне трудно писать без ошибок в том же Блокноте или непосредственно в визуальном редакторе wordpress. Так что мне ближе последний упомянутый мной вариант.
Из чего состоит визуальный wordpress редактор
Теперь давайте посмотрим, что же представляет собой редактор вордпресс.
Область для работы с «телом» статьи в wordpress редакторе можно разделить на четыре части (на рисунке я их выделил желтым цветом). Здесь я не беру в расчет инструменты, находящиеся справа от редактора и внизу: публикация, выбор рубрики, меток и нижние, работа плагинами и пр. Только вордпресс редактор.
- Инструмент для добавления медиафайлов (над панелью инструментов слева)
- Переключение режимов «визуальный/html» (над панелью инструментов справа)
- Панель инструментов (набор кнопок; в редакторе эта панель выделена серым цветом)
- Рабочий экран (под панелью инструментов)
Добавление медиафайлов с помощью редактора
В более ранних версиях wordpress инструмент для добавления медиафайлов выглядит так:
Здесь для вставки изображений, аудио, видео свои кнопки
В последних версиях вордпресс для добавления всех видов медиафайлов оставлена одна общая кнопка.
Еще одна особенность интерфейса, связанного с добавлением медиафайлов, – возможность не только загрузить с компьютера нужный файл, но и перетащить его на блог.
Впрочем, в моих планах написание подробного поста по добавлению изображений на wordpress блог. Там мы вместе с вами глубже залезем в вордпресс редактор.
Кому интересно, подписывайтесь на обновления BlogMonet.ru и выбудете получать на e-mail извещения о новинках. Уверяю, что будет много интересных и полезных постов на тему заработка в интернете с нуля и не только, создания своего блога, основах и секретах seo и smo, о работе копирайтером и еще о многом другом.
Если по каким-то причинам вы не можете или не желаете подписаться по e-mail, можно получать анонсы новых статей с помощью rss подписки (что такое rss лента).
HTML режим wordpress редактора
Редактор wordpress имеет, как я уже говорил выше, два режима – работа в html и визуальный режим. Так как тема статьи «Визуальный wordpress редактор», на html режиме я подробно останавливаться не буду – как-нибудь в другой раз.
Скажу только, что мне удобнее работать с визуальным редактором, а в html режиме – править код, чистить его и тому подобное.
Панель инструментов html редактора выглядит так:
Этот режим хорош тем, что самые распространенные теги можно не набирать клавишами, а использовать кнопки.
- жирный шрифт (кнопка «b»)
- курсив («i»)
- выделение крупных цитат в блоки с отступами слева и справа и отбивкой сверху и снизу (кнопка «b-quote»)
- перечеркнутый текст («del»)
- вставленный позднее текст («ins»)
- вставка ссылки («link»)
- вставка изображения из интернет («img»)
- маркированные («ul») и нумерованные («ol») списки и их элементы («li»)
- ссылка «читать дальше» («more»)
- выделение в тексте блоков программного кода («code»)
Есть еще очень ценная для невнимательных или неопытных вебмастеров кнопочка. Называется она «Закрыть теги». С помощью этой кнопки можно закрыть все незакрытые парные теги.
Вот и все функциональные кнопки html режима wordpress редактора. Не хотел заострять, а рассказал 🙂
Панель инструментов визуального wordpress редактора
Наконец-то добрался до того, о чем первоначально хотел написать статью :). Давайте поближе взглянем на панель инструментов визуального редактора.
Панель состоит из двух наборов инструментов: основного (верхняя строчка) и дополнительного (нижняя строчка инструментов). Дополнительную панель можно вызвать или скрыть с помощью соответствующей кнопки – она самая правая в основной панели.
Итак в панели инструментов я насчитал 28 кнопок. Но некоторые из них выполняют похожие функции, поэтому я их объединил и выделил цветом. Получилось 19 кнопок. Сейчас расскажу, для чего они.
Сразу отмечу, что многие из них можно встретить в основных текстовых редакторах. Тот же word имеет в своем арсенале все их, за исключением специфических. Так же многие кнопки визуального редактора wordpress дублируют вордпрессовский же html редактор. Тем не менее, давайте посмотрим на эти кнопки, на эти инструменты. Что же помогает нам разместить статью на своем блоге? Какие инструменты WordPress дал нам в помощь, чтобы мы могли легко добавить статью на сайт?
- Кнопки, объединенные мной цифрой 1, позволяют выделить текст жирным шрифтом, курсивом и сделать его зачеркнутым. Облекают выделенный кусок текста в теги <strong></strong>, <em></em>, <del></del> и соответствуют в html редакторе кнопкам «b», «i», «del».
- Кнопки под цифрой 2 позволяют сделать маркированные и нумерованные списки.
- Кнопка «кавычки», обозначенная мной «3», – аналог кнопки «b-quote» в html редакторе. Эта кнопка позволит вам вставить в статью цитату и визуально отделить ее от основного текста.
- Блок этих кнопок позволит выровнять текст по центру, левому лили правому краю.
- Вставка и удаление ссылки
- Вставка разделительного тега <more>.
- Включение/выключение проверки орфографии.
- Открыть редактор в полный экран.
- Открыть/скрыть дополнительную панель инструментов (нижнюю строку).
- Выбор стилей написания (обычный текст, заголовки H1-h6).
- Подчеркивание текста.
- Выравнивание по ширине.
- Выбор цвета текста.
- Процедура вставки текста из документа Word или другого документа.
- Отмена форматирования.
- Вставка произвольного символа (можно выбрать из предложенного списка).
- Отступы
- Отмена и повтор действий (действия «вперед» и «назад»).
- Помощь.
Вот такие они – полезные кнопки-инструменты в wordpress редакторе. Зная их назначение и правильно используя, я уверен, что разместить статью на блоге будет легко.
В следующей статье я рассказу, как сам добавляю статьи на блог. Кому интересно, заглядывайте. А еще лучше – подпишитесь на обновления. Форма подписки внизу статьи и слева в сайдбаре.
На сегодня всё. Удачи всем!
Спасибо, очень подробное описание. Подскажите, пожалуйста, почему текст не реагирует на изменения, если в HTML-редакторе пытаюсь задать стиль в div?
Спасибо, Светлана. Вы именно атрибут style с тегом div имеете ввиду? Если да, то может вы как-то неверно записываете значения этого атрибута. Я понабирал в html-редакторе, все получается. Может, точку с запятой или двоеточие или еще какую мелочь забыли поставить?
Вот такой вид должен быть у div с атрибутом style с заполненными значениями (Код в комментариях не виден, поэтому написал его без скобок. Первая и третья строки, естественно в таких скобках <>):
div style=»color: red; font-size: 2em;»
текст
/div
Большое спасибо! Попробую найти ошибки.
Cлов много, но бесполезно. Не нашёл ответа на вопрос.