Как настроить защиту от СПАМ-сообщений в плагине Contact Form 7?

Вы можете защитить свои контактные формы созданные в плагине Contact Form 7 с помощью функций защиты от спама, которые уже присутствуют в Contact Form 7, а это:

  • фильтрация СПАМа с помощью сервиса Akismet
  • фильтрация при помощи сервиса reCAPTCHA

Повторю, что эти возможности уже интегрированы в плагин и доступны в разделе Интеграций:

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

Защита при помощи Akismet

Первым шагом является активация плагина Akismet . Поскольку пакет плагинов Akismet входит в состав WordPress, нет необходимости устанавливать его вручную. Перейдите в меню «Плагины» и просто активируйте плагин под названием Akismet Anti-Spam .

Если по каким-то причинам плагин отсутствует у вас, то его необходимо установить.

Для использования Akismet вам понадобится ключ API. Его можно получить бесплатно.

Как задействовать Akismet в контактной форме?

Принцип работы достаточно простой. Вам нужно для полей по которым будет проходить проверка на предмет СПАМа указать специальную отметку в виде:

  • akismet:author — указывается для полей в которых отправитель должен вносить имя. Пример: [text* your-name akismet:author]
  • akismet:author_email — указывается для полей в которых отправитель должен вписать адрес электронной почты. Пример: [email* your-email akismet:author_email]
пример заполнения

Теперь, при подключенном и настроенном сервисе Akismet плагин контактной формы будет отправлять данные на проверку на СПАМ данному сервису и в случае, если «Акисмет» подтвердит наличие СПАМа, то плагин Contact Form 7 приостановит отправку электронного сообщения и отобразит уведомление: «Произошла ошибка при отправке вашего сообщения», которое будет в оранжевой рамке 🙂

Как тестировать фильтрацию спама?

Чтобы проверить, правильно ли работает фильтрация спама, попробуйте ввести «viagra-test-123» в поле предназначенное для ввода Имени (опция akismet:author) или «akismet-guaranteed-spam@example.com» в поле предназначенное для ввода адреса электронной почты (пометка akismet:author_email)

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

Спам ответ

Как добавить контактную форму на сайт в WordPress?

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

Решение: Для быстрой реализации этой задачи мы задействуем один из самых популярных плагинов-конструкторов контактных форм для WordPress.

Плагин Contact Form 7

Официальная страница плагина

Как устанавливать плагины?

Плагин Contact Form 7

После установки и активации плагина, вам будет доступен его раздел в главном меню панели управления и ссылка Настроек в разделе ваших плагинов

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

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

Контактная форма по умолчанию

Эту контактную форму мы можем уже смело задействовать на страницах нашего сайта. Создадим страницу «Контакты» и в редакторе блоков Гуттенберг найдём нужный блок, например по поисковому слову «контакт» или «contact».

После чего добавить найденный блок Contact Form 7 на вашу страницу. Так как у нас всего одна контактная форма, которая была нам доступна по умолчанию, то выберем её:

Image 00000306 - Как добавить контактную форму на сайт в WordPress?

Классический редактор

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

копируем шорткод

А после вставить его в область контента

добавляем шорткод на страницу

После обновления/публикации страницы, на публичной части сайта этой страницы появится наша контактная форма:

готовая контактная форма.

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

Для настройки получателей нам необходимо вернуться на страницу всех форм и перейти в нужную форму

Переходим к настройкам формы

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

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

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

добавление формы в виджетах

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

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

В результате получим:

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

Настройка получателей

Переходим на вкладку Письмо

Давайте познакомимся с разделами этого экрана:

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

Я специально удалил тег Темы письма и в списке тегов мой тег стал подсвечиваться акцентирующим черным цветом

ошибка. отсутствует почтовый тег

Это говорит о том, что в шаблоне отсутствует почтовый тег и информацию из него получатель не получит.

  1. Кому — в этом разделе мы можем указать получателя письма. В данном примере указан специальный шорткод, который будет использовать E-mail администратора, который указан при создании сайта. Вобщем, этот E-mail находится в разделе Настройки > Общие вашего сайта, в поле Административный E-mail
Емэйл администратора сайта

Если требуется указать несколько получателей, то перечисляем их адреса через запятую, например так:

[_site_admin_email], kolya@gmail.com, tolya@gmail.com

Или так:

masha@gmail.com, sasha@gmail.com
  1. От кого — тут вы указываете адрес отправителя. Важно, чтобы он соответствовал домену вашего сайта. То есть, если адрес вашего сайта mysite.com, то в этом поле нужно указать, например, info@mysite.com
  2. Тема письма. Тут я думаю всё понятно. Схема по умолчанию [_site_title] «[your-subject]» выдаст примерно следующее: если ваш сайт называется «Мой магазин», а в теме письма пользователь указал тему «Пожелание», то получим: Мой магазин «Пожелание»
  3. Дополнительные заголовки — лучше их не трогать.
  4. Тело письма — это как раз та информация которую получат получатели. Как правило, в этом теле письма содержится информация полей, которые заполняет пользователь, соответственно все участвующие почтовые теги должны тут присутствовать, в противном случае информация не будет передана в полном объёме.

И в нижней части экрана рассмотрим ещё ряд возможностей:

  1. Отметив этот чекбокс мы исключим вывод строк, если данные не были у тега заполнены пользователем. Это оправдано тогда, когда формы выступают в роли опросного листа и содержат в себе большое количество полей для заполнения
  2. Если чекбокс отмечен, то мы можем использовать в теле письма HTML-теги. Это позволит придать ему читабельный внешний вид выделив заголовки и прочие элементы в письме
  3. Сюда нужно поместить тег (в том случае если он был создан для прикрепления файла*) Если не выполнить это условие, то прикреплённый пользователем файл не будет получен.
  4. Возможность сформировать второе письмо, отличительное содержанием от первого. Это оправдано когда требуется разделить при отправке заполненную пользователем информацию, например, часть для менеджера, а часть в службу доставки и т.п. Или обычно задействуют эту функцию при отправке автоматических ответов.

Полезно для ознакомления

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

Ну и последняя вкладка позволяет внести дополнительные настройки, например, JavaScript код, который будет отрабатывать при успешной отправке формы. Зачастую сюда добавляют отправку данных в системы аналитики: Яндекс Метрика или GA.

Как добавить контактную форму через функцию PHP?

Пользователям, которые начинают работать с WordPress на уровне кода, возможно будет полезно познакомиться с функцией do_shortcode() , с помощью которой можно вывести контактную форму в нужном по коду месте. Учтите, что вывод формы за пределами цикла WordPress лишает вас некоторых возможностей, таких как передача служебной информации при помощи специальных тегов Contact Form 7.

Для отображения формы достаточно просто в функцию передать её шорткод:

echo do_shortcode( '[contact-form-7 id="09bcf5b" title="Форма 1"]' );

Как прикрепить и отправить файл в плагине Contact Form 7?

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

Решение: Сперва нам необходимо создать форму. Если вы не работали ранее с плагином Contact Form 7, то рекомендую начать с этой заметки.

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

codeispoetry 037 - Как прикрепить и отправить файл в плагине Contact Form 7?

Перед вами возникнет всплывающее окно с настройками данного поля:

настройки поля

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

Я оставлю все по умолчанию и добавлю в тело формы тег файл

добавлен тег файл

Далее нам необходимо перейти на вкладку Письмо и добавить этот уникальный тег поля файл в специальный раздел для прикреплённых файлов:

тег файла
  1. Добавляем…
  2. Сохраняем..
codeispoetry 041 - Как прикрепить и отправить файл в плагине Contact Form 7?

Готово! Теперь у пользователей нашего сайта появилась возможность прикреплять к почтовому сообщению файл:

контактная форма

Пример посложнее

Задача: Мы ожидаем от пользователя файлы исключительно в формате PDF и размером не превышающим 3 мегабайта.

Решение: Нам нужно вернуться на вкладку Шаблон формы и заново генерировать почтовый тег (шорткод) Файл

генератор поля файл

Указываем нужные значения и вставляем полностью новый тег или дополняем параметрами ( limit:3mb filetypes:pdf ) старый

Если требуется ограничить размер загружаемого файла, то значения можно указать следующим образом:

limit:1048576
limit:1024kb
limit:1mb

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

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

Расширения файлов которые можно использовать можно подсмотреть тут:

        // Image formats.
        'jpg|jpeg|jpe'                
        'gif'                         
        'png'                         
        'bmp'                        
        'tiff|tif'                    
        'webp'                        
        'ico'                        
        'heic'                        
        // Video formats.
        'asf|asx'                      
        'wmv'                         
        'wmx'                         
        'wm'                          
        'avi'                         
        'divx'                        
        'flv'                         
        'mov|qt'                      
        'mpeg|mpg|mpe'                
        'mp4|m4v'                      
        'ogv'                         
        'webm'                        
        'mkv'                         
        '3gp|3gpp'                     
        '3g2|3gp2'                    
        // Text formats.
        'txt|asc|c|cc|h|srt'           
        'csv'                         
        'tsv'                          
        'ics'                        
        'rtx'                          
        'css'                         
        'htm|html'                    
        'vtt'                          
        'dfxp'                         
        // Audio formats.
        'mp3|m4a|m4b'                 
        'aac'                         
        'ra|ram'                     
        'wav'                        
        'ogg|oga'                    
        'flac'                       
        'mid|midi'                     
        'wma'                        
        'wax'                         
        'mka'                          
        // Misc application formats.
        'rtf'                          
        'js'                           
        'pdf'                         
        'swf'                         
        'class'                       
        'tar'                          
        'zip'                          
        'gz|gzip'                     
        'rar'                         
        '7z'                           
        'exe'                         
        'psd'                          
        'xcf'                         
        // MS Office formats.
        'doc'                        
        'pot|pps|ppt'                 
        'wri'                          
        'xla|xls|xlt|xlw'             
        'mdb'                          
        'mpp'                         
        'docx'                        
        'docm'                        
        'dotx'                        
        'dotm'                       
        'xlsx'                        
        'xlsm'                         
        'xlsb'                         
        'xltx'                         
        'xltm'                        
        'xlam'                        
        'pptx'                        
        'pptm'                         
        'ppsx'                        
        'ppsm'                         
        'potx'                         
        'potm'                       
        'ppam'                        
        'sldx'                        
        'sldm'                        
        'onetoc|onetoc2|onetmp|onepkg'
        'oxps'                         
        'xps'                         
        // OpenOffice formats.
        'odt'                         
        'odp'                          
        'ods'                        
        'odg'                         
        'odc'                          
        'odb'                         
        'odf'   

Механика работы

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

По умолчанию эта временная папка имеет адрес wp-content/uploads/wpcf7_uploads, она создаётся автоматически, но в некоторых случаях может произойти ошибка, как правило связанная с недостаточными правами на запись…

В этом случае стоит определить новое место для загрузки через константу, которую можно объявить в файле wp-config.php

	define( 'WPCF7_UPLOADS_TMP_DIR', 'your-custom-tmp-dir' );

В качестве значения можно указать абсолютный путь или относительный. В случае относительного (как в примере) папка для загрузки будет создана в директории wp-content/

wp-content

Как создать кнопку в редакторе блоков Gutenberg?

В режиме редактирования Записи или Страницы добавьте новый блок:

добавьте новый блок

В строке поиска напишите запрос «Кнопки»

поиск кнопок

После добавления блока на страницу напишите название кнопки которое будет отображаться, например, «Отправить сообщение», «Написать нам WhatsApp» и т.п.

добавляем название кнопки

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

выравнивание кнопки

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

 мы можем задать ширину нашей кнопки.

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

2024 03 10 170405 - Как создать кнопку в редакторе блоков Gutenberg?

Этот блок имеет множество настроек, с помощью которых мы можем придать уникальности (кастомизации) нашей кнопке

настройки блока

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

типографика

