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

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

Создаем новый пост

Входим в админ панель, выбираем Записи → Создать запись. Откроется окно редактора WordPress.

Редактор WordPress можно разделить на 3 части: визуальный редактор, HTML- редактор и вставка медиафайла.

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

Если к этому времени у Вас настроены ЧПУ  и установлен плагин RusToLat или ему подобный, то адрес поста будет повторять заголовок, только латиницей. В окошечке редактирования его можно откорректировать (сделать короче, например). Если ЧПУ не настроены, до написания постов обязательно настройте.

редактор WordPress

Если вид панели инструментов, как на скриншоте, нажимаем кнопку, помеченную цифрой «1» – появится дополнительная панель кнопок.

Кнопки редактирования текста в визуальном редакторе WordPress

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

Многие из них нам знакомы по редактору Microsoft Word. Обратите внимание, что когда наведешь курсор на кнопку, в большинстве случаев появляются подсказки, каким сочетанием клавиш (какими «горячими клавишами») можно вызвать эту команду.

Верхний ряд:

  • Первые три кнопки: B, I и ABC – означают жирный текст, курсив и зачеркнутый.
  • Дальше идут списки: маркированный и нумерованный.
  • Перевернутые двойные кавычки – это цитата. Поисковиками этот текст не учитывается.
  • Выравнивание текста: по левой стороне, по центру и по правой стороне.
  • Вставить или редактировать ссылку:

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

    как редактировать в редакторе WordPress

    В это окошко копируем адрес (URL) статьи, ее название и ставим галочку «Открыть ссылку в новом окне/вкладке». Нажимаем «Добавить ссылку».  Если ссылку нужно сделать на другую статью того же сайта, то ниже есть отличная возможность для этого. Не заполняя верхнюю часть, щелкаем на «или связать с существующим контентом» и выбираем нужную статью из списка ниже. WordPress автоматически заполнит верхние поля.

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

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

  • Отвязать (отменить) ссылку:

    Выделяем её, нажимаем на кнопку с перечеркнутой цепочкой – ссылка станет обычным текстом.

  • Вставляем разрыв текста и тег «Читать далее» («Читать полностью», «more»… – тоже зависит от установленного шаблона).

    Текст после этого тега не будет показываться на главной странице (это называется «убрать под кат»), а весь полностью будет отображаться на отдельной станице после нажатия на «Читать далее».

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

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

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

Нижний ряд:

  • Параграф – здесь можно выделенный текст сделать заголовком от 1-го до 6-го уровня, либо адресом ссылки:

redactor WordPress

  • Подчеркнутый текст
  • Выравнивание по ширине
  • Цвет текста. Если нажать на стрелочку справа, то можно выбрать цвет
  • Вставить, как простой текст. Если не нужно сохранять форматирование вставляемого фрагмента, то можно воспользоваться этой кнопкой.
  • Вставить из Word – вставляемый текст из Word сохраняет форматирование (по моему опыту: не всегда).
  • Убрать форматирование. Убирает цвет, выделение, еще какие-нибудь прибамбасы – не представляю, для чего это может понадобиться.
  • Вставить произвольный символ. Здесь можно выбрать любой символ из таблички:

Редактор WordPress

  • Убрать отступ и Увеличить отступ – убрать или увеличить отступ от левого края для выделенных строк.
  • Отменить и Повторить – эти кнопки нам знакомы.
  • Помощь – что приятно, на русском языке. Можно немного больше узнать про визуальный редактор WordPress, а особенно про «горячие клавиши» для работы в этом редакторе.

На этом урок про визуальный редактор WordPress заканчивается. В следующем посте я расскажу про HTML редактор.

В конце, как всегда, видеоролик:

 

Это тоже интересно:

Комментарии

  • Андрей пишет:

    Интересно. У Вас “параграф”, у меня “абзац” (это не важно), но я не видел, чтоб где-нибудь это работало, сколько ни выбирай вариантов-никакой реакции и всегда АБЗАЦ. Научите пользоваться, пожалуйста. Теперь узнал, что цитата не индексируется, это кое-где важно. Как пользоваться ” ? И вообще этот редактор какой-то усеченный, пока отредактируешь текст, чтоб он смотрелся на экране, раз 20 туда-сюда прыгнешь. Особенно тяжело абзацы регулировать (если копируешь текст из Word). На про текстовый редактор наверно будет еще интересней.

  • Андрей пишет:

    И всё? Попробую…

  • Алексей пишет:

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

    • Алексей, возможно, Вы уже решили проблему. У меня почти месяц не было интернета, поэтому ответить Вам сразу я не смогла.
      Если он у Вас был, а пстом пропал, тогда надо смотреть то, что Вы меняли. Возможно, установили или обновили какие-то плагины или обновили тему, или вордпресс. Последовательно нужно отменять эти изменения (возвращаться к старой версии) и смотреть, что повлияло.
      Если его не было изначально, войдите в Пользователи – Ваш профиль и посмотрите, возможно, стоит галочка “Отключить «визуальное редактирование» при написании”.

  • Алексей пишет:

    Да,Нина.Спасибо за ответ.Как Вы и сказали,решил эту проблему методом тыка.Сейчас всё в порядке.Только вот плагин “Раздвижные панели”работать перестал.Пока его деактивировал.А то всё,что в нём было,отображалось в подвале.Никак не пойму почему так.Больше не буду WP обновлять.

    • Андрей пишет:

      А какой у Вас браузер? У меня с Оперой похожие проблемы с некоторыми плагинами. А вот WP опасно не обновлять…

      • Алексей пишет:

        У меня самый любымый браузер Google Chrom.А то что WP нужно обновлять,это я знаю.Но и другое мнение от авторитетных товарищей тоже взял на заметку.Валерий Москаленко,например,советует обновляться только до предыдущей версии,т.к.новые версии слишком сыроваты и глюки происходят именно из-за этого.

        • Я вордпресс тоже сразу не обновляю. Но, правда, не дожидаюсь следующей версии, а просто выжидаю некоторое время. Рада, Алексей, что с редактором у Вас всё наладилось. Про раздвижные панели ничего не могу сказать: не пользовалась

  • Андрей пишет:

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

    • Kozak пишет:

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

  • Валентина пишет:

    Здравствуйте, Нина! У меня проблема возникла, никак не пойму, в чем дело. Видно, что-то не так нажала. Я статьи готовлю в Ворде, потом переношу в админку. Но вот в последнее время получается так, что в черновике у меня все стоит нормально. А когда начинаю просматривать изменения, куда-то исчезает все: между строчками нет интервалов. Я пропускаю строку, чтобы отделить абзац от абзаца, а на просмотре все слито. Такая же картина и между рисунком и строкой над или под рисунком. Даже последняя публикация поста так и вышла с одним рисунком без интервала. А сейчас я подготовила статью и не могу публиковать, слишком много слившихся мест. Что это может быть? Подскажите мне, пожалуйста. Как можно исправить?

  • Валентина пишет:

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

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

  • Валентина пишет:

    Нина, опять я торчу возле твоей статьи о визуальном редакторе. Я хорошо поняла, что когда надо сделать так, чтобы текст не прилипал к рисунку или к строке предыдущего абзаца, вот тогда выделяешь этот абзац, ставишь это выделение абзац. И он никуда не прилипает. Но теперь у меня другая беда. Таблица из моего Worda переносится нормально, а иногда делаются такие широкие строки, как будто там все два или больше интервала. И никак не могу отрегулировать. А в результате получается, урок опубликовала и в нем одна таблица нормально выглядит, а другая – с очень широкими строками. Как мне можно все это исправить?

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

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">