Wordpress: Создание темы с нуля используя Underscores - Видеоуроки. Wordpress underscore

Стартовая тема _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.

wpmag.ru

Стартовая тема для WordPress — Underscores « Все о WEB программировании

21.05.2018 Ромчик

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

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

Генератор стартовой темы для WordPress

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

Активация стартовой темы

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

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

Структура стартовой темы для WordPress

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

Файл style.css

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

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

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

Заключение.

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

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

web-programming.com.ua

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

Зачем нужна тема _s или Underscores

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

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

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

Что заложено в Underscores

В исходном коде темы изначально заложена хорошая основа для разработки новой темы:

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

Как создать свою тему

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

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

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

В чем отличие стартовой темы от родительской

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

А про обновления можно не беспокоиться. Это главное отличие стартовой темы от родительской.

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

fortress-design.com

Создание темы с нуля используя Underscores Видео

WordPress: Building Themes from Scratch Using Underscores

Duration 07:05:05

Открыть все курсы от lyndacom

WordPress: Building Themes from Scratch Using Underscores - Полный список уроков

Развернуть / Свернуть

Урок 1. Welcome 00:00:58
Урок 2. What to know before you start this course 00:02:19
Урок 3. How this course and the lesson files will work 00:02:35
Урок 4. Humescores - A preview of the final project 00:01:31
Урок 5. How to set up a WordPress development environment 00:03:05
Урок 6. Get and install_s 00:03:48
Урок 7. Install and explore WordPress Theme Unit Test data 00:03:34
Урок 8. Install the Developer plugin and other useful plugins 00:06:28
Урок 9. Install and set up NetBeans or another IDE 00:06:32
Урок 10. Automate theme development with Gulp and various tools 00:10:32
Урок 11. Modular, mobile-first design 00:02:19
Урок 12. How do WordPress themes work? 00:03:09
Урок 13. How to make sense of the WordPress template hierarchy? 00:02:56
Урок 14. Underscores - An overview 00:01:50
Урок 15. Explore the Sass partials setup in _s 00:03:32
Урок 16. Configure the theme info 00:05:32
Урок 17. Configure baseline settings and functions 00:08:58
Урок 18. Enqueue and apply custom web fonts 00:05:51
Урок 19. Allow translators to control web fonts 00:08:09
Урок 20. Preconnect custom web fonts for improved performance 00:04:08
Урок 21. Work with Sass and source maps 00:03:09
Урок 22. Create responsive typography 00:06:19
Урок 23. Lay the groundwork for responsive layouts 00:05:38
Урок 24. Style the default header 00:08:03
Урок 25. Add an optional header image function 00:06:54
Урок 26. Show the header image only on the front page 00:02:21
Урок 27. Add an optional custom logo to the header 00:05:56
Урок 28. Fix responsive problems in the header 00:03:34
Урок 29. How to register and display menus? 00:06:27
Урок 30. Apply styles to the menu 00:06:33
Урок 31. Borrow JavaScript from Twenty Seventeen to enable dropdown menus 00:07:41
Урок 32. Customize JavaScript to work with the current theme 00:09:47
Урок 33. Challenge - Add a social media menu to the footer 00:01:45
Урок 34. Solution - Add a social media menu to the footer 00:07:08
Урок 35. Get to know the single post template 00:05:41
Урок 36. Display a category list at the top of the post 00:04:26
Урок 37. Modify the output of post metadata 00:05:53
Урок 38. Apply CSS to the post header 00:06:25
Урок 39. Apply CSS to typical post content 00:03:22
Урок 40. Configure and verify image alignments 00:02:24
Урок 41. Display 'full-bleed' images on smaller screens 00:05:53
Урок 42. Style image captions 00:00:45
Урок 43. Style image galleries 00:01:56
Урок 44. Configure post navigation 00:06:19
Урок 45. Planning an unusual layout 00:01:49
Урок 46. Detect when the sidebar has widgets 00:02:55
Урок 47. Build the structure for displaying the sidebar 00:04:40
Урок 48. Use Flexbox to create a responsive layout 00:03:53
Урок 49. Customize the single post template for a no-sidebar layout 00:04:34
Урок 50. Use Flexbox to create a no-sidebar responsive layout 00:03:47
Урок 51. Get to know the comments template 00:05:18
Урок 52. Configure comments output including Gravatars 00:02:29
Урок 53. Apply CSS to comments 00:05:41
Урок 54. Highlight post author comments 00:02:28
Урок 55. Change the display of the comment form using CSS 00:03:57
Урок 56. Configure the comment section title and navigation 00:04:21
Урок 57. How do featured images (post thumbnails) work? 00:03:06
Урок 58. Display featured images in the single post template 00:04:46
Урок 59. Create custom featured image sizes 00:03:24
Урок 60. Generate new featured image sizes with a plugin 00:03:06
Урок 61. Get to know widget areas, aka 'sidebars' 00:04:56
Урок 62. Use the Monster Widget plugin to test all widgets 00:01:53
Урок 63. Applying CSS to the widget area 00:03:26
Урок 64. Add custom styles to specific widgets 00:03:09
Урок 65. Challenge - Add an optional widget area to the footer 00:01:15
Урок 66. Solution - Add an optional widget area to the footer 00:07:30
Урок 67. Get to know the index template hierarchy 00:02:05
Урок 68. Identify when you are on an archive page 00:01:38
Урок 69. Customize index and archive templates 00:08:09
Урок 70. Add a custom Read More link to index posts 00:05:31
Урок 71. Display excerpts in indexes and archives 00:02:21
Урок 72. Customize the excerpt output 00:03:51
Урок 73. Add featured images to index and archive pages 00:04:56
Урок 74. Add more meaningful archive navigation 00:07:20
Урок 75. Highlight sticky posts 00:04:57
Урок 76. Customize archive pages 00:05:51
Урок 77. Customize the search results page 00:07:42
Урок 78. Customize the 404 error page and empty search results 00:05:05
Урок 79. Get to know the page template 00:02:42
Урок 80. Challenge - Create a page layout with a custom left-aligned sidebar 00:01:57
Урок 81. Solution - Create a page layout with a custom left-aligned sidebar 00:05:55
Урок 82. Customize responsive image output for all images 00:06:25
Урок 83. Add SVG icon functionality 00:09:16
Урок 84. Add your own SVG icons in your theme 00:03:09
Урок 85. Provide fallbacks for browsers without SVG support 00:05:39
Урок 86. Get to know the Customizer 00:04:20
Урок 87. Add controls for the header background color 00:04:10
Урок 88. Preview settings in the Customizer 00:02:24
Урок 89. Apply Customizer changes to the front end 00:06:04
Урок 90. Add sections and radio controls to the Customizer 00:04:02
Урок 91. Change theme output based on Customizer settings 00:03:29
Урок 92. Add editor styles to match front-end styles 00:06:40
Урок 93. Add a screenshot 00:02:44
Урок 94. Going further with WordPress 00:02:15

