Функции сайта, которые не надо программировать

При разработке темы WordPress или создании нового сайта мы часто повторяем одни и те же функциональные блоки, например, вывод последних законченных проектов или портфолио работ, всевозможные блоки кнопок социальных сетей и многое другое. Это не самая сложная работа при разработке сайта, но она может отнимать много времени. И это время можно здорово сэкономить и  его потратить его на куда более интересные функции сайта.   (далее…)

Мобильный WordPress

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

Мои сайты wordpress.com

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

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

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

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

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

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

Читалка WordPress.com

Читалка мобильного WordPress довольно удобна:

Новости мобильный WordPress
Новостная лента
Теги и сохраненные записи мобильный WordPress
Выбор категорий и меток
Чтение статьи в мобильном WordPress
Чтение статьи

С помощью поиска можно найти интересующие для себя темы или сайты и просто их добавить к себе (отслеживаемые сайты). Это удобно делать на десктопе:

Добавление сайта в мобильный wordpress
Добавим новый сайт на отслеживание

Но не всегда он находит требуемые сайты.

И здесь на помощь приходит OPML — файл с коллекцией RSS-источников, которые вам интересны. Этот файл могут генерировать практически все нормальные сервисы для агрегации личных новостей или читалки RSS, даже тот же Youtube

Если вы знаете URL RSS-потоков нужных вам сайтов, то сгенерировать OPML можно например, здесь: http://opml-gen.ovh/

Экспорт OPML из Feedly

Например, в Feedly получить этот файл можно так:

feedly export opml
Экспорт OPML в Feedly

Импорт OPML в читалку WordPress.com

После этого мы заходим в читалку wordpress.com и выбираем импорт OPML:

мобильный wordpress импорт OPML

Вот и всё. Через некоторое время (10-20 мин) в ваших читалках мобильного WordPress появятся все интересующие вас сайты и новости. Приятного чтения!

7 смертных грехов разработчиков тем WordPress

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

  1. Контент сайта в шаблонах
  2. Вставка кода счетчиков в шаблоны темы
  3. Неиспользование функций локализации
  4. Отсутствие настроек темы
  5. Регистрация в теме своих CPT
  6. Изобретение велосипеда с формами, заказами, каталогом товаров
  7. Логика сайта или бизнес-процессов, запрограммированная в теме

Рассмотрим их подробнее.

1. Контент сайта в шаблонах WordPress

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

«Ну и что?» — возразите вы, — «Шаблоны для этого и нужны!» .

Нет, не так! Шаблоны отвечают за вёрстку, компоновку отдельных элементов сайта, а не его информационное наполнение! Смысл очень прост: пользователь должен имеет возможность поменять любой элемент сайта (читай, любую строку на любой странице) из админки. А если этот элемент «зашит» в шаблон, то его изменение невозможно. (Править шаблоны из админки — ужас какой плохой тон!)

Правильное решение проблемы:

  • Если вам необходимо вывести список каких либо ссылок, например, меню, список социальных сетей и т.п. — используйте меню! Регистрируйте место под меню и вводите его с помощью wp_nav_menu(). Если нужно выводить всякие иконки, описания к ссылкам и прочее — расширяйте функции меню, а не изобретайте велосипед!
  • Если вам необходимо вывести в шаблоне просто строку текста (например, копирайт в подвале) или изображение (например, логотип в шапке) — используйте кастомайзер! Просто создавайте настройки темы и сайта и выводите их в шаблоне.
  • Если вам необходимо вывести какой-то настраиваемый или специфичный для конкретного сайта блок HTML (например, формы обратной связи, карты и т.п.) в шаблоне — используйте виджеты и выводите их через dynamic_sidebar()! Регистрируйте новую область и настраивайте ее виджетами.

2. Вставка кода счетчиков в шаблоны темы WordPress

Тоже очень частая ошибка, причем присущая даже премиальным темам, когда те предлагают «простые функции» разместить Google Analytics или другие счетчики в шапке/подвале сайта. Но это совершенно не нужно! Вы всё равно не можете предусмотреть все случаи размещения счетчиков — кому-то нужно очень примитивно просто поставить Метрику, но чаще всего сегодня используется Google Tag Manager, и вся настройка счетчиков ведётся там.

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

