• Рабочий макет на примере нашего сайта: https://wp-themelia-vitejs.vercel.app/;
• Репозиторий: https://github.com/consultapp/wp-themelia-vitejs;

Технологии/Пакеты:

• React
• Vite.js
• Redux
• Redux/Toolkit
• REST API WordPress
• Themelia WordPress Theme

REST API WordPress

Существует много готовых эндпоинтов в Rest Api WP, нас интересуют на данном этапе посты, страницы и поиск.

REST API Developer Endpoint Reference

Весь API находится в разделе /wp-json/, те для постов например это:

https://example.com/wp-json/wp/v2/posts 

В ответ получаем массив постов вида (отдается кол-во постов равное установленному ранее параметром pre_page, при его отсутствии в запросе):

/* СТАТЬЯ В РАЗРАБОТКЕ. */

Сообщение Переработка темы Themelia c PHP на React, для работы с WordPress в качестве Headless CMS без SSR появились сначала на ConsultApp.ru.

Убираем кнопки со страниц категорий и товаров

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

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
remove_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );

Убираем иконку корзины в шапке/меню

С шапкой интереснее, а может и нет… Это не функционал самого вукоммерса, по-этому идем искать код в нашей теме, если Вы видите иконку/ссылку на корзину в шапке — значит авторы Вашей темы предусмотрели ее использование вместе с Woocommerce и добавили код.

В случае нашего клиента он находился в header.php, легко отредактировать даже из веб-интерфейса ( Внешний вид => Редактор тем) и выглядел так:

if ( class_exists( 'WooCommerce' ) ) {
	global $woocommerce; 
    /* Тут было много html, сократили для удобства */
}

Ищем упоминания WooCommerce и похожий на иконку/кнопку HTML, комментируем ( /* php code */) весь связанный php, в нашем случае, это весь оператор if, если корзина возможно понадобится потом. Или удаляем, если точно уверены, что она не нужна.

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

Сообщение Как убрать корзину из шапки и кнопку «в корзину» со страницы в WooCommerce? появились сначала на ConsultApp.ru.

Для решения этой задачи мы нашли плагин c незатейливым названием Theme Customisations, правда скачать и загрузить его придется вручную с гитхаба:

1. Скачиваем архив http://github.com/woothemes/theme-customisations;
2. Говорим спасибо разработчикам, что сделали за нас чаcть работы;
3. Распаковываем папку на сервере /wp-content/plugins.

Работа с Theme Customisations

Функционал плагина не затейливый, как и наша задача, а именно — после активации в папке «/wp-content/plugins/theme-customisations-master» плагина создается папка «custom«, в которой есть базовые файлы, которые мы можем менять — код PHP, стили CSS, код JS.

Использование / Usage из readme.txt

• Add any CSS snippets to custom/style.css. This file is found in this plugin.
• Add any PHP snippets to custom/functions.php. This file is found in this plugin.
• Add any jQuery snippets to custom/custom.js. This file is found in this plugin.
• Add custom top level template files (page.php, single.php etc) to custom/templates/. You will need to create the templates folder.
• Add any WooCommerce template files to custom/templates/woocommerce. You will need to create the templates and woocommerce folders.
• Activate the plugin.

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

Сообщение Редактируем плагином тему WordPress без дочерних тем с возможностью обновления появились сначала на ConsultApp.ru.

Шаблон выгрузки:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE yml_catalog SYSTEM "shops.dtd">
<yml_catalog date="2010-04-01 17:00">
    <shop>
        <offers>
			<offer id="ID">
				<name>ИМЯ</name>
			      <description>ОПИСАНИЕ</description>
				<price>ЦЕНА</price>
				<currencyId>RUR</currencyId>
				<SKU>SKU</SKU>
				<picture>ССЫЛКА</picture>
			</offer>
		</offers>
	</shop>
</yml_catalog>

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

1.* Версия выводит в канал все товары магазина.

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

Страница плагина на https://ru.wordpress.org/

Сообщение Плагин Easy Upload to Farpost.ru появились сначала на ConsultApp.ru.

Установить плагин Вы можете через административную панель Вордпресс в разделе Плагины или вручную по ссылке —  ConsultApp — Yandex Turbo Pages .

Плагин добавляет отдельный RSS канал с разметкой под Яндекс Турбо-страницы сразу после установки и активации, который можно отдавать Яндексу в Вебмастере по адресу «http(s)://YOUR_SITE/feed/yaturbo/».

Разметка соответствует требованиям Яндекса и выдает ошибки при тесте обычными xml валидаторами, тк имеет специфические теги. Проверить то, что создался новый канал вы можете с помощью https://validator.w3.org/feed/. Обращать внимание на ошибки xml не надо.

В настройках возможно задание таких параметров, как код Метрики и дополнительные ссылки (блок yandex:related).

