Разработка
Dmitry Mayorov
1320

Что ждет WordPress темы в 2020 году?

WordPress стремительно меняется. Меняются концепции тем (от английского theme), меняется Gutenberg. Что из этого получится до конца непонятно. Но следить за процессом довольно увлекательно. В этой статье я расскажу о том, что нового случилось c темами в WordPress за последний год и к чему нам, возможно, стоит готовиться.

В закладки

До и после 5.0

Конечной целью WordPress (и Gutenberg) является дать возможность пользователям кастомизировать каждый аспект их сайта через систему блоков. В настоящее время система блоков позволяет редактировать всего лишь контент постов, но как только мы приблизимся к full-site редактированию, каждая часть страницы станет блоком. А, значит, доступной для изменений. Представьте себе мир, в котором пользователи смогут помещать блоки в футер или хедер.

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

Да, я говорю о том времени, когда WordPress 5.0 принёс нам Gutenberg вместо Классического Редактора. И для многих это стало настоящей болью. Ну кто из нас не слышал этих ночных рыданий в подушку и не читал в отзывах “Оставьте в покое WordPress!” или “Хватит заставлять меня использовать это…”.

Но, как показывает практика, человек привыкает ко всему, даже к Gutenberg’у.

А если посмотреть на это с позитивной стороны. Вот несколько достоинств Gutenberg’a:

  • Будет однозначным плюсом, если вы начали использовать WordPress начиная с версии 5.0 и просто не видели ничего другого
  • С Gutenberg не нужно плодить десятки шаблонов страниц. Достаточно oдного или нескольких, а разные вариации дизайна можно создавать блоками.
  • Блоки универсальны для разных типов данных. Это значит, что один и тот же блок можно использовать как в постах так и страницах.
  • Разработчики могут писать свои блоки. Уже сегодня есть десятки плагинов, которые добавляют в редактор самые разные блоки. От простых разделителей, до сложных галлерей и форм обратной связи.

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

Блоки не только в контенте

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

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

Подготовительная работа для обеспечения такого будущего ведётся уже больше года. Правда, из запланированных 9 проектов в 2019 было на 100% реализовано и запущено только 2. Что в контексте таких глобальных изменений даже неплохо. Из нововведений прошлого года: все существующие виджеты были портированы в блоки и Site Health check плагин был добавлен в ядро, чтобы облегчить дебаггинг.

2020 должен стать годом full-site редактирования. Следить (и учавствовать) за процессом можно в Slack-канале core-editor. И, конечно, будет продолжена работа над директорией блоков.

Всё это рождает у нас вполне закономерный вопрос: “Если пользователи смогут двигать блоки произвольно туда-сюда, то как в это всё встроится собственно в темы? И если сайт будет полностью состоять из блоков нужны ли темы вообще?

Сейчас для сравнения, в самые популярные темы с ThemeForest напихано всё подряд: и стили, и шаблоны страниц, и куча опций.

Каждому по шаблону

Окочательного ответа на этот вопрос пока нет. В целом предлагаемые структуры не сильно отличаются от уже существующих тем в WordPress. Самое большое отличие в том, что темплейты шаблонов будут теперь “блоки темплейтов” и “блоки частей темплейтов”. И эти темплейты будут не в РНР файлах, а в HTML.

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

theme |__ style.css |__ functions.php |__ block-templates |__ index.html |__ single.html |__ archive.html |__ ... |__ block-template-parts |__ header.html |__ footer.html |__ sidebar.html |__ ...

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

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

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

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

Финальное решение о том, как шаблоны будут декларировать темплейты, ещё не принято. В настоящий момент в качестве драфта используется довольно-таки давнишнее решение и выглядит оно так:

$single = array( array( 'core/site-title', array() ), array( 'core/image', array( 'sizeSlug' => 'large', ) ), array( 'core/group', array(), array( array( 'core/post-title', array() ), array( 'core/post-content', array() ), ) ), array( 'core/heading', array( 'content' => 'Footer', ) ), );

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

