Underscores wordpress: A Starter Theme for WordPress

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

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

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

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

Что такое Elementor?

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

Сложности с Elementor

Вывод

Вы узнаете фантастический новый подход к созданию сайтов 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

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

• Урок 1. 00:00:58

  Welcome

• Урок 2. 00:02:19

  What to know before you start this course

• Урок 3. 00:02:35

  How this course and the lesson files will work

• Урок 4. 00:01:31

  Humescores — A preview of the final project

• Урок 5. 00:03:05

  How to set up a WordPress development environment

• Урок 6. 00:03:48

  Get and install_s

• Урок 7. 00:03:34

  Install and explore WordPress Theme Unit Test data

• Урок 8. 00:06:28

  Install the Developer plugin and other useful plugins

• Урок 9. 00:06:32

  Install and set up NetBeans or another IDE

• Урок 10. 00:10:32

  Automate theme development with Gulp and various tools

• Урок 11. 00:02:19

  Modular, mobile-first design

• Урок 12. 00:03:09

  How do WordPress themes work?

• Урок 13. 00:02:56

  How to make sense of the WordPress template hierarchy?

• Урок 14.

  00:01:50

  Underscores — An overview

• Урок 15. 00:03:32

  Explore the Sass partials setup in _s

• Урок 16. 00:05:32

  Configure the theme info

• Урок 17. 00:08:58

  Configure baseline settings and functions

• Урок 18.

  00:05:51

  Enqueue and apply custom web fonts

• Урок 19. 00:08:09

  Allow translators to control web fonts

• Урок 20. 00:04:08

  Preconnect custom web fonts for improved performance

• Урок 21. 00:03:09

  Work with Sass and source maps

• Урок 22.

  00:06:19

  Create responsive typography

• Урок 23. 00:05:38

  Lay the groundwork for responsive layouts

• Урок 24. 00:08:03

  Style the default header

• Урок 25. 00:06:54

  Add an optional header image function

• Урок 26. 00:02:21

  Show the header image only on the front page

• Урок 27. 00:05:56

  Add an optional custom logo to the header

• Урок 28. 00:03:34

  Fix responsive problems in the header

• Урок 29. 00:06:27

  How to register and display menus?

• Урок 30. 00:06:33

  Apply styles to the menu

• Урок 31. 00:07:41

  Borrow JavaScript from Twenty Seventeen to enable dropdown menus

• Урок 32. 00:09:47

  Customize JavaScript to work with the current theme

• Урок 33. 00:01:45

  Challenge — Add a social media menu to the footer

• Урок 34. 00:07:08

  Solution — Add a social media menu to the footer

• Урок 35. 00:05:41

  Get to know the single post template

• Урок 36. 00:04:26

  Display a category list at the top of the post

• Урок 37. 00:05:53

  Modify the output of post metadata

• Урок 38. 00:06:25

  Apply CSS to the post header

• Урок 39. 00:03:22

  Apply CSS to typical post content

• Урок 40. 00:02:24

  Configure and verify image alignments

• Урок 41. 00:05:53

  Display ‘full-bleed’ images on smaller screens

• Урок 42. 00:00:45

  Style image captions

• Урок 43. 00:01:56

  Style image galleries

• Урок 44. 00:06:19

  Configure post navigation

• Урок 45. 00:01:49

  Planning an unusual layout

• Урок 46. 00:02:55

  Detect when the sidebar has widgets

• Урок 47. 00:04:40

  Build the structure for displaying the sidebar

• Урок 48. 00:03:53

  Use Flexbox to create a responsive layout

• Урок 49. 00:04:34

  Customize the single post template for a no-sidebar layout

• Урок 50. 00:03:47

  Use Flexbox to create a no-sidebar responsive layout

• Урок 51. 00:05:18

  Get to know the comments template

• Урок 52. 00:02:29

  Configure comments output including Gravatars

• Урок 53. 00:05:41

  Apply CSS to comments

• Урок 54. 00:02:28

  Highlight post author comments

• Урок 55. 00:03:57

  Change the display of the comment form using CSS

• Урок 56. 00:04:21

  Configure the comment section title and navigation

• Урок 57. 00:03:06

  How do featured images (post thumbnails) work?

• Урок 58. 00:04:46

  Display featured images in the single post template

• Урок 59. 00:03:24

  Create custom featured image sizes

• Урок 60. 00:03:06

  Generate new featured image sizes with a plugin

• Урок 61. 00:04:56

  Get to know widget areas, aka ‘sidebars’