3. Неиспользование функций локализации

Напомним, что по кодексу WordPress интернализация (локализация) всех своих наработок обязательна! Никто не призывает вас прямо сейчас делать десяток переводов на основные языки мира, но использовать функции локализации обязательно! Иначе вы сами начнете чертыхаться, когда завтра ваш пользователь просто поставит какой нибудь плагин мультиязычности (Polylang или WPML) и вам заново придется переписывать свою же тему!

Поэтому, как минимум, запоминаем аксиому!

Вот так неправильно:
Это плохо, так писать не надо
Вот так правильно:
Вот так правильно писать

Ну а если вы пишите вот так:
Вы перепутали, это WordPress, а не Битрикс!
то мне кажется, что вам вообще не следует заниматься разработкой WordPress. Есть масса CMS-систем, основанных на говно-коде, например — Битрикс, лучше вам пойти туда. Такой стиль — не новаторство и не изящество, это — дебилизм!

4. Отсутствие настроек темы WordPress

Речь идет о тех функциях сайта, которые могут и должны быть настроены через кастомайзер или админку:

  • Иконка сайта
  • TITLE и DESCRIPTION всех страниц
  • Меню
  • Хлебные крошки

Их НЕ НАДО ПРОГРАММИРОВАТЬ и не надо выводить в шаблонах!!! Просто включите в functions.php эти возможности и всё!

Вот типовой код в functions.php (кстати, а вы знаете что add_theme_support() можно и нужно вызывать напрямую в functions.php, не оборачивая его функцией с вызовом по хуку?):

add_theme_support( 'title-tag' ); // Вывод title
add_theme_support( 'html5' ); // Вывод комментариев, поиска и т.п. в HTML5
add_theme_support( 'custom-logo' ); // Кстати, стандартный способ добавить управлением логотипа
add_theme_support( 'post-thumbnails' ); // Изображения (миниатюры) в записях
add_theme_support( 'yoast-seo-breadcrumbs' ); // Хлебные крошки Yoast SEO

Всё! Вот готовая и правильная настройка favicon уже работает на сайте:

Настройка favicon на сайте

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

5. Регистрация в теме своих CPT (Custom Post Type)

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

Но несмотря на то, что так делают буквально все — это неверно! Причина проста, точнее их несколько:

  1. Вы перегружаете кодом свою тему и делаете ее монстроподобной;
  2. Если завтра пользователь (да или вы сами) просто смените тему, то все ваши новые типы (контент вашего сайта!) улетят в тартарары!
  3. Если пользователю нужно добавить новый тип данных (например, добавить на сайт раздел «Наши путешествия» со своими свойствами)  или убрать существующий (об этом будет одна из следующих статей), вам придется менять свою тему.

Поэтому НЕ ДЕЛАЙТЕ ТАК! Не регистрируйте никакие CPT в своей теме!

6. Изобретение велосипеда с формами, заказами, каталогом товаров в теме WordPress

Просто ужасная ошибка! И тем не менее мы часто с ней сталкиваемся. Суть этой ошибки заключается в том, что разработчик реализует какую либо функцию в теме, несмотря на то, что она давно реализована плагином. Верх идиотизма, который нам приходится время от времени видеть — это отправка своей собственной формы (намертво зашитой в шаблон, естественно) на почту через свой же собственный mailer.php.

1C Битрикс - шалаш из говна и палок

Скорее всего эти ошибки происходят из-за махрового невежества программиста, который не знает, что сейчас существует 55 512 плагинов (на момент написания этой статьи), которые решают 99,9% всех задач сайта. И решают их хорошо. Поэтому вместо очередного изобретения велосипеда, намного правильнее просто потратить 5 — 10 минут в Google, формулируя свою задачу или вопрос и добавляя слово «wordpress», например, «one click order wordpress» — попробуйте прямо сейчас!