const TEMPLATE = [ [ 'core/columns', {}, [ [ 'core/column', {}, [ [ 'core/image' ], ] ], [ 'core/column', {}, [ [ 'core/paragraph', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; ... <InnerBlocks template={ TEMPLATE } />

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

Tемы всё-таки остаются темами

Если пробраться через все дебри WordPress, то по факту темы всегда были HTML и CSS. А сам РНР при этом просто миксовал вызов РНР функций (например, template tags) с какой-нибудь структурированной HTML разметкой. И если посмотреть на большинство шаблонов, которые находятся в официальной WordPress директории, то можно легко заметить, что основная разметка осталась практически той же старой, доброй и привычной.

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

Например, если нам нужен новый компонент, то на РНР мы делаем какой-нибудь “Block Areas”, а потом к нему создаём все области, которые нужны пользователю (сайдбар, хедер, футер и пр.) и потом присваиваем их к месту в шаблоне.

Тогда в functions.php будет что-то типа:

function wp_custom_blockarea() { register_block_area('header-area',__( 'Header Area' )); register_block_area('footer-area',__( 'Footer Area' )); register_block_area('sidebar-area',__( 'Sidebar Area' )); } add_action( 'init', 'wpb_custom_new_menu' );

А в header.php, footer.php или sidebar.php будет что-то вроде:

<?php wp_block_area('header-area'); ?>

Конечные пользователи смогут создавать шаблоны самостоятельно

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

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

Вместо итога

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Dmitry Mayorov", "author_type": "self", "tags": [], "comments": 15, "likes": 2, "favorites": 13, "is_advertisement": false, "subsite_label": "dev", "id": 100840, "is_wide": true, "is_ugc": true, "date": "Sun, 12 Jan 2020 21:18:16 +0300", "is_special": false }
0
{ "id": 100840, "author_id": 178971, "diff_limit": 1000, "urls": {"diff":"\/comments\/100840\/get","add":"\/comments\/100840\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/100840"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 235819, "last_count_and_date": null }
15 комментариев
Популярные
По порядку
Написать комментарий...
2

В целом, направление верное. Число конструкторов растет, и надо с ними как то конкурировать. Всегда найдутся те, кому не нравятся новшества, но нельзя топтаться на месте.

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

Ответить
1

Да, мне изначально идея нового редактора понравилась. Особенно то, что он может быть и очень простым (если отфильтровать ненужные блоки) и сложным если нужно. Согласен, что топтаться на месте нельзя. Squarespace, Shopify и прочие поджимают :) А то что работы еще много это да... Но как говорится: "A journey of a thousand miles begins with a single step." 

Ответить
2

Мужик, я нииихххера не понял, но ты запал мне в душу (с)

Ответить
2

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

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

Ответить
0

Согласен с идеей про хардкод для своих проектов :) Могу один аргумент сказать в пользу Gutenberg в этом контексте. Он довольно гибкий в плане отключения блоков и их вариаций. Можно для клиента стилизовать набор блоков которые будут железно работать. Тогда от разработчика "знания", а клиенту в руки инструмент для креатива (в очень узких рамках).

Ответить
0

Да, какое то обучение нужно, как собственно и везде, но если ничего не делать, то года через 3-4 WordPress начнет отставать и загибаться. У конструкторов есть гораздо более запутанный интерфейс, но их популярность растет и они уже вовсю вытесняют традиционные CMS.

Ответить
1

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

Ответить
0

Да, интересно следить за развитием!

Ответить
0

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

Ответить
0

Главное что бы оно не навредило. Хотя развитие не без набитого лба. Самое главное продукт на выходе после развития. 

Ответить
1

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

-нормальных доков по Гб нет, что-то более менее вразумительного - с тех времён, когда Гб был плагином и к современному не подходит чуть более чем полностью;
- зачем городить весь лес с реактом - тоже вопрос открытый, какие-то изменения в структуре - и досвидос блок, "хотите преобразовать в html"? Почекал блоки других разработчиков -  почти все используют реакт как интерфейс, а вся логика в php. Какой тогда смысл в доп прослойке и проблемах разработчиков блоков? Тем более обычная js-ка никуда не ушла, только стек увеличили.
- перед изменениями, могли бы и комьюнити спросить, а то защищают нововведения только совсем поверхностные или сами разработчики, а кто лезет чуть глубже - бугуртит.

Вообще, такое ощущение, что кто-то решил подзаработать под шумок перехода на новые рельсы, но это уже моё имхо

Ответить
0

Блять, я то думаю что меня бесит этот Гутенберг....

Так оно же Греттой одной фамилией и такое же ебанутое ))

Ответить
0

Пересядь на elementor

Ответить
0

На wp давным давно есть elementor. На кой ещё и это туда??? Афффтор... Блин.... Если с wp не знаком даже поверхностно, зачем эти потуги? Зачем ёжика рожать??? 

Ответить
0

таки на нем и сидим ))

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }