wp paragraph что это

Возвращаем старый редактор WordPress: универсальный плагин и PHP код

Почему стали отказываться от гуттенберга

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

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

Плагин Classic Editor

Вернуть прежний редактор для текста в WordPress можно с помощью плагина Classic Editor. Устанавливается стандартно через поиск в панели вордпресс.

Переходим в Настройки > Написание. В стандартной панели появилось два пункта.

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

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

Настройка в ClearfyPRO

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

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

Clearfy с промокодом

Возвращаем старый редактор WordPress с помощью кода

Перед внесением изменений обязательно поверяем и обновляем правильно версию PHP. Существует одна строчка, которую необходимо прописать в документ function. Разберем на примере Twenty Nineteen. Для начала дам конфигурацию, копируем ее.

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

Конечно лучше все манипуляции с изменением вордпресса проводить через FTP соединение.

Если хотите воспользоваться FTP, то искомый файл лежит в такой директории wp-content > themes > twentynineteen (соответственно, название шаблона будет ваше, а не twentynineteen). Нажимаем правой кнопкой мыши и выбираем Просмотр/Правка, откроется программа для изменения документов PHP, установленная по умолчанию на вашем компьютере.

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

Источник

Вордпресс редактирует (чистит) код. Что делать?

Как удалить тег «p» в WordPress

Кому-то это доставляет массу неудобств. Правда я не пойму каких. Как можно вообще форматировать текст, разбивая его на абзацы, не используя специально предназначенный для этого тег? (Если кто-то считает по-другому, пожалуйста — это можно обсудить в комментариях).

Плагин wpautop control

Так вот, чтобы облегчить жизнь таким пользователям, bigsmoke, написал специальный плагин wpautop control (WordPress Auto Paragraph, наверное он так расшифровывается).

После установки плагина, в настройках плагина (Параметры→wpautop control options) простым нажатием флажка можно отключить все теги p.

Normally, WordPress filters your posts’ content using the wpautop filter. Roughly, what this filter does is that it replaces newlines and empty lines with
or

. The setting below lets you turn this filter on or off. (You can later override it on a post-by-post basis by setting the wpautop custom field to ‘true’ or ‘false’.)

Но этот плагин тоже не всегда помогает.

Редактирование файла functions.php

Если не хотите устанавливать плагин, то можно добавить в файл functions.php вашей темы одну строчку (можно в конце файла).

Но я столкнулся с другой проблемой.

Как избежать от автоматического форматирования текста в WordPress

Сейчас я объясню с чего всё началось. Мне нужно было на сайте клиента отформатировать страницу с наградами и их описанием. Сайт работает под управлением ВордПресс.

Чтобы отформатировать (сделать отступы) с помощью перевода строк, да и еще на 3-х языках, у меня ушел целый час времени! Почему? Потому что Вордпресс сам редактирует код. Для решения данной проблемы, добавлять стили к картинке я не хотел, потому что клиент не сможет его применить с помощью стандартного визуального редактора.

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

С этим мириться никак было нельзя и пришлось искать в нете возможные пути решения данной проблемы.

В первую очередь пришла мысль воспользоваться одним из двух вариантов:

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

Верстать с помощью клавиши «Enter» в Вордпрессе не только неправильно, но и гемморойно

Но как задать отступ снизу у картинки сертификата? Ведь в Вордпрессе верстка делится на шаблон для рубрик и шаблон одной записи. То есть изменние коснется всего сайта. И у всех картинок появится отступ.

Вот это и сработало!

Кстати очень странно, но у меня этот плагин стал полезным лишь, когла я убрал флажок (как отмечено желтым маркером).

В WordPress в настройках можно отключить функцию автоматического исправления некорректного XHTML-кода.

Настройки → Написание → «WordPress должен исправлять некорректный XHTML-код автоматически»

Вот так, преодолевая какое-то препятствие, нахожу что-то новое и полезное для себя. А потом — охотно делюсь своими находками в своем блоге.

Источник

Классический редактор WordPress для отключения Gutenberg

Приветствую! Выход новой версии WordPress запланирован на 6 декабря 2018 года, единственной отличительной особенностью релиза станет переход на новый редактор с кодовым названием Gutenberg — это фундаментальный сдвиг.

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

В преддверии выхода WordPress 5.0 авторы плагинов получили рассылку о грядущих изменениях. Примечательно то, что письмо не достигшее адресата из-за неработающей электронной почты или с включённым автоответчиком стало поводом для закрытия плагина.

Противники нового редактора Gutenberg, которых немало среди сообщества, могут прямо сейчас установить и активировать плагин Classic Editor, который доступен для загрузки на официальном сайте.

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

При активации плагина на странице настроек публикации (Настройки — Написание) появится одна опция, позволяющая сделать выбор одного из двух вариантов:

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

Так выглядит классический редактор WordPress:

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

Выше я привел пример того, как в редакторе кода выглядит блок Абзац, в котором написано единственное слово: «Текст». Эти комментарии отсутствуют в исходном коде страницы, соответственно поисковые роботы их не увидят.

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

Вопросы и ответы помогут узнать больше о классическом редакторе Classic Editor для WordPress и переходном периоде:

Поскольку плагин Classic Editor является центральным звеном в этом переходе, рассматривается возможность его интеграции при обновлении WordPress до версии 5.0. В новых установках WordPress потребуется добавлять плагин вручную, поэтому он включён в список рекомендуемых плагинов для увеличения видимости. Вы готовы к изменениям?

Источник

Пять способов расширения функциональности стандартных блоков в WordPress

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

Для таких ситуаций в WordPress cуществует несколько инструментов о которых я расскажу в этой статье.

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

Допустим нам необходимо добавить нижний отступ в 100 px к блоку Обложка на одной из страниц. Для этого добавим к нему класс mb-large :

… и затем в дополнительных стилях создадим новое CSS правило:

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

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

Так же как и в первом способе, дополнительные стили добавляют к блоку CSS класс. Разница заключается в том, что зарегистрированные стили появляются в специальном разделе в редакторе, и чтобы добавить стиль не нужно вводить СSS класс вручную, достаточно просто кликнуть на него. Разберем на примере.

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

Это отличный кейс чтобы использовать блок Группа и создать для него дополнительный стиль Карточка, потому что такая комбинация элементов повторялась на большом количестве страниц.

Чтобы добавить стиль, используем функцию registerBlockStyle() :

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

После того как мы добавили код из примера выше, в редакторе должен появиться дополнительный стиль для блока Группа:

Последнее, что нужно сделать это написать стили для этого класса:

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

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

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

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

Регистрация вариации выполняется с помощью функции registerBlockVariation() :

Если мы все сделали правильно, то в меню вставки блоков должен появиться новый «блок» СTA (Call To Action):

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

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

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

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

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

Вкратце рассмотрим, как зарегистрировать новый паттерн. Допустим мы часто используем следующую структуру страницы:

На изображении видно, что мы используем следующие блоки:

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

Далее используем функцию register_block_pattern():

Заголовок

Лорем ипсум долор сит амет, дицерет молестиае нец цу. Уллум дицунт воцибус при ин, меа бонорум маиорум персецути цу. Веритус симилияуе ат еос, пробо ассум регионе цу вим, ид ноструд вертерем вим. Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Подзаголовок

Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Подзаголовок

Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Обратите внимание, что свойство ‘content’ должно быть подготовлено для вывода на экран (escaped). Это можно сделать с помощью инструмента CodeBeautify.

Если все сделано верно, то в редакторе должен появится новый паттерн:

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

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

Эти и другие задачи можно решить с помощью фильтров.

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

Фильтры блоков можно условно разделить на две группы: PHP и JavaScript.

Предположим, что нам необходимо добавить div c классом wp-block-list-wrapper ко всем блокам Список:

