Разрабатывайте темы для WordPress быстрее вместе с Gulp

Содержание материала:

20 Лучших стартовых тем WordPress в 2020 году

Что такое стартовая тема WordPress

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

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

Стартовые темы WordPress Starter отличаются от родительской или framework темы. Родительские темы — это полностью стилизованные темы WordPress, предназначенные для установки и использования на живых веб-сайтах. Framework — и (фреймворки) предоставляют множество хуков и фильтров для использования в разработке дочерней темы.

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

Вместо этого вы используете WordPress Starter для создания родительской темы.

Сказав это, давайте взглянем на некоторые из лучших стартовых тем для WordPress.

Underscores

Underscores, вероятно, является самой популярной из всех тем для разработки сайтов WordPress. Поддерживается Automattic (компания, занимающаяся хостингом WordPress.com), Underscores — минималистская стартовая тема, написанная в HTML5 и CSS. Чистый код предназначен для того, чтобы помочь вам быстро создать стандартную тему WordPress.

FoundationPress

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

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

Bones

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

UnderStrap

UnderStrap — это тема для старта разработки WordPress, основанная на Underscores и Bootstrap 4. Она поставляется с мобильной гибкой сеткой и ее супер легко настраиваеть.

Bootstrap Four

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

WP RootStrap

WP Rootstrap — это старшая тема для WordPress на Boostrap 3 для разработчиков. Она использует Options Framework для настройки параметров темы.

Generic

Generic — легкая тема WordPress. Является простой и столь же минимальной, как вы и хотели бы, чтобы была ваша стартовая тема.

BlankSlate

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

CyberChimps

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

Klasik Framework

Построенная для более быстрой разработки тем, Klasik Framework — простая стартовая тема для WordPress. Особенности темы: 9 областей виджетов, 8 пользовательских виджетов и простая страница настройки темы для полного управления CMS.

Start

Минимальная стартовая тема, основанная на Underscores и Bootstrap.

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

A11Y’All

Если для вас важна доступность, вам понравится A11Y’All. Это тема WordPress, разработанная с нуля с учетом доступности. Он включает в себя шаблоны страниц и настраиваемые меню, заголовок, виджеты и фон.

Cornerstone

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

WP-Flex

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

JointsWP

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

Thetekraft’s _tK — современная отзывчивая тема WordPress. Она основана на структуре Bootstrap Twitter и стартовой теме Underscores.

Quark

Quark — это легкая настройка темы для разработки сайтов WordPress. Она основана на Underscores and Twenty Twelve WordPress theme. Использует Normalize CSS, чтобы браузеры отображали все элементы более последовательно и Mordernizr для обнаружения возможностей браузера HTML5 и CSS3.

Nebula

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

Заключение

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

Автообновления при изменении PHP файлов в WordPress c использованием Gulp

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

Вспомните, сколько раз вам приходилось обновлять страницу в браузере после внесенных изменений в PHP файлы? И как же это надоедает.. Знакомое чувство ? В этой статье мы решим эту проблему. Погнали!

Приступим к настройке livereload с использованием Gulp . В своем примере я буду проводить настройку именно для работы с WordPress. Также, вам ничего не помешает перенести эти настройки для работы с любой другой CMS или PHP фреймворком. Для работы на компьютере должен быть в обязательном порядке установлен Node.js с пакетным менеджером NPM.

Шаг 1. Настраиваем Livereload с помощью gulp

После установки Node.js необходимо глобально в систему установить Gulp, делается это командой: npm i gulp -g далее:

  1. Создаем папку gulp в по следующему пути: wordpress/content/gulp
  2. Создаем 2 файла: package.json и gulpfile.js

Содержимое файла: package.json

После сохранения данного файла можно приступить к установке компонентов для Gulp. Используя команду npm i (вы должны открыть терминал в ранее созданном каталоге gulp )

После успешной установки всех компонентов вы увидите примерно такое окно, с сообщением в количестве добавленных пакетов и затраченному времени на добавление:
added 743 packages in 6.547s

Шаг 2

Настройка файла gulpfile.js

В своем примере я использую Gulp не только для Livereload, а также для работы с SASS файлами, вы можете оставить или удалить эти таски.

Шаг 3

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

  1. Запустить ваш сервер
  2. Запустить Gulp
  3. Наслаждатся работой Livereload

Запуск Gulp делается командой gulp в терминале (вы должны открыть терминал в ранее созданном каталоге gulp )

После чего в вашем браузере автоматически откроется новая ссылка.
Пример: localhost:3000

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

Результат урока:

Если у вас в браузере открылась ссылка сгенерированная при помощи Gulp и ваш сайт отображается в браузере, спешу вас поздравить — мы настроили Livereload. А если что-то пошло не так, обращайтесь за помощью в комментарии.

Лучшие стартовые темы WordPress

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

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

Underscores

Underscores – возможно самая известная стартовая тема для начинающих. Она разработана и поддерживается компанией Automattic (то есть самим разработчиком WordPress). Фактически каждая тема, поставляемая со свежей копией WordPress, разработана на Underscores:

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

Underscores имеет такие возможности:

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

FoundationPress

FoundationPress – еще одна бесплатная стартовая WordPress-тема от Оле Фредерик, основанная на Foundation 6, которая использует SASS и Grunt. Шаблон был выпущен в 2013 году, но по-прежнему регулярно обновляется сообществом разработчиков и объявляется “самой передовой мобильной платформой в мире”.

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

Для дизайнера-разработчика FoundationPress предлагает дополнения в виде UI-набора для Adobe Photoshop и XD, а также набор виджетов для Axure RP. С помощью этих программ разработчики могут быстро создавать прототипы элементов Foundation для своих проектов. Комплекты не включены в FoundationPress, но доступны за дополнительную плату.

Эта тема идеально подходит для создания бизнес-ресурсов.

HTML5 Blank

HTML5 Blank – очередная стартовая WordPress-тема с открытым исходным кодом, похожая на FoundationPress, но основанная на HTML5 и CSS3. Шаблон полностью соответствует всем стандартам кодирования WordPress

Sage – мощная тема для WordPress от солидного бренда с современными функциями для разработки интерфейса. Интеграция с Gulp или Bower позволяет вам использовать лучшее из того, что может предложить JavaScript. Кроме того, вы можете использовать BrowserSync для разработки ваших тем для других устройств.

Акцент, который Roots вкладывает в Sage, – это быстрый и плавный рабочий процесс. Это переход на такие функции, как таблицы стилей SASS, автоматическая проверка ошибок JavaScript и даже оптимизация изображений на лету. Вы можете использовать компилятор, например Bower, для установки сторонних пакетов непосредственно в ядро ​​вашей темы.

Sage в качестве шаблонизатора использует использует Blade (от Laravel), который, как известно, делает процесс разработки более быстрым и эффективным. Также вы сможете использовать Bootstrap или связку HTML/CSS.

Beans

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

Тема имеет подробную
документацию , которая поможет справится со всеми трудностями разработки.

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

Beans хорошо структурирована и “дружественна” для поисковых роботов. Также в шаблоне используются только самые последние стандарты Schema.org для обеспечения полной индексации будущего контента.

JointsWP

JointsWP – стартовая WordPress-тема, в основе которой лежит прочная и современная инфраструктура разработки HTML5. В настоящий момент JointsWP включает в себя такие функции, как опции навигации по форуму, Motion-UI, настраиваемые шаблоны сетки для архивов, готовые к переводу файлы, Bower (или Gulp) и многое другое! Разработчики также могут выбрать SASS в качестве предпочтительного варианта стилизации, но простой CSS также подойдет.

UnderStrap

UnderStrap – это проект Holger Koenemann, который объединяет Underscores и новейшую структуру Bootstrap 4. Конечный результат – блестящая стартовая тема с современными возможностями стилизации.

Базовая структура UnderStrap представляет собой комбинацию динамических файлов PHP и JavaScript, а также статических файлов из Bootstrap. Все CSS-стили объединены в один файл и дополнительно минимизированы для лучшей производительности в Интернете. Шаблон добавляет сотни удивительных значков шрифтов, которые вы можете использовать с помощью CSS. Кроме того, UnderStrap совместим с Jetpack, WooCommerce и Contact Form 7.

Gulp for WordPress: Initial Setup

Easily manage projects with monday.com

This is the first part of a two-part series on creating a Gulp workflow for WordPress theme development. This first part covers a lot of ground for the initial setup, including Gulp installation and an outline of the tasks we want it to run. If you’re interested in how the tasks are created, then stay tuned for part two.

Earlier this year, I created a course for building premium WordPress themes. During the process, I wanted to use a task runner to concatenate and minify JavaScript and CSS files. I ended up using that task runner to automate a lot of other tasks that made the theme much more efficient and scalable.

