WordPress underscore: Underscores wordpress стартовая основная тема для создания своих шаблонов

Underscores wordpress стартовая основная тема для создания своих шаблонов

Для чего нужна стартовая тема

Новичок в разработке тем WordPress не использует фреймворки или готовые решения, а делает все с нуля, потому что:

• Делать на бесплатном шаблоне это плохо, переделывать чужую работу намного дольше и труднее
• Фреймворки типа Bootstrap и им подобные не совсем совместимы с WP, приходится их адаптировать через костыли

На помощь приходят стартовые темы, именно на них пишут сайты большинство программистов, потому что базовый функционал вложен в файлы, а внешний вид и CSS разметка не сделаны, что дает сразу несколько плюсов:

1. Не нужно создавать файлы темы с нуля
2. Все необходимые элементы размечены, остается только по комментариям в HTML и классам сделать работу
3. Настройка CSS и внешнего вида полностью зависят от специалиста
4. Некоторые встроенные функции, полезные для пользователя
5. Подробные мануалы по использованию

Наша команда давно доверяет свои разработки стартовой теме underscores, потому что перед остальными имеет множество преимуществ.

Тема Underscores мини обзор

Говорить про starter themes Underscore можно бесконечно, другое название _s, но отмечу несколько моментов, дающих понятие, что получит человек.

• Тема построена на стандартах HTML5
• Примеры создания некоторых функций, например пользовательские поля
• По умолчанию встроенный файл страницы 404 ошибки
• Разделение файлов функций
• _s уже адаптирован, и меню и контент сделаны отлично, остается прикрепить стили
• 2 примера положения сайдбара на странице, слева и справа
• Лицензия свободного распространения GPLv2, то есть разработка темы WordPress под продажу не запрещена

Единственное, что можно добавить это микроразметку, любую из современных, например, Shema.org.

Где взять underscore

Существует официальный сайт от разработчиков WordPress (компания Automattic) underscores.me, регистрация не нужна, существует генератор тем.

Вводите информацию о теме, которая содержится в style.css, имя темы, короткое описание, автор и ссылку на официальный сайт создателя. Возможно подключить поддержку WooCommerce и включить препроцессоры CSS с помощью галочек. После ввода всех строчек нажимаем genereate и автоматически начнется загрузка архива.

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

Закончу статью, приложу видео, наглядно разобран процесс верстки под андерскор, успехов в работе.

Пожалуйста, оцените материал: Мне нравится7Не нравится1

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

Если вы решили заняться разработкой тем для WordPress, то вам не обязательно каждый раз начинать с чистого листа. Стартовая тема _s (Underscores) поможет сэкономить время при разработке новых тем для WordPress.

Тема _s или Underscores (произносится «андерскорс») разработана сотрудниками компании Automattic. Цель данной темы — облегчить и ускорить разработку новых тем для директории WordPress.org и сети WordPress.com. Именно поэтому тема называется «стартовой» и не имеет никакого дизайна:

Внешний вид темы Underscores

Сама по себе тема с таким внешним видом бесполезна, потому ее и не выложили в официальную директорию WordPress.org. Но если взглянуть на исходный код темы, то мы увидим хорошую основу для разработки новой темы:

• Чистая разметка HTML5 со всеми требуемыми шаблонами, тегами и функциями
• Поддержка произвольных изображений в заголовке
• Дополнительные функции для пагинации, вывода мета-данных и другие
• Поддержка изменения значений с помощью postMessage в конфигураторе тем WordPress
• Поддержка модуля бесконечного скрола плагина Jetpack
• Готовое подключение языковых пакетов и файл .pot
• Поддержка навигационного меню, форматов записей и виджетов

Таким образом, чтобы создать новую тему на базе Underscores нам необходимо лишь скачать _s, переименовать ее и придать требуемый внешний вид. Лишний функционал можно легко убрать, а требуемый добавить.

Большинство тем на базе _s ограничиваются изменением лишь CSS файла, но сама стартовая тема рекомендует так же изменять разметку и функционал, если есть необходимость, а про обновления можно не беспокоиться. Это главное отличие стартовой темы от родительской.

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

Underscores.me: генератор тем на основе _s

По последним данным генератором Underscores.me воспользовались более 162,000 раз за последние два года, более 30,000 просмотров сайта Underscores.me ежемесячно, 12,000 просмотров проекта на GitHub каждую неделю, более 500 изменений в репозиторий _s, 63 участника в разработке и более 400 пул-реквестов на GitHub.

Есть масса примеров тем основанных на _s, включая стандартную тему WordPress Twenty Fourteen и большинство всех тем от Automattic. Стоит также отметить, что темы разработанные авторами журнала WP Magazine Expound и Semicolon тоже основаны на стартовой теме Underscores.

Лицензия стартовой темы — GPL, а это значит, что при распространении темы основанной на _s автор обязан унаследовать лицензию. Это не значит, что вы не можете продавать темы созданные с помощью Underscores. Есть ряд примеров коммерческих тем созданных с помощью _s.

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

21.05.2018
Ромчик

0



Доброго времени суток. В данной статье мы рассмотрим, как ускорить разработку темы для WordPress. Вы знаете, что тема WordPress состоит из множества файлов, каждый из которых отвечает за вывод определенной информации. На этом блоге есть серия статей по созданию темы для WordPress. И для того, чтобы каждый раз не создавать эту кучу файлов и не вписывать в них функционал можно использовать стартовую тему для WordPress – Underscores. Давайте подробней посмотрим, что из себя представляет данная тема.