• Урок 62. 00:01:53

  Use the Monster Widget plugin to test all widgets

• Урок 63. 00:03:26

  Applying CSS to the widget area

• Урок 64. 00:03:09

  Add custom styles to specific widgets

• Урок 65. 00:01:15

  Challenge — Add an optional widget area to the footer

• Урок 66. 00:07:30

  Solution — Add an optional widget area to the footer

• Урок 67. 00:02:05

  Get to know the index template hierarchy

• Урок 68. 00:01:38

  Identify when you are on an archive page

• Урок 69. 00:08:09

  Customize index and archive templates

• Урок 70. 00:05:31

  Add a custom Read More link to index posts

• Урок 71. 00:02:21

  Display excerpts in indexes and archives

• Урок 72. 00:03:51

  Customize the excerpt output

• Урок 73. 00:04:56

  Add featured images to index and archive pages

• Урок 74. 00:07:20

  Add more meaningful archive navigation

• Урок 75. 00:04:57

  Highlight sticky posts

• Урок 76. 00:05:51

  Customize archive pages

• Урок 77. 00:07:42

  Customize the search results page

• Урок 78. 00:05:05

  Customize the 404 error page and empty search results

• Урок 79. 00:02:42

  Get to know the page template

• Урок 80. 00:01:57

  Challenge — Create a page layout with a custom left-aligned sidebar

• Урок 81. 00:05:55

  Solution — Create a page layout with a custom left-aligned sidebar

• Урок 82. 00:06:25

  Customize responsive image output for all images

• Урок 83. 00:09:16

  Add SVG icon functionality

• Урок 84. 00:03:09

  Add your own SVG icons in your theme

• Урок 85. 00:05:39

  Provide fallbacks for browsers without SVG support

• Урок 86. 00:04:20

  Get to know the Customizer

• Урок 87. 00:04:10

  Add controls for the header background color

• Урок 88. 00:02:24

  Preview settings in the Customizer

• Урок 89. 00:06:04

  Apply Customizer changes to the front end

• Урок 90. 00:04:02

  Add sections and radio controls to the Customizer

• Урок 91. 00:03:29

  Change theme output based on Customizer settings

• Урок 92. 00:06:40

  Add editor styles to match front-end styles

• Урок 93. 00:02:44

  Add a screenshot

• Урок 94. 00:02:15

  Going further with WordPress

LinkedIn

選擇語言Bahasa Indonesia (Bahasa Indonesia)Bahasa Malaysia (Malay)Čeština (Czech)Dansk (Danish)Deutsch (German)English (English)Español (Spanish)繁體中文 (Chinese (Traditional))Français (French)한국어 (Korean)Italiano (Italian)简体中文 (Chinese (Simplified))Nederlands (Dutch)日本語 (Japanese)Norsk (Norwegian)Polski (Polish)Português (Portuguese)Română (Romanian)Русский (Russian)Svenska (Swedish)Tagalog (Tagalog)ภาษาไทย (Thai)Türkçe (Turkish)العربية (Arabic)

عفواً، لم نتمكن من العثور على الصفحة التي تبحث عنها.

برجاء المحاولة مرة أخرى للصفحة السابقة أو الانتقال لـمركز المساعدة للمزيد من المعلومات الإنتقال لموجزك الرئيسي

Omlouváme se, nemůžeme najít stránku, kterou hledáte. Zkuste se vrátit zpátky na předchozí stránku, nebo se podívejte do našeho Centra nápovědy pro více informací

Přejít do informačního kanálu

Vi kan desværre ikke finde den side, du leder efter. Gå tilbage til den forrige side, eller besøg Hjælp for at få flere oplysninger

Gå til dit feed

Die gewünschte Seite konnte leider nicht gefunden werden. Versuchen Sie, zur vorherigen Seite zurückzukehren, oder besuchen Sie unseren Hilfebereich, um mehr zu erfahren.

Zu Ihrem Feed

Uh oh, we can’t seem to find the page you’re looking for. Try going back to the previous page or see our Help Center for more information

Go to your feed

Vaya, parece que no podemos encontrar la página que buscas.

Intenta volver a la página anterior o visita nuestro Centro de ayuda para más información. Ir a tu feed

Nous ne trouvons pas la page que vous recherchez. Essayez de retourner à la page précédente ou consultez notre assistance clientèle pour plus d’informations

Ouvrez votre fil