The two most popular task runners powered by Node are Gulp and Grunt. I went with Gulp after a good amount of research, it appeared to have an intuitive way to write tasks. It uses Node streams to manipulate files and JavaScript functions to write the tasks, whereas Grunt uses a configuration object to define tasks — which might be fine for some, but is something that made me a little uncomfortable. Also, Gulp is a bit faster than Grunt because of those Node streams and faster is always a good thing to me!

So, we’re going to set Gulp up to do a lot of the heavy lifting for WordPress theme development. We’ll cover the initial setup for now, but then go super in-depth on the tasks themselves in another post.

Article Series:

  1. Initial Setup (This Post)
  2. Creating the Tasks

Initial theme setup

So, how can we use Gulp to power the tasks for a WordPress theme? First off, let’s assume our theme only contains the two files that WordPress requires for any theme: index.php and styles.css . Sure, most themes are likely to include many more files that this, but that’s not important right now.

Secondly, let’s assume that our primary goal is to create tasks that help manage our assets, like minify our CSS and JavaScript files, compile Sass to CSS, and transpile modern JavaScript syntax (e.g. ES6, ES7, etc..) into ES5 in order to support older browsers.

Our theme folder structure will look like this:

The only thing we’ve added on top of the two required files is a src directory where our original un-compiled assets will live.

Inside of that src directory, we have an images subdirectory as well as others for our JavaScript and Sass files. And from, there, the JavaScript and Sass subdirectories are organized into components that will be called from their respective bundle file. So, for example, bundle.js will import and include slider.js when our JavaScript tasks run so all our code is concatenated into a single file.

Identifying Gulp tasks

OK, next we want Gulp tasks to a create a new dist directory where all of our compiled, minified and concatenated versions of our assets will be distributed after the tasks have completed. Even though we’re calling this directory dist in this post because it is short for «distribution,» it could really be called anything, as long as Gulp knows what it is called. Regardless, these are the assets that will be distributed to end users. The src folder will only contain the files that we edit directly during development.

Identifying which Gulp tasks are the best fit for a project will depend on the project’s specific needs. Some tasks will be super helpful on some projects but completely irrelevant on others. I’ve identified the following for us to cover in this post. You’ll see that one or two are more useful in a WordPress context (e.g. the POT task) than others. Yet, most of these are broad enough that you’re likely to see them in many projects that use Gulp to process Sass, JavaScript and image assets.

  • Styles Task: This task is responsible for compiling the bundle.scss file in the scss subdirectory to bundle.css in a css directory located in the dist directory. This task will also minify the generated CSS file so that its is it’s smallest possible size when used in production.

We will talk about production vs. development modes during the article. Note that we will not create a task to concatenate CSS files. The bundle.scss file will act as an entry point for all . scss files that we want to include. In other words; any Sass or CSS files you want to include in your project, just import them in the bundle.scss file using @import statements. For instance, in our example folder, we can use @import ./components/slider’; to import the slider.scss file. This way in our task we will have to compile and minify only one file ( bundle.css ).

  • Scripts Task: Similar to the Styles task, this task will transpile bundle.js from ES6 syntax to ES5, then minify the file for production.

We will only compile bundle.js . Any other JavaScript files we want to include will be done using ES6 import statements. But in order for those import statements to work on all browsers, we will need to use a module bundler. We’re going to use webpack as our bundler. If this is your first time working with it, this primer is a good place to get an overview of what it is and does.

  • Images Task: This task will simply copy images from src/images and send them to dist/images after the files have been compressed to their smallest size.
  • Copy Task: This task will be responsible for copying any other files or folders that are not in /src/images , /src/js or /src/scss and post them to the dist directory.

Remember. the src folder will contain the files that are only used during development and that will not be included in the final theme package. Thus, any assets other than our images, JavaScript and Sass files need to be copied posted to the dist folder. For instance, if we have a /src/fonts folder, we would want to copy the files in there into the dist directory so they get included in the final deliverable.

  • POT Task: As the name suggests, this task will scan all your theme’s PHP files and generate a .pot (i.e. translation) file from gettext calls in the files. This is the most WordPress-centric of all the tasks we’re covering here.
  • Watch Task: This task will literally watch for changes in your files. When a change is made, certain tasks will be triggered and executed, depending on the type of file that changed.

For instance, if we change a JavaScript file, then the Scripts task should do its magic and then it would be ideal if the browser refreshed for us automatically so we can see those changes. Further, If we change a PHP file, then let’s simply refresh the browser since PHP files don’t rely on any other tasks in our project. We’ll be using a Gulp plugin called Browsersync to handle browser refreshes, but we’ll get to that and other plugins a little later.

  • Compress Task: As you might expect, all the plugins that we use to write our tasks will be managed using npm. So, our theme folder will contain another folder, like node_modules , that in turn, contains files like package.json and other configuration files that define our project’s dependencies — and these files and folders are only needed during development. During production, we can take out the necessary files for our theme and leave the unneeded development files behind. That’s what this task will do; it will create a ZIP file that only contains the necessary files to run our theme.

As a bonus step for the compress task, if you are creating a theme that you intend to publish on WordPress.org or maybe on a website like ThemeForest, then you probably already know that all functions in your theme must be prefixed with a unique prefix:

So, if you are creating a lot of themes. you’ll need to easily reuse functions in different themes but change the prefix to the name of the theme, to prevent conflicts. We can prefix our functions with a placeholder prefix and then replace all instances of that placeholder in the compress task. For instance, we can choose the string _themename as a place holder, and when we compress our theme we will replace all ‘_themename’ strings to the actual theme name:

This can also apply to anywhere we use the theme name for example in the text domain:

  • Develop Task: This task does nothing new. It runs as we develop our theme. It cleans the dist folder, runs the Styles, Scripts, Images and Copy tasks in development mode (i.e. without minifying any of the assets), then watches for file changes to refresh the browser for us.
  • Build Task: This task is intended to build our files for production. It will do all the same cleaning and tasks as the Develop task, but in production mode (i.e. minify the assets in the process) and generate a new POT file for translation updates. After it runs, our dist folder should contain the files that are ready for distribution.
  • Bundle Task: This task will simply run the build task, making sure that all the files in the dist folder are minified and ready for distribution. Then, it will run the Compress task, which bundles all of the production-ready files and folders into a ZIP file. We want a ZIP file because that is the format WordPress recognizes to extract and install a theme.

Here’s how our file structure looks after our tasks complete:

Now that we know what tasks we’re going to use on our project and what they do, let’s get into the process for installing Gulp into the project.

Installing Gulp

Before we install Gulp, we should make sure that we have Node and npm installed on our machines. We can do that by running these commands in the command line:

. and, we should get some version number as seen here:

Now, let’s point the command line to the theme folder:

. and then run this command to initialize a new npm project:

This will prompt us with some options. The only important option in our case is the package name option. This is where the name of the theme can be provided — everything else can stay at their default setting. When choosing the theme name, make sure to only use lowercase characters and underscores while avoiding dashes and special characters since this theme name will be used to replace the functions placeholder that we mentioned earlier.

On to installing Gulp! First, we’ve got to install Gulp’s command line interface (gulp-cli) globally so we can use Gulp in the command line.

After that, we run this command in order to install Gulp itself in the theme directory:

The current stable release of Gulp is 3.9.1 at the time of this writing, but version 4.0 is already available in the project repository.

Топ-пост этого месяца:  Евробайт — один из лидеров среди хостинг-провайдеров

To make sure everything is installed correctly, we’ll run this command:

Nice! Looks like we’re running version 4.0, which is the latest version at the time of this writing.

Writing Gulp tasks

Gulp tasks are defined in a a file in called gulpfile.js that we’ll need to create and place into the root of our theme.

Gulp is JavaScript at its core, so we can define a quick example task that logs something to the console.

In this example, we’ve defined a new task by calling gulp.task . The first argument for this function is the task’s name ( hello ) and the second argument is the function we want to run when that name is entered into the command line which, in this case, should print «First Task» into the console.

Let’s do that now.

Here’s what we get:

As you can see, we do indeed get the console.log(‘First Task’) output we want. However, we also get an error saying that our task did not complete. All Gulp tasks require telling Gulp where to end the task, and we do that by calling a function that is passed as the first argument in our task function like so:

Let’s try running gulp hello again and we should get the same output, but without the error this time.

cb() is a Node.js callback function that’s often passed into an asynchronous function. There are some cases where we won’t have to call it, such as when a task returns a promise or a node stream. A node stream is what we will use in the tasks in this post, which means we will see it a lot throughout our article.

Here’s an example of a task that returns a promise. In this task, we won’t have to call the cb() function because Gulp already knows that the task will end when the promise resolves or returns an error:

Now try and run ‘gulp promise’ and the task will complete without returning any errors.

Finally, it’s worth mentioning that Gulp accepts a default task that runs by typing gulp alone in the command line. All it takes is using «default» as the task name argument.

Now, typing gulp by itself in the command line will run the task.

Whew! Now we know the basics of writing Gulp tasks.

