Теми: блок теми и класически теми

Модул 5: Теми и разширения · Време за четене: 9 минути

Учебна цел: След този урок ще можете да обясните разликата между блок теми и класически теми и да изберете тема разумно.

Ключови понятия: тема, йерархия на шаблоните (template hierarchy), блок тема, шаблон (template), шаблонна част (template part), theme.json, Site-editor, класическа тема, PHP шаблони, Customizer, джаджи (widgets), конструктор на страници, lock-in (обвързване), папка на темата

Какво прави една тема

Темата определя как изглежда Вашият сайт и как са изградени страниците: заглавната част с логото и менюто, ширината на съдържанието, шрифтовете и цветовете, долния колонтитул, как изглежда списък с публикации или резултат от търсене. Самото съдържание (Вашите текстове, страници, изображения) се намира в базата данни и остава при смяна на темата.

Всяка тема се намира в собствена папка под wp-content/themes/, например wp-content/themes/twentytwentyfive/. В тази папка винаги има файл style.css с хедър в началото, който описва темата (име, версия, автор). Това ще видите в урок 5.2.

От WordPress 5.9 (началото на 2022 г.) съществуват два вида теми и те работят наистина различно.

Класически теми

Една класическа тема се състои от PHP файлове: header.php, footer.php, single.php, page.php, index.php и така нататък. Кой файл се използва за коя страница, следва йерархията на шаблоните (урок 1.2). Промени правите:

• в Customizer (Изглед > Customizer): лого, цветове, опции, предлагани от темата;
• с джаджи (Изглед > Джаджи): блокове в страничната лента или долния колонтитул;
• с менюта (Изглед > Менюта, урок 4.3);
• в кода, с дъщерна тема (child theme) (урок 5.2).

Много познати теми са (все още) класически или хибридни. Те работят добре и ще се поддържат още години.

Блок теми

Една блок тема е изградена от същите блокове както Вашето съдържание. Темата има:

• шаблони (templates) като HTML файлове с блокове, в папката templates/: index.html, single.html, page.html, 404.html;
• шаблонни части (template parts) в parts/: header.html, footer.html;
• файл theme.json с настройките за стил: цветова палитра, шрифтове, размери на шрифтовете, ширина на съдържанието, разстояние между блоковете.

Малка част от theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Промени правите в Site-editor (Изглед > Editor): редактирате заглавната част, долния колонтитул и шаблоните с блокове, а при Стилове избирате цветове, шрифтове и разстояния за целия сайт.

Важна разлика, която трябва да знаете: това, което променяте в Site-editor, се съхранява в базата данни, а не във файловете на темата. Актуализация на темата следователно не презаписва Вашите промени. Но това означава и: променен шаблон в базата данни има предимство пред шаблона в темата. Ако авторът издаде подобрен шаблон, Вие няма да го видите, докато съществува Вашата променена версия. В Site-editor можете да „върнете“ шаблон към версията от темата.

Конструктори на страници

Един конструктор на страници (като Elementor, Divi или WPBakery) е разширение или тема със собствен редактор, в който плъзгате и оформяте страници. Те са популярни, защото предлагат много възможности без код. Бъдете наясно с недостатъците:

• Lock-in (обвързване): оформлението се съхранява в собствен формат (често shortcodes или собствени данни в wp_postmeta). Ако изключите конструктора, от Вашите страници често остава бъркотия от кодове. Преминаването към друго решение обикновено означава да изградите всичко отново.
• По-тежко: много конструктори зареждат допълнителни скриптове и стилови листове на всяка страница. Това може да забави Вашия сайт (модул 6).
• Още един компонент за поддръжка, със собствени актуализации и собствени уязвимости.

Конструкторът на страници не е грешен избор, но направете го съзнателно. За много сайтове желаното може да се постигне и с блок тема и готови шаблони (patterns).

Избор на тема

На какво обръщате внимание, в този ред:

1. Произход: папката с теми на wordpress.org (проверена от доброволци) или познат автор със собствен сайт. Никога „безплатно“ копие на платена тема от сайт за изтегляния: то често съдържа задна вратичка (урок 5.3).
2. Поддръжка: кога темата е актуализирана за последно? Тема без актуализации през последната година се превръща в риск.
3. Блок или класическа: пасва ли на начина, по който искате да работите? Блок тема, ако искате да можете да редактирате в Site-editor, класическа тема, ако искате да продължите съществуващ сайт по същия начин.
4. Какво включва: тема, която „може всичко“ (слайдър, портфолио, контактна форма, SEO), обвързва функциите с темата. Ако смените темата по-късно, ще ги загубите. Функциите принадлежат на разширенията, оформлението на темата.
5. Достъпност и скорост: в папката с теми на wordpress.org можете да филтрирате по признака „Toegankelijkheid gereed“ (accessibility ready). Прегледайте демото на темата в PageSpeed Insights (урок 6.1).
6. Език: преведена ли е темата на Вашия език, или можете сами да редактирате текстовете?

Смяна на тема

При смяна на тема Вашето съдържание остава, но всичко около него се променя. Никога не го правете направо на работещия Ви сайт:

• Изпробвайте новата тема първо чрез Преглед на живо (при Изглед > Теми), или по-добре в тестова среда (staging) (урок 8.3).
• Проверете след това менютата (урок 4.3), джаджите, логото, началната страница и типовете съдържание, които предлагаше старата тема (урок 4.2).
• Shortcodes от старата тема се появяват като обикновен текст ([slider id="3"]) на Вашите страници.

Обобщение

• Темата определя оформлението и структурата; съдържанието се намира отделно в базата данни.
• Класическите теми са PHP шаблони, настройвани чрез Customizer, джаджи и менюта.
• Блок темите са изградени от блокове и theme.json, и се настройват в Site-editor; тези промени се съхраняват в базата данни.
• Конструкторите на страници предлагат много, но Ви обвързват и могат да забавят сайта Ви.
• Избирайте тема по произход, поддръжка и простота; функциите принадлежат на разширенията, не на темата.

Тест

Задача

Задача A5.1: Коя тема използва Вашият сайт? Потърсете в изходния код на началната си страница (Ctrl+U) /wp-content/themes/ и въведете името на папката с темата, която се среща най-често. Ако използвате дъщерна тема (child theme) (урок 5.2), въведете папката на дъщерната тема и тази на родителската тема. Посочете също дали е блок тема или класическа тема и как сте го установили. Програмата прочита началната страница и файла style.css на посочената тема и ги сравнява.

Допълнително четене

За работата в самия WordPress още нямаме собствени статии; официалната документация на WordPress е обширна.

• Какво е тема? (developer.wordpress.org, на английски): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Теми на wordpress.org: https://wordpress.org/themes/
• Site-editor (wordpress.org, на английски): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, на английски): https://developer.wordpress.org/themes/global-settings-and-styles/