Как создать шаблоны блоков WordPress, чтобы ускорить создание сайта

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

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

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

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

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

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

Хорошо, вот что нам понадобится. Это новая функция для Гутенберга, и вам понадобится плагин Гутенберга, установленный и активированный, поэтому вам понадобится минимальная версия 7.8, и это то, что недавно вышло. Теперь то, что в конечном итоге произойдет, может быть, через четыре-шесть месяцев, возможно, к концу лета 2020 года это будет включено в WordPress по умолчанию, но пока вам это нужно, если вы хотите попробовать это. , вам нужно будет установить плагин Gutenberg.

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

Хорошо? Так что вам это понадобится. И это необязательно. Это бесплатный плагин под названием блоки каденции. И что это делает, так это добавляет много функций конструктора страниц в Gutenberg. Это довольно аккуратно в том, что он позволяет вам делать. Вы можете перетаскивать и изменять размер столбцов. В нем много элементов, которые добавляют много функциональности конструктору страниц, но для Гутенберга это совершенно бесплатный плагин.

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

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

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

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

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

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

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

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

Хорошо? Итак, вы нажмете здесь, а затем нажмете Control или команду A на своем компьютере, чтобы выделить все это. И они новогодние. Поместите его в буфер обмена. Итак, я собираюсь сделать это, управляя C., так что теперь это в моем буфере обмена. Так что теперь, что я собираюсь сделать, я собираюсь выбраться отсюда. На самом деле, если вы хотите выйти из этого представления, прямо здесь есть маленький крестик, который говорит о выходе из редактора кода, и теперь он покажет мне, как обычно, прямо здесь.

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

Теперь я собираюсь вернуться к фрагментам кода. Итак, именно здесь я создал этот шаблон шаблона блока. Я собираюсь щелкнуть по клону, и теперь он создал его клон, и я собираюсь затем щелкнуть заголовок, чтобы начать его редактирование. Итак, что касается названия, я собираюсь изменить его на название, которое имеет смысл для управления им.

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

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

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

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

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

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

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

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

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

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

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

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

И это действительно легко. Один клик, и вы можете использовать его. По сути, все шаблоны постов в блоге. Итак, если есть формула, которой вы следуете для разделов сообщения в блоге, вы можете сделать весь этот пост в блоге блочным шаблоном. Этот один щелчок применяется, а затем все, что вам нужно сделать, это указать, щелкнуть и отредактировать.

Итак, последнее, прежде чем мы закончим, это новая концепция, над которой стоит подумать в течение следующих нескольких месяцев. Поэкспериментируйте с сейчас. Это не совсем Йети, Йети. Он не совсем готов к показу в прайм-тайм, потому что, если вы заметили, единственный минус, который я увидел, это когда вы просматриваете блог. Смотри, я снова иду.

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

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

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