There is one more thing we can do to improve things and that’s enabling ES6 syntax in the Gulpfile. This will allow us to use features like destructuring, import statements, and arrow functions, among others.

Using ES6 in the Gulpfile

The first step to use ES6 syntax in the Gulpfile is to rename it from gulpfile.js to gulpfile.babel.js . As you may already know, Babel is the compiler that compiles ES6 to ES5.

So, let’s install Babel and some of its required packages by running:

After that, we have to create a file called .babelrc inside of our theme folder. This file will tell Babel which preset to use to compile our JavaScript. The contents of the .babelrc file will look like this:

Now we can use ES6 in our Gulpfile! Here’s how that would look if we were to re-write it:

As you can see, we are importing Gulp using import and not require. In fact, there’s no longer any need to import Gulp at all! I included the import statement anyway to show it can be used instead of require . We’re allowed to skip importing Gulp because we don’t have to call gulp.task — instead, we only need to export a function, and the name of this function will be the name of the task. Further, all that’s needed to define a default function is use export default . And notice those arrow functions, too! Everything is so much more concise.

Let’s move on and start coding the actual tasks.

Development vs. Production

As we covered earlier, we need to create two modes: development and production. The reason we need to delineate between the two is that some details in our tasks will be time and memory-consuming, which only make sense in a production environment. For instance, the styles task needs to minify the CSS. However, the minification can take both time and memory — and if that process runs every single time something changes during development, that is not only unnecessary but is very inefficient. It’s ideal for tasks to be as fast as possible during development.

We need to set a flag that specifies whether a task should run in one mode or the other. We can use a package called yargs that allows us to define these types of arguments while running a command. So, let’s install it and put it to use:

Now, we can add arguments to our command like so:

. and then retrieve these argument in the Gulpfile:

Notice that the values we define in the command are available inside the yargs.argv object in the Gulpfile and in console.log(PRODUCTION) . In our case this will output true , so PRODUCTION will be our flag that decides whether or not a function runs inside the tasks.

We’re all set up!

We covered a lot of ground here, but we now have everything we need to start writing tasks for our WordPress theme development. That just so happens to be the sole focus of the next part of this series, so stay tuned for tomorrow.

Dobrovoi Master

25 Самых быстрых и оптимизированных тем WordPress на ThemeForest

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

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

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

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

1. Foto — WordPress тема для фотографов

Foto — тема с упрощенной и чистой конструкцией, позволяющей изображениям всегда находится в центре внимания. Эта тема WordPress невероятно проста в использовании и одинаково проста для навигации, и настроек. Гладкий дизайн, ближе к стилю минимализма, разработан специально для оптимального отображения фотографий и включает в себя 15 различных вариантов фото-альбома.
С темой Foto, вы с лёгкостью сможете настроить внешний вид вашего сайта фотографий. Также в данной теме использованы самые современные методики SEO и конечно же макет темы отлично вписывается в размеры экранов всех пользовательских устройств(смартфоны, планшеты, ноутбуки и пк).

2. Photography

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

3. TopNews

Top-News — это простая, многофункциональная, удобная в использовании, быстро загружаемая, настраиваемая, функциональная и современная тема WordPress, для создания новостных сайтов, онлайн-журналов, сайтов газет, блогов, публикаций видео и фотографий. Эта тема полностью отзывчива, отлично вписывается в любые размеры дисплея от самого низкого до более высокого разрешения и поддерживает все современные браузеры. В теме присутствуют разделы для публикаций видеороликов с YouTube и Vimeo.
Эта тема имеет несколько вариантов домашней страницы и шапки. Простая в использовании админ-панель с гибкими и мощными параметрами, которые позволяют легко настраивать тему, а drag & drop конструктор страниц, предоставляет возможность легко создавать уникальные страницы.
Тема соответственно SEO-оптимизирована, что изначально обеспечивает отличную платформу для достижения высоких рейтингов вашего сайта в поисковых системах.

4. Mango

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

5. Glossy

Тема оформления WordPress для Fashion-блогов и сайтов. Одной из главных особенностей темы Glossy является способность встраивать партнерские ссылки практически в любую точку темы, чтобы эффективно монетизировать ваш блог. Элегантный дизайн, в котором с первого взгляда, явно просматривается влияние моды, современен, чист и привлекателен. Семь вариантов макетов блога и 12 готовых шорткодов, подробная документация и дружественная поддержка, несомненно сделают работу над проектом более привлекательной.

6. Travelista

Travelista — это блог тема WordPress, разработанная для путешествующих блогеров. Конечно же эту тему можно использовать для любого вида блога. Travelista поддерживает различные форматы сообщений (стандартные, галереи, ссылки, видео, аудио, изображения, статусы и цитаты. ). Также предоставлена возможность выбора из 9 различных вариантов макетов для блога и архивных страниц и 3 разных макета для отдельных страниц.
В Travelista есть мощный слайдер с возможностью выбора из пользовательских слайдов, сообщений по категориям или выбранных сообщений.
Возможность выбирать разные фон для каждой записи или страницы. Независимо от того, имеет ли ваш блог 10 или 10 000 сообщений, вы можете установить разные фоне для каждого сообщения или страницы.
Футтер темы красиво оформлен, с возможностью добавления логотипа с фоном. Также вы можете выбирать макет футтера из 4-х, 3-х, 2-х или одного столбца.
15 встроенных пользовательских виджетов, существенно упростят процесс ведения блога.

7. Marco

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

8. Blueberry

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

9. Electro

Electro — это надежная и гибкая в настройках тема WordPress, которая поможет вам максимально эффективно использовать WooCommerce для вашего интернет-магазина. Дизайн очень хорошо подходит для представления электронных продуктов, торговых площадок поставщиков и партнерских сайтов. Тема укомплектована большинством расширенных функций, доступных на самых популярных сайтах электронной коммерции, таких как Amazon, FlipKart, SnapDeal, WalMart, Alibaba и т.д.
Electro разработана на базе фреймворка Underscores, код — структурируемый и расширяемый, что позволяет разработчикам легко добавлять дополнительные функции через дочернюю тему и / или настраиваемые плагины. Благодаря скорости открытия выбранного продукта и процессу оформления, который необходим для онлайн-покупок, оптимизированная производительность Electro удовлетворит как вас самих, так и ваших клиентов.

10. Paperio

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

11. uDesign

В настоящее время это 10-я самая продаваемая тема на ThemeForest, 45 000+ клиентов, заплативших свои кровные, просто не могут ошибаться.

U-Design — это мощная и удобная для пользователя тема, её могут с одинаковым успехом использовать, как люди не имеющие опыта программирования, так и продвинутые разработчики. Сайты могут быть построены быстро и с минимальными усилиями. С помощью такого мощного инструмента, вы можете преобразовать свой сайт за короткое время и своевременно, в лучшем виде, представить свой проект интернет-аудитории. SEO оптимизация — приоритет в разработке U-Design, о чем свидетельствуют показатели производительности выше. Например, в иерархии кода основной блок контента помещается перед боковой панелью независимо от положения панели, поэтому сначала поисковыми системами сканируется именно блок основного контента. С заголовками в плане SEO, также всё в полном порядке.

12. NanoMag

NanoMag — это красочная и привлекательная журнальная тема WordPress с полностью отзывчивым макетом. Тема включает в себя супер-полезный «drag and drop» конструктор построения контента, параметры темы, систему обзора, пользовательскую боковую панель и многое другое.

13. Folia

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

14. Ailsa

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

15. Aerious

Aerious — это универсальная, многоцелевая тема, которая обладает всеми необходимыми и дополнительными элементами, которые обычно присущи классическим многоцелевым темам. Что делает Aerious отличной от других тем, это её безграничные функциональные возможности, скорость и простой в использовании пользовательский интерфейс.
Тема поставляется в комплекте с 40 + готовыми слайдерами, пакетом готовых страниц, страницами режима обслуживания, несколькими форматами сообщений, встроенными опциями SEO, шаблонами готовых шаблонов, шаблонами отзывов, шаблонами клиентов и многими другими функциями!
Сверхлегкая конструкция темы способствует высокому уровню производительности.

16. CorpusChristi

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

17. Motor

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

18. Coolist

Coolist — современная тема WordPress в журнальном стиле. Основные особенности этой настраиваемой журнальной темы — простой в использовании конструктор построения сообщений, отличная прорисовка бесконечной прокрутки и горизонтальная навигационная система AJAX, аналогичная той, что используется на веб-сайте USA Today. Демонстрация ниже представляет, как тема может быть полностью настроена для конкретной ниши (например, игр), что дает вам гибкость настроек и контроля внешнего вида на любом этапе работы.

19. RT-Theme 19

