WordPress 5.9 – блок-теми и цялостно редактиране на сайта

WordPress 5.9 „Джозефин“ е тук и новостите в тази версия се очертават като много голяма промяна в начина, по който досега се създаваха и използваха темите за платформата. 

Цялостното редактиране на сайта с блок-теми е най-голямата новост в тази версия, други са – новата тема Twenty Twenty-Two (2022) и новият блок Навигация.

Започваме с най-интересното.

Блок-теми в WordPress 5.9

Първата стъпка към цялостното редактиране на сайта с блокове беше направена в предишната версия 5.8 на WordPress – с редактирането на джаджите с блок-редактора.

В тази версия 5.9 освен джаджите с блок-редактора може да се редактира цялата тема на сайта. Което означава и цялостно редактиране на сайта. Това ще е възможно само ако той използва блок-тема. Каквато е новата тема Twenty Twenty-Two.

Какво е блок-тема?

Блок-темата съдържа отделни блок-темплейти (Templates), в които има блокове. Темплейтите може да включват други под-темплейти, наричани – части (Template Parts). 

Темплейти са например основните типове страници в сайта – single, page, category, archive и други. Части са по-малки блок-темплейти като header, footer, sidebar, които се добавят в основните темплейти.

Най-малката градивна единица е блокът. Групирането на няколко блока се прави в блок-темплейтите. Групиране на по-високо ниво (на блокове и блок-темплейти) се извършва в основните темплейти на темата.

Само една от разликите с досегашните (наричани вече класически) теми е в кода, който се съдържа в темплейтите.

Темплейтните файлове вече не са PHP, но HTML файлове. Ето примерна структура на блок-тема:

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

Примерен код на блок-темплейта header.html:

<!-- wp:site-title /-->
<!-- wp:image {"sizeSlug":"large"} -->
  <figure class="wp-block-image size-large">
   <img src="https://mysupersite.com/image.jpg" />
  </figure>
<!-- /wp:image -->
<!-- wp:group -->
<div class="wp-block-group">
  <!-- wp:post-title /-->
  <!-- wp:post-content /-->
<!-- /wp:group -->
</div>
header.html – блок-темплейт-част на темата Twenty Twenty-Two
header.html – блок-темплейт-част на темата Twenty Twenty-Two.

За още технически подробности вижте официалната документация за блок-темите: Block Theme | developer.wordpress.org 

Блок-теми в официалната директория

В директорията за теми в wordpress.org вече има няколко блок-теми: https://wordpress.org/themes/tags/full-site-editing/.

свободно достъпни блок-теми в официалната директория wordpress.org
Свободно достъпни блок-теми в официалната директория wordpress.org.

За да видите всички блок-теми, филтрирайте резултатите по тага Full Site Editing.

Все още са малко на брой, на фона на класическите теми, но тези 37 блок-теми бяха налични още преди пускането на новата версия 5.9 на WordPress (от която реално може да се използват блок-теми в сайта).

Със сигурност може да очакваме, че много скоро броят на блок-темите ще се увеличи драстично. Също така ще видим и появата на много платени блок-теми.

Twenty Twenty-Two – първата блок-тема в WordPress

С WordPress 5.9 идва и нова тема по подразбиране – Twenty Twenty-Two. Тази тема е изградена изцяло от блокове. С нея можете да тествате новата функционалност за цялостно редактиране на сайта.

новата тема в WordPress 5.9 Twenty Twenty-Two (2022)
Новата тема в WordPress 5.9 Twenty Twenty-Two (2022).

Тествайте новите функционалности в WordPress на тестово копие на сайта. Вижте как можете да създадете такова през cPanel: Работно копие на сайта – Staging (Softaculous) | Help

Цялостно редактиране на сайта (блокове и стилове)

Редактиране на сайта през Site Editor

Ако вече сте редактирали съдържание с блок-редактора, например сте добавяли и размествали блокове в статия, то редактирането на блок-темата е почти същото нещо, само че на по-високо глобално ниво, на ниво сайт.

Голямата разлика с редактирането на статия е, че за блок-темата има няколко специални блока, които може да се използват като например: Site Title, Template Part, Post Content, Post Title, Post Date.