Скорее всего, вы получите сразу с десяток готовых решений, платных и бесплатных, вам останется только их оттестировать. Старайтесь отдавать предпочтение плагинам с максимальным числом установок и ближайшим временем последнего обновления. Это — лидеры, а поскольку это лидеры, с ними давно интегрированы другие плагины и решения, что позволяет решать не только текущие задачи, но и задачи, которые возникнут завтра. Например, установив в качестве форм CF7 вы завтра с удивлением обнаружите, что с ним хорошо интегрируется GTM, а значит чтобы сделать конверсионную цель для Google Analytics или Яндекс.Метрика на любой форме вашего сайта, вам не нужно делать ничего!

Вот типовые задачи и плагины их решающие:

  • Формы на сайте — Contact Form 7.
  • Почтовые рассылки и формы подписки на них — MailChimp for WordPress.
  • Google Tag Manager (а это все счетчики, Google Analytics, Яндекс.Метрика, всякие JivoSite, пиксели ремаркетинга, пиксели соц.сетей и прочие маркетинговые инструменты) — DuracellTomi’s Google Tag Manager for WordPress.
  • Все SEO инструменты (управление TITLE, мета-тегами, каноническими ссылками, хлебными крошками, инструменты вебмастера Яндекс, Google  Search Console, robots.txt, карты сайта и пр.) — Yoast SEO.
  • Кросспостинг в соц.сети, кнопки социальных сетей, мониторинг сайта и многое-многое другое — Jetpack от WordPress.com.
  • Каталог товаров, услуг, цены, заказы и оплаты на сайте, личный кабинет с историей заказов — WooCommerce однозначно.

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

WordPress vs Bitrix

7. Логика сайта или бизнес-процессов, запрограммированная в теме WordPress

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

Я сторонник второго подхода, который мы у себя в компании называем Unix-Way — каждый плагин реализует одну функцию, но реализует ее хорошо. Это позволяет эти плагины потом повторно как угодно использовать на других сайтах. Делайте так.

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

WooCommerce и Gutenberg — торжественная смычка!

Недавно завершилась WooSesh — бесплатная виртуальная конференция, посвященная WooCommerce. На конференции выступили товарищи:

Отметив ведущую роль демократической партии, товарищи из Automattic также сделали очень интересный анонс изменений WooCommerce, которые ожидаются в 2019 году. А именно: полностью переработанная админка WooCommerce. И это изменение связано, прежде всего, с тесной интеграцией с редактором Gutenberg. Это очень ожидаемое, и очень важное нововведение, поэтому остановимся на нем подробнее.


WooCommerce — самая распространенная платформа интернет-магазинов в мире

Сегодня WooCommerce является самой распространенной в мире и самой активной динамически развивающейся платформой интернет-магазинов. Это подтверждается, например, статистикой BuildWith — 21% всех интернет-магазинов в мире используют WooCommerce.

Популярность e-Commerce платформ в 2018 году

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

И это неудивительно. WooCommerce не просто самая распространенная платформа с огромным количеством наработок, но и платформа обладающая великолепной, очень хорошо продуманной архитектурой (привет, Битрикс!) и широчайшим набором возможностей, которые даже не снились иным «конкурентам».

1C Битрикс - шалаш из говна и палок

Сегодня, когда e-Commerce уже наигрался в бирюльки и пустые рекламные слоганы «коробочная интеграция с 1С», и начал считать реальную совокупную стоимость владения продуктом, владельцы интернет-магазинов начинают внимательно смотреть на то, что им предлагает платформа.

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

Гутенберг — новый подход к редактированию и публикациям на сайтах

Однако, с момента появления WordPress (а WooCommerce всё же полностью базируется на WordPress) панель администрирования не претерпевала серьезных изменений. Ситуация кардинально изменилась примерно год назад, когда в Automattic (а это разработчики и WordPress и WooCommerce) анонсировали Гутенберг — совершенно иной подход в редакторе контента WP.

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

Вот например, я пишу эту заметку в Gutenberg

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

Новая «админка» WooCommerce