Maaf, sepertinya kami tidak dapat menemukan halaman yang Anda cari. Coba kembali ke halaman sebelumnya atau lihat Pusat Bantuan kami untuk informasi lebih lanjut

Buka feed Anda

Non abbiamo trovato la pagina che stai cercando. Prova a tornare alla pagina precedente o visita il nostro Centro assistenza per saperne di più.

Vai al tuo feed

申し訳ありません。お探しのページが見つかりません。前のページに戻るか、ヘルプセンターで詳細をご確認ください

フィードに移動

원하시는 페이지를 찾을 수 없습니다. 이전 페이지로 돌아가거나 고객센터에서 자세히 알아보세요.

홈으로 가기

Harap maaf, kami tidak dapat menemui laman yang ingin anda cari.

Cuba kembali ke laman sebelumnya atau lihat Pusat Bantuan kami untuk maklumat lanjut Pergi ke suapan

De pagina waar u naar op zoek bent, kan niet worden gevonden. Probeer terug te gaan naar de vorige pagina of bezoek het Help Center voor meer informatie

Ga naar uw feed

Vi finner ikke siden du leter etter. Gå tilbake til forrige side eller besøk vår brukerstøtte for mer informasjon

Gå til din feed

Nie możemy znaleźć strony, której szukasz. Spróbuj wrócić do poprzedniej strony lub nasze Centrum pomocy, aby uzyskać więcej informacji

Przejdź do swojego kanału

A página que você está procurando não foi encontrada. Volte para a página anterior ou visite nossa Central de Ajuda para mais informações

Voltar para seu feed

Ne pare rău, nu găsim pagina pe care o căutaţi. Reveniţi la pagina anterioară sau consultaţi Centrul nostru de asistenţă pentru mai multe informaţii

Accesaţi fluxul dvs.

Не удаётся найти искомую вами страницу. Вернитесь на предыдущую страницу или посетите страницу нашего справочного центра для получения дополнительной информации.

Перейти к ленте

Sidan du letar efter hittades inte. Gå tillbaka till föregående sida eller besök vårt Hjälpcenter för mer information

Gå till ditt nyhetsflöde

ขออภัย ดูเหมือนเราไม่พบหน้าที่คุณกำลังมองหาอยู่ ลองกลับไปที่หน้าเพจก่อน หรือดู ศูนย์ความช่วยเหลือ ของเราสำหรับข้อมูลเพิ่มเติม

ไปที่ฟีดของคุณ

Naku, mukhang hindi namin mahanap ang pahina na hinahanap mo. Subukang bumalik sa nakaraang pahina o tingnan ang aming Help Center para sa higit pang impormasyon

Pumunta sa iyong feed

Aradığınız sayfa bulunamadı. Önceki sayfaya geri dönün veya daha fazla bilgi için Yardım Merkezimizi görüntüleyin

Haber akışınıza gidin

抱歉，无法找到页面。试试返回到前一页，或前往帮助中心了解更多信息

前往动态汇总

我們好像找不到該頁面。請回到上一頁或前往說明中心來進一步瞭解

前往首頁動態

Underscores.

me альтернативы и похожие программы

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

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

Узнайте больше обо мне в «1000-часовой Head Start: введение в тему _s» на ThemeShaper.

Ссылки на официальные сайты

Официальный сайт

Категории

Социальные сети и коммуникация

Теги

wordpress-themes wordpress boilerplate

Официальный сайт

• FoundationPress

  FoundationPress — это начальная тема для WordPress, основанная на Foundation 6, самой передовой адаптивной (сначала для мобильных устройств) среде в мире. Цель FoundationPress — работать в качестве небольшого и удобного набора инструментов, который …

  Открытый исходный код Бесплатно WordPress Self-Hosted

• HTML5 Blank

  HTML5 Blank WordPress theme предлагает аннотированную поддержку по всему коду, базовые и расширенные функции, очень минимальную разметку и чрезвычайно аккуратный и легкий для чтения код. WordPress — HTML5 Blank включает в себя расширенные возможност…

  Открытый исходный код Бесплатно WordPress Self-Hosted

  0

• JointsWP

  Начните с прочного фундамента! JointsWP — это пустая тема WordPress, созданная на основе Foundation 6, которая дает вам всю мощь и гибкость, необходимые для создания сложных, мобильных дружественных веб-сайтов, не начиная с нуля. Современный рабочий…

  Открытый исходный код Бесплатно WordPress Self-Hosted

  0