Скачать тему можно с github. Но есть и специальный генератор. Им я и буду пользоваться. Переходим на сайт http://underscores.me/ и вводим название нашей темы, например, «my_theme» и жмем «Generate»

И мы уже скачиваем архив с темой. Давайте ее установим и активируем. Если вы еще не знаете как это делать, то прочитайте в статье «Основы WordPress: Что такое тема в WordPress». Переходим на наш и посмотрим, как теперь выглядит наш сайт.

И видим, что есть вывод постов. Нет только дизайна. Нам осталось только натянуть дизайн и все тема готова (в большинстве случаев)

Давайте посмотрим, что из себя представляет стартовая тема. Для этого откроем папку с темой.

Как видите структура темы полностью готова. Давайте посмотрим основной файл темы style.css.

Файл уже заполнен (меня всегда напрягало заполнять этот файл).

Стартовая тема underscores:

• Основана на html5
• Уже содержит шаблон страницы 404
• Поддерживает модуль бесконечного скрола плагина Jetpack
• Поддерживает реализацию пользовательского заголовка в inc/custom-header.php
• Поддерживает навигационное меню, форматы записей и виджетов
• Уже реализована поддержка мультиязычности
• И др.

Заключение.

Стартовая тема Underscores значительно уменьшает время разработки темы для WordPress. Ведь в большинстве случаев нам нужно только поменять css.

Понравилась статья? Поделись с друзьями.

Elementor и Underscores: вам даже нужна тема?

Вы узнаете фантастический новый подход к созданию сайтов WordPress. Хотя это нарушает многие традиции. Мы не утверждаем, что придумали использовать Elementor и Underscores, хотя мы никогда не слышали о ком-либо, кто использовал такого рода “комбо”. В свою очередь, вы получите выгоду от гораздо менее раздутого, более производительного сайта WordPress!

Что мы сделали, чтобы прийти к этому решению?

Мы потратили бесчисленные часы, приручая дорогие темы WordPress к тому, как мы хотим, чтобы они вели себя. Даже если тема говорит о том, что она многоцелевая, в конечном итоге это становится ее кончиной. Они стали настолько сложными, что вы разрабатываете весь сайт, и от первоначальной концепции темы мало что остается в конце разработки. Довольно часто создателям тем нравится добавлять компоновщик (среди других плагинов) в их и без того сложный базовый код, чтобы оставаться конкурентоспособными на рынке. Что останется со всеми бонусными плагинами и модными стоковыми фотографиями с их демонстрационного сайта? В любом случае, если вы все сами разрабатываете, зачем покупать эту дорогую тему?

Мы работали с разными компоновщиками, прежде всего с WPBakery Page Builder, ранее известным как Visual Composer. Наш опыт показал, что некоторые темы премиум-класса отключают фронтальное редактирование. Это лишает тем реальной силы, оставляя неприятный бэкэнд-опыт. Мы создали сайт с премиальной темой и комбо Visual Composer, но мы устали от сложности. Мы решили отказаться от него и найти лучший подход, который позже оказался парой Elementor и Underscores.

Что, если строитель был настолько могущественным, что мог взять на себя роль темы? У вас был бы более быстрый сайт с одним продуктом для изучения. Одним из лучших для этой задачи является Elementor.

Наш альтернативный подход с Elementor и Underscores

После того, как мы углубились в админ-экраны Elementor, мы заметили, что у него есть возможности темы. Вы можете создать макет и пометить его как архив. Создайте еще одну для 404 страниц, боковых панелей и т.д. Как ни странно, в ней есть все, что должна делать тема. Поэтому он звучал многообещающе и хотел посмотреть, чего он может достичь самостоятельно.

Это не заняло много времени, пока мы не нашли почти пустую тему под названием Underscores. Эта тема очень далека от того, что вы думаете о чем-то от ThemeForest. Это чертовски пусто, вполне необходимый для работы WordPress. Идея заключалась в том, что что-нибудь красочное, что мы видим на фронтэнде, придет от Elementor (так как у темы нет стилей). Сочетание Elementor и Underscores родился!

Что такое тема Underscores WordPress?

Вы можете спросить, что это такое. При создании темы (возможно, для продажи) разработчик не хочет начинать с нуля. Эти стандартные темы включают общий код, который является общим для каждой существующей темы. Это как фундаментальная структура скелета. Конечно, существуют разные варианты того, как кодеры реализуют общую структуру, но основа ядра та же. Мы хотели шаблон, который имеет только эти основные линии, и ничего более.

Определенные теги шаблонов удерживают сайт WP вместе. Например, создание области, которая станет верхним или нижним колонтитулом HTML-документа. Точно так же странице необходимо знать, где будет отображаться содержимое, меню, боковая панель или комментарии. Это просто.

Если бы вы установили эту тему, ваш интерфейс выглядел бы испорченным. Сине-фиолетовые ссылки, без стилей, черный текст на белом фоне. Все это под 100KB. Для начала, это делает быстрый сайт. 

Стоит отметить, что Automattic (люди, стоящие за проектом WordPress) создали Underscores. Его открытый характер гарантирует, что тема включает в себя знания многих разработчиков и относительно безошибочную работу. Тема не обновляется все так часто, как это не должно быть. К счастью, это абсолютно бесплатно, и вы можете изменить тему так, как вам нравится. Мы настроили его, добавив наши фрагменты в дочернюю тему.

Что такое Elementor?

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