Разработчики WooCommerce, конечно же, тоже активно адаптируют WC к Гутенбергу. Именно об этом и было объявлено на конференции. 

Новая панель администрирования WooCommerce
Новая панель администрирования WooCommerce

Сейчас эти нововведения представлены в виде отдельного плагина WC-Admin на Github, но в 2019 году это, по-видимому, станет составной частью WooCommerce.

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

Также разработчики обещают значительно расширить встроенные отчеты WooCommerce, что тоже очень неплохо. С другой стороны отметим, что у WooCommerce весьма развитый REST API, который позволяет прямо сейчас подключить WooCommerce к тому же MS Excel напрямую (точнее Эксель подключить к WooCommerce) и без какого-либо программирования формировать любые отчеты.

Но это уже совсем другая история, и мы напишем ее, если это вам интересно. Пишите в комментариях!

Осень и мы начинаем цикл статей по программированию сайтов на WordPress и WooCommerce

«За окном шёл снег и рота красноармейцев…»
П. Асс, Н. Бегемотов.

Наверное, еще со школьной скамьи осень символизирует для нас начало нового цикла работы и обучения. У евреев осенний праздник Рош Га Шана, что дословно переводится как «голова года», вообще является праздником Нового Года. В дижитал среде осень тоже всегда начало высокой активности.

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

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

Ждем ваших комментариев!

Progressive Web Apps в WordPress

Эта статья является компиляцией тезисов доклада на конференции WordCamp Moscow 2018


Что такое Progressive Web Apps (PWA)?

На самом деле ответить на этот вопрос довольно сложно. Пока скажем так:

Progressive Web Apps (PWA) — это гибридное приложение или сайт, которое работает на любой платформе, на любом устройстве

Постараюсь объяснить это не очень удачное определение. 

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

  1. Веб-сайты
  2. Мобильные приложения

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

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

Progressive Web Apps как раз и призваны решить эти проблемы и объединить эти две большие группы способов коммуникации в одну большую — PWA. Можно сказать так:

Progressive Web Apps — это способ построения приложений, использующих стек Веба (HTML, CSS JS), которые отвечают трем важным принципам:

1. Независимость от соединения с сетью — работает в оффлайн-режиме

2. Скорость и отзывчивость — быстрая реакция на действия пользователя

3. Нативный вид — не ломается идеология интерфейса устройства

Несколько примеров PWA

Вот несколько ссылок, по которым можно найти PWA, даже там, где вы не ожидали их видеть, например, бóльшая часть сервисов Google являются PWA:

Попробуйте открыть эти сайты/приложения (даже на декстопе!) и включить авиарежим, отключив интернет. 

Если вы внимательно посмотрите на изображение выше, то наверняка заметите, то Google Keep явно работает в интерфейсе Windows, то есть он работает на десктопе как полноценное приложение!

PWA на десктопе

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

Вот пример экрана моего компьютера. Всё, все приложения, что сейчас открыты на экране — PWA.

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

Но как такое возможно?

Реализация Progressive Web Apps (PWA)

Прежде всего, важно понять, что любое PWA приложение — это сайт, точнее полноценное использование Веб-стека:

  • Интерфейс приложения — HTML/CSS через HTTPS (обязательно!)
  • Взаимодействие с пользователем (интерактив) — AJAX (мы предпочитаем взаимодействие по REST API)
  • Оповещения, принудительная синхронизация данных — Push API
  • Кэширование данных для оффлайн работы — Service Workers и Cache API (чуть подробнее ниже)

Вот небольшая инструкция как с нуля сделать свое первое приложение доступна в Google Сodelabs.

Манифест PWA

Но прежде всего, это манифест приложения. Мы объявляем, как приложение должно работать, какие у него иконки, какое поведение на устройстве. Посмотреть его достаточно просто — откройте консоль браузера и переключитесь на вкладку Application.

Вторым, но по факту значимости первым компонентом приложения является Service Worker. 

Что такое Service Worker?