RT-Theme 19 — отзывчивая многоцелевая тема WordPress с мощными инструментами CMS и несколькими уникальными вариантами дизайна.
Вы можете использовать тему для развёртывания корпоративного или бизнес-сайта, каталога продуктов, услуг, сайтов о строительстве, здоровье, интернет-магазина или портфолио, просто импортируя одну из демоверсий одним щелчком мыши.
Инструменты представления продукта и портфолио также предоставляют вам широкие возможности для создания списков и отдельных пользовательских страниц различных сервисов, например аренды автомобилей, недвижимости, презентаций гостиниц и многих других.
С RT-Theme 19 и плагином WooCommerce, без особых усилий, вы сможете создать полноценный интернет-магазин. Просмотрите демонстрационную страницу, чтобы увидеть другие демоверсии, созданные с помощью инструментов настройки темы.
Все демоверсии включают пакет тем и можно переключать скин по умолчанию на один из предварительно созданных скинов одним щелчком мыши. Или же создайте свой скин, используя панель настройки.

20. Modesto

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

21. Aven

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

22. Adama

Adama — многоцелевая тема WordPress, которая может использоваться для различных веб-сайтов, включая магазины электронной коммерции. Оптимизированная тема для SEO, совместима с WooCommerce, включает в себя плагины LayerSlider и iLightBox. Практичная и надежная тема, для создания сайта.

23. Alpha-blog

Alpha-Blog — чистая, отзывчивая блог-тема WordPress. Тема разработана с большим вниманием к деталям. Отзывчивый макет и интуитивно понятный интерфейс делают эту тему отличной для личного или корпоративного использования.
Код темы написан в соответствии стандартов WordPress, и его легко понять, и при необходимости так же легко изменить. Если вы разработчик, тема станет замечательным стартером для ваших будущих, творческих проектов. Если вы блоггер, вы получите быструю, отзывчивую и оптимизированную для SEO тему прямо из коробки.

24. Mallow

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

25. Publisher

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

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

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Разрабатывайте темы для WordPress быстрее вместе с Gulp

Ахмад Аваис Мой расширенный рабочий процесс Gulp для WordPress Темы

Если вы являетесь абсолютным новичком, когда дело доходит до Gulp, вы можете прочитать «Введение в WPGulp: простой в использовании WordPress Gulp Boilerplate» . Более того, этот пост — это просто статья, которая не была обновлена ​​в течение длительного времени. Я поддерживаю этот рабочий процесс в репозитории WPGulp . Я предлагаю вам всех прочитать это сообщение, чтобы получить представление и использовать WPGulp.

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

Я помню время, когда мне приходилось минимизировать CSS и JS-файлы, сжимать изображения и суетиться тестирования моих проектов в разных браузерах, не говоря уже о устройствах — ох. Если мое воспоминание об утере не вводит меня в заблуждение, то я тратил на это 30% своих рабочих часов.

К счастью, кто-то написал статью о DRY (Do not Repeat Yourself), и это заставило меня задуматься о недостатках в моем рабочем процессе. Я считаю, что твит из Chris Coyer привел меня к тому, чтобы начать использовать Grunt в 2012 году или немного позже. Я использовал его уже больше года, а мальчику было весело.

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

Почему мне нравится глоток?

В то время вряд ли имелась какая-либо документация для использования Gulp с WordPress, но благодаря огромному помогающему сообществу в Stack Exchange я смог заставить ее работать. Я обнаружил, что Gulp намного лучше, чем Grunt. Вот почему:

  • Gulp легче понять и более эффективно
  • Gulp имеет синтаксис JavaScript, в отличие от синтаксиса JSON от Grunt
  • Gulp быстрее, чем Grunt (одно время компиляции моей темы длилось от 12 секунд до 300 мс)
  • Gulp интуитивно понятен и получает 20K-25k загрузок в день, что равно или отлично, чем загрузка Grunt
  • Конфигурация кода Gulp позволяет не только легко писать задачи, но и намного проще читать и поддерживать

Тем не менее, давайте оставим историю на данный момент и посмотрим, каково это — использовать Gulp с WordPress.

Нужно ли мне использовать глоток?

Вы веб-разработчик? Вы иногда программируете в HTML / CSS?

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