Конечно, поскольку мы разработчики, нам нужно было добавить много пользовательского кода, PHP, CSS и JS. Но нам не нужно было создавать все с нуля, только те части, которые уникальны для нашего сайта. Этими компонентами являются индикаторы сложности, подчеркивание нашей анимированной ссылки и ленивая загрузка изображений, а также множество других настроек.

Elementor и Подчеркивание в сочетании

Когда мы пошли по этому пути, сразу стало очевидно, что результат легко изменить. Elementor имел почти все в своем наборе инструментов для имитации правильной темы. Сам наш сайт является доказательством того, что комбинация Elementor и Underscores работает, и мы думаем, что все получилось неплохо. Вместо двух раздутий у нас есть только одно раздувание. ???? Почему? Размер Элементора все еще значителен, и он все еще способен на гораздо большее, чем нам требуется. Но, по крайней мере, когда нам нужно что-то (компонент), это, вероятно есть, в его библиотеке. Это небольшая стоимость по сравнению с кодированием всего сайта вручную.

Сложности с Elementor

Это не было бы честной рекомендацией, если бы мы молчали о некоторых проблемах. Одна вещь, которую Elementor не мог сделать летом 2020 года, это комментарии к комментариям . Я имею в виду, что мы вставили блок комментариев, но он ожидал, что его дизайн будет исходить из основной темы. Так как на самом деле у нас его нет, он выглядел незапятнанным; поэтому мы должны были написать все CSS для этого.

Ни один конструктор или программное обеспечение не является идеальным, поэтому мы столкнулись с некоторыми ошибками. Разработчики умеют исправлять их, если о них сообщают. Здесь нет разногласий, но знайте, что в мире WordPress практически никогда не бывает гладко. Неважно, какие модные слова пытаются продать вам, у вас рано или поздно возникнут проблемы. Конечно, мы несколько пессимистичны, но это правда.

К сожалению, мы боимся обновлений, поскольку они имеют тенденцию портить уже готовые вещи. Рекомендуется хранить копию сайта в качестве промежуточной и пробовать обновления и изменения макета. Разработчики любят тестировать новые вещи, чтобы идти в ногу с новыми технологиями, но это не всегда хорошо. Макеты могут сломаться, и если вы не знаете, как их исправить или у вас нет фрилансера, вам будет трудно. Кстати, то же самое относится и к темам, и, вероятно, там хуже. Так что не отклоняйте наш подход, основанный на этом.

Вывод

Разве вам не нужна тема WordPress в конце концов? Комбинация Elementor и Underscores является экономически эффективным решением,  и альтернативным подходом к типичному рабочему процессу. Он прост в использовании и обеспечивает мгновенную обратную связь и результаты о том, как будет выглядеть ваш сайт даже до того, как вы нажмете «Сохранить». Это не без минусов, но мы считаем, что это новый лучший способ, по крайней мере для нас. Мы гордимся тем, что не использовали тему премиум на этом сайте. Это позволило нам избежать королевского беспорядка, который они обычно приносят.

Совместное использование Elementor и Underscores – еще одна лучшая вещь для написания кода самостоятельно. Комбинация, безусловно, имеет больше возможностей для роста, но сама по себе она уже хороша. Поэтому мы рекомендуем решение даже для начинающих. Elementor все еще имеет встроенные демонстрационные данные, поэтому вы не начинаете с нуля. Кроме того, моментальный предварительный просмотр в режиме реального времени вызывает привыкание, и им понравится истинная вещь «то, что ты видишь, то, что ты получаешь».

Обновление: Спасибо всем за рекомендацию Hello Theme, мы создадим сайт для нашего следующего секретного проекта, используя её. После этого мы вернемся к разговору об опыте и возможных различиях. Мы также с нетерпением ожидаем увидеть, как эта концепция работает с GeneratePress.

Источник записи: https://letswp.io

Стартовая тема Underscores для WordPress | Веб-Лайнер

Всем привет друзья, на связи Валерий Столярчук в этой статье я расскажу о замечательном стартовом шаблоне для WordPress — Underscores. Который призван облегчить начало разработки WordPress темы или посадку HTML.

Что такое Underscores и зачем он нужен ?

Прежде чем начать посадку HTML на WordPress, необходимо создать множество важных php файлов для темы, таких как: header.php, footer.php, function.php, index.php, single.php и других.. Так же нужно грамотно наполнить их,сделать разметку и написать функции. Все это трата вашего времени. Но благодаря стартовому шаблону Underscores вам не нужно будет тратить на это время. Он все сделает за вас.

В сгенерированном шаблоне вы получите не только файлы, но и базовую разметку для темы, с выводом контента всех важных страниц для WordPress. Опираясь на примеры кода, внутри стартового шаблона, вы сможете быстро начать посадку HTML или разработку полноценной WordPress темы.

Как получить стартовый шаблон ?

Получить стартовый шаблон очень просто! Для этого нужно:

• Перейти на сайт Underscores.me
• Ввести название своей темы
• нажать кнопку “GENERATE”
• генерировать стартовый шаблон

После успешной генерации он сразу же скачается в вашем браузере и вы сможете поместить его в папку с темами по след пути: wordpress/content/themes/

После того как шаблон был загружен в WordPress, вам нужно будет его активировать в админ панеле, после этого можно начинать делать посадку.

Можно ли использовать Underscores как основу для темы и продавать ее на themeforest & templatemonster или другом стоке ?

Да, вы можете это делать. Заготовка Underscores соответствует всем современным стандартам WordPress и темы разработанные на его основе принимаются на всех площадках.