Начнем с определения: Service Worker — это код JavaScript, который работает в отдельном контексте, вне главного потока браузера, без доступа к DOM. Используя возможности современного JS для асинхротронных операций, SW может прозрачно контролировать обращения и любые запросы браузера в пределах указанного домена. Фактически SW может пропускать через себя весь трафик нашего сайта, и решать что и как отдавать браузеру на очередной запрос.

Вот хорошее (хотя и старое) описание Service Worker:
https://developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers

Именно SW реализует политику кэширования приложения для работы приложения в оффлайн-режиме. Понятно, для каждого приложения она будет своей, но чаще всего разработчики используют политику Offile First. Есть замечательная статья (тоже старая! PWA родились не сегодня и не вчера! А вы и не знали :)), которая хорошо объясняет почему так. Обязательно найдите время и изучите ее:
https://alistapart.com/article/offline-first

Вообще, Service Wordker — это далеко не такая безобидная штука, как может показаться на первый взгляд, и по хорошему они требуют детального рассмотрения, но сейчас пока предложим вам в качестве первого эксперимента вот такое довольно простое решение. 
https://justmarkup.com/log/2016/01/add-service-worker-for-wordpress/

Не рассматриваете его как законченное решение для сайта, но это отличная платформа для экспериментов и набивания шишек! Может быть позже я напишу о наших шишках и многочисленных граблях, на которые мы наступали при первых внедрениях PWA на сайтах. Если интересна эта тема — пишите вопросы в комментариях. 

Внедрение PWA на сайты WordPress

Как ни странно, но несмотря на то, что Progressive Web Apps существуют уже довольно долго (да и самой идее уже не один год!), о них мало говорят разработчики. И готовых решений для самой распространенной CMS в мире тоже не так много. Но есть. Вот несколько плагинов, которые позволяют внедрить на сайты WordPress функции PWA приложений:

  • Super Progressive Web Apps — довольно простой, но весьма удачный плагин. 

  • Progressive Web Apps от PWAThemes.com — более сложное, но и более гибкое решение, которое позволяет в том числе делать отдельные темы (внешний вид) для PWA представления.

Установка PWA на сайт WordPress на практике

Для начала я взял достаточно несложный интернет-магазин эротического белья  — https://www.lustshop.ru/
Обратите внимание: наличие HTTPS обязательно!

Установил плагин Super PWA и задал начальные настройки (их немного):

Сбросил кэши сайта, и попробовал зайти с мобильного устройства:

Вот появился баннер на установку приложения внизу экрана
Приложение устанавливается…

Всё! PWA приложение на мобильном устройстве!

Теперь попробуем поставить его на десктоп. Для этого выберем в бразуере вот этот пункт:

Готово! Приложение появилось на рабочем столе!

Краткие выводы

Итак, как мы видим Progressive Web Apps фактически объединяют сайты и приложения, стирая между ними границы.

Используя подход PWA мы можем создать удобный сервис (сайт? приложение?) который будет работать в любых условиях, на любых платформах.

Плагины позволят сделать вам простое PWA приложение, но не решат всех проблем. Хорошее приложение нужно тщательно проектировать и разрабатывать самостоятельно.

Но это уже совсем другая история…

Правильный переезд сайта WordPress на HTTPS

Защищенный протокол HTTPS сегодня стал стандартом де-факто, и если ваш сайт еще не перешел на HTTPS, то, наверное, сейчас самое время задуматься об этом переезде. Ведь уже летом браузер Google Chrome будет помечать все не-HTTPS сайты как небезопасные. Кроме того:

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

Проблема в том, что при стандартной настройке WP можно выбрать главным ИЛИ https ИЛИ http версию сайта, а Яндекс рекомендует обеспечить обе версии одновременно пока происходит склейка зеркал (до 3 — 4 недель), при этом карта сайта должна быть однозначно HTTPS-версии.

Стандартными настройками WordPress этого не сделать, поэтому вот небольшой фрагмент кода, который нужно разместить в начале файла wp-config.php вашего сайта. Этот фрагмент кода реализует требования, описанные выше:

  1. Обеспечивает доступность обоих версий сайта (HTTP и HTTPS) одновременно
  2. По умолчанию указывает ядру WP, что HTTPS версия основная, то есть, карты сайта генерируются для HTTPS-версии
  3. Принудительно включает HTTPS при обращении к адмнике сайта.

 