ОК! давайте начнем тогда.

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

  • Basic: Узнайте, что такое Gulp и как его использовать (http://ahmda.ws/1EbYodN)
  • Подробное: Строительство с помощью Gulp (http://ahmda.ws/1EbYSk4)

Если основной рабочий процесс Gulp не является чем-то новым для вас, то, возможно, вам понравится читать мой расширенный рабочий процесс gulp.

Продвинутый рабочий процесс WordPress Gulp

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

  • Минимизация и оптимизация CSS с помощью таблиц стилей и Sass
  • Пользовательские скрипты Java и сторонние скрипты через Bower
  • Синхронизация межплатформенного тестирования на разных устройствах
  • Туннелирование моей ветви localhost dev на случайный общедоступный URL-адрес для общего доступа
  • Построение установочного файла темы zip без каких-либо модулей узлов, файлов кеша или данных DOT-файлов в нем

Давайте рассмотрим, как я получаю все это от Gulp.

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

Взгляните на gulpfile.js

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

Поскольку я предполагаю, что вы уже знаете, как работает Gulp, я не буду объяснять, как поместить все плагины / пакеты в файл package.json и другие основные шаги, связанные с настройкой.

Шаг №1: Настройка переменных

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

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

Я установил переменные для:

  • L # 12 Название проекта
  • L # 13 URL проекта на локальном хосте
  • L # 14 Путь к папке компонентов Bower
  • L # 15 Название папки, которая будет создана для создания установочного zip-файла темы
  • L # 16 Переменная buildInclude содержит пути к файлам или папкам, которые должны быть включены и исключены при создании чистой темы внутри buildTheme папки для создания zip-файла

Шаг №2: Загрузка плагинов Gulp

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

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

Плагины, которые я использую, следующие:

  • Gulp — Довольно много самоочевидных
  • BrowserSync — Удивительное время, синхронизируемое тестирование браузера
  • AutoPrefixer — автоматический префикс CSS для устаревших браузеров
  • UglifyCSS — для оптимизации CSS
  • Фильтр. Позволяет вам работать с подмножеством исходных файлов, фильтруя их с помощью подстановки.
  • UglifyJS — Минимизирует JS-файлы
  • ImageMin — Минимизирует изображения PNG, JPEG, GIF и SVG
  • Newer — для передачи только тех исходных файлов, которые являются более новыми, чем соответствующие файлы назначения.
  • Переименовать — легко переименовать файлы
  • Concat — объединить файлы JS
  • Уведомлять — отправлять уведомления в ОС на основе модуля уведомлений узла
  • Комбинирование запросов к мультимедиа — объединение повторяющихся медиа-запросов после Sass или Less
  • Run Sequence — запустить серию зависимых задач gulp в порядке
  • Gulp Sass — плагин Gulp для Sass, основанный на libSass
  • Загрузка плагинов — автоматическая загрузка плагинов gulp
  • Игнорировать — игнорировать файлы в потоке на основе характеристик файла
  • Zip — для zip или сжатия файлов
  • Plumber — исправить узловые трубы, не допустить их взлома из-за ошибки
  • Кэш — задача кэширования прокси для Gulp
  • Source Maps — поддержка исходной карты для частичных файлов CSS

Уф! Это было много. Ну, в конце концов, все это стоит усилий.

Топ-пост этого месяца:  Создание бизнес-страницы в Фейсбуке

Шаг №3: Задача настройки синхронизации браузера

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

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

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

Browsersync помогает мне в следующем:

  • Внедрение изменений CSS без перезагрузки любой веб-страницы
  • Измените порт и настройте туннель через случайный общедоступный URL-адрес, что означает, что мои товарищи по команде могут получить доступ к ветви dev в моем локальном хосте за считанные минуты
  • Синхронизированное тестирование в разных браузерах, где я открываю данный URL на своем рабочем столе, ноутбуке, вкладке и мобильном устройстве, чтобы тестировать одни и те же функции за один раз с синхронизированными прокрутками, кликами, вводами форм и т. Д. Посмотрите видео в браузере .

Шаг 4: Задача стиля Gulp

Давайте посмотрим на styles задачу, которую я построил. В этой задаче многое происходит. Мы собираем Sass, создавая миниатюрный CSS и оптимизируя медиа-запросы.

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

Позвольте мне объяснить по очереди, что там происходит:

  • L # 1 — L # 8 — я создал styles задачу
  • L # 9 — Здесь я представил источник файла Sass, который является файлом style.scss, присутствующим в ./assets/css/style.scss
  • L # 10 — Инициированный сантехник, чтобы избежать нарушения труб из-за незначительных ошибок CSS при сохранении файла
  • L # 11 — Начаты исходные карты. Исходная карта обеспечивает способ преобразования кода в сжатом файле обратно в исходное положение в исходном файле. Это означает, что — с помощью небольшого программного обеспечения вы можете легко отлаживать свои приложения даже после того, как ваши активы были оптимизированы. Инструменты разработчика Chrome и Firefox поставляются со встроенной поддержкой исходных карт.
  • L # 12 — L # 20 — Sass компилируется в компактном формате, вы можете прочитать о форматах Sass здесь
  • L # 23 — Я префикс CSS с помощью autoprefixer. Устаревшие браузеры, которые должны поддерживаться, упоминаются внутри массива аргументов
  • L # 26 — Здесь я сохранил окончательный скомпилированный файл CSS для нашей темы WordPress в корневом каталоге. Поскольку style.scss скомпилировался, выход будет style.cssфайлом. Теперь все, что вам нужно сделать, это убедиться, что вы используете «!» В комментариях в верхней части файла style.scss, чтобы, даже когда компиляция / сжатие происходит, комментарий остается: ie /*! Theme Name: Your Theme etc. */
  • L # 27 — я отфильтровал все .css-файлы в корневом каталоге, который на данный момент является одним style.css файлом
  • L # 28 — объединить медиа-запросы внутри выбранных файлов
  • L # 30 — переименован файл в style.min.css
  • L # 31 — L # 33 — Минимизирован файл style.min.css
  • L # 34 — Выход был сохранен как файл style.min.css в корневой папке темы WP

Шаг № 5: Скрининг Минимизация и Конкатенация

Теперь для обработки пользовательских файлов JavaScript и сторонних JS-файлов я создал две задачи, называемые vendorsJs и scriptsJs . Они оба очень похожи. Давайте рассмотрим код.

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

Вот что происходит там:

  • Я выбрал пути поставщика JS-файлов с помощью пути bower на L # 7 и пути пользовательских JS-файлов в L # 27
  • Объединение файлов в два отдельных файла, называемых vendors.js и custom.js
  • Сохраненный вывод в ./assets/js/ папке
  • Переименовал файлы с помощью .min suffix
  • Минимизировать / убрать файлы
  • И сохранили еще два файла vendors.min.js и custom.js

Шаг №6: Задача оптимизации изображений

Нет ничего нового в задаче оптимизации изображения. Посмотрите на код ниже.

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

  • Я выбрал ./assets/img/raw/**/*. путь как источник
  • Оптимизировал изображения и разместил их в ./assets/img/ папке

Шаг 7: Создание чистого установочного Zip-файла

Это группа задач, которые отвечают за создание чистой копии устанавливаемого zip-файла темы. Кратко посмотрите на код. Нет ничего особенного, это все базовое копирование, вставка и удаление или игнорирование файлов / папок.

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

Эта задача будет работать только тогда, когда я буду использовать gulp build команду. Давайте рассмотрим, что произойдет, когда эта команда запущена:

  • clear: Задача по очистке кеш-памяти
  • cleanup: Задача удалить sass-cache, bower_components и .DS_Store файлы в потоке. Он также игнорирует папку node_modules
  • cleanupFinal: другая задача очистки должна запускаться в конце последовательности сборки. Это может иметь или не иметь никакого отличия от cleanup задачи
  • buildFiles: создать задачу, которая перемещает важные файлы тем в папку buildTheme
  • buildImages: Задача по созданию и копированию окончательного набора изображений в папку buildTheme
  • buildZip: задача создания установочного Zip-файла папки buildTheme
  • build: Основная задача, выполняющая задачу стилей для компиляции CSS, затем очищает все с помощью задачи очистки. После этого он запускает все связанные с сценариями и строит связанные задачи и окончательную задачу очистки в конце, чтобы создать zip-файл темы через папку buildTheme.

Шаг № 8: Наблюдать за заданием

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

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

просмотреть исходный файл gulpfile.js, размещенный с ❤помощью GitHub

Что насчет тебя?

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

Я также хотел бы упомянуть и поблагодарить Криса Койера, Алекса Васкеса, Мэтта Бэнкса и всех вкладчиков Gulp , которые помогли мне на этом пути с их кодом и вкладами в GPL / MIT. Запросы на получение приветствуются.

My Advanced Gulp Workflow for WordPress Themes

If you are an absolute beginner when it comes to Gulp, you might want to read Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate. Moreover, this post is just an article, which hasn’t been updated in a long time. I maintain this workflow under WPGulp repository. I suggest you all to read this post to get an idea and use WPGulp instead.

If you are not using Gulp or any task runner, believe me when I say that you are missing out on all the front-end fun stuff. Today, I intend to share my advanced Gulp based automated workflow for building WordPress themes, with the community.

I remember the time when I had to minify CSS and JS files, compress the images and the fuss of testing my designs across different browsers let alone devices — oh my. If my recollection of lost isn’t misleading me then I used to spend like 30% of my productive hours on this stuff.

Thankfully, someone wrote a piece about DRY (Don’t Repeat Yourself) and it got me thinking about the flaws in my workflow. I believe a tweet from Chris Coyer led me to start using Grunt in 2012 or a little later. I used it for over a year and boy it was a fun ride.

Why Gulp?#

While Grunt took care of optimizing images, compressing scripts, and compiling Sass, I never really enjoyed writing Grunt files. Then in Dec 2013, I heard about this new task runner called Gulp. On a Sunday morning, I thought to create a dummy project and try Gulp, to say that I was hooked would be an understatement.

Why Do I Like Gulp?#

At that time, there was hardly any documentation available for using Gulp with WordPress, but thanks to the awesome helping community at Stack Exchange, I was able to make it work. I found Gulp to be a lot better than Grunt. Here is why:

  • Gulp is easier to understand and more efficient
  • Gulp has a JavaScript syntax unlike JSON syntax of Grunt
  • Gulp is faster than Grunt (One of my theme’s compile time went from 12secs to 300ms)
  • Gulp is intuitive and gets 20K-25k downloads a day, which is equal to or great than Grunt downloads
  • Gulp’s code-over-configuration makes it not only easy to write tasks for, but also much easier to read and maintain

That said, let’s leave the story for now and see what it is like to be using Gulp with WordPress.

Do I Need to Use Gulp?#

Are you a web developer? Do you program in HTML/CSS sometimes?

Did you ever use a task-runner? Feel like you belong to the stone age while all the crazy kids in town are using awesome advanced workflows?

OK! let’s get you started then.

Since this article is about an advanced Gulp based workflow, explaining how to do basic Gulp related stuff is out of the scope. But instead of leaving you (beginners) in the middle of nowhere, I’d like to suggest a few articles to help you get started.

  • Basic: Learn what is Gulp and How to use it (http://ahmda.ws/1EbYodN)
  • Detailed: Building with Gulp (http://ahmda.ws/1EbYSk4)

If having a basic Gulp workflow is nothing new for you, then maybe you’ll enjoy reading my advanced gulp workflow.

Advanced Gulp WordPress Workflow#

While building premium themes for WordPress, I end up with a lot of grunt work which includes

  • Minifying & optimizing CSS with stylesheets and Sass
  • Custom JavaScripts and 3rd Party Scripts via Bower
  • Synced cross-browser design testing on different devices
  • Tunneling my localhost dev branch to a random public URL for public access
  • Building an installable zip theme file without any node modules, cache files or .Dot files data in it

Let’s explore how I get all this stuff done with Gulp.

I have set up a Github repository called Advanced Gulp WordPress. You can check out the structure of files inside it for better understanding.

A Look at gulpfile.js#

Now let’s take a look at gulpfile.js which is present in the root folder of our theme. I will explain each task one by one to make it easier for you to understand. You’ll find completed gulpfile.js at the end of this post.

Since I assume you already know how Gulp works, I will not be explaining how to put all the plugins/packages in package.json file and other basic setup related steps.

Step #1: Setting Up the Variables#

Firs of all I am going to set up certain variables so that I don’t have to change everything for every other theme I create. Let’s review the code

I’ve set up variables for

  • L#12 Project name
  • L#13 Project URL at localhost
  • L#14 Path to folder of Bower Components
  • L#15 Name of the folder which will be created for building an installable theme zip file
  • L#16 Variable buildInclude contains the paths to files or folders which are to be included and excluded in while building a clean theme inside buildTheme folder for creating a zip file

Step #2: Loading Gulp Plugins#

I am using quite a few gulp plugins to help manage everything we discussed above.

The plugins I am using to are as follows

  • Gulp — Pretty much self-explanatory
  • BrowserSyn — Amazing Time-saving synchronized browser testing
  • AutoPrefixer — Auto prefix CSS for legacy browsers
  • UglifyCSS — For CSS Minification
  • Filter — Enables you to work on a subset of the original files by filtering them using globbing.
  • UglifyJS — Minifies JS files
  • ImageMin — Minifies PNG, JPEG, GIF and SVG images
  • Newer — For passing through only those source files that are newer than corresponding destination files.
  • Rename — To easily rename files
  • Concat — To concatenate JS files
  • Notify — To send notification to OS based on node notifier module
  • Combine Media Queries — To combine repetitive media queries after Sass or Less
  • Run Sequence — Run a series of dependent gulp tasks in order
  • Gulp Sass — Gulp plugin for Sass which is based on libSass
  • Load Plugins — To automatically load in gulp plugins
  • Ignore — To ignore files in the stream based on file characteristics
  • Zip — To zip or compress files
  • Plumber — Fix node pipes, prevent them from breaking due to an error
  • Cache — A cache proxy task for Gulp
  • Source Maps — Source map support for CSS partial files

Phew! That was a lot. Well, at the end of the day, it’s all worth the effort.

Step #3: Task to Setup Browser Sync#

Let’s dive a little deeper and create some awesome tasks to automate our workflow. Browsersync is one of my favorite plugins.

I used to have LiveReload in my workflow, which would reload the web page whenever a file gets edited and saved. But when Browsersync was introduced, it helped me cut down half of the shitty things I had to do in order to automate syncing between different browsers. Browsersync helps me with the following stuff;

  • Injecting CSS changes without any web page getting reloaded
  • Change the port and set up a tunnel through a random public URL, which means my teammates can access the dev branch live at my localhost in a matter of minutes
  • Synced testing across different browsers, where I open the given URL at my Desktop, Laptop, Tab, and mobile to test same features in a single go with synced scroll, clicks, form inputs, etc. Watch the video at Browsersync.

Step #4: Gulp Style Task#

Let’s take a look at the styles task I built. In this task, there is a lot going on. We are compiling Sass, creating minified CSS and optimizing media queries.

Let me explain line by line, what’s going on in there

  • L#1 – L#8 — I created the styles task
  • L#9 — Here I provided the source of Sass file, which is a style.scss file present at ./assets/css/style.scss
  • L#10 — Initiated plumber to avoid pipe breaking due to minor CSS errors when I save a file
  • L#11 — Sourcemaps got initiated. A source map provides a way of mapping code within a compressed file back to its original position in a source file. This means that – with the help of a bit of software – you can easily debug your applications even after your assets have been optimized. The Chrome and Firefox developer tools both ship with built-in support for source maps.
  • L#12 – L#20 — Sass is being compiled in compact format, you can read about Sass formats here
  • L#23 — I am prefixing CSS with autoprefixer. The legacy browsers which should be supported are mentioned inside the arguments array
  • L#26 — Here I have saved the final compiled CSS file for our WordPress theme in the root directory. Since style.scss was being compiled, the output will be style.css file. Now all you need to do is make sure you use a “!” in the comments at the top of the style.scss file so that, even when the compiling/compressing happens, the comment remains: i.e. /*! Theme Name: Your Theme etc. */
  • L#27 — I filtered all the .css files in the root directory, which at the moment is one style.css file
  • L#28 — Combined the media queries inside selected files
  • L#30 — Renamed the file to style.min.css
  • L#31 – L#33 — Minified the style.min.css file
  • L#34 — Output was saved as a style.min.css file in the root of WP theme folder

Step #5: Scripts Minification and Concatenation#

Now to deal with custom JavaScript files and 3rd Party JS files, I have created two tasks called vendorsJs and scriptsJs . They both are pretty much similar. Let’s review the code.

Here is what’s happening in there

  • I selected the vendor JS files paths with bower path at L#7 and the custom JS files paths at L#27
  • Concatenated the files to two single files called vendors.js and custom.js
  • Saved the output in ./assets/js/ folder
  • Renamed the files to with .min suffix
  • Minified/uglified the files
  • And saved two more files called vendors.min.js and custom.js

Step #6: Image Optimization Task#

There nothing new in the image optimization task. Look at the code below.

  • I selected the ./assets/img/raw/**/*. path as a source
  • Optimized the images and placed them in ./assets/img/ folder

Step #7: Building a Clean Installable Theme Zip File#

This is a group of tasks which are responsible for creating a clean copy of installable theme zip file. Take a quick look at the code. There is nothing much to it, it is all basic copy pasting and deleting or ignoring of files/folders.

This task will run only when I will use gulp build command. Let’s review what happens when this command is run

  • clear: Task to clear the gulp cache
  • cleanup: Task to remove sass-cache, bower_components and .DS_Store files in the stream. It also ignores the node_modules folder
  • cleanupFinal: Another cleanup task to be run at the end of build sequence. It may or may not have any difference from cleanup task
  • buildFiles: Build task that moves essential theme files to the buildTheme folder
  • buildImages: Task to build and copy the final set of images to the buildTheme folder
  • buildZip: Task to create an installable Zip file of the buildTheme folder
  • build: Main task which runs styles task to compile CSS then cleans up everything with a cleanup task. After that, it runs all the scripts related and build related tasks and a final cleanup task at the end to produce a theme zip file via buildTheme folder.

Step #8: Watch Task#

Finally, there is a watch task which helps in automatically running the styles, scripts, images and browser-sync related tasks in case of any change that occurs in the below-mentioned folder.

Final gulpfile.js#

What About You?#

Well, that’s about it. I’d love to see how you people use Gulp to automate front-end related grunt work. If you have any questions or any suggestions, let me know in the comment section below.

I’d also like to mention and thank Chris Coyer, Alex Vasquez, Matt Banks and all the Gulp contributors, who have helped me along the way with their GPL/MIT based code and contributions. Pull requests are welcomed.

Did you like what you read? Tweet About Advanced Gulp Workflow for WordPress.

Basic признана самой быстрой адаптивной темой WordPress

Всем привет! Хочу поделится с вами невероятно крутой новостью. Американское интернет-издание PagePipe.com, занимающееся вопросами скорости работы тем и плагинов, провело интересное исследование для определения самой быстрой адаптивной темы в официальном каталоге WordPress.org.

Для тех, кто достаточно хорошо владеет английским, ссылка на исследование — Of the 1,470 free, responsive WordPress themes which is fastest?

Я же своими словами опишу кратко статью.

Какая из 1470 бесплатных адаптивных тем на WordPress самая быстрая?

В начале статьи автор говорит о том, что большинство людей приобретают тему за ее внешний вид — красивую картинку. Не многие пользователи проверяют скорость работы темы перед её покупкой. Да и не факт, что проверив демо-страницу сайта вы получите правдивые данные, так как многие производители тем подкручивают и настраивают эти страницы под красивые показатели. А после покупки вернуть продукт обратно уже нельзя.

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

  • Отсутствие обновлений
  • Проблемы с безопасностью
  • Нет техподдержки
  • Скудный функционал
  • Отсутствие настройки

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

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

Отбор тем

На первый квартал 2020 года в официальном каталоге WordPress насчитывается 4 476 бесплатных тем. Из них только 1 470 являются адаптивными. Все остальное — мусор фиксированной ширины. Сегодня никто не должен разрабатывать тему, которая не приспосабливается к размеру маленького экрана. Это ограничение немедленно сократило число кандидатов.

Оставшиеся 1 470 бесплатных тем проходили отбор по следующим критериям:

  1. Обновление в 2020 году. Очень много изменений произошло в WordPress в последнем квартале 2020 и в начале 2020 года. Некоторые из них касаются функционала и вопросов безопасности. Исследователи хотели выбрать только актуальные и активные темы, поддерживаемые добросовестными разработчиками.
  2. Размер .zip архива темы должен быть меньше 1 Мб. Этот срез основывается на личном опыте распаковки, изучении и тестировании тем. Только те авторы, которые заботятся о скорости, держат архив загрузки маленького размера.
  3. Они не могут быть дочерними темами.

В результате выбора по этим критериям осталось 155 тем. Это всё! Эти 155 тем были внесены в таблицу и отсортированы по размеру распакованных данных. Затем авторы исследовали содержимое ТОП 10 самых маленьких тем. Так же обращалось внимание на популярность (количество активных установок)

Это простенькие темы без особых прикрас. Скучно, но функционально. Главное коммуникабельность и контент. Посетители хотят видеть читабельный контент на маленьких экранах, красочность — на втором плане. Все сводится к чтению. Люди редко просматривают портфолио на телефоне всерьез.

Требования к быстрым темам:

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

Исследователи загрузили стандартный контент WordPress и установили ряд плагинов, помогающих уменьшить скорость загрузки сайта:

Далее все темы ТОП-10 кандидатов установили на дешевом, шаред хостинге (GoDaddy) и проверили скорость загрузки с помощью Pingdom.com:

(Совместное использование с 25 другими доменами, TTFB: от 500 до 600 миллисекунд. Установка плагина Cache Enabler позволит уменьшить скорость загрузки из таблицы ниже ещё на 200 мс)

Тема Активных установок Удаленные шрифты Скорость загрузки мс
Pacify 1000 Lobster/Raleway 671
Basic 10000 PT Serif/ 760
Generic 500 helvetica/Georgia 761
Grace 1000 open sans/raleway 835
Hexo 700 meriweather/lato 935
RedPro 300 lato 984
Triad 1000 open sans 1000
Techism 1000 open sans/helvetica 1030
Emphasize 1000 open sans 1250
Enough 1000 ubuntu 1390

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

Победитель

Далее авторы сосредоточились на ТОП-3 тем по популярности и скорости: Pacify (1 000), Basic (10 000), и Generic (500). У темы Basic есть то, чего нет у двух других претендентов: 10 000 активных установок и множество функций. Популярность так же означает, что у темы будет более длительный жизненный потенциал. Тема Basic — окончательный выбор редакции.

P.S. Немного от себя

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

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

Gulp for WordPress: Initial Setup

Easily manage projects with monday.com

This is the first part of a two-part series on creating a Gulp workflow for WordPress theme development. This first part covers a lot of ground for the initial setup, including Gulp installation and an outline of the tasks we want it to run. If you’re interested in how the tasks are created, then stay tuned for part two.

Earlier this year, I created a course for building premium WordPress themes. During the process, I wanted to use a task runner to concatenate and minify JavaScript and CSS files. I ended up using that task runner to automate a lot of other tasks that made the theme much more efficient and scalable.

The two most popular task runners powered by Node are Gulp and Grunt. I went with Gulp after a good amount of research, it appeared to have an intuitive way to write tasks. It uses Node streams to manipulate files and JavaScript functions to write the tasks, whereas Grunt uses a configuration object to define tasks — which might be fine for some, but is something that made me a little uncomfortable. Also, Gulp is a bit faster than Grunt because of those Node streams and faster is always a good thing to me!

So, we’re going to set Gulp up to do a lot of the heavy lifting for WordPress theme development. We’ll cover the initial setup for now, but then go super in-depth on the tasks themselves in another post.

Article Series:

  1. Initial Setup (This Post)
  2. Creating the Tasks

Initial theme setup

So, how can we use Gulp to power the tasks for a WordPress theme? First off, let’s assume our theme only contains the two files that WordPress requires for any theme: index.php and styles.css . Sure, most themes are likely to include many more files that this, but that’s not important right now.

Secondly, let’s assume that our primary goal is to create tasks that help manage our assets, like minify our CSS and JavaScript files, compile Sass to CSS, and transpile modern JavaScript syntax (e.g. ES6, ES7, etc..) into ES5 in order to support older browsers.

Our theme folder structure will look like this:

The only thing we’ve added on top of the two required files is a src directory where our original un-compiled assets will live.

Inside of that src directory, we have an images subdirectory as well as others for our JavaScript and Sass files. And from, there, the JavaScript and Sass subdirectories are organized into components that will be called from their respective bundle file. So, for example, bundle.js will import and include slider.js when our JavaScript tasks run so all our code is concatenated into a single file.

Identifying Gulp tasks

OK, next we want Gulp tasks to a create a new dist directory where all of our compiled, minified and concatenated versions of our assets will be distributed after the tasks have completed. Even though we’re calling this directory dist in this post because it is short for «distribution,» it could really be called anything, as long as Gulp knows what it is called. Regardless, these are the assets that will be distributed to end users. The src folder will only contain the files that we edit directly during development.

Identifying which Gulp tasks are the best fit for a project will depend on the project’s specific needs. Some tasks will be super helpful on some projects but completely irrelevant on others. I’ve identified the following for us to cover in this post. You’ll see that one or two are more useful in a WordPress context (e.g. the POT task) than others. Yet, most of these are broad enough that you’re likely to see them in many projects that use Gulp to process Sass, JavaScript and image assets.

  • Styles Task: This task is responsible for compiling the bundle.scss file in the scss subdirectory to bundle.css in a css directory located in the dist directory. This task will also minify the generated CSS file so that its is it’s smallest possible size when used in production.

We will talk about production vs. development modes during the article. Note that we will not create a task to concatenate CSS files. The bundle.scss file will act as an entry point for all . scss files that we want to include. In other words; any Sass or CSS files you want to include in your project, just import them in the bundle.scss file using @import statements. For instance, in our example folder, we can use @import ./components/slider’; to import the slider.scss file. This way in our task we will have to compile and minify only one file ( bundle.css ).

  • Scripts Task: Similar to the Styles task, this task will transpile bundle.js from ES6 syntax to ES5, then minify the file for production.

We will only compile bundle.js . Any other JavaScript files we want to include will be done using ES6 import statements. But in order for those import statements to work on all browsers, we will need to use a module bundler. We’re going to use webpack as our bundler. If this is your first time working with it, this primer is a good place to get an overview of what it is and does.

  • Images Task: This task will simply copy images from src/images and send them to dist/images after the files have been compressed to their smallest size.
  • Copy Task: This task will be responsible for copying any other files or folders that are not in /src/images , /src/js or /src/scss and post them to the dist directory.

Remember. the src folder will contain the files that are only used during development and that will not be included in the final theme package. Thus, any assets other than our images, JavaScript and Sass files need to be copied posted to the dist folder. For instance, if we have a /src/fonts folder, we would want to copy the files in there into the dist directory so they get included in the final deliverable.

  • POT Task: As the name suggests, this task will scan all your theme’s PHP files and generate a .pot (i.e. translation) file from gettext calls in the files. This is the most WordPress-centric of all the tasks we’re covering here.
  • Watch Task: This task will literally watch for changes in your files. When a change is made, certain tasks will be triggered and executed, depending on the type of file that changed.

For instance, if we change a JavaScript file, then the Scripts task should do its magic and then it would be ideal if the browser refreshed for us automatically so we can see those changes. Further, If we change a PHP file, then let’s simply refresh the browser since PHP files don’t rely on any other tasks in our project. We’ll be using a Gulp plugin called Browsersync to handle browser refreshes, but we’ll get to that and other plugins a little later.

  • Compress Task: As you might expect, all the plugins that we use to write our tasks will be managed using npm. So, our theme folder will contain another folder, like node_modules , that in turn, contains files like package.json and other configuration files that define our project’s dependencies — and these files and folders are only needed during development. During production, we can take out the necessary files for our theme and leave the unneeded development files behind. That’s what this task will do; it will create a ZIP file that only contains the necessary files to run our theme.

As a bonus step for the compress task, if you are creating a theme that you intend to publish on WordPress.org or maybe on a website like ThemeForest, then you probably already know that all functions in your theme must be prefixed with a unique prefix:

So, if you are creating a lot of themes. you’ll need to easily reuse functions in different themes but change the prefix to the name of the theme, to prevent conflicts. We can prefix our functions with a placeholder prefix and then replace all instances of that placeholder in the compress task. For instance, we can choose the string _themename as a place holder, and when we compress our theme we will replace all ‘_themename’ strings to the actual theme name:

This can also apply to anywhere we use the theme name for example in the text domain:

  • Develop Task: This task does nothing new. It runs as we develop our theme. It cleans the dist folder, runs the Styles, Scripts, Images and Copy tasks in development mode (i.e. without minifying any of the assets), then watches for file changes to refresh the browser for us.
  • Build Task: This task is intended to build our files for production. It will do all the same cleaning and tasks as the Develop task, but in production mode (i.e. minify the assets in the process) and generate a new POT file for translation updates. After it runs, our dist folder should contain the files that are ready for distribution.
  • Bundle Task: This task will simply run the build task, making sure that all the files in the dist folder are minified and ready for distribution. Then, it will run the Compress task, which bundles all of the production-ready files and folders into a ZIP file. We want a ZIP file because that is the format WordPress recognizes to extract and install a theme.

Here’s how our file structure looks after our tasks complete:

Now that we know what tasks we’re going to use on our project and what they do, let’s get into the process for installing Gulp into the project.

Installing Gulp

Before we install Gulp, we should make sure that we have Node and npm installed on our machines. We can do that by running these commands in the command line:

. and, we should get some version number as seen here:

Now, let’s point the command line to the theme folder:

. and then run this command to initialize a new npm project:

This will prompt us with some options. The only important option in our case is the package name option. This is where the name of the theme can be provided — everything else can stay at their default setting. When choosing the theme name, make sure to only use lowercase characters and underscores while avoiding dashes and special characters since this theme name will be used to replace the functions placeholder that we mentioned earlier.

On to installing Gulp! First, we’ve got to install Gulp’s command line interface (gulp-cli) globally so we can use Gulp in the command line.

After that, we run this command in order to install Gulp itself in the theme directory:

The current stable release of Gulp is 3.9.1 at the time of this writing, but version 4.0 is already available in the project repository.

To make sure everything is installed correctly, we’ll run this command:

Nice! Looks like we’re running version 4.0, which is the latest version at the time of this writing.

Writing Gulp tasks

Gulp tasks are defined in a a file in called gulpfile.js that we’ll need to create and place into the root of our theme.

Gulp is JavaScript at its core, so we can define a quick example task that logs something to the console.

In this example, we’ve defined a new task by calling gulp.task . The first argument for this function is the task’s name ( hello ) and the second argument is the function we want to run when that name is entered into the command line which, in this case, should print «First Task» into the console.

Let’s do that now.

Here’s what we get:

As you can see, we do indeed get the console.log(‘First Task’) output we want. However, we also get an error saying that our task did not complete. All Gulp tasks require telling Gulp where to end the task, and we do that by calling a function that is passed as the first argument in our task function like so:

Let’s try running gulp hello again and we should get the same output, but without the error this time.

cb() is a Node.js callback function that’s often passed into an asynchronous function. There are some cases where we won’t have to call it, such as when a task returns a promise or a node stream. A node stream is what we will use in the tasks in this post, which means we will see it a lot throughout our article.

Here’s an example of a task that returns a promise. In this task, we won’t have to call the cb() function because Gulp already knows that the task will end when the promise resolves or returns an error:

Now try and run ‘gulp promise’ and the task will complete without returning any errors.

Finally, it’s worth mentioning that Gulp accepts a default task that runs by typing gulp alone in the command line. All it takes is using «default» as the task name argument.

Now, typing gulp by itself in the command line will run the task.

Whew! Now we know the basics of writing Gulp tasks.

There is one more thing we can do to improve things and that’s enabling ES6 syntax in the Gulpfile. This will allow us to use features like destructuring, import statements, and arrow functions, among others.

Using ES6 in the Gulpfile

The first step to use ES6 syntax in the Gulpfile is to rename it from gulpfile.js to gulpfile.babel.js . As you may already know, Babel is the compiler that compiles ES6 to ES5.

So, let’s install Babel and some of its required packages by running:

After that, we have to create a file called .babelrc inside of our theme folder. This file will tell Babel which preset to use to compile our JavaScript. The contents of the .babelrc file will look like this:

Now we can use ES6 in our Gulpfile! Here’s how that would look if we were to re-write it:

As you can see, we are importing Gulp using import and not require. In fact, there’s no longer any need to import Gulp at all! I included the import statement anyway to show it can be used instead of require . We’re allowed to skip importing Gulp because we don’t have to call gulp.task — instead, we only need to export a function, and the name of this function will be the name of the task. Further, all that’s needed to define a default function is use export default . And notice those arrow functions, too! Everything is so much more concise.

Let’s move on and start coding the actual tasks.

Development vs. Production

As we covered earlier, we need to create two modes: development and production. The reason we need to delineate between the two is that some details in our tasks will be time and memory-consuming, which only make sense in a production environment. For instance, the styles task needs to minify the CSS. However, the minification can take both time and memory — and if that process runs every single time something changes during development, that is not only unnecessary but is very inefficient. It’s ideal for tasks to be as fast as possible during development.

We need to set a flag that specifies whether a task should run in one mode or the other. We can use a package called yargs that allows us to define these types of arguments while running a command. So, let’s install it and put it to use:

Now, we can add arguments to our command like so:

. and then retrieve these argument in the Gulpfile:

Notice that the values we define in the command are available inside the yargs.argv object in the Gulpfile and in console.log(PRODUCTION) . In our case this will output true , so PRODUCTION will be our flag that decides whether or not a function runs inside the tasks.

We’re all set up!

We covered a lot of ground here, but we now have everything we need to start writing tasks for our WordPress theme development. That just so happens to be the sole focus of the next part of this series, so stay tuned for tomorrow.

Как выбрать тему WordPress? Советы от Yoast SEO

Привет, коллеги! Сегодня поговорим о том, как выбрать шаблон для сайта на WordPress. Выбрать тему WordPress не так сложно: нужно лишь понять, что вам нужно и обратить внимание на некоторые важные детали. Читайте советы по правильному выбору темы WordPress от Edwin Toonen из команды Yoast SEO. В оригинале статья называется — How to find the perfect WordPress theme (Как найти идеальную тему WordPress?)

Как найти идеальную тему WordPress!

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

Какую тему WordPress выбрать?

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

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

Определите ваши потребности

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

Найдите надежного реселлера или разработчика

Все шаблоны WordPress можно разделить на две группы, а именно платные и бесплатные. Что выбрать – создание темы для WordPress по индивидуальным параметрам или бесплатный макет? Дискуссия о том, является ли тема премиум-класса лучше, чем бесплатная, продолжает бушевать. У каждого из вариантов есть свои достоинства и недостатки. Мы видели массу плохих бесплатных тем, но среди премиальных/коммерческих их вряд ли намного меньше. Что вы должны сделать, так это найти реселлера или разработчика, которому доверяете.

Ищите социальное доказательство надежности продавца WordPress theme или разработчика: посмотрите, сколько отзывов под каждой темой, есть ли действующий форум, как давно было последнее обновление.

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

В каталоге много прекрасных тем ВордПресс

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

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

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

На сколько гибкая тема ВордПресс?

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

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

Определите, какие шаблоны записей и страниц поддерживает тема

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

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

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

Genesis Framework позволяет вам легко создавать невероятные сайты WordPress

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

Смотрите, чтобы в теме не было лишних функций

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

Проверьте скорость сайта и адаптивность под мобильные устройства

В наше время мобильность является обязательным условием. Кроме того, ваш сайт и его тема должны загружаться как можно быстрее. Проверьте отзывчивость темы и запустите тест на удобство для мобильных устройств Google — https://search.google.com/test/mobile-friendly . Оптимизирована ли ваша страница для мобильных устройств?

Проверьте, удобно ли просматривать страницу на мобильном устройстве

Вы также можете ввести адрес демонстрационного сайта с выбранной темой в инструменте Google PageSpeed Insights — https://developers.google.com/speed/pagespeed/insights/ , чтобы увидеть, есть ли какие-то проблемы с загрузкой. PageSpeed Insights анализирует содержание веб-страницы и предлагает решения, которые позволят ускорить ее загрузку.

Инструмент PageSpeed Insights от Google

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

SEO темы в порядке?

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

Начните с кода. Чистый ли он? Был ли он обновлен недавно? Будет ли поддерживаться в будущем? От скольких библиотек JavaScript зависит тема? Поддерживает ли она структурированные данные Schema.org?

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

Проверьте действительность кода

Многие разработчики тем больше похожи на дизайнеров, чем на программистов – они добиваются того вида, который хотят, но не обременяют себя проверкой поддержки кода HTML. Если он не поддерживается, у браузеров (в настоящем или в будущем) могут возникнуть проблемы с отображением содержимого. Вы можете проверить, действителен ли код для всемирной паутины, используя валидатор W3C (World W >https://validator.w3.org/#validate_by_uri .

Вы можете проверить правильность кода, используя валидатор W3C

Тестируйте, тестируйте и снова тестируйте

Как только вы определились со своей новой темой, пришло время подключить ее. Но сначала нужно провести кучу тестов – запустите все, которые сможете найти. Проверьте безопасность (например, с помощью плагина Sucuri) или темы с plugin Theme Check.

Загрузите свой сайт с фиктивными данными из wptest.io , чтобы увидеть, все ли элементы представлены и функционируют.

Лучшие тесты для WordPress

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

Бонус

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

Hooks (перехватчики событий)

Плагины WordPress используют так называемые «перехватчики». Они позволяют приклеить к некоторым функциям собственные – например, добавить коды отслеживания. Множество проблем с плагинами возникнет, когда автор темы забывает добавить перехватчики. Вот как это проверить:

  1. В header.php должен быть небольшой фрагмент кода PHP, который выглядит вот так: wp_head(); или так – do_action(‘wp_head’); прямо перед фрагментом HTML это выглядит так: .
  2. В footer.php , должен быть фрагмент PHP по типу такого wp_footer(); или такого – do_action(‘wp_footer’);
  3. В comments.php и/или comments-popup.php фрагмент кода должен выглядеть так: ID); ?> сразу перед HTML.

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

  • Home.php: домашней страницы.
  • Single.php: для отдельных сообщений.
  • Page.php: для страниц.
  • Category.php: для индексов категорий.
  • Author.php: шаблон автора, используемый, когда кто-то хочет найти все сообщения определенного автора.
  • Date.php: шаблон даты, используемый, когда кто-то пытается посмотреть записи по дате.
  • Archive.php: используется, когда отсутствуют категории category.php, author.php или date.php.
  • Search.php: используется, когда кто-то осуществляет поиск в блоге. Очень важный шаблон, если вас беспокоит юзабилити – могут ли люди находить сообщения в вашем блоге.
  • 404.php: используется, когда WordPress не может найти определенную публикацию или страницу. Он очень важен!

Как ваша тема обрабатывает заголовки?

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

Скорее всего, это будет выглядеть примерно так:

Тогда лучше поменять на:

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

Друзья, если вы ищите хорошие темы — Без тяжелых библиотек и фреймворков, быстрые и функциональные темы для WP. Адаптивность, микроразметка, SEO оптимизация, строго по стандартам! Посмотрите на этой странице.

В заключение

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

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

Добавить комментарий