В случае возникновения проблем — напишите нам.

Сообщение Яндекс Турбо-страницы — плагин для WordPress от ConsultApp появились сначала на ConsultApp.ru.

Кеширование должно применяться ко всем кешируемым статическим ресурсам, а не только к некоторым из них. Кешируемые ресурсы включают файлы JavaScript и CSS, графические и другие файлы (файлы PDF, мультимедиа и т. д.).

Для включения кеширования необходимо в файл .htaccess добавить следующие строки:
# кеш браузера
<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 5 seconds"
# по типам файлов
ExpiresByType text/html "access plus 15 min"
ExpiresByType image/x-icon "access plus 7 day"
ExpiresByType image/jpeg "access plus 7 day"
ExpiresByType image/png "access plus 7 day"
ExpiresByType image/gif "access plus 7 day"
ExpiresByType application/x-shockwave-flash "access plus 7 day"
ExpiresByType text/css "access plus 7 day"
ExpiresByType text/javascript "access plus 7 day"
ExpiresByType application/javascript "access plus 7 day"
ExpiresByType application/x-javascript "access plus 7 day"
ExpiresByType application/xhtml+xml "access plus 7 day"
# нестандартные шрифты
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

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

Возможно указание следующих временных интервалов:

• month
• weeks
• days
• minutes
• seconds

Сообщение Как включить кеш браузера для сайта в .htaccess? появились сначала на ConsultApp.ru.

Что такое wp json oembed 1.0?

Wp json это нововведение от версии WordPress 4.4 и выше. Разработчики ввели новый API REST, который создает кучу мусорных страниц в виртуальной директории wp-json.

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

Как отключить WordPress REST API?

Как и обычно, добавляем следующий код в конец файла «functions.php» в теме. Сделать это можно в редакторе темы WordPress или напрямую в файле через FTP на сервере например.

Внимание!!! Данный метод может сломать работу некоторых планигов и в целом работу json (Например Contact From 7). Обязательно сделайте полный бекап перед изменением файлов!!!

// Отключаем сам REST API
add_filter('rest_enabled', '__return_false');
// Отключаем фильтры REST API
remove_action( 'xmlrpc_rsd_apis', 'rest_output_rsd' );
remove_action( 'wp_head', 'rest_output_link_wp_head', 10, 0 );
remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 );
remove_action( 'auth_cookie_malformed', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_expired', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_bad_username', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_bad_hash', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_valid', 'rest_cookie_collect_status' );
remove_filter( 'rest_authentication_errors', 'rest_cookie_check_errors', 100 );
// Отключаем события REST API
remove_action( 'init', 'rest_api_init' );
remove_action( 'rest_api_init', 'rest_api_default_filters', 10, 1 );
remove_action( 'parse_request', 'rest_api_loaded' );
// Отключаем Embeds связанные с REST API
remove_action( 'rest_api_init', 'wp_oembed_register_route');
remove_filter( 'rest_pre_serve_request', '_oembed_rest_pre_serve_request', 10, 4 );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );

В результате ссылка вида «<link rel=’https://api.w.org/’ href=’/wp-json/’ />» должна пропасть из кода страницы.

Сообщение Как убрать дубли страниц wp json oembed в WordPress появились сначала на ConsultApp.ru.

Есть несколько вариантов борьбы с этими ссылками:

• Отключить их в файле functions.php темы сайта;
• Использовать разнообразные плагины, например Disable Feeds.

Отключаем ссылки в файле functions.php

Заходим в административную панель сайта. Переходим в «Внешний вид -> Редактор», где открываем файл functions.php. Дописываем в самый конец php код и сохраняем файл:

// убираем feed
function fb_disable_feed() {
wp_redirect(get_option('siteurl'));
}
add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );


Все, ссылки из текста убраны. Обязательно проверяем результат, делаем поиск по исходному коды страниц «/feed». Ссылки должны исчезнуть из раздела <head>.

Плагин Disable Feeds

Плагин для WordPress —  Disable Feeds отключает все каналы RSS / Atom / RDF на вашем сайте. Все запросы для каналов будут перенаправлены на соответствующий HTML-контент.

Есть несколько вариантов настройки поведения плагина — перейдите в Настройки -> Чтение, чтобы увидеть их.

Когда плагин Disable Feeds активен. По умолчанию все каналы отключены, и все запросы для каналов перенаправляются на соответствующий HTML-контент.

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

• Перенаправить запросы на соответствующий HTML-контент;
• Выдать сообщение об ошибке «Не найдено» (404).

Так же Вы можете отметить галочку: «Не отключать общий почтовый фид и общий канал комментариев.»

Сообщение Как убрать ссылки feed с сайта на WordPress появились сначала на ConsultApp.ru.