/**
* Разместите этот код в начале файла wp-config.php
*/
function isSecure() {
return
(!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off')
|| $_SERVER['SERVER_PORT'] == 443;
}
 
$web_site     = 'www.mysite.ru';   // Укажите здесь главное зеркало вашего сайта (с www или без www)
$schema       = isSecure() ? 'https://' : 'http://';
$web_site_url = $schema . $web_site;
define('WP_HOME',    $web_site_url);
define('WP_SITEURL', $web_site_url);
define('FORCE_SSL_ADMIN', true);

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

Google Data Studio и WordPress

Некоторое время назад появился невероятно мощный инструмент Google Data Studio, который объединяет самые разнородные данные и на основе этих данных строит наглядные интерактивные отчёты. К чести Google этот инструмент оказался намного более простым и, самое главное, не настолько замороченным идиотскими ограничениями, как его ближайший конкурент от некрофильной компании Microsoft, к которому я, например, так и не смог подключится. Но при этой простоте Google Data Studio не теряет самого главного — визуализации любых данных, своего основного назначения. Кстати, правильное название этого инструмента по-русски — Google Центр данных.

Зачем нужен Центр Данных

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

Коннекторы Data Studio

Коннекторы Google Data StudioКоннектор — это программный модуль, который производит загрузку данных в отчет в виде плоской таблицы или набора таких таблиц. С помощью коннектора в Центре Данных создается так называемый Источник данных, то есть, набор параметров подключения, которые определяют какие данные и откуда следует взять. Например, корректор Google Analytics создает источник данных, получающий данные именно вашего аккаунта и ресурса GA, то есть, именно вашего сайта.

Стандартно Google дает коннекторы для:

  • Google Analytics
  • Google Search Console
  • AdWords
  • BigQuery
  • CloudSQL
  • MySQL
  • Многие другие

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

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

Мы в нашей компании пошли именно по этому пути — мы сейчас пытаемся создавать (пока только для внутреннего использования) корректоры к REST API наших внутренних систем — CRM, CPM и кое-что другое.

Использование отчетов Data Studio в WordPress

Любые отчеты Центра данных изначально могут быть встроены в любые страницы сайта, но мне кажется наиболее востребованной функцией создание дашбордов (сводок с основными KPI сайта) для зарегистрированных пользователей — администраторов, менеджеров магазина или клиентов компании.

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

Но в качестве первого прообраза мы нашли и использовали решение от Ezond, за что им огромное спасибо!

Отображение отчетов Data Studio в WordPress

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

Но те возможности, которые дает нам Центр данных, реально вдохновляют нас на активное использование этого подхода для бизнес-сайтов. Смотрите также услугу «Создание аналитического отчета Google Data Studio«.

Прямая ссылка на вариацию товара в WooCommerce

WooCommerce по праву считается самой распространенной (около 12% интернет магазинов мира!) и очень мощной платформой электронной торговли. В нем заложено огромное число возможностей по функционалу магазина и еще больше решений реализуются с помощью плагинов WC. Одна из очень полезных функций, изначально реализуемых WooCommerce — вариативные товары, то есть, товары, у которых стоимость, доставка или просто условия покупки зависят от значений атрибутов товара. (далее…)

Как привести сайт WooCommerce в соответствие с Федеральным законом № 152-ФЗ «О персональных данных»

Сегодня о 152-ФЗ «О персональных данных» не написал только ленивый. Но, как говорится, dura lex, sed lex (лат. Суров закон, но это закон!). Сайт в любом случае обязательно нужно приводить в соответствие с этим законом. И здесь многое решает платформа, на которой сделан ваш интернет-магазин или сайт. Если вам несказанно повезло не вляпаться по уши в какой-нибудь Битрикс, а вы использовали мировые решения e-Commerce, лидером среди которых является WooCommerce, то эта короткая статья для вас и для ваших программистов.

(далее…)