Редактирането на целия сайт (блок-темплейтите) се извършва през Site Editor (достъпен през Apperance » Editor или през Edit site от фронтенд-а). 

В редактора има три режима – редактиране на сайта, редактиране на темплейтите и редактиране на частите.

редактиране на сайта в блок-редактора - WordPress 5.9
Редактиране на сайта в блок-редактора.
управление на темплейтите
Управление на темплейтите.
управление на темплейтните части
Управление на темплейтните части.

Редакцията на сайта и темплейтите става по същия начин, както когато редактираме например съдържанието на една статия или страница – добавяме блокове, разместваме ги, групираме ги и всички други манипулации, които можем да правим с блоковете.

Вижте повече: Всичко, което трябва да знаете за WordPress блоковете | Blog

Темплейтните части се добавят в блок-темплейта със специален блок – Temlpate Parts.

добавяне на темплейтна част към темплейт
Добавяне на темплейтна част към темплейт.

Дизайн настройки на блок-темата

Освен структурата на сайта и страниците през редактора на блок-темата може да се управляват и глобалните настройки на стила.

Опциите се намират в Styles

редактиране на стиловете в темата Twenty Twenty-Two
Редактиране на стиловете в темата Twenty Twenty-Two.

Целият дизайн на сайта може да се редактира от тази опция – цветове, шрифтове, параметри на детайлите в оформлението.

Отделно от това може да се извършва персонализация на настройките на самите блокове. Зададените тук настройки за блоковете са глобални за сайта. 

Блок-редакторът

Новостите в блок-редактора идват от 12 версии (10.8-11.9) на Gutenberg.

Има много подобрения и интересни новости, ето само малка част от тях:

  • Нов блок Навигация;
новият блок Навигация в wordpress 5.9
  • Добавени са нови опции за дизайна на текста в блоковете: интервал между буквите, височина на реда, стил на шрифта (плътност), регистър на буквите (само големи, само малки, големи и малки);
нови опции за дизайна на текста в блоковете
Нови опции за дизайна на текста в блоковете.
  • Нова опция за добавяне на очертание (border) на блока Група/Group;
очертание на блока Group/Група
Очертание на блока Group/Група.
  • Превю (преглед) на препратките в редактора – при кликване върху препратката се отваря малък прозорец с преглед на страницата;
преглед на препратките
Преглед на препратките.
  • Пренареждане на блоковете в Списъка с блокове чрез drag & drop;
  • Блок Галерия/Gallery използва блокове Изображение;
  • И още много подобрения по блоковете и настройките им: WordPress Field Guide.

Абонирайте се за СуперБлога, за да научавате първи най-важното и полезното от света на уеб, касаещо Вашия сайт и дигитално развитие.

Мадлена Методиева
Мадлена Методиева
Меган е част от СуперМаркетинг екипа. Мисията ѝ е старателно да попълва е-библиотеката на СуперХостинг.БГ с полезни и помощни статии. А когато не държи перото, търси забравени съкровища в недрата на някоя книга.
5 1 vote
.
Абониране
Уведоми ме при
guest
0 Коментара
Inline Feedbacks
View all comments
Пренеси бизнеса си онлайн за няколко часа със собствен сайт

Пренеси бизнеса си онлайн за няколко часа със собствен сайт [Аудио]

0
Дойде моментът на практическите съвети как да пренесете бизнеса си от офлайн към онлайн със собствен сайт. Вижте повече!
11 мита за онлайн присъствието

11 мита за онлайн присъствието [Аудио]

2
Темата е: онлайн присъствие - от изграждането на сайт до неговото развитие и следователно развитието на Вашия бизнес. Разберете кой е първият мит за разбиване!
Black Friday'21: WooCommerce магазинът ми продава повече от магазина ти!

Black Friday ‘21: WooCommerce магазинът ми продава повече от магазина ти! [Аудио]

0
Задаваме 7 въпроса, през които трябва да преминете, за да имате изряден WooCommerce магазин. Типично в наш стил, не Ви спестяваме и отговорите.