• Sage (WordPress starter theme)

  Sage — это начальная тема WordPress с современным рабочим процессом разработки. Особенности — Sass для таблиц стилей — Современный JavaScript — Веб-пакет для компиляции ресурсов, оптимизации изображений, объединения и минимизации файлов. — Browsersy…

  Открытый исходный код Бесплатно WordPress Self-Hosted

  Веб-пакет для компиляции ресурсов, оптимизации Sass для таблиц стилей Современный JavaScript Фреймворк CSS (необязательно): Bootstrap 4, B Контроллер для передачи данных в Blade Tem Browsersync для синхронизированного браузера Лезвие как шаблонизатор

  0

[email protected]

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

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

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

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

Что такое тема для начинающих (и почему они великолепны)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 2: Загрузка и распаковка Underscores

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

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

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

Шаг 3: Создайте свою тему Underscores

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

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

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

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

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

Шаг 4: протестируйте новую тему

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

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

Плагин Theme Check автоматически проверяет ваш код на соответствие стандартам проверки тем WordPress и предоставляет отчет о том, что нужно исправить.

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

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

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

Заключение

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

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

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

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

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

Подчеркивание Разработчики WordPress — Кодируемый

Кодируемый блог

Разработчик WordPress на Codeable с 04 мая 2020 г.

2 года

Привет, я специализируюсь на разработке пользовательских веб-сайтов WordPress, используя стартовую тему Understrap с PHP, JavaScript, SASS/CSS, ACF, Gutenberg и сторонними API. У меня более 20 лет опыта в веб-разработке, включая 10 лет работы с WordPress. WordPress — моя страсть!

• АКФ

• Начальная загрузка

• CSS

• Пользовательские темы

• Элементор

• API Карт Google

• Гравитационные формы

• HTML

• PHP

• Развитие темы

Разработчик WordPress на Codeable с 02 ноября 2021 г.

1 год

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

• Соответствие АДА

• Что угодно

• Начальная загрузка

• CSS

• Дизайн

• DIYТемы

• Вывоз ввоз

• Базовая структура

• Бытие

• Гутенберг

Разработчик WordPress на Codeable с 25 мая 2022 г.

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

• Доступность

• АКФ

• Начальная загрузка

• Контактная форма 7

• CSS

• Интеграция пользовательского API

• Пользовательский тип сообщения

• Пользовательские темы

• Гутенберг

• HTML

Разработчик WordPress на Codeable с 18 марта 2019 г.

3 года

Здравствуйте, я Никола, ИТ-консультант и сертифицированный эксперт-разработчик Codeable WordPress. Я специализируюсь на создании пользовательских тем WordPress с нуля, интеграции с WooCommerce и способах оплаты, таких как Stripe и Paypal, настройке тем и плагинах. Я с нетерпением жду работы с вами!

• АКФ

• Что угодно

• Начальная загрузка

• Контактная форма 7

• CSS

• Пользовательский тип сообщения

• Пользовательские темы

• Гравитационные формы

• Трансфер хостинга

• HTML

Разработчик WordPress на Codeable с 27 декабря 2021 г.

1 год

Привет, меня зовут Жанин, и я буду рад помочь вам с вашим проектом! Я создаю собственные веб-сайты WordPress и магазины WooCommerce. За последние 9 лет я выполнил более 600 проектов. Я работал с известными брендами, например. Ikea, Mercedes Benz, Hyundai, Siemens или Полиция Берлина.

• АКФ

• Контактная форма 7

• Интеграция пользовательского API

• Пользовательский тип сообщения

• Пользовательские темы

• Гутенберг

• Обслуживание

• Мультисайт

• Настройка плагина

• Разработка плагинов

Разработчик WordPress на Codeable с 15 сентября 2021 г.

1 год

Добро пожаловать в мой профиль! Я сертифицированный эксперт по кодированию с более чем 10-летним опытом работы с WordPress. Также представитель команды тем WordPress и представитель бренда weDevs, компании, стоящей за плагином Dokan. В 2021 году я просмотрел более 1100 тем в репозитории WordPress.

• АКФ

• Что-нибудь

• Докан

• Гравитационные формы

• Гутенберг

• Трансфер хостинга

• HTML

• jQuery

• MailChimp

• Мультисайт

Разработчик WordPress на Codeable с 8 февраля 2015 г.

7 лет