Заключение:

В заключении хочу сказать, что:

1. Underscores является прекрасным помощником при создании темы для продажи или посадки HTML to WordPress для клиентов.
2. Вам не придется создавать десятки файлов собственноручно, а за вас это грамотно и за секунду сделает Underscores.
3. Вам лишь останется подключить необходимые JavaScript библиотеки и CSS файлы, следуя примерам внутри файла function.php и начать переносить HTML.

К слову, я раньше при посадке верстки для клиентов и когда разрабатывал первые WordPress темы, использовал этот стартовый шаблон. Он очень упростил процесс разработки.

А что вы думаете об Underscores ? Какие вопросы возникли в процессе чтения этой статьи ? Я быстро отвечаю на комментарии, спрашивайте не стесняйтесь 🙂

Файлы темы WordPress

Вы здесь:
Главная — Софт — Софт для создания сайтов — Файлы темы WordPress

Лучше всего начать изучение структуру файлов темы WordPress на примере стартовой темы Underscore. Обычно разработку под WordPress начинают с этой базовой темы.

После установки WordPress с официального сайта https://wordpress.org/, вам надо на сайте https://underscores.me/, сгенерировать вашу тему, дайте ей какое-нибудь название, например my_themes и нажмите кнопку «Generate».

Скачается архив, который надо установить в админке WordPress, в качестве темы. Переходите в раздел: Внешний вид / Темы / Добавить новую, выбираете ваш скачанный архив и устанавливаете через FTP соединение, тема установлена и осталось её активировать.

Мы установили пустую тему WordPress и сейчас она представляет из себя заготовку, состоящую из файлов составляющих определенную иерарахию и структуру. У вас предварительно был скачан сам WordPress, в папке wp-content / themes, лежит папка со стартовой темой my_theme. Давайте изучим содержание этой папки.

Здесь мы видим 5 папок (inc, js, languages, layouts, template-parts), их можно переименовывать и создавать свои, на работу шаблона это никак не влияет. Все остальные файлы лежат в корне шаблона и они являются системными, поэтому их нельзя перемещать в другое место и давать им свои названия.

Описание папок темы Underscore

• inc — здесь хранятся функции, которые уже используются в шаблоне и новые функции, которые создаст разработчик
• js — содержит библиотеки JavaScript
• languages — здесь языковые файлы, WordPress мультиязычная платформа
• layouts — здесь будут новые пользовательские CSS стили
• template-parts — для дополнительных PHP файлов

Описание файлов темы WordPress

Вся разработка ведется в functions.php, но когда у вас много кода, то вы физически не можете его разместить в одном файле. И тогда вы часть кода разносите по логическим папкам и подключаете их в файле functions.php.

• 404.php — файл, показывающий шаблон несуществующей страницы
• archive.php — файл с шаблоном страницы архив (по дням, неделям и годам)
• comments.php — файл с шаблоном внешнего вида комментариев
• footer.php — шаблон с подключением подвала сайта
• functions.php — подключает все файлы темы к ядру самого WordPress
• header.php — файл с шаблоном подключения шапки сайта
• index.php — файл с шаблоном генерации архива страниц блога
• LICENSE.txt — информация о лицензии (бесплатная / платная)
• page.php — шаблон для отдельных страниц
• rtl.css — меняющий направление текста на right-to-left для отдельных языков
• screenshot.png — превью-картинка для темы в админке
• search.php — шаблон результатов поиска на блоге
• sidebar.php — файл с шаблоном для правой / левой колонки темы
• single.php — файл с шаблоном для отдельно взятого поста
• style.css — основной CSS файл темы

Вы можете получить больше информации о том как делать сайты на WordPress, из моего видеокурса, рассчитанного на новичков.

• 
  Создано 03.08.2018 10:33:51

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. 
   Кнопка:
   
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. 
   Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

WordPress настройка не работает-загрузка — scripts.php ошибок

Когда я пытаюсь настроить свою тему WordPress, я получаю пустой экран. Я отключил плагины, и ошибка все еще была там — это тема, я попробовал другую тему, и проблема исчезла.

Я запустил консоль JS и получил эти ошибки, но я не знаю, что они означают:

