Разное

Underscores me: Где есть хорошая инструкция по Underscores.me для WordPress? — Хабр Q&A

17.05.2021

Содержание

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

Ромчик

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.

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

Стартовая тема 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 ? Какие вопросы возникли в процессе чтения этой статьи ? Я быстро отвечаю на комментарии, спрашивайте не стесняйтесь 🙂

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

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

Если вы посетите сайт Underscores.me и щелкнете по «Advanced Options», вы увидите там новый чекбокс, созданный для включения поддержки 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

WordPress Theme Автоматизация с Gulp

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

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

Почему вам нужно автоматизировать ваш рабочий процесс разработки

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

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

Что вам нужно

  • WordPress установлен на вашем компьютере разработчика.
  • Node.js и npm установлены.
  • Базовые знания командной строки.

Введение в Gulp

Gulp — это программа для выполнения задач JavaScript, которая поможет автоматизировать трудоемкие задачи, такие как сжатие CSS, компиляция Sass, оптимизация изображений и перезагрузка браузера.

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

  • Каждый раз, когда вы сохраняете файл Sass, Gulp компилирует Sass и выводит минимизированный файл CSS.
  • Когда вы добавляете новое изображение в папку, Gulp оптимизирует это изображение и перемещает его в новую выделенную папку.
  • Когда вы сохраняете файл PHP или Sass, Gulp автоматически перезагрузит браузер.

Gulp Setup

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

Предполагая, что Node.js установлен, откройте инструмент командной строки, затем установите Gulp с помощью npm через:

npm install gulp -g

Теперь запустите gulp -v (команда Gulp’s version), чтобы проверить правильность установки Gulp. Вы должны получить вывод, похожий на:

 ➜ ~ gulp -v [09:33:59] CLI version 3.9.1

Настройка темы

В этом уроке я буду использовать Underscores в качестве базовой темы. Чтобы загрузить его, перейдите к underscores.me , создайте новую тему и дайте ей имя, например «gulp-wordpress», загрузите ее в каталог тем WordPress, затем активируйте на панели инструментов.

В командной строке перейдите в каталог gulp-wordpress который вы добавили тему, например, в моем случае:

 cd ~/www/wordpress/wp-content/themes/gulp-wordpress

Затем выполните команду npm init и выполните несколько простых шагов, чтобы создать файл package.json который будет содержать некоторую информацию о теме и пакетах, которые будут установлены позже.

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

 { "name": "gulp-wordpress", "version": "1.0.0", "description": "WordPress Theme Development Automation with Gulp", "author": "Name" }

Далее установите Gulp как зависимость для разработки:

 npm install gulp --save-dev

Теперь node_modules каталог node_modules содержащий исходные файлы пакета Gulp, а ваш файл package.3.9.1" } }

Для некоторых задач Gulp, таких как gulp-autoprefixer, требуется поддержка Promises в стиле ES6, чтобы вы могли установить полифилл es6-обещания , а затем сделать это в верхней части gulpfile.js как мы будем делать дальше.

 npm install es6-promise --save-dev

Последним шагом для настройки Gulp является создание пустого gulpfile.js конфигурации gulpfile.js , который будет использоваться для определения задач Gulp, таких как JavaScript и Sass.

gulpfile.js файл gulpfile.js будет выглядеть так:

 require('es6-promise').polyfill(); var gulp = require('gulp');

То, что мы сделали выше, это:

  • Требуется es6-promise в верхней части файла, затем мы импортируем в gulp.
  • Создано задание по default .

Чтобы убедиться, что Gulp запущен и все сделано отлично, запустите gulp в командной строке, чтобы выполнить задачу по default созданную в файле gulpfile.js . Вывод должен быть похож на:

 [09:48:23] Using gulpfile ~/www/wordpress/wp-content/themes/gulp-wordpress/gulpfile.js [16:33:13] Starting 'default'... [16:33:13] Finished 'default' after 58 μs

Ускорение разработки с Gulp Tasks

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

Работа с CSS (Sass)

Если вы используете Sass для написания CSS, нужно автоматизировать две основные вещи: первая — это компилировать Sass в CSS, а вторая — использовать автофикс для добавления префиксов поставщиков в ваш CSS. Также обратите внимание, что я использую Sass в качестве примера, если вы предпочитаете другой вариант, например, Less , вы также можете найти для него плагин Gulp.