Чао! Меня зовут Лука, и я могу быть вашим 👨‍💻 фронтенд-разработчиком, 🧑‍🎨 дизайнером, 🧙‍♂️ решателем проблем. Фрилансер с 2002 г., в Codeable с 2015 г. Член экспертной группы проверки Codeable. Влюблен в красивые и быстрые вещи, в сети и вне ее.

• АКФ

• Облачные пути

• CSS

• Дизайн

• Свернуть

• GeneratePress

• Гравитационные формы

• jQuery

• Кинста

• Слайдер Революция

Лучший способ создавать темы

Genesis Framework и Underscores — две популярные платформы WordPress, которые позволяют пользователям наслаждаться большей гибкостью и иметь полный контроль над своими сайтами.

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

Genesis Framework опирается на дочерние темы для дизайна, обеспечивая при этом наличие всех основных функций. Underscores — это голый код темы WordPress, предназначенный для разработки с нуля.

Хотя обе платформы требуют соответствующих знаний и опыта, Underscores более технический.

Есть и другие факторы, которые вам необходимо знать о Genesis Framework и Underscores, прежде чем вы сможете принять обоснованное решение.

Быстрая навигация

• Сравнение
• Пользовательский опыт
• Цены
• Заключительные мысли
• Заключение

найти платформу для вашего бизнеса.

---

Genesis Framework и Underscores: сравнение

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

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

	Каркас Бытия	Подчеркивание
TL;DR	Genesis Framework — это родительская тема, которая позволяет создавать дочернюю тему с использованием безопасного и оптимизированного для поисковых систем кода.	Underscores — это начальная тема, которая позволяет вам создать отдельную тему, независимую от какого-либо сообщества, с нуля.
Пользовательский опыт	Работает аналогично любой теме WordPress; вы можете установить любую дочернюю тему или разработать уникальную дочернюю тему, посвященную Genesis.	Опытные разработчики веб-сайтов могут избавиться от всех необходимых шагов, чтобы создать функциональную тему. Это набор инструментов, предназначенный для веб-разработчиков.
Варианты дизайна	Новым пользователям WordPress понравятся дочерние темы от StudioPress и сотни других сторонних дочерних тем от сообщества.	Дизайн, который вы можете сделать, будет ограничен вашими знаниями в области кодирования и разработки тем WordPress с нуля.
Best Feature	Огромное сообщество, поддерживающее разработку фреймворка, что упрощает получение обновлений и исправлений от других пользователей Genesis.	Вы несете полную ответственность и единственный доступ к теме, которую вы разрабатываете. Он также имеет глубокую интеграцию с командой Automattic и редактором Gutenberg.

Что делает Genesis Framework?

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

По сути, Genesis — это просто фреймворк, который вы или кто-либо в сообществе можете использовать для разработки дочерней темы.

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

Это очень полезная функция, потому что как новые, так и опытные пользователи WordPress могут воспользоваться легким и безопасным кодированием, которое предлагает Genesis Framework.

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

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

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

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

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

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

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

Что делает подчеркивание?

Underscores похож на Genesis Framework, но также отличается по своей сути. Во-первых, это не фреймворк, родительская или дочерняя тема — это начальный шаблон.

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

Самый простой способ объяснить, что может сделать Underscores, — превратить HTML-прототип в тему WordPress.

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

Это сокращает время, необходимое для создания тем WordPress, и вам даже не нужно беспокоиться о кодировании, поскольку Underscores имеет глубокую интеграцию с командой Automattic и редактором Gutenberg.

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

Скорее всего, вы захотите использовать Underscores вместо Genesis Framework, потому что это не зависит от каких-либо разработок компании или сообщества.

Хотя может быть трудно представить, что StudioPress прекратит свои разработки, в гипотетическом мире, где Genesis Framework прекращает свое развитие, ваша дочерняя тема в конечном итоге устареет, поскольку она связана с родительской темой.

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

Это отдельная тема, которая полностью зависит от всех ваших разработок .

---

Пользовательский опыт Genesis Framework и Underscores

Пользовательский опыт — это то, в чем заключается самая большая разница между ними. Хотя и Genesis Framework, и Underscores позволяют создавать «собственные» темы WordPress, это сходство относится только к веб-разработчикам и опытным сборщикам WordPress.

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

Genesis Framework User Experience

Самое большое преимущество Genesis Framework перед Underscores или любой другой стартовой темой или фреймворком — это сообщество, стоящее за ней.

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

Правда в том, что фреймворки WordPress могут прекратить свое развитие в любое время. Тем не менее, при огромной поддержке сообщества маловероятно, что StudioPress прекратит разработку Genesis Framework.

