Създаване на страница „Относно екипа за разработка“ в WordPress, CMS и Website Engines

Почти всяка тема, която съм разработил за WordPress, изисква прозорец с информация за екипа за разработка. На практика направих около 50 различни теми. Реших, че много други разработчици на WordPress също създават теми.

Поради тази причина искам да споделя подхода, който възприемам, когато създавам страница About в WordPress.

Създаването и управлението на информационна страница за разработчици в WordPress изисква използването на следните инструменти:

Персонализиран тип запис, различен от стандартните (например екип);
Персонализирана таксономия за филтриране (например отдел);
Метакутии за управление на персонализирани (персонализирани полета) полета за въвеждане (например позиция, имейл, телефон и връзки към социални медии).

Използвайки тези инструменти, тази статия ще ви преведе през процеса на създаване на шаблон на страница „Относно екипа“ за нашата WordPress тема.

Да започна

За по-голяма яснота ще опиша целия процес стъпка по стъпка и ще ви покажа какви промени да направите във файла functions.php.

Създайте свой собствен тип публикация и таксономия

Създайте тип публикация

Създаване на таксономия (по избор)

В този пример не използваме таксономията на отдела за всички елементи. Включих това в статията, защото е полезно да се разбере как може да се използва за филтриране на членовете на екипа.

Метакутия за персонализирани полета

Сега имаме нов елемент от менюто в WordPress – „Профили на членовете на екипа“ – и трябва да вземем решение за данните, които искаме да съхраняваме в записа за всеки членкоманди. Въз основа на моя опит предлагам да използвате следните полета:

За да създам персонализирани метабоксове с полета, използвам приставката Advanced Custom Fields (ACF).

Изтеглете файла с информация за екипа със списъка на задължителните полета: acf-export-team-details.xml.zip ;
Отидете на Инструменти > Импортирайте ( Import ) и изберете WordPress;
Инсталирайте приставката за импортиране на WP, ако бъдете подканени;
Изтеглете и импортирайте xml файла;
Изберете потребител и игнорирайте опцията за импортиране на прикачени файлове.

Плъгинът ACF съхранява данните в публикациите, така че можете да използвате стандартния инструмент за импортиране на XML на WordPress. Много умен ход от разработчика на плъгина, Елиът Кондън.

В моя PHP клас добавих административно съобщение, което предлага инсталиране на приставката ACF, ако вече не е инсталирана. Това е полезно, за да ви напомня, че трябва да използвате този плъгин, за да работи правилно.

потребителски шаблон

В момента имаме персонализирана система за управление, но също така трябва да показваме информация на сайта. За да направя това, обикновено създавам персонализиран шаблон за тема (като template-team.php), който променя външния вид на конкретна страница на WordPress. За да научите повече за това, вижте официалната документация на WordPress.org за потребителски полета.

Показване на записи на разработчици

За да показваме публикации за нашия екип в персонализиран шаблон, ние използваме следния код:

За да автоматизирам процеса на показване на профили, използвах функцията get_posts. Това е прост и ефективен метод. Използвах следните аргументи, за да форматирам и подредя резултатите от селекцията:

'post_type' => 'екип' // ще се показват само публикации от този тип;
‘posts_per_page’ => 50 // задава ограничение за броя на записите за четене;
‘orderby’ => 'title' // сортира резултатите по име;
'поръчка' =>; 'ASC' // във възходящ азбучен ред.

След като получим обект с резултатите от селекция за определен профил, можем да завъртим този процес, като преминем през всички налични записи и след това да покажем получените данни на страницата като HTML маркиране.

Функциите get_field и the_field са вградени в приставката ACF. Това са може би двете най-търсени функции, които ще използвате в процеса. Те извеждат стойностите на получените полета.

Сега, след като приключихме с изходния цикъл, можем да започнем да създаваме нова страница ( Page ) в WordPress, като изберем Team от падащия списък с шаблони. Когато посетите тази страница, ще видите списък с профилите на вашия екип.

Бележка за изпълнение

Без да използва кеширане, тази част от кода добавя 26 извличания на страница! Ако имате много голям сайт, тогава е важно да използвате Transients API, за да кеширате изхода за тежки потребителски заявки като тази. Включих статичен метод display() в моя PHP клас, който контролира процеса на кеширане.

Методът display() използва буфериране и кеширане на изхода, за да съхранява HTML кода, генериран по-рано от нашия цикъл, с профилите на членовете на екипа за разработка.

Използвайки този подход, в сравнение с предишната опция без кеширане, имаме само 1 заявка, спестявайки ценни изчислителни ресурси, които иначе биха били похабени за 25 допълнителни заявки за база данни. Товасъщо намалява първоначалното зареждане на страницата до 400-500ms. Не е зле!

Оформяне на шаблон с CSS

Ето! Сега имаме информация за целия екип за разработка и страница за управлението му. Всичко това се прави в HTML формат и всичко, което трябва да направим, е да добавим малко стил към нашия нов шаблон.

Условно валидиране преди включване на CSS

За да заредим листовете със стилове по-долу само за нашия персонализиран шаблон (template-team.php), можем да използваме следната условна проверка:

Тази част от кода ще зареди само CSS файла ( /assets/css/team.css ), когато се използва страницата template-team.php. Използването на този метод ще ви помогне да запазите основните стилови таблици непокътнати.

Примери за стилови таблици

По-долу са таблиците със стилове, които използвах за примера в тази статия:

Използвах текстовия препроцесор LESS, за да напиша CSS стиловете. По-долу са същите стилове, но написани във формат LESS за препроцесор:

Заключение

Персонализирани типове публикации, таксономии и метабоксове предоставят мощни инструменти за сложно управление на данни в WordPress.

Тази публикация е превод на статията „Създаване на страница „Запознайте се с екипа“ в WordPress“, изготвена от приятелския екип на проекта Internet Technologies.ru