Записи и страницы WordPress: ищем различия! + Три полезных плагина и один код для визуального редактора

Дамы и господа, приветствую вас на своем Авторском блоге! О чем я хочу поговорить с вами сегодня? На самом деле у меня просто сотня идей для поста, и единственное, о чем я жалею, так это о том, что в сутках не 100, а лучше 200 часов, чтобы все свои планы и идеи я могла реализовать в виде новых статей на своем любимом блоге!

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

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

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

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

Страницы и записи WordPress: чем они отличаются друг от друга?

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

1. Записи — это ваши посты. Они в хронологическом порядке от новых к старым в виде ленты анонсов располагаются на главной странице вашего блога (конечно, если у вас в настройках главная страница имеет вид блога. Как это сделать, я рассказывала в посте о настройке панели администратора).
2. Страницы же в эту ленту не попадают — ссылки на них расположены обычно в меню блога.
3. Записи — это тематические заметки, которые вы будете создавать регулярно. По сути, ведение блога — это и есть создание и публикация статей на определенную (или неопределенную) тему.
4. Страницы обычно содержат некую служебную информацию: о ресурсе, карта сайта, обратная связь с автором — это стандартный набор страниц, который есть практически на каждом блоге. Можно создавать и другие страницы, если у вас есть в них необходимость. У меня, например, вы можете в меню под шапкой наблюдать страницы уроков Joomla и WordPress.
   

   Кстати, пользуясь случаем, покаюсь: идею слямзила у Петра Александрова и ни капельки не стыжусь (как говорит мой ребенок в ответ на мои призывы к его совести — да, я бессовестный и да, мне не стыдно! Я даже теряюсь, когда это слышу…). Впрочем, я не собираюсь превращать свой блог в кальку или подражание этому или другим успешным блогерам. А хорошую идею — ну почему же и не позаимствовать?

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

5. Страницам при желании можно сделать уникальное оформление, с записями такой фокус не пройдет — их внешний вид строго определен шаблоном.
6. Еще одно отличие заключается в том, что записи всегда относятся к какой-нибудь рубрике и могут иметь метки, а страницам рубрику и метки присвоить нельзя.

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

Как создать запись и страницу WordPress

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

1. Быстрая ссылка на форму создания новой записи
2. Вы можете переключиться на просмотр либо всех, либо только опубликованных записей
3. Или отсортировать их по нужным вам критериям
4. Осуществить пакетную обработку записей — сразу несколько удалить, например
5. Переключить вид с отображения заголовка на отображение с цитатой из записи
6. Все сведения о посте
7. А при наведении на название статьи мышиного указателя появляется меню быстрого доступа к редактированию, просмотру, удалению этой записи.

Так подробно описываю лишь по привычке — здесь все настолько интуитивно понятно, что вопросов не должно возникать вообще.

Абсолютно так же выглядит окно со всеми страницами WordPress. Показывать скрин? Думаю, не стоит.

Теперь посмотрим на окно создания новой записи:

1. Поле для заголовка записи
2. Здесь, собственно, вы и набираете текст, используя для его форматирования кнопки, о которых подробно поговорим дальше
3. Можно сразу опубликовать статью, нажав соответствующую кнопку, просмотреть, как она будет выглядеть на блоге («Предпросмотр»), сохранить как черновик, чтобы впоследствии продолжить ее редактирование. Интересная возможность: можно задать дату публикации, нажав на ссылку «Редактировать» под надписью «Опубликовать немедленно». Это бывает полезно, когда у вас готово, к примеру, несколько постов, которые лучше разнести по времени публикования. Для каждого задайте свою дату, и они появятся на блоге уже без вашего дальнейшего участия. Удобно так готовиться к длительному отсутствию, отпуску, отъезду — заготовил несколько постов и спи спокойно!
4. Здесь нужно указать рубрику для статьи, а если подходящей нет, то создать ее. Причем рубрики могут быть любой степени вложенности, для создания вложенной достаточно указать ее родителя. Впрочем, увлекаться не стоит — двух-трех уровней вложенности обычно более чем достаточно. Более сложная и запутанная навигация по рубрикам может окончательно сбить с толку вашего пользователя, а оно вам надо?
5. Здесь укажите несколько меток-тегов для вашей статьи. Это необязательный пункт, знаю наверняка, что многие блогеры метками не пользуются, а я вот использую их с удовольствием — по ним у меня происходит дополнительная перелинковка статей.
6. Кстати, нажав кнопку «Настройка экрана», можно отключать и включать нужные вам поля для редактирования. Поэкспериментируйте, может быть, вам потребуются какие-то дополнительные возможности. Мне же обычно хватает тех, о которых я написала.

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

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

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