Сначала установите gulp-autoprefixer и gulp-autoprefixer .

 npm install gulp-sass gulp-autoprefixer --save-dev

Следующим шагом является создание каталога Sass с базовой структурой.

 ├── sass │ └── style.scss

Файл style.scss является основной отправной точкой, вы можете свободно создавать свою архитектуру Sass и импортировать в нее другие компоненты, модули, функции в соответствии с вашими предпочтениями.

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

  body { color: #333; background-color: #fff; }

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

  • Скомпилируйте и автоматически префикс Sass.
  • Создайте файл style.css , который является окончательным файлом CSS, используемым WordPress.
 require('es6-promise').polyfill(); var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('sass', function() { return gulp.src('./sass/**/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest('./')) }); gulp.task('default', ['sass']);

Теперь запустите задачу style.scss прямо из командной строки, это скомпилирует файл style.scss и style.css новый файл style.css в корне темы.

Другой способ запустить sass — это передать имя задачи в качестве второго параметра задаче по default как я делал выше, поэтому, запустив gulp , задача sass будет выполнена.

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

Обратите внимание, что комментарий является стандартным комментарием в стиле CSS, например ( /*----- 1.0 Normalize -----*/ ), а не комментарием Sass, таким как ( //----- 1.0 Normalize ----- ). Это важно, потому что этот комментарий должен существовать в конечном файле CSS, но с комментарием в стиле Sass он будет скрыт компилятором Sass. Также обратите внимание, что это используется в заголовке таблицы стилей и в оглавлении.

Ниже приведен пример файла style.scss содержащего таблицу содержимого, и некоторые style.scss импорта во внешние файлы sass.

    @import 'normalize';  @import 'typography';

Для автоматической генерации файла gulp-rtlcss можно использовать плагин gulp-rtlcss для автоматического преобразования CSS LTR (слева направо) в RTL (справа налево), поэтому вы можете написать Sass в одном файле, после чего Gulp сгенерирует два CSS файлы, первый — style.css файл style.css , а второй — файл rtl.css .

Идея gulp-rtlcss состоит в том, чтобы преобразовать все свойства CSS, такие как float, выравнивание текста, направление текста и другие свойства, слева направо.

Второй плагин — gulp-rename который автоматически переименует файл в rtl.css .

 npm install gulp-rtlcss gulp-rename --save-dev

Следующим шагом является включение недавно установленных плагинов в gulpfile.js файла gulpfile.js и изменение задачи rtlcss() для использования rtlcss() после того, как style.css сгенерирован для выполнения преобразования.

На этом шаге плагин преобразует все свойства CSS, такие как float и направление текста слева направо, затем переименует файл в rtl.css , а затем rtl.css файл в корень темы:

 var rtlcss = require('gulp-rtlcss'); var rename = require('gulp-rename'); gulp.task('sass', function() { return gulp.src('./sass/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest('./'))

Запустите style.css rtl.css , и вы получите файлы style.css и rtl.css .

Чтобы узнать больше о структуре Sass и о том, как использовать ее с Gulp, прочитайте следующее:

Просмотр файлов

Вместо того, чтобы запускать gulp sass всякий раз, когда вы изменяете файл Sass, требуется новое задание, чтобы сделать это автоматически для вас.

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

В нашем файле gulpfile.js добавьте новую задачу watch чтобы отслеживать любые изменения в каталоге /sass , затем запустите задачу sass . Следующим шагом является обновление задачи по default с помощью задачи наблюдения.

 gulp.task('watch', function() { gulp.watch('./sass/**/*.scss', ['sass']); }); gulp.task('default', ['sass', 'watch']);

Теперь вы можете запустить gulp в командной строке, чтобы сначала выполнить задачу sass после чего задача watch продолжит работать после этого.

Обработка ошибок

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

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

Чтобы улучшить обработку ошибок, установите пакет функций утилиты gulp-util для настройки сообщения об ошибке, добавьте звуковой сигнал при возникновении ошибки, а также добавьте цвета в сообщение об ошибке, что полезно для определения ошибки.

 npm install gulp-plumber gulp-util --save-dev 
 var plumber = require('gulp-plumber'); var gutil = require('gulp-util'); var onError = function (err) { console.log('An error occurred:', gutil.colors.magenta(err.message)); gutil.beep(); this.emit('end'); }; gulp.task('sass', function() { return gulp.src('./sass/*.scss') .pipe(plumber({ errorHandler: onError }))

Что было сделано выше:

  • Добавлена ​​функция onError для регистрации сообщения об ошибке и создания звукового сигнала.
  • sass задачу sass для использования функции plumber , затем передал функцию errorHandler свойству объекта errorHandler .

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

Пример неопределенной переменной Sass $color .

JavaScript

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

  • Объединение многих файлов JavaScript в один файл.
  • Проверка ошибок кода с помощью JSHint.
  • Сокращение кода, чтобы получить намного меньший размер файла.

Вы можете установить эти плагины следующим образом:

Чтобы объединить файлы:

 npm install gulp-concat --save-dev

Чтобы проверить JavaScript:

 npm install gulp-jshint --save-dev

Чтобы минимизировать код:

 npm install gulp-uglify --save-dev

Затем, внутри файла gulpfile.js , нам нужны новые установленные плагины и добавление новой задачи js .

 var concat = require('gulp-concat'); var jshint = require('gulp-jshint'); var uglify = require('gulp-uglify'); gulp.task('js', function() { return gulp.src(['./js/*.js']) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('app.js')) .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('./js')) }); по var concat = require('gulp-concat'); var jshint = require('gulp-jshint'); var uglify = require('gulp-uglify'); gulp.task('js', function() { return gulp.src(['./js/*.js']) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('app.js')) .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('./js')) });

Эта задача берет любой файл, который заканчивается на .js в ./js , проверяет ошибки кода с помощью jshint, затем объединяет их в app.js , и, поскольку нам нужен минимизированный вывод, пришло время переименовать файл в app.min.js Затем мы минимизируем код и на последнем шаге ./js файл в каталог ./js .

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

 { "undef": true, "unused": true, "browser": true }
  • undef : Предупреждает, когда вы используете переменную, которая не была объявлена.
  • unused : Предупреждает при определении переменной и никогда не использует ее.
  • browser : определяет глобальные переменные, предоставляемые современными браузерами, такими как navigator и document .

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

Теперь запустите gulp js из командной строки (или терминала). Будет app.min.js новый файл app.min.js , который будет использован позже в теме.

По умолчанию тема _underscore включает _underscore customizer.js , navigation.js и skip-link-focus-fix.js каталоге /js .

Если вам нужно только включить определенные файлы, вы можете добавить их в массив gulp.src следующим образом:

 gulp.task('js', function() { return gulp.src([ './js/navigation.js', './js/skip-link-focus-fix.js' ]) });

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

Вы также можете обновить задачу watch чтобы отслеживать изменения в любом файле JavaScipt, а также обновить задачу по default для автоматического запуска действий js при запуске gulp , как мы это делали с Sass.

 gulp.task('watch', function() { gulp.watch('./sass/**/*.scss', ['sass']); gulp.watch('./js/*.js', ['js']); }); gulp.task('default', ['sass', 'js', 'watch']);

Внутри файла темы functions.php поставьте в очередь созданный файл app.min.js как:

 wp_enqueue_script( 'gulp-wordpress-javascript', get_template_directory_uri() . '/js/app.min.js', array(), '20151215', true );

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

Функция сценариев enqueue внутри файла functions.php будет выглядеть примерно так:

  function gulp_wordpress_scripts() { wp_enqueue_style( 'gulp-wordpress-style', get_stylesheet_uri() ); wp_enqueue_script( 'gulp-wordpress-javascript', get_template_directory_uri() . '/js/app.min.js', array(), '20151215', true ); } add_action( 'wp_enqueue_scripts', 'gulp_wordpress_scripts' );

Картинки

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

Создайте две папки:

  1. /images/src : исходная папка содержит исходные изображения.
  2. /images/dest : папка назначения содержит оптимизированные изображения.

Установите gulp-imagemin для минимизации изображений PNG, JPEG, GIF и SVG.

 npm install gulp-imagemin --save-dev

Создайте новую задачу ( images ), которая будет просматривать изображения, расположенные в исходной папке ( /images/src ), оптимизировать их и перемещать в оптимизированную папку ( /images/dest ).

 var imagemin = require('gulp-imagemin'); gulp.task('images', function() { return gulp.src('./images/src/*') .pipe(plumber({errorHandler: onError})) .pipe(imagemin({optimizationLevel: 7, progressive: true})) .pipe(gulp.dest('./images/dist')); });

Вы также можете просмотреть папку /images/src , чтобы при каждом перетаскивании туда нового изображения запускалась задача с images . Кроме того, обновите задачу по default для запуска действия с images .

 gulp.task('watch', function() {

Обновление браузера с помощью BrowserSync

Что если вы хотите обновить браузер после любых изменений кода, будь то код PHP, Sass или JavaScript? Что делать, если вы тестируете с более чем одним браузером или мобильным устройством? Вам придется нажимать кнопку обновления на каждом экране. BrowserSync поможет сделать это эффективно и автоматически!

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

 npm install browser-sync --save-dev

Затем требуется BrowserSync внутри вашего файла gulpfile.js и обновите задачу watch чтобы включить BrowserSync:

 var browserSync = require('browser-sync').create(); var reload = browserSync.reload; gulp.task('watch', function() { browserSync.init({ files: ['./**/*.php'], proxy: 'http://localhost:8888/wordpress/', }); gulp.watch('./sass/**/*.scss', ['sass', reload]); gulp.watch('./js/*.js', ['js', reload]); gulp.watch('images/src/*', ['images', reload]); });

Обратите внимание, что вам нужно обновить опцию прокси на локальный URL-адрес разработки. Например, если ваш локальный URL-адрес localhost:8888/wordpress , обновите значение прокси-сервера выше с этим.

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

Я также обновил задачи просмотра sass , js и images чтобы перезагрузить страницу, если произошли какие-либо изменения в файлах или изменилось содержимое папки images.

Теперь вы можете запустить gulp , в браузере автоматически откроется новая вкладка с URL-адресом localhost, и ваша консоль будет выглядеть примерно так:

 [BS] Access URLs: -------------------------------------------- Local: http://localhost:3000/wordpress/ External: http://192.168.1.2:3000/wordpress/ -------------------------------------------- UI: http://localhost:3001 UI External: http://192.168.1.2:3001 --------------------------------------------

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

Внешний URL-адрес пользовательского интерфейса используется для панели управления Browsersync, которая позволяет изменять параметры синхронизации, управлять устройствами.

Вывод

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

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

Обзор начальной темы Underscores WordPress

👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

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

Стартовая тема – что это и зачем?

Чтобы создать свой ВП-шаблон, используют 3 способа:

  • с “нуля”,
  • фреймворки,
  • стартовые темы.

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

Для быстрой разработки пользуются последними двумя способами.

Фреймворки содержат основные блоки (“кирпичики”), из которых можно сделать готовую тему. Но в этом случае Вы ограничены их возможностями. Во-первых, нужно постоянно следить за обновлениями фреймворка и проверять работу новых или изменившихся блоков. Во-вторых, – это снижение скорости работы готовой темы. Такой конструктор обычно имеет множество блоков, которые не будут использоваться. Но их код все равно будет вызываться, что может в общем замедлить работу сайта.

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

Starter Themes предоставляют все инструменты, которые позволят вам как можно быстрее приступить к разработке дизайна.

Обзор Underscores WordPress

Это начальная тема, поддерживаемая командой Automattic (создатели WordPress). Ее цель – установить базовые стандарты кодирования в качестве основы и дать разработчикам преимущество при создании защищенных тем.

Включает:

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

Где скачать?

Заготовку на русском своей будущей темы можно скачать по адресу https://underscores.ru/. Чтобы загрузить архив со всеми файлами, просто введите название темы и нажмите кнопку СОЗДАТЬ. Если кликнуть по ссылке Расширенные настройки, то можно указать дополнительные параметры (слаг, имя и URL автора, описание).

Также весь код доступен на GitHub.

Где взять документацию?

К сожалению, подробного руководства по работе с заготовкой Underscores нет. Ее создатели надеются, комментарии в самом коде послужат лучшим объяснением для разработчиков.

Если вы все же хотите увидеть ее возможности, предлагаем посмотреть серию обучающих видео:

Желаем вам успехов в разработке! Пусть ваша новая тема будет быстрой, удобной и функциональной!

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

Мне нравится3Не нравится

Если Вам понравилась статья — поделитесь с друзьями

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. 🙂

Удачи!

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

Тематическое подразделение 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. Щелкните Generate, и сохраните предоставленный 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? Дайте нам знать в комментариях ниже!

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

Начальная точка для каждого разработчика тем WordPress • Домен .ME blog

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

Ну, если быть более точным, это для сообщества разработчиков, которые работают над этой конкретной темой под названием _s (произносится как означает ).Так называемая «стартовая тема» на самом деле является ответвлением Toolbox, ранее использовавшегося в качестве стартовой темы для создания бесплатных и платных тем на WordPress.com.

Стартер — Родитель

Итак, время шло, тема Toolbox использовалась, и она работала. Однако люди использовали его как родительскую тему. Я не буду вдаваться в подробности здесь, поэтому скажу так: стартовая тема — это тема, используемая для ее взлома . Он используется, чтобы превратить его во что-то новое, лучшее, отличное, и когда преобразование завершено, на выходе получается родительская тема, которую затем можно использовать в качестве шаблона WordPress.

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

Создайте свою собственную тему

Они не знали, что когда вы работаете со стартовой темой , вы ничего не меняете ! Итак, Toolbox неправильно использовали, и разработчикам требовалось другое решение.Была представлена ​​тема _s, и все приобрело новое направление.

_S

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

Underscores.Me на самом деле является домашней страницей сообщества темы :

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

Если вы занимаетесь разработкой тем WordPress, вам понравится Underscores.Me (и тема, и сайт), а также некоторые особенности _s:

  • Как раз нужное количество простых, хорошо комментируемых, современных шаблонов HTML5;
  • Полезный шаблон 404;
  • Необязательный пример реализации настраиваемого заголовка в inc / custom-header.php;
  • Пользовательские теги шаблонов в тегах inc / template-tags, которые сохраняют ваши шаблоны чистыми и аккуратными и предотвращают дублирование кода;
  • Примеры параметров темы в / inc / theme-options /;
  • Некоторые небольшие изменения в /inc/tweaks.php, которые могут улучшить вашу работу с темами;
  • Навигация с помощью клавиатуры для шаблонов прикрепленных изображений, в js / keyboard-navigation.js;
  • Сценарий в js / small-menu.js, который превращает ваше меню в выпадающий список на маленьких экранах (например, в вашем телефоне), готовый для художественного оформления CSS;
  • 5 примеров макетов CSS в / layout: две боковые панели слева, две боковые панели справа, боковая панель по обе стороны от вашего контента и макеты с двумя столбцами с боковыми панелями по обе стороны;
  • Стильно организованный начальный CSS.css, который поможет вам быстро сдвинуть с мертвой точки дизайн;
  • Лицензия GPL в файле license.txt. Используйте его, чтобы сделать что-нибудь крутое.

Итак, загрузите тему Underscores, создайте новую и внесите свой вклад в сообщество разработчиков тем , а также в пользу пользователей WordPress!

Если вам понравилась эта статья, возможно, вы тоже захотите ознакомиться с ней!

Руководство или инструмент для вставки начальной загрузки в тему подчеркивания?

Руководство или инструмент для вставки начальной загрузки в тему подчеркивания? — Обмен стеками разработки WordPress
Сеть обмена стеков

Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange
  2. 0
  3. +0
  6. Авторизоваться Зарегистрироваться

WordPress Development Stack Exchange — это сайт вопросов и ответов для разработчиков и администраторов WordPress.Регистрация займет всего минуту.

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

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил

Просмотрено 10к раз

Закрыто. Это вопрос не по теме. В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме WordPress Development Stack Exchange.

Закрыт 4 года назад.

Я ищу руководство или инструмент для вставки начальной загрузки в тему подчеркивания.Booststrap — это фреймворк CSS, а тема Underscores — это стартовая тема с ультра-минимальным CSS.

Том Джей Новелл ♦

46.2k66 золотых знаков6565 серебряных знаков130130 бронзовых знаков

Создан 19 янв.

Ünsal KorkmazÜnsal Korkmaz

1,9559 золотых знаков2121 серебряный знак4444 бронзовых знака

6

Следующее руководство основано на подчеркивании: Учебное пособие по шаблонам тем WordPress

Его можно легко модифицировать для работы с Bootstrap.Единственное, на что вы должны обратить внимание, это новые классы столбцов в Bootstrap 3, а не добавление CSSS руководств ближе к концу.