load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-draggable,underscore,wp-a11y,wp-util,jquery&load[]=-ui-sortable,jquery-ui-droppable,backbone,wp-backbone,jquery-ui-tabs,shortcode,utils,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:58 Uncaught TypeError: Cannot read property 'replace' of undefined
    at Function.m.template (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-draggable,underscore,wp-a11y,wp-util,jquery&load[]=-ui-sortable,jquery-ui-droppable,backbone,wp-backbone,jquery-ui-tabs,shortcode,utils,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:58)
    at n.template (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-draggable,underscore,wp-a11y,wp-util,jquery&load[]=-ui-sortable,jquery-ui-droppable,backbone,wp-backbone,jquery-ui-tabs,shortcode,utils,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:61)
    at n.render (load-scripts.php?c=1&load[]=jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker,heartbeat,customize-base,customize-controls,customize-widgets,thickbox,&load[]=mce-view,imgareaselect,image-edit,quicktags,wplink,jquery-ui-position,jquery-ui-menu,jquery-ui-autocomplete,media-upload,accordi&load[]=on,customize-nav-menus,customize-models,customize-views,updates&ver=4.9.8:722)
    at n.initialize (load-scripts.php?c=1&load[]=jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker,heartbeat,customize-base,customize-controls,customize-widgets,thickbox,&load[]=mce-view,imgareaselect,image-edit,quicktags,wplink,jquery-ui-position,jquery-ui-menu,jquery-ui-autocomplete,media-upload,accordi&load[]=on,customize-nav-menus,customize-models,customize-views,updates&ver=4.9.8:718)
    at n.e.View (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-draggable,underscore,wp-a11y,wp-util,jquery&load[]=-ui-sortable,jquery-ui-droppable,backbone,wp-backbone,jquery-ui-tabs,shortcode,utils,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:84)
    at n.constructor (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-draggable,underscore,wp-a11y,wp-util,jquery&load[]=-ui-sortable,jquery-ui-droppable,backbone,wp-backbone,jquery-ui-tabs,shortcode,utils,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:86)
    at new n (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-draggable,underscore,wp-a11y,wp-util,jquery&load[]=-ui-sortable,jquery-ui-droppable,backbone,wp-backbone,jquery-ui-tabs,shortcode,utils,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:84)
    at f.ready (load-scripts.php?c=1&load[]=jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker,heartbeat,customize-base,customize-controls,customize-widgets,thickbox,&load[]=mce-view,imgareaselect,image-edit,quicktags,wplink,jquery-ui-position,jquery-ui-menu,jquery-ui-autocomplete,media-upload,accordi&load[]=on,customize-nav-menus,customize-models,customize-views,updates&ver=4.9.8:31)
    at Object.<anonymous> (load-scripts.php?c=1&load[]=jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker,heartbeat,customize-base,customize-controls,customize-widgets,thickbox,&load[]=mce-view,imgareaselect,image-edit,quicktags,wplink,jquery-ui-position,jquery-ui-menu,jquery-ui-autocomplete,media-upload,accordi&load[]=on,customize-nav-menus,customize-models,customize-views,updates&ver=4.9.8:31)
    at i (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-draggable,underscore,wp-a11y,wp-util,jquery&load[]=-ui-sortable,jquery-ui-droppable,backbone,wp-backbone,jquery-ui-tabs,shortcode,utils,media-models,moxiejs,plupload,wp-plupload&ver=4.9.8:2)

php

wordpress

wordpress-theming

customization

я установил wordpress на свой localhost (wamp на windows 7), но javascript не работает в моей админке . EDIT я отслеживаю проблему кажется, это из /wp-admin/loadscripts.php строка 123 get_file…

Я пытаюсь изменить html страницы wordpress, но текстовая кнопка не работает. Когда я проверил свою консоль, я получил это: Uncaught SyntaxError: Invalid or unexpected token:…

Я разрабатываю плагин wordpress локально, используя: MAMP (обновлено до PHP 5.4.4) PhpStorm Хром Я отключил короткий тег, волшебные кавычки и сжатие zlib, но иногда load-scripts.php возвращается вся…

Я пытаюсь отладить функцию javascript, вызванную из плагина Generate Thumbnails в WordPress. Функция использует jquery. Таким образом, фактический вызов, который я хочу отладить, происходит в…

