Underscore template: Page not found · GitHub Pages

Стартовая тема для WordPress

Название темы Слизняк темы Автор URI автора Описание Шаблон WooCommerce _sassify!

На основе _s из github

Привет. Моя стартовая тема называется _s или подчеркивает , если хотите. Я тема, предназначенная для взлома, поэтому не используйте меня в качестве родительской темы. Вместо этого попробуйте превратить меня в следующую, самую потрясающую тему WordPress. Вот для чего я здесь.

Мой ультра-минимальный CSS может сделать меня похожей на тартар темы, но это означает, что меньше вещей будет мешать вам, когда вы разрабатываете свою потрясающую тему. Вот некоторые из других более интересных вещей, которые вы найдете здесь…

Узнайте больше обо мне в «1000-часовой форе: Знакомство с темой _s» на ThemeShaper.

• Достаточное количество простых, хорошо прокомментированных, современных шаблонов HTML5.
• Полезный шаблон 404.
• Необязательный образец реализации пользовательского заголовка в inc/custom-header. php .
• Пользовательские теги шаблонов в inc/template-tags.php , которые поддерживают чистоту и аккуратность ваших шаблонов и предотвращают дублирование кода.
• Некоторые небольшие изменения в inc/template-functions.php , которые могут улучшить работу с темами.
• Скрипт по адресу js/navigation.js , который превращает ваше меню в выпадающее меню на маленьких экранах (например, на вашем телефоне), готовое к использованию CSS.
• 2 образца макетов CSS в макетов/ для боковой панели по обе стороны от вашего контента.
• Грамотно организованный начальный CSS в style.css , который поможет вам быстро начать работу над дизайном.
• Под лицензией GPLv2 или выше. 🙂 Используйте его, чтобы сделать что-нибудь классное.

Символы подчеркивания на github

Как использовать wp.

template, метод шаблона Underscore.js WordPress

Как и многие агентства разработчиков, у нас есть несколько разных аудиторий, включая клиентов (текущих и потенциальных) и других разработчиков. Наша цель — обслуживать всю нашу аудиторию, обладающую широким спектром технических знаний. Даже если вы не профессиональный разработчик, мы знаем, что многие из вас все еще изучают технологии, используемые на вашем сайте, и мы хотим помочь! Если есть что-то, что мы освещаем, чего вы не понимаете (или что-то, что вы хотели бы увидеть, что связано с WordPress, даже 101!), пожалуйста, сообщите нам об этом. Глупых вопросов не бывает.

Тем не менее, давайте погрузимся в кое-что интересное: Метод шаблона WordPress Underscore.js, wp.template.

---

Если вы еще не знакомы, wp.template() — это классный небольшой служебный метод JavaScript, который предоставляется с основным скриптом WordPress «wp-util». По своей сути он использует метод Underscorejs

.template() .

WordPress использует эту утилиту для загрузки шаблонов для всех основных представлений, но для ее использования магистраль не требуется. Сначала я продемонстрирую использование wp.template()  с небольшим количеством jQuery для вывода некоторых данных JavaScript в HTML-шаблон, а позже в качестве бонуса мы перестроим wp.template()  как наш собственный модуль с некоторыми дополнительными функциями.

Имейте в виду: это должен быть максимально простой пример, а не то, что вы копируете/вставляете в производственный код.

. Продолжайте следовать стандартным рекомендациям, включая размещение JavaScript в отдельном файле, избегание анонимных функций, интернационализацию текстовых строк и т. д.

По умолчанию для этого метода требуется тег скрипта с идентификатором tmpl-my-template-name . Поскольку весь WordPress использует этот метод/систему шаблонов, вам нужно убедиться, что вы правильно добавляете префикс к своим идентификаторам, чтобы не конфликтовать с другим шаблоном, который может быть загружен на страницу. Этот тег скрипта также должен иметь тип « text/template

«. ¹

Приступим:

Итак, теперь у нас есть правильный тег шаблона скрипта, готовый для использования в функции PHP, с уникальным идентификатором, tmpl-zao-item-status . Как видите, это не 100% стандартный HTML. Вы можете видеть, что мы используем переменные данных, вдохновленные Mustache, а также логические блоки Underscorejs.

Из Кодекса:

WordPress определяет свои собственные теги интерполяции, используя _.template( options ) , чтобы избежать несовместимости в некоторых конфигурациях PHP с включенным asp_tags . Синтаксис интерполяции для WordPress основан на синтаксисе шаблонов Mustache:

• Интерполировать (без экранирования): {{{ }}}
• Интерполировать (с экранированием): {{ }}
• Оценка: <# #>

Важно понимать, что <#  и #> , которые сигнализируют об открытии/закрытии необработанного вывода JavaScript, поэтому вы можете делать такие вещи, как логические операторы (например, оператор if  в приведенном выше примере). . Вы также можете видеть, что мы используем неэкранированную интерполяцию, когда выводим число 9.0020 data.open

 и data.close  параметры, так как они будут содержать HTML и мы не хотим, чтобы они экранировались.

На этом этапе давайте подключимся к WordPress, чтобы увидеть это в действии.

Добавьте этот фрагмент куда-нибудь в файл functions.php вашей темы или в пользовательский плагин:

Если вы перейдете к экрану добавления или редактирования поста, вы должны увидеть что-то вроде этого:

Это мало что дает для нас. Нам понадобится некоторая настройка JavaScript, чтобы получить наш обновленный статус и обновить разметку статуса. Для упрощения мы просто подделаем запрос AJAX, установив короткую задержку. Вы также можете использовать что-то вроде Zao Mock API, чтобы имитировать некоторые запросы/ответы API.

JavaScript:

Комментарии к коду не требуют пояснений, но резюмируем:

1. Вызов wp.template()  с идентификатором тега скрипта, который мы создали ранее минус префикс tmpl-  
2. Подделать запрос API, установив задержку в одну секунду
3. Создайте объект данных и передайте его нашей новой функции шаблона, которая возвращает скомпилированный HTML
4. Возьмите этот HTML и замените существующий.