Сколько стоит Гутенберг, редактор WordPress?

Привет 🙂, спасибо, что нажали на мою статью 😁.

Сегодня мы поговорим об очень спорной теме в мире веб-разработки: WordPress…

WordPress, который часто высмеивают, тем не менее, остается незаменимым, он вырос вместе с Интернетом, блогом Корбен например, это WordPress 😛 (вы знали это?)

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

Моя история с WordPress…

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

Начало работы с WordPress

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

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

Несколько побочных проектов позже

Я начал немного глубже играть с WordPress в побочных проектах, например, для сайтов гильдий World of Wacraft (ну да, все разработчики, мы перешли на WoW)…

Новостные сайты, «интернет-магазин» с WooComerce, сайты-витрины… и т. д.

В этот период я ​​очень быстро разочаровался в WordPress, у меня сложилось впечатление, что я что-то возился, делал что-то не так, как надо… и это то, что меня отвлекло от него.

Самоделки, которые меня поразили 😮

Тема со странным кодом
Приведу несколько анекдотов, которые я видел, первый был по теме и тему я не помню, но помню, что меня поразило:

Тема была бесплатной, не очень красивой, но, эй, она справилась с задачей, которую я делал в то время, я хотел персонализировать ее и в то время не знал, что необходимо создать «дочернюю тему». “, чтобы изменить тему (тот же принцип, что и наследование в объектно-ориентированного программирования).

Итак, я пытаюсь изменить базовую тему, и когда добираюсь до нижнего колонтитула, я вижу «eval()» в PHP 😮.
Вот только на тот момент я уже знал, что такое «оболочка» в PHP, и особенно знал, что для «скрытия» оболочки в коде мы часто использовали эту функцию.

Для неспециалистов в PHP эта функция позволяет выполнять код PHP, который находится в строке символов…

А функция «eval» использовалась с зашифрованной строкой и функцией дешифрования (это был цикл, в котором использовались XOR и base64).

И вы спросите меня: «Что делал этот код?»
Все просто, это метод, который нашли разработчики, чтобы предотвратить модификацию «Авторских прав» в «футере»…

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

iframe, используемый в качестве счетчика
В базовом WordPress все представляет собой «пост в блоге», и в результате однажды я наткнулся на проект, который нуждался в большем, но для этого все равно использовался WordPress…

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

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

И, по-вашему, откуда он знал, какой счетчик увеличивать?
Просто используйте «HTTP_REFERER», потому что когда вы загружаете iframe на веб-страницу, «родительская» страница доступна в «HTTP_REFERER» страницы, загруженной в iframe…

Проблема в том, что «HTTP_REFERER» — это необработанные данные, отправленные браузером, и одна из основ веб-программирования?

Никогда не доверяйте данным, отправленным клиентом… никогда.

И, наконец, счетчик увеличивался каждый раз при загрузке страницы, даже если страницу загружал «бот»…

Это подводит итог двум печально известным приключениям, которые я пережил с WordPress…

редакторы «wysiwyg», такие как Divi

У меня также была возможность открыть для себя редакторы «wysiwyg», такие как Divi, Elementor и CornerStone.

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

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

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

Проблема была не в WordPress, а в его использовании.

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

Однако, если им правильно пользоваться, с ним можно делать очень крутые вещи 🙂

Гутенберг, замена старому редактору

Одним из больших недостатков WordPress было то, что когда вы хотели начать продвигаться «дальше» в дизайне и особенно позволить людям, не являющимся разработчиками, модифицировать его, вам приходилось использовать проприетарные внешние решения, такие как Divi.

И WordPress это хорошо понял, и именно поэтому они выпустили Гутенберг в декабре 2018 года, я тогда не обратил на это внимания, потому что у меня были другие дела, но посмотреть стоит.

Что такое Гутенберг?

Gutenberg — это редактор блоков, что означает, что вы можете создавать «блоки» контента и перемещать их, как в «Power Point».

Но особенность в том, что есть “классические блоки”, текст, изображения, но можно пойти дальше… и это то, что нас здесь интересует.

Любое расширение может добавить блок

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

Чтобы создать блоки с расширениями, прочтите эту статью от Capitaine WP: создать блок Гутенберга.

Обратите внимание: вам потребуются некоторые знания React 😛, чтобы начать создавать собственные блоки.

Как выглядит Гутенберг?

Вместо текста здесь приведены несколько иллюстраций. Чтобы выбрать тип блока, просто используйте / в редакторе, здесь я выберу блок «форма», который предоставляется расширением.

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

Наконец мой блок на странице, мне осталось только определить его стиль с помощью правого меню:

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

Мое мнение после небольшой игры с Гутенбергом

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

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

Техническая стоимость WordPress

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

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

Действительно, на Карта Лояльностипо умолчанию время загрузки между страницами медленное, это время, в течение которого WordPress генерирует страницу (используя блоки, доступные расширениями…).

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

По поводу JS и CSS, сделайте тест PageSpeed ​​на сайте, увидите, оценка неплохая…

К вашему сведению, LaCarteFidélite, однажды днём я выложил это в интернет, когда совсем не знал, что делать 😛.
Такой результат за столь короткое время остается достойным восхищения.

Заключение

Вот и все, моя небольшая вводная статья о Гутенберге закончена…
Мы вернемся к этому позже, потому что я уже знаю, что мне придется с этим поработать 😁.
И, как всегда, напишу вам статью о том интересном, что я открою…

Хорошей недели и до встречи в следующий раз 🙂.