{"draftJsState":{"blocks":[{"data":{"image":{"id":"64b8f671de27f11fe01784a7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b0spn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы хотите создать пользовательский блок WordPress для своего сайта?","type":"unstyled","key":"88laq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя WordPress поставляется с большим количеством основных блоков для создания контента, вам может понадобиться что-то более конкретное для вашего сайта.","type":"unstyled","key":"flip9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы покажем вам два способа создания пользовательских блоков Gutenberg для вашего сайта WordPress.","type":"unstyled","key":"cac4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем создавать пользовательский блок WordPress?","type":"header-two","key":"826b9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"WordPress поставляется с интуитивно понятным редактором блоков, который позволяет легко создавать свои сообщения и страницы, добавляя контент и элементы макета в виде блоков.","type":"unstyled","key":"e9s9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию WordPress поставляется с несколькими часто используемыми блоками. Плагины WordPress также могут добавлять свои собственные блоки, которые вы можете использовать.","type":"unstyled","key":"9ugfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако иногда вы можете создать свой собственный пользовательский блок, чтобы сделать что-то конкретное на своем сайте WordPress, потому что вы не можете найти подходящий плагин блоков.","type":"unstyled","key":"73llb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью пользовательских блоков вы можете добавить на свой сайт уникальные функции и функциональность, которые могут быть недоступны в готовых блоках. Это может помочь автоматизировать процессы или сделать создание контента для вашего блога WordPress более эффективным.","type":"unstyled","key":"759pf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, вы можете создать пользовательский блок для отображения отзывов, а затем легко вставлять и управлять этим блоком без каких-либо знаний о кодировании.","type":"unstyled","key":"17sr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте посмотрим, как легко создать полностью пользовательский блок в WordPress.","type":"unstyled","key":"9finh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание пользовательских блоков для WordPress с помощью WPCode","type":"header-three","key":"evc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы новичок и неопытны в программировании, то этот метод для вас.","type":"unstyled","key":"bc0kr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"WPCode — это лучший плагин фрагментов кода WordPress на рынке, который позволяет очень легко и безопасно добавлять пользовательский код на ваш сайт.","type":"unstyled","key":"bgj0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он поставляется с функцией фрагментов блоков, которая позволяет легко создавать пользовательские блоки для вашего сайта WordPress без написания кода.","type":"unstyled","key":"1dgpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых, вам нужно установить и активировать плагин WPCode.","type":"unstyled","key":"1hvvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":46,"style":"BOLD"}],"text":"После активации вам нужно перейти на страницу Code Snippets » + Add Snippet на боковой панели администратора WordPress.","type":"unstyled","key":"flojt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только вы окажетесь там, нажмите кнопку «Использовать фрагмент» под опцией «Добавить пользовательский код (новый фрагмент)».","type":"unstyled","key":"74ve5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы перейдете на страницу «Создать пользовательский фрагмент», где вы можете начать с ввода имени пользовательского блока, который вы собираетесь создать.","type":"unstyled","key":"cab79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого просто выберите опцию \"Фрагмент блокировки\" в раскрывающемся меню \"Тип кода\" в правом углу экрана.","type":"unstyled","key":"dtm1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В поле \"Предварительный просмотр кода\" отобразится кнопка \"Редактировать с помощью редактора блоков\".","type":"unstyled","key":"1ur5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто нажмите на эту кнопку, чтобы запустить редактор блоков.","type":"unstyled","key":"7998i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь на вашем экране появится запрос с просьбой сохранить фрагмент кода, чтобы загрузить его в редактор блоков. Просто нажмите кнопку \"Да\", чтобы двигаться вперед.","type":"unstyled","key":"f3l1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда вы находитесь в редакторе блоков, вы можете легко создать пользовательский блок, используя готовые блоки, доступные в меню блоков.","type":"unstyled","key":"5lhrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого урока мы создам пользовательский блок для добавления отзывов на ваш сайт.","type":"unstyled","key":"cfiud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала вам нужно нажать кнопку \"+\" в верхнем левом углу экрана, чтобы открыть меню блока.","type":"unstyled","key":"adrkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отсюда перетащите блок заголовка в интерфейс редактора блоков и назовите его \"Отзывы\".","type":"unstyled","key":"8m616"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем вы можете использовать абзац, pull-quote или блоки цитат, чтобы добавить отзывы разных клиентов на вашем сайте.","type":"unstyled","key":"230fa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы даже можете использовать изображение, логотип сайта, значки социальных сетей или блоки слоганов сайта для дальнейшей настройки блока отзывов.","type":"unstyled","key":"99iht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете настроить размер, цвет текста или цвет фона ваших отзывов на панели блоков в правой части экрана.","type":"unstyled","key":"48e8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только вы закончите, не забудьте нажать кнопку «Обновить» в верхней части, чтобы сохранить настройки пользовательского блока.","type":"unstyled","key":"98l59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем просто нажмите кнопку «Вернуться к фрагменту WPCode» вверху, чтобы перенаправить на страницу «Редактировать фрагмент».","type":"unstyled","key":"ar4q3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только вы будете там, прокрутите вниз до раздела «Вставка» и выберите режим «Автовставка».","type":"unstyled","key":"9dguk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После активации фрагмента кода ваш пользовательский блок будет автоматически добавлен туда, куда вы решите вставить его на свой сайт.","type":"unstyled","key":"2sf9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем вам нужно настроить местоположение созданного вами пользовательского блока.","type":"unstyled","key":"f8bp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого просто щелкните раскрывающееся меню «Местоположение» в разделе «Вставить» и перейдите на вкладку «Страница-Специфический». Отсюда вы можете выбрать опцию «Вставить после публикации», если хотите показать свой блок отзывов после окончания сообщения.","type":"unstyled","key":"64jbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого вы также можете настроить количество сообщений, после которых должен появиться блок отзывов. Например, если вы введете число 3, то блок отзывов будет отображаться в каждом третьем посте.","type":"unstyled","key":"8jika"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете отображать блок между различными абзацами, после отрывков из сообщений и многое другое.","type":"unstyled","key":"12uiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако, если вы не нашли местоположение блока, которое ищете, вы также можете создать свое собственное правило условной логики, чтобы добавить пользовательский блок в предпочитаемое вами место.","type":"unstyled","key":"agfoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого прокрутите вниз до раздела \"Умная условная логика\" и включите переключатель \"Включить логику\".","type":"unstyled","key":"duhgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем необходимо нажать кнопку \"Добавить новую группу\", чтобы начать создание условного логического правила.","type":"unstyled","key":"26mhr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, если вы хотите показать только пользовательский блок, созданный на определенной странице или сообщении, вам нужно будет выбрать опцию «URL страницы» в раскрывающемся меню справа.","type":"unstyled","key":"9c4os"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого вы можете оставить выпадающее меню посередине, а затем добавить URL-адрес страницы WordPress по вашему выбору в поле слева.","type":"unstyled","key":"a0knu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете настроить правило условной логики для отображения пользовательского блока только на определенной странице, зарегистрированных пользователях, на страницах магазина WooCommerce, страницах Easy Digital Downloads, определенных датах и многом другом.","type":"unstyled","key":"bdf8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только вы закончите, прокрутите назад в верхнюю часть страницы и переключите переключатель «Неактивный» на «Активный». Затем нажмите кнопку \"Обновить\", чтобы сохранить настройки.","type":"unstyled","key":"7d8d8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь ваш пользовательский блок будет автоматически добавлен во все места, выбранные для фрагмента блока.","type":"unstyled","key":"afr72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имейте в виду, что созданный вами пользовательский блок не будет отображаться в качестве опции в меню блоков редактора Gutenberg.","type":"unstyled","key":"7uij7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":60,"style":"BOLD"}],"text":"Вам нужно будет настроить параметры блока, посетив страницу фрагментов кода на панели управления WordPress и нажав на ссылку «Редактировать» под фрагментом блока.","type":"unstyled","key":"876q6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откроется страница \"Редактировать фрагмент\", где вы сможете легко настроить блок или изменить его местоположение и правила условной логики.","type":"unstyled","key":"el9fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь посетите свой сайт, чтобы просмотреть пользовательский блок, который вы создали в действии.","type":"unstyled","key":"g29q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание пользовательских блоков для WordPress с помощью плагина Genesis Custom Code","type":"header-three","key":"b75ac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы ищете бесплатное решение, то этот метод для вас. Имейте в виду, что вам нужно будет ознакомиться с HTML и CSS, чтобы следовать инструкциям в этом методе.","type":"unstyled","key":"1moto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых, вам нужно установить и активировать плагин Genesis Custom Blocks.","type":"unstyled","key":"6q74m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот плагин предоставляет разработчикам простые инструменты для быстрого создания пользовательских блоков для своих проектов.","type":"unstyled","key":"f1oo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"Создайте пользовательский блок для WordPress","type":"unstyled","key":"6eivg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":20,"style":"BOLD"}],"text":"Вам нужно перейти в Пользовательские блоки » Добавить новую страницу с левой боковой панели панели администратора.","type":"unstyled","key":"34tgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это приведет вас на страницу редактора блоков, где вы будете создавать пользовательский блок для своего сайта WordPress.","type":"unstyled","key":"ek50j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отсюда вы можете начать с присвоения имени своему блоку.","type":"unstyled","key":"b60lp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь в правой части страницы вы найдете свойства блока, которые вы можете настроить.","type":"unstyled","key":"60uqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь вы можете выбрать значок для своего блока, добавить категорию и добавить ключевые слова.","type":"unstyled","key":"fqvab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Slug будет автоматически заполнен в зависимости от имени вашего блока, поэтому вам не придется его менять. Тем не менее, вы можете написать до 3 ключевых слов в текстовом поле «Ключевые слова», чтобы ваш блок можно было легко найти.","type":"unstyled","key":"eujl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь пришло время добавить несколько полей в свой блок. Вы можете добавлять различные типы полей, такие как текст, цифры, адреса электронной почты, URL-адреса, цвета, изображения, флажки, переключатели и многое другое.","type":"unstyled","key":"cjvfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы добавим 3 поля в наш пользовательский блок отзывов: поле изображения для фотографии рецензентов, текстовое поле для имени рецензентов и текстовое поле для текста отзыва.","type":"unstyled","key":"8eti9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто нажмите кнопку \"+\", чтобы вставить первое поле.","type":"unstyled","key":"btbfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это откроет некоторые опции для поля в правом столбце. Давайте посмотрим на каждый из них.","type":"unstyled","key":"db6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Метка поля: Вы можете использовать любое имя по вашему выбору для метки поля. Назовем наше первое поле \"Образ рецензентера\".","type":"unordered-list-item","key":"5pns9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Имя поля: Имя поля будет сгенерировано автоматически на основе метки поля. Мы будем использовать это имя поля на следующем шаге, поэтому убедитесь, что оно уникально для каждого поля.","type":"unordered-list-item","key":"di0co"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Тип поля: Здесь вы можете выбрать тип поля. Мы хотим, чтобы наше первое поле было изображением, поэтому мы выберем «Изображение» из выпадающего меню.","type":"unordered-list-item","key":"ftvde"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Расположение поля: Вы можете решить, хотите ли вы добавить поле в редактор или инспектор.","type":"unordered-list-item","key":"2g47g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Текст справки: Вы можете добавить текст для описания поля. Это не требуется, если вы создаете этот блок для личного использования, но может быть полезно для блогов с несколькими авторами.","type":"unordered-list-item","key":"5p649"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете увидеть некоторые дополнительные опции в зависимости от выбранного типа поля. Например, если вы выберете текстовое поле, вы получите дополнительные опции, такие как текст-заполнитель и ограничение по символам.","type":"unstyled","key":"u4k7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следуя вышеуказанному процессу, давайте добавим 2 других поля для нашего блока отзывов, нажав кнопку \"+\".","type":"unstyled","key":"3bl5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы хотите изменить порядок полей, вы можете сделать это, перетащив их с помощью ручки в левой части каждой метки поля. Чтобы отредактировать или удалить конкретное поле, необходимо щелкнуть метку поля и отредактировать параметры в правом столбце.","type":"unstyled","key":"63en0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только вы закончите, просто нажмите кнопку «Опубликовать» в правой части страницы, чтобы сохранить свой собственный блок Гутенберга.","type":"unstyled","key":"2vkpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Создание шаблона пользовательского блока","type":"unstyled","key":"e0pv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя вы создали пользовательский блок WordPress на последнем шаге, он не будет работать, пока вы не создадите шаблон блока.","type":"unstyled","key":"f2i6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаблон блока точно определяет, как информация, введенная в блок, отображается на вашем сайте. Вы можете решить, как это выглядит, используя HTML и CSS или даже PHP-код, если вам нужно запускать функции или делать другие продвинутые вещи с данными.","type":"unstyled","key":"2qai2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует два способа создания шаблона блока. Если вывод вашего блока находится в HTML/CSS, вы можете использовать встроенный редактор шаблонов.","type":"unstyled","key":"dcpag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С другой стороны, если вывод блока требует запуска PHP в фоновом режиме, вам нужно будет вручную создать файл шаблона блока и загрузить его в папку темы.","type":"unstyled","key":"c4hg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"Использование встроенного редактора шаблонов","type":"unstyled","key":"1qvgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На экране редактирования пользовательского блока просто переключитесь на вкладку \"Редактор шаблонов\" и введите HTML на вкладке разметки.","type":"unstyled","key":"cpp8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете написать HTML и использовать двойные фигурные скобки для вставки значений полей блока.","type":"unstyled","key":"4ms1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"3p3e1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"48ilu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"66a1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"dgn3m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"99cqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого просто переключитесь на вкладку CSS, чтобы стилизовать разметку вывода блока.","type":"unstyled","key":"1tf05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот пример CSS, который мы использовали для нашего пользовательского блока:","type":"unstyled","key":"9mu1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":".reviewer-name {","type":"blockquote","key":"5asn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"font-size:14px;","type":"blockquote","key":"172ad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"font-weight:bold;","type":"blockquote","key":"d1413"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"ITALIC"}],"text":"text-transform:uppercase;","type":"blockquote","key":"9j5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"76p8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":".reviewer-image {","type":"blockquote","key":"ferna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"}],"text":"float: left;","type":"blockquote","key":"5vnib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"padding: 0px;","type":"blockquote","key":"587c1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"border: 5px solid #eee;","type":"blockquote","key":"e2ubs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"max-width: 100px;","type":"blockquote","key":"8v728"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"}],"text":"max-height: 100px;","type":"blockquote","key":"bsp4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":"border-radius: 50%;","type":"blockquote","key":"c9pke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"margin: 10px;","type":"blockquote","key":"bt9ge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"3dmfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":".testimonial-text {","type":"blockquote","key":"d5suj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"font-size:14px;","type":"blockquote","key":"8ug5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"1a7ru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":".testimonial-item {","type":"blockquote","key":"flltt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"}],"text":"margin:10px;","type":"blockquote","key":"9c4gd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"border-bottom:1px solid #eee;","type":"blockquote","key":"9it9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"padding:10px;","type":"blockquote","key":"drqap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"69dno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"Ручная загрузка пользовательских шаблонов блоков","type":"unstyled","key":"lcrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот метод рекомендуется, если вам нужно использовать PHP для взаимодействия с пользовательскими полями блоков. В основном вам нужно будет загрузить шаблон редактора непосредственно в вашу тему.","type":"unstyled","key":"64fb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых, вам нужно создать папку на своем компьютере и назвать ее, используя имя пользовательского блока.","type":"unstyled","key":"ejeip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, наш демонстрационный блок называется Отзывы, поэтому мы создадим папку testimonials.","type":"unstyled","key":"g2r5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее вам нужно создать файл под названием block.php, используя простой текстовый редактор. Здесь вы поместите HTML/PHP часть вашего шаблона блока.","type":"unstyled","key":"1fnqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот пример шаблона, который мы использовали для нашего примера:","type":"unstyled","key":"uc87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":65,"offset":0,"style":"ITALIC"}],"text":"

\">","type":"blockquote","key":"1ipoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":125,"offset":0,"style":"ITALIC"}],"text":"

\" alt=\"\" />","type":"blockquote","key":"63jeg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"7kjju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":79,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"9m38r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"9bii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы использовали функцию block_field() для извлечения данных из поля блока.","type":"unstyled","key":"1lu8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы завернули поля блока в HTML, который мы хотим использовать для отображения блока. Мы также добавили классы CSS, чтобы мы могли правильно стилизовать блок.","type":"unstyled","key":"cuilo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не забудьте сохранить файл в папке, которую вы создали ранее.","type":"unstyled","key":"eqre0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее вам нужно создать другой файл с помощью обычного текстового редактора на вашем компьютере и сохранить его как block.css внутри созданной вами папки.","type":"unstyled","key":"4j9vf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы будем использовать этот файл для добавления CSS, необходимого для оформления нашего дисплея блоков. Вот пример CSS, который мы использовали для этого примера:","type":"unstyled","key":"3b8d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":".reviewer-name {","type":"blockquote","key":"fa2d0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"font-size:14px;","type":"blockquote","key":"fo25n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"font-weight:bold;","type":"blockquote","key":"a3m55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"ITALIC"}],"text":"text-transform:uppercase;","type":"blockquote","key":"4pacj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"5pohu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":".reviewer-image {","type":"blockquote","key":"dsjaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"}],"text":"float: left;","type":"blockquote","key":"9knje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"padding: 0px;","type":"blockquote","key":"87lhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"border: 5px solid #eee;","type":"blockquote","key":"b5mdp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"max-width: 100px;","type":"blockquote","key":"c6hjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"}],"text":"max-height: 100px;","type":"blockquote","key":"1q2jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":"border-radius: 50%;","type":"blockquote","key":"6gjrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"margin: 10px;","type":"blockquote","key":"bfv1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"fu3rv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":".testimonial-text {","type":"blockquote","key":"2p9gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"font-size:14px;","type":"blockquote","key":"fdno0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"cb4mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":".testimonial-item {","type":"blockquote","key":"fo50j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"}],"text":"margin:10px;","type":"blockquote","key":"3ftql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"border-bottom:1px solid #eee;","type":"blockquote","key":"6sesb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"padding:10px;","type":"blockquote","key":"21f65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"5a2j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не забудьте сохранить изменения.","type":"unstyled","key":"3h4kf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В папке шаблонов блоков теперь будет два файла шаблонов.","type":"unstyled","key":"8f1m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого вам нужно загрузить папку блокировки на свой сайт с помощью FTP-клиента или приложения File Manager на панели управления учетной записью хостинга WordPress.","type":"unstyled","key":"dgocm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После подключения перейдите в папку /wp-content/themes/your-current-theme/.","type":"unstyled","key":"1h28f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если в папке темы нет папки с именем «блоки», создайте новый каталог и назовите его blocks.","type":"unstyled","key":"2uve9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем вам нужно загрузить папку, созданную на вашем компьютере, в папку blocks.","type":"unstyled","key":"6pud6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы успешно создали файлы шаблонов вручную для пользовательского блока.","type":"unstyled","key":"3j5b1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"Предварительный просмотр пользовательского блока","type":"unstyled","key":"bonhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чем вы сможете просмотреть HTML/CSS, вам нужно будет предоставить некоторые тестовые данные, которые можно использовать для отображения образца вывода.","type":"unstyled","key":"193lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В области администрирования WordPress отредактируйте свой блок и перейдите на вкладку \"Предварительный просмотр редактора\". Здесь вам нужно ввести некоторые фиктивные данные.","type":"unstyled","key":"aiuli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти данные не будут частью вашего пользовательского блока и будут использоваться только для предварительного просмотра изменений, внесенных с помощью HTML и CSS.","type":"unstyled","key":"6pvq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После добавления данных не забудьте нажать кнопку \"Обновить\", чтобы сохранить изменения.","type":"unstyled","key":"80ssu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы не нажмете кнопку «Обновить», вы не сможете увидеть предварительный просмотр пользовательского блока.","type":"unstyled","key":"2rke4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь вы можете переключиться на вкладку \"Предварительный просмотр\", чтобы увидеть, как ваш блок будет выглядеть в интерфейсе вашего сайта WordPress.","type":"unstyled","key":"adbiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если у вас все хорошо, вы можете снова обновить свой блок, чтобы сохранить любые несохраненные изменения.","type":"unstyled","key":"dqncb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Использование пользовательского блока в WordPress","type":"unstyled","key":"bm7ek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь вы можете использовать свой пользовательский блок в WordPress, как и любой другой блок.","type":"unstyled","key":"jroq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто отредактируйте любое сообщение или страницу, где вы хотите использовать этот блок. Затем нажмите кнопку \"+\" в верхнем левом углу, чтобы открыть меню блока.","type":"unstyled","key":"2qqlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отсюда найдите свой блок, введя его имя или ключевые слова, а затем добавьте его на страницу.","type":"unstyled","key":"deqgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После вставки пользовательского блока в область содержимого вы увидите поля блока, созданные ранее.","type":"unstyled","key":"akfrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете заполнить поля блока по мере необходимости.","type":"unstyled","key":"1910q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вы перейдете от пользовательского блока WordPress к другому, редактор автоматически покажет предварительный просмотр вашего блока в реальном времени.","type":"unstyled","key":"a9f2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь вы можете сохранить свою страницу и просмотреть, чтобы увидеть ваш пользовательский блок в действии на вашем сайте.","type":"unstyled","key":"2n9cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы надеемся, что эта статья помогла вам узнать, как легко создавать пользовательские блоки Gutenberg для вашего сайта WordPress.","type":"unstyled","key":"4jjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"117psHcYvNHPK0riAn8i"}],"entityMap":{}},"mentions":[]}

{{reviewer-name}}