Как задать ссылку кнопке?

В момент выделения кнопки, когда нам доступна панель её настроек, выбираем ссылку внутри страниц сайта или указываем произвольно

задаем ссылку

Как присвоить кнопке ID?

в момент выделения блока кнопки во вкладке настроек блока откройте раздел Дополнительно. Далее в поле HTML-якорь внесите какое-то название на латинице — оно то и будет служить в качестве идентификатора этого элемента.

присваиваем айдишник

А вот и результат нашей работы. Кнопка с заливкой по контуру с ссылкой на группу во ВК и с присвоенным идентификатором элементу:

вывод кнопки

Как добавить (включить) разметку Open Graph в плагине для WordPress Yoast SEO?

Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.

https://yandex.ru/support/webmaster/open-graph/intro-open-graph.html

Например, если страница отображает статью, Open Graph может определить название статьи, автора, изображение и другую важную информацию.

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

Open Graph

Чтобы иметь возможность передавать эти данные нужно включить функцию Данные Open Graph. Переходим в Настройки плагина, раздел Обмен информацией в социальных сетях и включаем:

  • Данные Open Graph
  • Данные карты Twitter

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

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

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

Как пользоваться Open Graph?

Для каждой странице вашего сайта вы можете создавать уникальные превью. Для этого в режиме редактирования страницы найдите раздел плагина Yoast SEO и перейдите во вкладку Социальные сети

Задаём настройки разметки

Именно здесь вы можете определите, как ваша публикация будет выглядеть в социальных сетях, таких как Facebook, Twitter, Instagram, WhatsApp, Одноклассники, LinkedIn, ВК и других.

Определите, как ваша публикация должна выглядеть в социальных сетях.

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

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

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

codeispoetry 023 - Как добавить (включить) разметку Open Graph в плагине для WordPress Yoast SEO?

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

Заполняем данные…

Заполняем данные

Теперь если мы поделимся ссылкой на нашу страницу Контактов, то можем увидеть насколько привлекательнее стало её превью:

Согласитесь, больше полезной информации в сравнении с первым случаем — по умолчанию.

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

Плагин для улучшений SEO вашего сайта на WordPress

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

Бесплатной версии вполне достаточно, чтобы начать улучшать SEO своего сайта и повышать своё место в результатах поиска Google, Яндекс и Bing.

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

Страница плагина на WordPress

Основные возможности плагина

  • Управление мета тегами: title и description для возможности предоставить поисковому роботу подробное описание содержимого страницы
  • Анализ SEO предлагает предложения по улучшению возможности поиска вашего текста и гарантирует, что ваш контент соответствует лучшим практикам.
  • Анализ читабельности подскажет, как улучшить структуру и стиль вашего текста.
  • Инклюзивный языковой анализ (доступно только для англоязычных сайтов) — предлагает предложения по написанию более инклюзивного текста, чтобы больше людей могли относиться к вашему контенту.
  • Данные Open Graph. Позволяет Facebook и другим социальным сетям отображать предварительный просмотр с изображениями и текстовой выдержкой при публикации ссылки на ваш сайт.
  • Данные карты Twitter. Позволяет Twitter отображать предпросмотр с изображениями и текстовым отрывком, когда делятся ссылкой на ваш сайт.
  • XML-карта сайта. Карта сайта — это файл, в котором перечислены основные страницы веб-сайта, чтобы поисковые системы могли их найти и просканировать.
  • Шаблоны заголовков и описаний почти для всех типов страниц, чтобы устанавливать единые сниппеты (короткие описания) для поисковой выдачи этих страниц.
  • Хлебные крошки, иначе — Навигационная цепочка (Breadcrumb navigation)
  • Канонические URL-адреса, чтобы не допустить дублирования контента

Заманчивые функции платной (Premium) версии плагина:

  • IndexNow. Автоматическое оповещение поисковых систем, таких как Bing и Yandex, при публикации, обновлении или удалении записи.
  • ИИ генератор заголовков и описаний
  • Автоматические перенаправления во избежание битых ссылок (ошибки 404)
  • Предложения по внутренней перелинковке чтобы упростить навигацию по вашему сайту.
  • Без рекламы 🙂

Отмечу что для плагина существуют ещё и ряд аддонов (дополнений) в виде решений ориентированных на:

Пошаговые инструкции для начинающих:

Как создать карту сайта?

Как добавить разметку Open Graph?

Как создать XML-карту сайта в WordPress?

XML-карта сайта — это файл, в котором перечислены основные страницы вашего веб-сайта, благодаря чему поисковые роботы (Google, Яндекс, Bing и др.) найти и просканировать их все. Это также помогает поисковым системам понять структуру вашего сайта. Вы хотите, чтобы Google просканировал каждую важную страницу вашего сайта. Но иногда страницы оказываются без внутренних ссылок, что затрудняет их поиск. Карта сайта может помочь ускорить обнаружение контента.

XML-карта сайта (Sitemap) — это файл, который содержит информацию в виде ссылок о всех страницах сайта и их структуре.

Sitemap упрощает процесс индексации сайта для поисковых систем (Google, Яндекс, Bing и др.) и помогает им быстро и эффективно находить все страницы вашего сайта. Это особенно полезно для больших сайтов с множеством страниц и сложной структурой.

XML-карта сайта обычно имеет расширение .xml и содержит следующие данные:

  1. URL-адреса страниц сайта.
  2. Дату последнего обновления страницы.
  3. Информация о категориях и тегах, если используется на сайте.

После активации плагина для поисковой оптимизации сайта на WordPress — Yoast SEO, карта сайта должна быть включена и автоматически сгенерирует специальный файл, который будет будет доступен по адресу: ВАШ ДОМЕН/sitemap_index.xml

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

Включение XML Sitemap

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

codeispoetry 016 - Как создать XML-карту сайта в WordPress?

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

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

файл карты сайта

Как изменить порядок отображения категорий в WooCommerce?

Категории товаров в WooCommerce — это основной способ группировки товаров со схожими характеристиками. При необходимости к категориям вы также можете добавить подкатегории.

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

В этой статье мы рассмотрим, как можно изменить очерёдность отображения категорий на клиентской (публичной) части сайта.

Переходим в раздел Категории и методом перетаскивания — выставляем нужный порядок у категорий.

2024 03 05 100423 - Как изменить порядок отображения категорий в WooCommerce?

Наглядный пример:

chrome capture 2024 3 5 1 - Как изменить порядок отображения категорий в WooCommerce?

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

порядок категорий

Это также справедливо и для вывода списка категорий при помощи виджета

виджеты очередность категорий
вывод списка категорий при помощи виджета

Как экспортировать атрибуты товаров в WooCommerce?

Чтобы выгрузить данные об атрибутов товарах с сайта мы можем задействовать встроенный механизм WooCommerce который доступен нам на странице всех товаров. Находясь в этом разделе Все товары мы можем обнаружить две кнопочки Импорта и Экспорта товаров. Выбираем Экспорт.

Image 00000476 - Как экспортировать атрибуты товаров в WooCommerce?

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

инструмент экспорта товаров

Указываем столбец ID (для идентификации товаров) и столбец Атрибуты

выбираем столбцы

Если на вашем сайте существует система Артикулов, то можно выбрать столбик Артикул для идентификации товаров, так как ID это по сути удобно для идентификации товаров внутри WordPress/WooCommerce, а если ваш интернет-магазин взаимодействует в обмене и данных с другими системами, такими как 1С и у вас уже есть система распознавания (идентификации) товаров по артикулу, то вероятно правильным выбором будет задействовать вместо столбца ID столбик Артикул.

Далее нажимаем Сгенерировать CSV и перед нами отобразится процесс генерации файла формата CSV

процесс генерации

Если мы откроем этот файл после загрузки, например, в Excel, то можем испытать лёгкое недоумение от содержания данного файла:

файл Excel

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

Как импортировать файл экспорта в Google Таблицы?

  1. Переходим к разделу создания новых таблиц
  2. Создаём новую Таблицу
создание таблицы

Далее переходим Файл > Импортировать

Файл > Импортировать

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

выбор файла

Выбираем файл который вы экспортировали

файл экспорта из Woocommerce

На этом шаге я не менял настройки, оставив их по умолчанию и просто произвёл импорт данных

импорт данных

Отлично! Теперь наши данные в читабельном формате и дальнейшая работа с ними будет проходит значительно удобнее

импорт данных завершен

Как создать атрибуты товара в WooCommerce?

Задача: Создать атрибуты (характеристики) для товара в интернет-магазине под управлением WordPress + WooCommerce.

Что такое атрибуты в WooCommerce?

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

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

Решение: Переходим в подраздел Атрибуты раздела Товары. Даём имя нашему атрибуту (характеристике) товара и добавляем в систему.

После успешного добавления ваши атрибуты будут появляться в системе. Но может возникнуть и проблема. Ярлык атрибута не может быть более 28 символов, поэтому, если вы увидите подобную ошибку, то исправить её можно путём редактирования Ярлыка — его сокращением.

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

Редактирование атрибута

Рекомендуется создавать (или изменить) Ярлыки на латинские символы, либо правильным переводом: цвет = color, либо транслитерацией, то есть просто превращая кириллические символы в латинские: состав=sostav

Созданным атрибутом можно сразу определить порядок сортировки по умолчанию. Это очень полезная функция, например для указания размеров. Очень удобно когда они идут последовательно в возрастающем порядке: 42, 44, 48, 50, 52 и т.д.

P.S. данному примеру будет соответствовать выбор Название (числовое)

После создания Атрибутов, осталось наполнить их значениями. Это можно сделать сразу, предопределив эти значения для удобства или добавлять значения в момент добавления товара прямо из его карточки. Рассмотри оба варианта.

Добавление значений (вариантов) атрибутов из раздела Атрибуты

Переходим по ссылке Настройка значений нужного атрибута

Image 00000452 - Как создать атрибуты товара в WooCommerce?

По аналогии с добавлением самого атрибута добавляем уже его варианты (значения). Указываем: Имя, Ярлык и нажимаем Добавить

Обратите внимание на примечание:

«Ярлык» — это вариант названия, подходящий для URL. Обычно содержит только латинские буквы в нижнем регистре, цифры и дефисы.

Добавляя варианты цвета я сразу задавал им названия на латинице. В итоге получилось:

добавленные варианты атрибута Цвет

Если требуется отсортировать названия вариантов, то вы уже знаете как это можно сделать 🙂 Только в этом случае нужно в настройке атрибута выбрать значение Имя

в настройке атрибута выбрать значение Имя

Теперь наши значения будут идти в алфавитном порядке

значения будут идти в алфавитном порядке

Как прикрепить атрибут к товару?

Переходим в режим редактирования нужного товара

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

Image 00000458 - Как создать атрибуты товара в WooCommerce?

Добавим существующий атрибут Цвет

Image 00000459 - Как создать атрибуты товара в WooCommerce?

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

атрибуты

Так как наша шапочка имеет красный цвет, добавим ей соответствующее значение:

добавляем значение атрибута и сохраняем

После сохранения изменения вступят в силу и вы можете увидеть в карточке товара на лицевой (публичной) части сайта, в разделе Детали, добавленную характеристику Цвет:

Image 00000462 - Как создать атрибуты товара в WooCommerce?

Добавление атрибутов и значений прямо из карточки товара

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

Рассмотрим пример добавления Страны изготовления. Для этого в режиме редактирования товара, нам необходимо:

  1. выбрать Добавить
  2. Указать Имя атрибута
  3. Указать Значение(я) атрибута. Если значений несколько, то в качестве разделителя выступает вертикальная черта.
  4. Сохранить атрибуты
создание нового атрибута

Теперь на странице товара у нас отображается две характеристики:

характеристики товара

Как поменять местами атрибуты?

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

меняем очередность

Нюансы. Баг или фича?