Из примера видно, что функция prefix_add_list_block_wrap() сначала проверяет с каким блоком мы имеем дело, и если это core/list > — оборачивает контент блока в дополнительный div.

Если мы все сделали правильно то маркап всех списков будет выглядеть вот так:

Стоит отметить, что этот способ не изменяет вывод блока в редакторе, а работает только с фронтэндом. Если вам необходимо изменить блок в обоих контекстах, стоит использовать JS фильтры.

JavaScript фильтры работают похожим образом. Они используют функцию addFilter() из пакета wp.hooks и в самой простой форме JS фильтр выглядят примерно так:

Другое отличие заключается в том, что именно JavaScript фильтры могут фильтровать. Некоторые работают с простыми строками, другие с объектами, третьи с React компонентами.

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

Этот пример использует фильтр registerBlockType для модификации объекта supports в опциях блока.

Если мы все сделали правильно, возможность выбора выравнивания исчезнет из тулбара:

В этом примере мы рассмотрели один из доступных фильтров. Если вы хотите узнать о JS фильтрах больше советую изучить официальную документацию и прочитать статью которую я написал для CSS-Tricks в которой я рассматриваю более сложный пример.

В этой статье мы разобрали пять способов расширения блоков WordPress. Подводя итог, повторим когда какой способ использовать

Источник

Работа с паттернами в WordPress

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

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

Паттерны расположены в меню вставки блоков в отдельной вкладке. По умолчанию в WordPrеss доступно несколько стандартных паттернов, которые разделены на категории: Кнопки, Столбцы, Галлерея, Заголовки, Текст.

Некоторые темы и плагины так же регистрируют паттерны, как например Twenty Twenty-One:

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

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

В WordPress cуществует две функции относящиеся к регистрации паттернов.

register_block_pattern_category() — регистрирует новую категорию паттернов, эта функция принимает два обязательных аргумента:

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

$pattern_properties поддерживает следующие свойства:

title и content — обязательные параметры, остальные опциональные.

Рассмотрим простой пример. Допустим мы работаем над проектом, где на нескольких страницах повторяется вот такая комбинация блоков:

Для начала создадим эту комбинацию на чистой странице:

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

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

Готовый код паттерна должен выглядеть примерно так:

Заголовок

Лорем ипсум долор сит амет, дицерет молестиае нец цу. Уллум дицунт воцибус при ин, меа бонорум маиорум персецути цу. Веритус симилияуе ат еос, пробо ассум регионе цу вим, ид ноструд вертерем вим. Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Подзаголовок

Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Подзаголовок

Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

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

Заголовок

Лорем ипсум долор сит амет, дицерет молестиае нец цу. Уллум дицунт воцибус при ин, меа бонорум маиорум персецути цу. Веритус симилияуе ат еос, пробо ассум регионе цу вим, ид ноструд вертерем вим. Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Подзаголовок

Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Подзаголовок

Еним бонорум адверсариум про ут, нец еирмод импетус фацилис ид, еи яуас лаборамус еос. Не яуо аугуе улламцорпер.

Обратите внимание, что для корректной работы register_block_pattern_category() и register_block_pattern() должны вызываться функцией привязанной к хуку init.

Если мы все сделали правильно, то в редакторе должен появиться новый паттерн:

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

Это можно исправить если вынести код паттернов в отдельные файлы.

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

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

unregister_block_pattern_category() — удаляет категории паттернов. Принимает только один аргумент — название категории.

unregister_block_pattern() — удаляет паттерн. Также принимает только один аргумент — название паттерна.

На примере это выглядит следующим образом:

Этот код удалит категорию и паттерн, которые мы зарегистрировали ранее.

Точно так же можно удалить стандартные паттерны. Код ниже удалит категорию «Кнопки» и оба паттерна, которые к ней относятся:

Для справки приведу названия всех стандартных паттернов:

Также отмечу, что если вам необходимо удалить все стандартные паттерны лучше использовать функцию remove_theme_support() :

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

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

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

Источник