Я пытаюсь настроить WordPress на общем хостинге windows. Я успешно установил WordPress с помощью скрипта установщика, но не могу загрузить ни одного файла. Ни загрузка изображения (я пробовал оба…

Я пытаюсь переместить jquery на свою нижнюю страницу wordpress (чтобы оптимизировать скорость страницы и сделать google счастливым), но не могу понять, как это сделать. Похоже, что jquery.js + 3…

Моя загрузка wordpress media не работает, что-то это белый экран, другие только некоторые слова. Вот несколько изображений об этом: Вы не могли бы мне помочь?

Я должен разработать новый сайт wordpress на моем сервере localhost xammp. следующая фатальная ошибка показана мне фатальной ошибкой: класс ‘WP_Scripts’ не найден в…

Я больше не вижу свой параметр page builder как для visual composer, так и для siteOrigin page builder после обновления до wordPress 4.9.6… Нет возможности переключиться на страницу Builder, и нет…

Здравствуйте, коллеги-разработчики и решатели проблем, Я столкнулся с проблемой после входа на этот сайт WordPress. Это, по-видимому, происходит на главной странице панели мониторинга, странице…

Руководство для начинающих по созданию темы с подчеркиванием

Тематическое подразделение Automattic, Theme Shaper, недавно объявило, что снова обратит свое внимание на популярную стартовую тему Underscores. Примечательно, что этот сдвиг упоминается из-за возможностей, которые новый редактор Gutenberg привносит в будущую разработку тем.

Underscores — это стартовая тема (в отличие от фреймворка темы), предназначенная для сокращения многих часов времени разработки при настройке новой пользовательской темы.Прежде чем проект Underscores начнет претерпевать кардинальные изменения, может быть хорошей идеей ознакомиться с проектом в его текущем состоянии. Если вы новичок в начальных темах, это поможет сократить время обучения.

В этой статье мы обсудим, что такое стартовые темы, познакомим с подчеркиванием, а затем покажем вам, как создать с его помощью вашу первую тему. К концу вы должны почувствовать себя готовыми вывести разработку своей темы на новый уровень. Приступим к творчеству!

Что такое стартовая тема (и почему они классные)

Стартовые темы упрощают создание собственной темы для WordPress.org Каталог тем.

Помимо создания тем с нуля, разработчики тем используют два основных инструмента для быстрого создания и запуска своих проектов. Это:

1. Фреймворки тем, в которых вы разрабатываете специальную дочернюю тему, предназначенную для работы на ее родительской теме.
2. Стартовые темы, в которых вы должны полностью изменить исходный код темы и сделать его своим.

Одна из проблем с использованием фреймворков, таких как неизменно популярный Genesis, заключается в том, что вы заблокированы выбранным фреймворком.Это означает, что если разработка будет прекращена, ваша тема может оказаться устаревшей. Если вы пойдете по этому пути, важно выбрать фреймворк с процветающим сообществом вокруг него, чтобы свести к минимуму риски, связанные с устаревшими фреймворком и темой.

С другой стороны, стартовые темы предназначены для изменения с самого начала и являются полностью автономными. Начальная тема — это, по сути, набор инструментов, позволяющий максимально упростить создание и запуск дизайна без необходимости выполнять базовую настройку, необходимую для того, чтобы тема WordPress работала.Отличный пример того, когда вы можете использовать стартовую тему, — это когда вы создали прототип HTML и хотите просто превратить его в тему WordPress.

Хотя здесь мы сосредоточены на Underscores, это далеко не единственный жизнеспособный вариант. Другие начальные темы включают Bones (начальная тема HTML5 для мобильных устройств), FoundationPress (начальная тема WordPress для Foundation) и UnderStrap — начальная тема на основе Underscores, включающая Bootstrap 4.

Ваш выбор (как всегда) зависит от ваших потребностей и стиля разработки.Некоторые стартовые темы предназначены для легкого включения в более продвинутые конфигурации, такие как стартовая тема Sage с Roots. Стартовые темы обычно оптимальны, если вы хотите создать отдельную тему с нуля, используя передовые методы. Мы сосредоточимся на Underscores из-за его глубокой интеграции с командой Automattic и предстоящих изменений с Gutenberg.

Underscores — это стартовая тема, поддерживаемая командой разработчиков Automattic. Цель состоит в том, чтобы установить базовые стандарты кодирования в качестве основы и дать разработчикам возможность начать создавать безопасные темы.Он начинался как Toolbox в 2010 году, еще более простая стартовая тема HTML5 для WordPress. Некоторое время Underscores был основой Components, которые теперь, кажется, снова включены в основной проект Underscores.

Если вы хотите использовать стартовую тему, поддерживаемую Automattic и использующую язык Sass, Underscores — отличный ресурс. Однако, если вы ищете что-то с дополнительными встроенными стилями интерфейса, возможно, это не для вас.

Некоторые функции Underscores включают:

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

Теперь, когда вы знакомы со стартовыми темами и проектом Underscores, пора создать свою собственную тему!

Руководство для начинающих по созданию темы с подчеркиванием (в 4 шага)

Underscores позволяет быстро и легко запустить новую тему. Давайте погрузимся в код и начнем с этих четырех шагов!

Шаг 1. Настройка среды разработки тем

Прежде чем что-либо делать с Underscores, вам необходимо настроить локальную среду разработки.Это означает, что вы можете разрабатывать на своем компьютере, а не полагаться на хостинг-сервер. Существует множество инструментов, которые вы можете использовать для создания локального сервера разработки, и ваш выбор будет зависеть от личных предпочтений. В качестве простого способа начать работу с WordPress мы рекомендуем DesktopServer.

Также может быть полезно проверить некоторые из различных плагинов разработки, которые помогут вам на протяжении всего вашего проекта. Однако имейте в виду, что некоторые из наиболее полезных инструментов, ориентированных на разработку, давно не обновлялись.Однако они обычно получают обновления примерно раз в год, чтобы оставаться актуальными.

А пока помните о передовых стандартах кодирования, чтобы ваши конечные результаты были надежными. Например, убедитесь, что вы правильно экранируете свои данные, пользуетесь преимуществами встроенных функций WordPress, ставите сценарии своей темы в очередь и включаете только код, который жизненно важен для производительности темы.

Шаг 2. Загрузите и распакуйте Underscores

Загрузить новый экземпляр темы Underscores невероятно просто.Сначала перейдите на домашнюю страницу Underscores. Затем выполните следующие действия, чтобы загрузить настроенную версию для своей новой темы:

1. Щелкните Дополнительные параметры в Создайте свою тему на основе подчеркивания .
2. Заполните столько информации о вашем плагине, сколько хотите, включая название темы и имя вашего автора.
3. Проверить _sassify! , если вы хотите, чтобы ваша тема была оснащена инструментами Sass.
4. Нажмите Создать, и сохраните предоставленный zip-файл .

В этом файле вы найдете стандартные файлы тем WordPress с минимальными стилями. Помните, что это ваша отправная точка, а не конечный продукт! Отсюда просто загрузите и активируйте эту тему в своей локальной среде разработки WordPress, чтобы увидеть результаты своих усилий во время работы.

Шаг 3. Создайте тему подчеркивания

Underscores имеет множество функций, доступных под капотом, и на этом этапе направление, в котором вы будете двигаться, будет определяться вашим проектом.Тем не менее, вот несколько основных моментов, на которые вы захотите сначала взглянуть:

1. Используйте файлы header.php и footer.php для управления переносом кода вокруг содержимого.
2. Добавьте новый CSS в конец файла styles.css , чтобы включенные стили Normalize помогали, а не мешали.
3. Обратитесь к иерархии шаблонов, если вы хотите отредактировать шаблон определенной страницы или типа публикации.

По мере того, как ваша тема начинает обретать форму, есть несколько дополнительных основ, о которых вы должны знать в Underscores.Например:

• Файл README.md содержит все инструкции по содержанию темы.
• Встроенная документация представлена ​​в комментариях.
• Папка макетов предлагает пример CSS для боковых панелей.
• Папка inc содержит полезные общие настройки с помощью функций темы для улучшения восприятия заголовка, начала работы с настройщиком WordPress и добавления поддержки Jetpack.

Более того, WordPress.org предоставила полное руководство по разработке тем, чтобы помочь вам на вашем пути, и вы также можете найти функции для конкретных тем в кодексе WordPress.org.

Шаг 4. Проверьте свою новую тему

Если вы заинтересованы в отправке своей темы в каталог тем WordPress.org или иным образом хотите соответствовать стандартам WordPress, рекомендуется ознакомиться с их протоколами тестирования. Есть целая команда, занимающаяся проверкой тем на предмет полноты, безопасности и стандартов кодирования.

Хотя существуют доступные правила для процесса проверки, вы также можете использовать некоторые инструменты, которые помогут вам проверить свой код, чтобы сэкономить ваше время:

• Модульные тесты темы — это импорт данных с множеством крайних случаев, чтобы увидеть, как ваша тема работает с непредсказуемыми данными.
• Плагин проверки темы автоматически проверяет ваш код на соответствие стандартам проверки тем WordPress и предоставляет отчет о том, что нужно исправить.

В целом, есть несколько рекомендаций, которым нужно следовать при проверке собственной темы в соответствии со стандартами WordPress.Некоторые из наиболее важных:

1. Соблюдайте предоставленные стандарты WordPress PHP.
2. Держите файлы тем в порядке. Underscores уже дал вам фору!
3. Придерживаться иерархии шаблонов.
4. Локализуйте свою тему, чтобы она была готова к переводу.

Используя стартовую тему Underscores, ваш код уже будет основан на приемлемых стандартах WordPress.org. Все, что вам нужно сделать, это убедиться, что ваш новый дизайн соответствует этим правилам!

Заключение

Underscores — популярная стартовая тема, предоставляемая Automattic, чтобы обеспечить согласованность между пользовательскими темами WordPress.Поскольку вскоре проект может быть расширен за счет добавления специальной поддержки редактора Gutenberg, неплохо было бы ознакомиться с тем, как его использовать для создания тем.

Вы можете создать тему с подчеркиванием, выполнив следующие действия:

1. Настройте локальную среду разработки.
2. Загрузите файлы Underscores и ознакомьтесь с ними.
3. Создайте собственную тему WordPress Underscores.
4. Тщательно протестируйте свою тему, используя стандарты обзора WordPress.

Какие вопросы у вас есть по поводу начала работы с Underscores? Дайте нам знать в комментариях ниже!

Изображение предоставлено: Горан Ивос.

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

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

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

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

Установка

Требования

_s требует следующих зависимостей:

Быстрый старт

Клонируйте или загрузите этот репозиторий, измените его имя на другое (например, megatherium-is-awesome ), а затем вам нужно будет выполнить шесть шагов поиска и замены имени во всех шаблонах.

1. Найдите '_s' (внутри одинарных кавычек), чтобы захватить текстовый домен, и замените его на: 'megatherium-is-awesome' .
2. Найдите _s_ , чтобы захватить все имена функций, и замените их на: megatherium_is_awesome_ .
3. Найдите текстовый домен : _s в style.css и замените его на: Текстовый домен: megatherium-is-awesome .
4. Найдите _s (с пробелом перед ним) для захвата DocBlocks и замените на: Megatherium_is_Awesome .
5. Найдите _s- , чтобы захватить указатели с префиксом, и замените его на: megatherium-is-awesome- .
6. Найдите _S_ (в верхнем регистре), чтобы захватить константы, и замените на: MEGATHERIUM_IS_AWESOME_ .

Затем обновите заголовок таблицы стилей в style.css , ссылки в footer.php с вашей собственной информацией и переименуйте _s.pot из папки languages ​​, чтобы использовать ярлык темы.Затем обновите или удалите этот файл readme.

Настройка

Чтобы начать использовать все инструменты, поставляемые с _s , вам необходимо установить необходимые зависимости Node.js и Composer:

 $ установка композитора
$ npm установить 

Доступные команды CLI

_s поставляется с командами CLI, специально предназначенными для разработки тем WordPress:

• composer lint: wpcs : проверяет все файлы PHP на соответствие стандартам кодирования PHP.
• composer lint: php : проверяет все файлы PHP на наличие синтаксических ошибок.
• composer make-pot : создает файл .pot в каталоге languages ​​/ .
• npm run compile: css : компилирует файлы SASS в css.
• npm run compile: rtl : создает таблицу стилей RTL.
• npm run watch : отслеживает все файлы SASS и перекомпилирует их в css при их изменении.
• npm run lint: scss : проверяет все файлы SASS на соответствие стандартам кодирования CSS.
• npm run lint: js : проверяет все файлы JavaScript на соответствие стандартам кодирования JavaScript.
• npm run bundle : создает архив .zip для распространения, за исключением файлов разработки и системных файлов.

Теперь вы готовы к работе! Следующий шаг сказать легко, но сделать сложнее: создать отличную тему WordPress. 🙂

Удачи!

Как настроить тему для начинающих WordPress с подчеркиванием — 5 воздушных шаров

Это Шаг 3 Руководства по преобразованию шаблонов Bootstrap 4 в темы WordPress. На этом этапе мы загрузим стартовую тему Underscores и установим ее на нашу новую установку WordPress.

К этому моменту мы сделали следующее.

Теперь мы готовы перейти к следующему шагу по настройке стартовой темы. Подчеркивания — это стартовая тема для начала разработки темы WordPress.

С начальной темой Underscore вы получаете все необходимые файлы php и файлы статических ресурсов, необходимые для начала разработки темы WordPress.

Таким образом, начало работы с темой Underscores — это всегда хорошая идея, поскольку она экономит нам много времени и настроек.Это также дает нам фору и хорошую минималистичную отправную точку для разработки нашей темы.

# 1: Загрузите стартовую тему Underscores.

Зайдите на https://underscores.me/, введите название темы и другие дополнительные параметры и сгенерируйте стартовую тему.

Я назвал свою тему FreelancerB2W (Bootstrap 2 WordPress), вы можете выбрать имя по своему усмотрению.

Когда вы нажимаете кнопку «Создать», создается zip-файл с именем freelanceb2w.zip будет загружен.

# 2: Установите и активируйте стартовую тему Underscores.

В качестве следующего шага давайте продолжим и установим сгенерированную тему в наш WordPress.

Распакуйте freelanceb2w.zip и скопируйте папку в папку установки WordPress / wp-contents / themes /

Для меня название моего проекта wordpress — фрилансер. Я вставил свою тему (freelancerb2w) в папку / freelancer / wp-contents / themes

Затем войдите в систему администратора WordPress и перейдите на панель инструментов -> Внешний вид -> Темы. Вы должны увидеть, что к вашим темам добавлена ​​тема «Фрилансер B2W».

Продолжайте и активируйте тему Freelancer B2W.

Примечание : Как вы заметили, в настоящее время изображение темы по умолчанию для нашей темы B2W Underscores Freelancer пусто. Если вы хотите иметь красивое изображение по умолчанию. Перейдите в папку темы (freelancerb2w) и замените screenshot.png желаемым изображением по умолчанию для темы.

После активации, если вы перейдете на домашнюю страницу вашего сайта wordpress, вы увидите текст без стиля.

Так выглядит дизайн подчеркивания по умолчанию. Наши следующие шаги включают преобразование нашего шаблона Bootstrap в эту тему.

Давайте перейдем к нашему Шагу 4: Начало работы с разработкой тем WordPress.

Зачем создавать темы WordPress с помощью стартовой темы Underscores

Создание чего-либо — темы или плагина — в WordPress — довольно сложная задача. Мы легко можем придумать неправильные решения, но использование шаблона или фреймворка может снизить стресс.

Я в основном создаю темы, поэтому для большинства дизайнеров WP мне нужна была хорошая отправная точка. Я много искал и пробовал, но большинство из них были слишком самоуверенными, набиты множеством ненужных функций или далеки от пути WordPress. Я знаю, что WP несовременен, это далеко не такое чистое решение, как Laravel. Огромное количество унаследованного кода — это тоже хорошо и плохо, но я не хочу использовать что-то, что пытается навязать ему решение, «потому что» это лучше. Как всегда, моей главной задачей была поддержка и решение одной задачи за один раз.

Как вы уже догадались, я не использую рамки тем или родительские темы. В некоторых случаях это подходящие инструменты, но для создания простой, чистой и быстрой темы в большинстве случаев нет; именно здесь я нашел _s, стартовую тему от Automattic, которую можно взломать. Не больше, не меньше.

Я использую _s для всего, что создаю, и эта статья посвящена моему опыту работы с начальным шаблоном Underscores.

Легко начать и просто настроить

The Underscores — это стартовая тема, вы загружаете ее отсюда и делаете все, что хотите.Он дает вам почти все, что нужно для хорошей базовой темы.

Обычно я использую его с npm и WPGulp, поэтому я реорганизовал стили Sass.

Мы получаем самые необходимые шаблоны

Если вы стилизуете все доступные шаблоны в загруженной теме, в конце вы получите довольно хороший результат.

Нет никакой зависимости

Нет включенного Bootstrap или Foundation. Вы можете делать все, что захотите, со своей темой, и это хороший момент, потому что каждый шаблон уникален.

Пользовательские теги шаблона

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

Сделай сам

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

Связанные

Ищете работу веб-разработчика?
Вы можете проверить их на Jooble.

Нужен веб-разработчик? Может быть, мы сможем помочь, свяжитесь с нами!

Разработка тем WordPress: начало работы с подчеркиванием (_s)

Эта статья предназначена для разработчиков, создающих собственные темы WordPress. Бывают случаи, когда покупка премиальной темы или ее изменение дочерней темой — это нормально, но во многих ситуациях нет существующей темы, которая точно соответствует потребностям клиента в контенте или правильно передает его визуальную идентичность.

Существует ряд полезных пустых тем или стартовых тем, доступных для разработки пользовательских тем WordPress. Некоторые из наиболее распространенных — это Bones, Roots, Joints, HTML5 Blank и HTML5 Reset. Эти темы имеют различные уровни встроенного стиля. Некоторые полагаются на Bootstrap; другие используют Foundation. Некоторые включают сброс CSS; другие просто включают normalize.css.

Мой личный фаворит — _s (также называемый Underscores ). Это пустая тема, которую поддерживает Automattic, компания, которая управляет WordPress.com, Jetpack, Akismet и Gravatar. Это гарантирует, что он остается свежим и актуальным в соответствии с текущими стандартами кода WordPress. Фактически, только в прошлом месяце было сделано как минимум 30 обновлений.

_s не только соответствует современным стандартам WordPress, но и остается на вершине стандартов HTML5. Используя семантические теги, такие как