Добавляя новые атрибуты из карточки товара они не добавляются в общий раздел Атрибутов 🙁 Как мы видим, в списках нет добавленного атрибута Страна

раздел Атрибутов

И при добавлении атрибута для нового товара, ранее добавленный атрибут через карточку товара не доступен для поиска 🙁

не доступен для поиска

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

атрибут Состав

Во всплывающем окне указываем значение

указываем значение

сохраним изменения

сохраним изменения

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

Image 00000475 - Как создать атрибуты товара в WooCommerce?

Ну и не забывайте менять Ярлыки на латиницу 🙂

Архивы по значению атрибута

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

Переходим в режим редактирования атрибута Цвет и включаем Архивы:

Включаем Архивы для атрибута Цвет

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

выборка по цвету

А как вы создаёте атрибуты и с какими трудностями и неожиданностями сталкивались? Напишите в комментариях.

Как сделать 301-ый редирект в WordPress при помощи функции?

Redirect 301 (Moved Permanently) — это код состояния HTTP, который означает, что страница или запрошенный ресурс был окончательно перемещён на новый адрес (URL). В основном Redirect 301 используется для перенаправления пользователей с одной страницы на другую.

Браузер в случае такого ответа перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (говоря языком SEO, вес страницы переносится на новый URL-адрес).

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

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

Не будем ходить вокруг да около, а сразу рассмотрим реальный пример перенаправления со старой страницы с адресом /old-page/ на новую, на адрес /new-page/ :

add_action( 'template_redirect', function() {
	if( is_page( "old-page" ) ){
		wp_redirect( "http://example.ru/new-page/", 301 );
		exit;
	}
} );

Для удобства можно назвать сниппет «Перенаправления 301» и при необходимости добавлять сюда новые.

snippet php

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

браузер DevTools

Комментарий к коду

Нашу безымянную функцию требуется вызывать до отправки, так сказать, в браузер HTML. Для этого вполне подходит хук ‘template_redirect’

Событие удобно использовать для перенаправления, когда WordPress обработал основной запрос и установил все объекты ($wp_query, $post, условные теги), но вывод контента на экран еще не произошёл.

https://wp-kama.ru/hook/template_redirect

Функция is_page() помогает проверить текущую страницу согласно условию и выполнить код только исключительно на ней. В примере я использую проверку по слагу (slug) — эта та часть URL, которая идентифицирует данную страницу.

Но так же в функцию is_page() можно передавать и «айдишник». Возможно вам будет полезно прочесть: Как узнать ID страницы?

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

add_action( 'template_redirect', function() {
	if( is_page( 2 ) ){
		wp_redirect( get_permalink( 14 ), 301 );
		exit; // или die();
	}
} );

Перед нами решение той же задачи, но немного другим путём. Мы указали ID-страниц для условия и получения постоянной ссылки с помощью функции get_permalink()

exit; или die(); необходимо указывать для того, чтобы после перенаправления ничего лишнего не выполнилось.

Как быстро получить краткий пересказ видео на Ютьюб?

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

Рассмотрим простой пример. Относительно недавно Мэтт Мулленвег выступил в Испании на State of the Word 2023 — это ежегодный программный доклад сооснователя проекта WordPress.

Оригинал видео на английском языке. Длительность примерно 40 мин.

Переходим на сервис краткого пересказа 300.ya.ru и вставляем ссылку на видео с YouTube

пересказ от ИИ

Считанные секунды и пересказ готов) Оцените:

Мэтт Малленвег: Современное состояние в 2023 году

  • 00:00:47 Приветствие и основные идеи
    • Видео начинается с приветствия от Росио, которая представляет себя и благодарит всех за присутствие.
    • Затем следует представление исполнительного директора проекта WordPress Джозефы Хейден-Чомпи, которая рассказывает о своем опыте работы над проектом и его развитии.
    • Мэтт Малленберг, соучредитель проекта, также представлен, и он говорит о своем видении и планах на будущее.
  • 00:06:17 Планы на будущее
    • WordPress празднует свое 20-летие, и в этом году было проведено 70 wordcamps по всему миру.
    • В планах на будущее — проведение большего количества мероприятий, включая wordcamp asia в Тайбэе 9 марта.
    • WordPress также работает над улучшением своих функций, включая создание более эффективных встреч и улучшение витрины.
  • 00:10:20 Другие проекты и достижения
    • WordPress также активно участвует в проектах, таких как Openverse, который индексирует открытый лицензионный контент, и игровая площадка, которая позволяет создавать виртуальные машины в браузере.
    • В рамках WordPress также проводятся дни участников и другие мероприятия, которые помогают людям учиться и развиваться в области веб-технологий.
  • 00:13:35 Возможности игровой площадки
    • Возможность сохранения игровой площадки в браузере и обновления после обновления страницы.
    • Возможность загрузки дополнительных расширений PHP, таких как lib xml.
    • Возможность доступа к сети для взаимодействия с API или просмотра плагинов в WP-Admin.
    • Предварительный просмотр новых функций с помощью средства предварительного просмотра запросов WordPress.
  • 00:15:04 Разработка плагинов WordPress
    • Синхронизация игровой площадки с локальным каталогом.
    • Обновление кода на компьютере, изменение цвета администратора с темно-синего на фиолетовый.
    • Синхронизация изменений обратно в игровую площадку.
  • 00:16:03 Тема 2024 года
    • 35 шаблонов для удовлетворения потребностей любого пользователя.
    • Возможность создания портфолио, бизнес-сайтов и других проектов.
  • 00:18:57 Сотрудничество и рабочие процессы
    • Работа над улучшением процесса написания текстов и упрощением рабочего процесса.
    • Создание рабочего прототипа совместной работы в редакторе в режиме реального времени.
    • Введение шаблонов как элементов дизайна и возможность менять местами шаблоны, относящиеся к определенным семантическим категориям.
    • Создание гибрида между шаблонами, который позволяет настраивать текст и глобально обновлять дизайн.
  • 00:24:40 Пользовательские поля и производительность
    • В WordPress используется пользовательский интерфейс для пользовательских полей, позволяющий подключать блоки к пользовательским полям без создания пользовательских блоков.
    • Производительность редактора и интерфейса улучшается, скорость выполнения основных операций увеличивается в два раза, а качество набора текста — в три раза.
  • 00:28:22 Интерактивный API и дизайн администратора
    • В этом году планируется работа над интерактивным API для интерфейсной части, чтобы любой, кто создает сайт с блоками, мог получить аналогичный опыт.
    • Дизайн администратора будет расширяться, чтобы каждый мог настроить WordPress в соответствии со своими потребностями.
  • 00:30:59 Искусственный интеллект и генеративный искусственный интеллект
    • В прошлом году был год искусственного интеллекта, с ростом генеративного искусственного интеллекта и использованием его в WordPress.
    • Эксперимент с использованием Playground и искусственного интеллекта для создания чертежей и взаимодействия с ними. Ссылка
    • Демократизация технологий и WordPress, направленная на демократизацию издательской деятельности, делает технологии доступными для всех.
  • 00:33:23 ИИ и его возможности
    • ИИ может стать персональным репетитором, доступным круглосуточно.
    • ИИ может научить людей всему, что они хотят, и их рост и развитие будут ограничены только их любопытством.
  • 00:35:19 Планы на будущее
    • В 2024 году приоритетной областью будет «освобождение данных».
    • Создание инструментов миграции для WordPress и других CMS.
    • Создание упрощенной системы модерации для миграции.
  • 00:38:49 WordCamp US 2023
    • WordCamp US пройдет в Портленде, штат Орегон.
    • Регистрация новых участников в команде проверки плагинов.
  • 00:40:46 Использование ИИ для перевода
    • Презентация будет переведена на четыре языка с помощью ИИ.
    • Эксперименты с использованием ИИ для перевода на разные языки.

Кстати, этот сервис может стать помощником для создания оглавления для загрузки больших видео на YouTube. Безусловно придётся вносить корректировки, но это позволит всё равно сэкономить не мало времени автору контента.