В этом курсе ты научишься создавать практически любую кастом тему под Wordpress. Вместе с автором курса вы создадите тему, разбив ее на разные разделы, типа меню, заголовки, сайдбар, контент и многое другое. Также вы разберете иерархию шаблонов Wordpress, начнете использовать Gulp и Sass и еще будете применять JavaScript где это нужно. Один из лучших курсов по созданию темы используя Underscores.

Твоя оценка

Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.

Шаблон с нуля на Wordpress с помощью стартовой темы Underscores или _s. Урок #1.

Привет друзья! Я начинаю курс уроков по стартовой теме Underscores или как ее еще называют _s. В своих видео уроках я покажу, как нарисовать шаблон с нуля на WordPress и посадить на стартовую тему Underscores. Преимущества стартовой темы Underscores в скорости разработки и готовой грамотной темой с корректным php кодом, без ошибок, которые может случайно допустить любой разработчик, делая тему для WordPress с полного нуля. На Underscores разработаны стандартные темы WordPress, которые идут в комплекте (twentyfourteen, twentyfifteen, twentysixteen). В первом уроке, мы с вами нарисуем полностью готовый дизайн в фотошопе, а в следующих уроках перейдем к верстке/натяжке дизайна на Underscores. Под видео вы найдете ссылку на bootstrap сетку для фотошопа, готовый дизайн урока и горячие клавиши, использованные в фотошопе.