Изначально панель визуального редактора выглядит так:

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

1. Добавление в статью изображений. Просто установите курсор в нужное место текста, нажмите эту кнопку, и в открывшемся окне выберите нужный файл либо у себя на компьютере, либо на сервере, либо указав его URL, а по окончании загрузки вы получите возможность отредактировать картинку, прописать ей название, описание, выбрать нужный размер, указать положение относительно текста и т.д.
2. Кнопки переключения между визуальным редактором и редактором HTML-кода. Визуальный редактор WordPress не всегда адекватно реагирует на наши пожелания. Меня, например, просто раздражает, что он не дает создавать вложенные списки и делать в одном пункте списка несколько абзацев. Редактирование кода в режиме «Текст» помогает мне победить вредный TinyMCE.
3. Группа кнопок, отвечающих за оформление выделенного участка текста — от одной буквы до все текста целиком — жирным, курсивом, зачеркнутым и подчеркнутым. Помимо визуального оформления, такое выделение играет еще одну роль — позволяет правильно оптимизировать тексты статей для поисковых систем. Однако у меня не SEO-блог, поэтому на этом заострять внимание не буду.
4. Создание маркированных и нумерованных списков — мои любимые, если вы заметили, кнопочки!
5. Оформление выделенного текста как цитаты. Притом не обязательно понимать все буквально и выделять так исключительно цитаты. Можно использовать эту возможность для выделения в тексте любых замечаний и фраз.
6. Форматирование выделенного текста по краям, центру или ширине.
7. Кнопки для простановки и удаления гиперссылок. Активируются они лишь тогда, когда вы выделите в тексте участок, который будет служить анкором для ссылки, или же анкор, ссылку с которого нужно снять.
8. Добавляет ссылку «Читать далее» — таким образом разделяет статью на анонс, который будет виден на главной, и весь остальной текст, который можно увидеть, лишь пройдя по этой ссылке.
9. Разворачивает редактор в полноэкранный режим — очень удобная вещь для тех, кому для творчества требуется простор!
10. Выделенный текст превращает в заголовки, абзацы, адреса и т.д. Зрительное оформление зависит от стилей CSS, прописанных для того или иного элемента.
11. Изменяет цвет шрифта
12. Кнопки для вставки текста вообще без форматирования — просто как набор букв, для вставки из ворда — убирает все вордовские теги, вставляет свои, и удаляет абсолютно все форматирование из уже существующего выделенного участка текста. Вижу, что немного неясно выразилась, но смысл в том, что текст из ворда или любой другой, например, скопированный со страницы какого-нибудь сайта в инете (ай-яй-яй, копипаст — как нехорошо!) нужно прогнать через эти кнопочки: нажимаете на нужную, появляется окно для вставки текста, вставляете его Ctrl+V, а редактор сам разберется с его html-кодом. Нужно это затем, что так любимый многими ворд дает на выходе такой грязный html-код, что черт в нем ногу сломит (простите 😳 )! А поисковики любят чистый и красивый код, не будем же их огорчать.

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

Три лучших плагина для визуального редактора WordPress

CKEditor

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

«Из коробки» панель CKEditor выглядит так:

Итак, мы в свое распоряжение и пользование получили несколько новых функций:

1. Переключение между режимами визуального и html- редактора — аналог вкладок в правом верхнем углу панели инструментов
2. Поиск по тексту
3. Замена фрагментов текста
4. Кнопка для быстрого выделения всего текста — аналог клавиатурного CTRL+A
5. Вставка якорей для создания навигации в пределах одной статьи и для создания ссылок на конкретные ее разделы
6. Добавление флэш-объектов,
7. смайлов и
8. фреймов в структуру документа
9. Выбор семейства и
10. гарнитуры (размера) шрифта
11. Помимо выбора цвета самого шрифта выделенного участка, теперь доступно и
12. изменение цвета фона для него
13. Кнопка, показывающая html-блоки документа

Но это далеко не все! Этот плагин для визуального редактора имеет массу настроек, которые даже вынесены в отдельный пункт меню админки. Обратите внимание: у вас ниже пункта «Настройки» появилось меню с настройками CKEditor.