Это удобство использования и доступность тем являются некоторыми причинами, по которым большее количество пользователей WordPress может найти Genesis Framework проще в использовании, чем Underscores.

Любой может выбрать любую тему, как и любую другую тему WordPress, и пользоваться преимуществами использования Genesis Framework.

Underscores User Experience

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

Если вы подумываете о том, чтобы использовать Genesis Framework для разработки «собственной» темы, Underscores предоставит вам лучшую защиту и уверенность в будущем.

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

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

---

Цены на Genesis Framework и Underscores

Genesis Framework стоит 59,95 долларов за неограниченную лицензию, а Underscores можно загрузить бесплатно.

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

Это немного отличается от Genesis Framework, и можно утверждать, что это также сбивает с толку. Ведь у вас есть возможность получить фреймворк или фреймворк с дочерней темой.

Вы также можете выбрать членство в StudioPress (Genesis Pro), чтобы получить все необходимое для своего сайта.

Три варианта Genesis Framework:

1. Genesis Framework : если вы хотите создать дочернюю тему поверх Genesis Framework, этот вариант позволит вам сделать именно это. Это также вариант, наиболее сравнимый с тем, что может сделать Underscores — фреймворк или стартовая тема для опытных разработчиков.
2. Framework + Theme : этот вариант предназначен для новых сборщиков WordPress, которые не хотят создавать свои темы или не имеют достаточного опыта программирования. Цена также варьируется в зависимости от дочерней темы, которую вы хотите использовать, и от того, где вы ее получаете.
3. Genesis Pro : если вы разработчик или новый пользователь, который планирует создать несколько сайтов WordPress на базе Genesis Framework, этот вариант подойдет вам лучше всего. Он включает в себя фреймворк, каждую тему StudioPress, поддержку и обновления за 360 долларов в год.

---

Заключительные мысли о Underscores и Genesis Framework

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

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

Почему стоит выбрать Genesis Framework?

Genesis Framework — более популярный вариант, поскольку он удовлетворяет потребности как обычных, так и опытных пользователей WordPress.

Однако это не всегда лучший вариант, и многие могут даже не найти для себя приемлемый вариант. Вот несколько случаев, когда использование Genesis Framework будет для вас полезным:

• Вы хотите создать дочернюю тему поверх родительской темы, которая получает большую поддержку сообщества.
• Вы уверены, что StudioPress продолжит разработку Genesis Framework, и это не сделает вашу дочернюю тему устаревшей.
• Вы бы предпочли выбрать подходящую тему и воспользоваться преимуществами безопасности и простоты, которые предлагает Genesis Framework.
• Вы хотите сэкономить время на обновлении фреймворка всякий раз, когда WordPress выпускает новое обновление, и просто сосредоточиться на разработке дочерней темы.

Вы можете получить много других преимуществ от использования Genesis Framework, но большинство из них будут полезными только в том случае, если вы попадете в один из этих случаев.

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

Почему вы должны выбрать символы подчеркивания?

Подчеркивание — это основа тем WordPress. Он не так популярен, как Genesis Framework, но доступен разработчикам с 2010 года.0003

Только после выпуска Гутенберга он стал более привлекательным для пользователей. Вот случаи, когда использование Underscores будет для вас полезным:

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

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

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

---

Заключение: Genesis Framework и Underscores

Genesis Framework и Underscores — очень мощные платформы, которые вы можете использовать для создания уникальных тем WordPress.

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

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

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

Другие основы Genesis Strakwork:

• Genesis Framework Обзор
• Лучшие родовые темы детей
• Лучшие бесплатные темы для детей
• Разум для использования структуры Genesis
• Бестса -плавины
• Genessise
• Бестса -плавины
• Genessise
• Бестса -плавины
• genessise
• . Theme vs Astra
• Genesis Theme vs GeneratePress
• Работает ли Beaver Builder с Genesis?
• Как создать сайт WordPress с помощью Genesis Framework

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

WordPress

Темы

24 июля 2014 г.

Поделиться

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

Существует ряд полезных пустых тем или стартовых тем, доступных для разработки пользовательских тем WordPress. Некоторые из наиболее распространенных включают «Кости», «Корни», «Соединения», «Пробел HTML5» и «Сброс HTML5». Эти темы имеют различные уровни встроенных стилей. Некоторые полагаются на Bootstrap; другие используют Foundation. Некоторые включают сброс CSS; другие просто включают normalize.css.

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

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

,