Зміст
- Створення нового користувацького типу публікації
- Створення архівної сторінки
- Створення єдиної сторінки
- На закінчення
Веб-розробка може швидко змінюватися, але дві речі, які залишаються тут, - це WordPress та адаптивний дизайн. Знання того, як створювати чуйні теми та плагіни WordPress, є обов’язковим.У цьому підручнику ми розглянемо створення модуля WordPress і шаблону теми для адаптивного портфоліо.
Ми будемо працювати з двома макетними шаблонами: архівною сторінкою, де будуть перелічені всі останні проекти, та однією сторінкою, яка відображатиме конкретний проект. Сторінка архіву для портфоліо - досить проста сторінка із заголовком та трьома колонками проектів на всю ширину. Це зменшиться до двох стовпців, а потім до одного стовпця, оскільки екран стає менше. HTML і CSS доступні на GitHub. Кожен проект на сторінці матиме таку структуру.
Перегляньте ексклюзивний скрінкаст цього підручника:
Це HTML-код, який буде сформовано в циклі WordPress:
div> img src = "project.png"> h3> Назва сайту / h3> p> Короткий опис та посилання a href = "#"> читати далі ... / a> / p> / div>
Одна сторінка матиме подібний макет, обгортаючи весь текст у контейнер під назвою .проект замість .card. CSS також буде досить легким і масштабованим. Ви також можете помітити у файлах сайту, що існує файл style.scss файл. Я розробив усі CSS за допомогою Sass, але не бійтеся: створений style.css компілюється читабельним способом.
Створення нового користувацького типу публікації
Спеціальний тип публікації - це об’єкт у WordPress, який дозволяє нам додавати будь-який тип вмісту, який ми хочемо, до редактора WordPress, обробляючи їх так само, як повідомлення. У свіжій установці WordPress є опції меню Публікації та Сторінки. Обидва вони вважаються типами публікацій, які по-різному обробляють вміст. За допомогою спеціальних типів публікацій ми можемо додавати параметри для створення нових типів вмісту в меню адміністратора WordPress. Ми створимо власний тип публікації під назвою "Портфоліо".
Ми збираємось розробити цей власний тип публікації як частину розширеного плагіна WordPress для портфельних проектів. Хоча ми могли б додати функціональність до теми, це погана практика, оскільки тоді наш вміст пов’язаний з нашим дизайном: якщо ми змінимо тему, ми втрачаємо портфоліо. Ми будемо обробляти показ двома методами: шаблони / теги шаблонів та шорткоди, які можна використовувати через редактор.
Першим кроком є визначення плагіна. Створіть папку в / wp-content / plugins / і назвіть його як завгодно. Я назвав своє / jlc-проекти /. Всередині цієї папки створіть файл з однойменною назвою (наприклад, jlc-projects.php) і додайте цей код:
? php / * Назва плагіна: URI плагіна плагіна Joe’s: https://github.com/jcasabona/wp-portfolio Опис: Простий плагін, який створює та відображає портфоліо проектів за допомогою WordPress за допомогою власних типів публікацій! Автор: Джо Касабона Версія: 1.0 Автор URI: http://www.casabona.org * / define (’JLC_PATH’, WP_PLUGIN_URL. ’/’. Plugin_basename (dirname (__ FILE__)). ’/’); define (‘JLC_NAME’, «Плагін портфоліо Джо»); require_once (’jlc-project-cpt.php’); ?> var13 ->
Тут відбувається кілька речей. Перший - це стандартне визначення плагіна для плагіна WordPress; кілька наступних рядків створюють константи, а потім включають файли, що потребують решти плагіна. На даний момент є лише ще один файл: jlc-project-cpt.php.
Ви також помітите, що я використовую префікс JLC_ (або jlc-) для всього. Вам слід вибрати власну префікс для використання. Префіксування змінних та назв функцій зменшить ймовірність конфлікту вашого плагіна з іншими темами чи плагінами.
Перш ніж ми стрибаємо в jlc-project-cpt.php, Я хочу додати ще один біт коду до jlc-projects.php. У наведеному нижче коді буде створено новий розмір зображення, який ми будемо використовувати з нашим користувацьким типом публікації:
if (function_exists ('add_theme_support')) {add_theme_support ('post-thumbnails'); add_image_size (‘jlc_project’, 1100, 640, true); }
Тепер настав час творити jlc-project-cpt.php. Я тут обговорюватиму лише важливий код, але ви можете знайти повний код у репозиторії GitHub. Перший (після відкриття ? php тег) ми визначаємо власний тип повідомлення:
add_action ('init', 'jlc_projects_register'); функція jlc_projects_register () {$ args = array ('label' => __ ('Portfolio'), 'singular_label' => __ ('Project'), 'public' => true, 'show_ui' => true, 'capability_type '=>' post ',' hierarchical '=> true,' has_archive '=> true,' supports '=> array (' title ',' editor ',' thumbnail '),' rewrite '=> array (' slug '=>' портфоліо ',' with_front '=> помилково)); register_post_type (‘портфель’, $ аргументів); register_taxonomy ("jlc-project-type", array ("portfolio"), array ("hierarchical" => true, "label" => "Тип проекту", "singular_label" => "Тип проекту", "rewrite" = > правда)); }
Це ваша стандартна функція визначення власних типів повідомлень. Ми додаємо дію, щоб викликати її на init, а потім надсилаємо список аргументів register_post_type (), а також кульовий тип, який буде "портфоліо". Після реєстрації типу публікації ми реєструємо власну таксономію, яка відповідає типу публікації. Важливо зберегти ці дві функції разом. Якщо цього не зробити, і таксономія якось зареєструється першою, WordPress видасть помилку.
Після того, як визначено спеціальний тип публікації, настав час додати власні метадані, які ми хочемо використовувати. Наш користувальницький тип публікації підтримує заголовок, редактор (який буде служити в якості основного тексту) та ескіз, куди буде надходити вибране зображення. Є ще одну річ, яку я люблю додавати до своїх портфоліо: URL-адресу веб-сайту, який я демонструю. Спочатку ми створимо функцію, яка додасть це поле в адмін:
add_action ("admin_init", "jlc_projects_admin_init"); функція jlc_projects_admin_init () {add_meta_box ("jlc-projects-meta", __ ("Project Link"), "jlc_projects_options", "portfolio", "side", "low"); } функція jlc_projects_options () {глобальний $ post; якщо (визначено (‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) повертає $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ custom ["jlc_projects_link"] [0]; ?> var13 -> input name = "jlc_projects_link" placeholder = "http: //" value = "? php echo $ link;?> var13 ->" />? php}
Ці функції досить прості. Коли адміністратор ініціюється (тобто завантажується), ми будемо викликати функцію, що називається jlc_projects_admin_init () що створить новий метабокс для елементів портфоліо. Для того, щоб сформувати це поле, нова функція, jlc_projects_options (), це називається.
Опинившись всередині варіанти функцію, ми просто захоплюємо посилання значення, яке ми назвали jlc_projects_link, та роздрукуйте його. Але спочатку ми хочемо переконатися, що не зберігається автоматичне збереження. Якщо це так, ми, ймовірно, втратимо дані. Після цього нам потрібно фактично зберегти метадані при збереженні публікації:
add_action ('save_post', 'jlc_projects_save'); функція jlc_projects_save () {глобальний $ post; якщо (визначено (‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) {return $ post_id; } ще {update_post_meta ($ post-> ID, "jlc_projects_link", $ _POST ["jlc_projects_link"]); }}
Після створення розділу адміністратора для наших спеціальних типів публікацій, настав час додати деякі функції інтерфейсу, які допоможуть відображати наші проекти відвідувачам. Він складається з шаблону архіву, шаблону однієї сторінки та шорт-коду (не розглядається в цьому посібнику). Але перед цим ми маємо створити ще одну функцію для відображення зображень: picturefill.js.
Цей фрагмент JavaScript (ви можете знайти репо GitHub тут) дозволяє визначити набір медіа-запитів, щоб переключити зображення на версію, більш зручну для розміру екрана, на якому воно переглядається. Це також впливає на час завантаження, оскільки ви, мабуть, можете припустити, що менший екран означає мобільний пристрій, що використовує 4G, 3G або навіть EDGE. Я знаю, що це не завжди так, але це краще, ніж ніщо.
Ви можете побачити шаблон розмітки для стандартного елемента заповнення зображення в репозиторії GitHub. Ми можемо мати необмежену кількість span> елементи для кожного розміру зображення, яке ми маємо. Також існує резервний варіант для користувачів без JavaScript. Як ви можете собі уявити, оскільки WordPress створює кілька версій кожного зображення, яке ми завантажуємо за допомогою програми Media Uploader, він чудово підходить для picturefill.js. Перше, що нам слід зробити, це завантажити скрипт, який знаходиться в / js / папку в каталозі нашого плагіна. Додаємо наступний код до jlc-projects.php:
функція jlc_projects_scripts () {wp_enqueue_script (‘picturefill’, JLCP_PATH.’js / picturefill.js ’, array ()); } add_action (‘wp_enqueue_scripts’, ’jlc_projects_scripts’);
Це завантажить наш JavaScript із сценаріями, що завантажуються іншими плагінами. Це також забезпечить, щоб ми не завантажували picturefill.js більше одного разу.
Оскільки в наших проектах для відображення знімка екрана буде використовуватися розділ "Вибране зображення", ми можемо замінити розмітку розміщених зображень за замовчуванням за допомогою post_thumbnail_html фільтр. Зверніть увагу, що ця функція фактично замінить усі розділи зображень на сайті. Якщо це може спричинити конфлікт (можливо, це буде), вам слід додати до свого плагіна кілька умовних умов, щоб переконатися, що цей фільтр використовується лише на сторінках портфоліо.
add_filter ('post_thumbnail_html', 'jlc_projects_get_featured_image'); функція jlc_projects_get_featured_image ($ html, $ aid = false) {$ sizes = array (‚’ thumbnail ’,‘ medium ’,‘ large ’,‘ jlc_project ’,‘ full ’); $ img = ’span data-picture data-alt =" ’. get_the_title (). '"> ’; $ ct = 0; $ допомога = (! $ допомога)? get_post_thumbnail_id (): $ допомога; foreach ($ розміри як $ size) {$ url = wp_get_attachment_image_src ($ допомога, $ розмір); $ width = ($ ct sizeof ($ sizes) -1)? ($ url [1] * 0,66): ($ ширина / 0,66) +25; $ img. = ’span data-src =" ’. $ url [0].’ "’; $ img. = ($ ct> 0)? ’Data-media =" (min-width: ’. $ Width .’px)"> / span> ’:’> / span> ’; $ ct ++; } $ url = wp_get_attachment_image_src ($ допомога, $ розміри [1]); $ img. = ’noscript> img src =" ’. $ url [0].’ "alt =" ’. get_the_title ().’ "> / noscript> / span>’; повернути $ img; }
Тут відбувається кілька речей. По-перше, функція має масив усіх розмірів зображень у WordPress, які ми хочемо використовувати. Якщо у вас є власні розміри, вам доведеться додати їх сюди. Це тому елемент заповнення зображення точно заповнено. Після деякої настройки (визначення розмірів зображення, відкриття елемента заповнення зображення, ініціалізація лічильника), воно рухається через розміри $, друкуючи запис зображення для кожного.
Для кожного запису wp_get_attachment_image_src () викликається, щоб отримати URL-адресу зображення на основі ідентифікатора зображення (який get_post_thumbnail_id () повертається на основі ідентифікатора повідомлення) та розміру. wp_get_attachment_ image_src () повертає масив, що включає зображення, ширину, висоту та обрізане чи ні. Тут також є трохи математики, щоб розрахувати, коли визначати точки зупинку, а також як обробляти мініатюру. Я не буду тут детально обговорювати це, але варто зазначити, що це важлива проблема, яку потрібно вирішити, і така, для якої рішення швидко розвиваються.
Тепер, коли ми отримуємо ескіз публікації, повертається HTML-код із нашої функції.
Створення архівної сторінки
Далі ми створимо шаблон архіву для нового користувацького типу повідомлення. Це те, що відображатиметься за замовчуванням і служитиме нашою основною сторінкою портфоліо.
(Примітка: ми не будемо створювати домашню сторінку сайту в цьому посібнику, але для цього потрібно або тег шаблону, або шорткод, який буде виконувати власний цикл із використанням WP_Query.)
Створіть новий файл у будь-якому каталозі тем, який ви використовуєте, і зателефонуйте йому archive-portfolio.php. Ієрархія шаблонів WordPress досить розумна, щоб знати, що коли користувач перебуває на сторінці портфоліо, він повинен відображати вміст за допомогою цього шаблону. На даний момент я рекомендую скопіювати файл page.php шаблон для цього шаблону. Ми просто замінимо цикл.
Я рекомендую використовувати шаблон без бічної панелі або шаблон із одним стовпцем. CSS, на який посилається тут, буде працювати трохи приємніше. Ось як виглядає наша петля:
? php while (have_posts ()): the_post (); ?> var13 -> div>? php the_post_thumbnail (‘jlc_project’); ?> var13 -> h3>? php the_title (); ?> var13 -> / h3> p>? php echo get_the_excerpt (); ?> var13 -> a href = "? php the_permalink ();?> var13 ->"> читати далі ... / a> / p> / div>? php тим часом; ?> var13 ->
Це має бути досить просто. Оскільки ми замінюємо HTML за замовчуванням на the_post_thumbnail (), аргумент, яке зображення використовувати, не має значення, оскільки всі розміри будуть повернуті за допомогою розмітки picturefill.js. Я вирішив використовувати get_the_excerpt () для того, щоб виключити будь-яку розмітку, включену the_excerpt ().
При розробці плагіна, який включає деякий CSS, важливо зробити його якомога мінімальним, щоб він не стикався з CSS теми або не давав користувачеві можливість повністю виключити ваш CSS. Оскільки ми створюємо шаблони в рамках теми, у нас є трохи більше місця для хитання. Ось частина (створеного Sass) CSS, яку я додав до кожного проекту на сторінці архіву:
.card img {display: block; запас: 0 авто; } екран @media та (мінімальна ширина: 45,88em) {.card {display: inline-block; ширина: 40%; }} @media екран і (мінімальна ширина: 54,62em) {.card {ширина: 44%; }} @media екран і (мінімальна ширина: 76,38em) {.card {ширина: 29%; }} екран @media та (мінімальна ширина: 99,4em) {.card {ширина: 30%; }
Я визначив, які точки зупинку найкраще розміщувати поруч із картками проекту. Я також автоматично зробив центр обраних зображень.
Створення єдиної сторінки
Тепер ми створимо єдиний шаблон для портфельних проектів. Щоразу, коли користувач відвідує сторінку одного проекту, саме це відображається. Створіть у своїй темі новий файл, назвіть його однопортфельний.php і скопіюйте інший шаблон, щоб вставити туди (я б порекомендував все, що ви використовували для archive-portfolio.php). Цього разу ми замінимо петлю таким кодом:
? php while (have_posts ()): the_post (); ?> var13 -> h2>? php the_title (); ?> var13 -> / h2>? php the_post_thumbnail (‘jlc_project’); ?> var13 ->? php the_content (‘Прочитайте решту цього запису’); ?> var13 ->? php if (function_exists (’jlc_projects_get_link’)) {$ jlc_link = jlc_projects_get_link ($ post-> ID); if ($ jlc_link) {?> var13 -> a href = "? php print $ jlc_link;?> var13 ->"> Відвідайте веб-сайт / a>? php}}?> var13 ->? php врешті; ?> var13 ->
Це схоже на шаблон архіву, але ми викликаємо тут додаткову функцію: jlc_projects_get_link (). Ми додамо це до нашого плагіна, і він поверне URL-адресу поточного проекту.
Якщо URL-адреси немає, слід повернути false і жодна кнопка не відображається. Ось яка функція (розташована в jlc-projects.php) виглядає наче:
функція jlc_projects_get_link ($ id) {$ url = get_post_custom_values (’jlc_projects_link’, $ pid); повернути ($ url [0]! = ’’)? $ url [0]: false; }
CSS для цієї сторінки значною мірою залежатиме від теми: я використав кілька CSS, щоб створити гарну кнопку. Переконайтеся, що будь-який створений вами CSS не заважає головній темі.
На закінчення
На даний момент ми створили плагін, щоб додати новий власний тип публікації для портфоліо, інтегрований picturefill.js для кращої обробки зображень та створили два шаблони тем для відображення інформації.
Репо GitHub для підручника містить весь код, показаний тут, а також тему, яку я використав, шорткод та тег шаблону.
Слова: Джо Касабона
Ця стаття спочатку з’явилася у випуску 254 журналу net.