И если вкладка «Обзор» нас интересовать сейчас не будет, поскольку на ней собраны общие сведения о плагине и полезные ссылки, то в «Basic Settings» заглянем обязательно, ибо основные настройки плагина хранятся именно там:

Помимо общих настроек, которые на у меня на скрине подписаны, сделать мы тут можем вот что:

1. Выбрать вид панели инструментов, которые отличаются меж собой количеством доступных кнопок форматирования. По умолчанию стоит «WordPress Full», но можно добавить еще получить еще более функциональный визуальный редактор, выбрав вариант «Full». Эту панель я рассматривать не стану, поскольку при наведении на любую кнопку всплывает подсказка о ее назначении, так что разобраться будет несложно.
2. Ширина панели инструментов
3. CKEditor можно использовать при написании комментариев, если вы оставите эту галочку. Мне эта панель в комментах показалась неуместной, и я галочку снимала, когда использовала сей плагин у себя на блогах
4. Соответственно, ширина панели в комментах, если она включена в предыдущем пункте

У CKEditor еще есть очень много настроек, которые связаны, в основном, с использованием в редакторе различных CSS-стилей, которые можно к нему привязать. Эти настройки находятся на вкладке «Расширенные». Также настраивается управление загрузкой файлов через редактор. А при знании языков программирования можно редактировать конфигурационные файлы плагина на вкладке «File Editor».

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

А мы пойдем дальше и обратим свой взор на следующий плагин для визуального редактора:

TinyMCE Advanced

Скачать можно либо через админку, либо здесь, установить — обычным способом: залить файлы плагина в папку с плагинами блога.

На панель инструментов визуального редактора после установки TinyMCE Advanced добавилось несколько новых кнопок:

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

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

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

И третий плагин для визуального редактора wordpress, о котором я расскажу вам сегодня, это

Ultimate TinyMCE

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

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

Основная прелесть Ultimate TinyMCE в его удобстве и гибкости: вы можете расположить на панели инструментов только те кнопки, которые вам нужны, и при этом для каждой указать, в каком из четырех рядов кнопок она будет расположена:

Помимо собственно кнопок форматирования текста, здесь можно настроить массу полезных вещей: например, вывод ID записей и страниц в админке (часто бывает нужно их узнать); этот плагин позволяет добавить виджет для PHP-кода (по умолчанию в WP можно в текстовые виджеты вставлять только HTML-код) и кое-что еще…

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

Из всех этих трех плагинов мне наиболее симпатичен последний — Ultimate TinyMCE. Как по мне, он самый удобный и мощный. Но немного поразмыслив, я все же полностью отказалась от использования этих плагинов.

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

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

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

Добавляем кнопки в визуальный редактор WordPress

Собственно, все сводится к добавлению в файл functions.php следующего фрагмента кода:

/*кнопки текстового редактора*/
function enable_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 $buttons[] = 'anchor';
 return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");

Происходит это примерно так:

1. Открываете файл functions.php, который находится в папке темы, установленной у вас на блоге, обязательно в Notepad++! (После редактирования в Блокноте я за ваш блог не отвечаю!)
2. Находите закрывающийся тег ?> в самом конце файла, в самой последней строке.
3. Ставите курсор перед ним и вставляете вышеприведенный код — CTRL+V
4. Сохраняетесь (notepad не закрывайте!) и идете в админку смотреть на результат. Если блог не открывается, выдает какие-то ошибки, то не паникуем, а возвращаемся в Notepad++, нажимаем CTRL+Z, тем самым отменяя последнее действие, вновь сохраняем файл, проверяем, заработал ли блог, и затем возвращаемся к п,2
5. Если же ничего не получилось, то либо пишем в комменты, либо ставим плагин из вышеперечисленных, либо живем и дальше со стандартным редактором.

Если операция прошла успешно, и пациент (блог) остался жив, то в окне создания новой записи мы наблюдаем такую красоту:

Добавился третий ряд кнопок:

• горизонтальная линия;
• верхний и нижний индексы;
• семейство и размер шрифтов;
• выбор стилей для выделенного фрагмента из доступных стилей шаблона;
• и желанный мною якорь!

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

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

И на этом я с вами сегодня прощаюсь! Напоминаю, в следующий раз речь пойдет об исключении страниц из навигации с помощью плагина и без него! Интересно? Подписывайтесь на обновления, у меня на блоге все интереснее с каждым днем!

С уважением, всегда ваша Web-Кошка!