Скачать bootstrap сетку для фотошопа: https://yadi.sk/d/pqF1Cyb2qvn3M Скачать готовый дизайн для wordpress: https://yadi.sk/d/gC24X9yRrWGBT

Горячие клавиши в фотошопе использованные в уроке:

1. Перемещение по холсту — пробел + ЛКВ (левая клавиша мыши).2. Увеличить/отдалить холст ALT + колесико мыши.3. Масштаб 100% CTRL + ALT + 0.4. Включить/отключить клетки CTRL + » (или на русском буква «э»).5. Включить направляющие сетки GUIDE GIUDE, если включена CTRL + : (или на русском буква «ж»).6. Склонировать объект CTRL + J.7. Сгруппировать объект CTRL + G.8. Включить линейку CTRL + R.9. Выбрать инструмент текст. Клавиша T.10. Выбрать Rectangle Tool. Клавиша U.11. Выбрать инструмент перемещения. Клавиша V.12. Трансформация объекта CTRL + T. Объект должен быть выделен.13. Перетаскивание объекта с помощью точек. Клавиша A. Объект должен быть выделен.14. Поднять слой в самый вверх CTRL + SHIFT + } (или буква «Ъ» на русском).15. Опустить слой в самый низ CTRL + SHIFT + { (или буква «Х» на русском).

Ставьте лайки, делайте перепосты, если видео было полезно.

Метки: дизайн сайта в фотошопепосадка wordpress на underscoresстартовый шаблон underscoresшаблон с нуля на wordpress

axxon.kz

В стартовой теме Underscores появилась поддержка Sass

На днях участники проекта Underscores объявили о том, что тема стала включать в себя поддержку Sass. Популярная стартовая тема Underscores для WordPress – это проект с открытым кодом, поддерживаемый Automattic. Как заявил один из участников проекта, Тэмми Листер, многие пользователи желали увидеть поддержку Sass в Underscores: «сообщество попросило добавить Sass. Поскольку Sass присутствует в ядре, это выглядело целесообразным. В данный момент он уже вплетен в поток операций многих создателей тем».

Если вы посетите сайт Underscores.me и щелкнете по «Advanced Options», вы увидите там новый чекбокс, созданный для включения поддержки Sass.

add-sass

По словам Тэмми, поддержка Sass включена таким образом, чтобы предоставить разработчикам полную свободу его использования:

«Все люди используют и компилируют Sass для своих целей, поэтому тема _s не должна принуждать кого-либо идти каким-то одним фиксированным путем. В этом смысле, Sass обеспечивает чистый подход, не требуя Compass или каких-либо других скриптов»

Поддержка Sass появилась в результате объединения многочисленных pull request и форков проекта на Github. Однако участники проекта на хотят ограничиваться одним лишь Sass — они открыты и для других препроцессоров CSS. «Мне по-прежнему хотелось бы видеть форк Less для _s. Мы стараемся открыть путь и для других препроцессоров», говорит Листер.

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

У каждого создателя тем WordPress есть свой уникальный поток операций, который может включать в себя использование препроцессора, и участники проекта Underscores будут отдавать этому уважение. « Тема_s не указывает вам, как нужно делать те или иные вещи, она просто помогает вам начать разработку. Все, что мы добавляем к теме, будет отвечать этому правилу», говорит Листер.

Добавление поддержки Sass – еще один поворотный момент для проекта, наряду с тем, что теперь репозиторий GitHub темы Underscores будет использоваться только для разработки. Если вы хотите использовать Underscores, команда рекомендует вам скачать тему напрямую с сайта Underscores.me.

Источник: wptavern.com

oddstyle.ru

Wordpress: Создание темы с нуля используя Underscores - Видеоуроки. Wordpress underscore

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

Стартовая тема для WordPress — Underscores « Все о WEB программировании

Заключение.

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

Зачем нужна тема _s или Underscores

Что заложено в Underscores

Как создать свою тему

В чем отличие стартовой темы от родительской

Создание темы с нуля используя Underscores Видео

WordPress: Building Themes from Scratch Using Underscores - Полный список уроков

Твоя оценка

Комментарии

Похожие курсы

Шаблон с нуля на Wordpress с помощью стартовой темы Underscores или _s. Урок #1.

В стартовой теме Underscores появилась поддержка Sass

Смотрите также