Обрати сторінку

WooCommerce Products Image Watermark

Для пользователей

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

https://www.youtube.com/watch?v=9ymG2giG2r0&t=2s

Первый способ установки плагина:

  1. Скачайте плагин с вашего BeRocket аккаунта.
  2. Деактивируйте БЕСПЛАТНУЮ версию этого плагина.
  3. Откройте панель администрирования вашего сайта и проследуйте в Плагины Добавить новый Загрузить плагин.
  4. Нажмите Обзор, выберите загруженный zip-файл и нажмите Установить.
  5. Нажмите Активировать.

Второй способ установки плагина:

  1. Скачайте плагин с вашего BeRocket аккаунта.
  2. Деактивируйте БЕСПЛАТНУЮ версию этого плагина.
  3. Откройте ваш сайт через FTP.
  4. Проследуйте в папку WordPress/wp-content/plugins.
  5. Извлеките файлы из загруженного zip-файла и скопируйте файлы в папку WordPress/wp-content/plugins.
  6. Откройте панель администрирования вашего сайта и проследуйте в Плагины.
  7. Найдите Плагин и нажмите Активировать.

Ключ Аккаунта/Плагина

Ключ Аккаунта BeRocket и Ключ Плагина используются для автообновления плагинов сайта BeRocket.

Где найти Ключ Аккаунта?

  1. Откройте сайт BeRocket и войдите в аккаунт (нажмите кнопку Login, которая находится в верхнем меню).
  2. Перейдите в My Account (нажмите кнопку My Account, которая находится в верхнем меню).
  3. В правой части страницы вы можете найти всю информацию о вашей учетной записи BeRocket, включая Ключ Аккаунта:
    .
  4. Вы можете нажать на Ключ Аккаунта и скопировать его.

Где найти Ключ Плагина?

  1. Откройте сайт BeRocket и войдите в аккаунт (нажмите кнопку Login, которая находится в верхнем меню).
  2. Перейдите в My Account (нажмите кнопку My Account, которая находится в верхнем меню).
  3. Нажмите на значок ключа справа от имени плагина WooCommerce Advanced Product Labels:
  4. Вы можете нажать на Ключ Аккаунта и скопировать его.
  5. В левом поле введите любое уведомление для этого ключа и нажмите кнопку Готово, чтобы сохранить.

Активация Ключа Аккаунта/Плагина

Для введения Ключа Аккаунта/Плагина откройте панель администрирования вашего сайта и нажмите BeRocket Ключ Аккаунта.

Как активировать Ключ Аккаунта?

  1. Скопируйте Ключ Аккаунта с сайта BeRocket.
  2. Вставьте этот ключ в поле Ключ Аккаунта.
  3. Нажмите кнопку Тест.
  4. Если вы используете правильный Ключ Аккаунта, вы увидите:
  5. Нажмите кнопку Сохранить изменения.

Как активировать Ключ Плагина?

  1. Скопируйте ключ плагина с сайта BeRocket.
  2. Вставьте этот ключ в поле WooCommerce Advanced Product Labels.
  3. Нажмите кнопку Тест.
  4. Если вы используете правильный ключ плагина, вы увидите:
  5. Нажмите кнопку Сохранить изменения.

Водяной знак

  • Для того, чтобы найти настройки плагина, перейдите к админ-панели вашего сайта и проследуйте WooCommerce→ Products Image Watermark.
  • Выберите водяной знак или введите текст для нужного типа изображения.
  • Дополнительная информация

Настройки

Глобальные настройки

Содержит глобальные настройки для Изображений водяных знаков.

  • Качество изображения в формате JPEG
  • Максимальная высота изображения
  • Максимальная ширина изображения
  • Лимит памяти PHP на вашем сервере

Полный размер изображения и размер изображения “shop_single” (изображение на главной странице товара)

  • Текст на изображении – текст, который будет добавлен к изображению в качестве водяного знака.
  • Повторить текст – повторить текст по изображению
  • Угол – угол поворота текста
  • Размер шрифта – размер шрифта в пикселях (в диапазоне от 8 до 72px) 
  • Цвет шрифта – цвет текста
  • Прозрачность шрифта – прозрачность текста (в диапазоне от 0 до 100).
  • Количество изображений – количество изображений, которые будут добавлены в качестве водяного знака к изображению товара.
  • Селектор изображений:
    • Кнопка Загрузить – выбрать изображение из медиатеки или загрузить новое.
    • Кнопка Удалить – очистить поле с изображениями
    • Размещение и размер блока – Положение и размер блока – можно перемещать серый блок с помощью перетаскивания (drag-and-drop) и изменять его/ Сохранить пропорции.
    • “shop_catalog” image size (изображение страницы магазина и категорий)

2. Создать изображения с водяными знаками

Заменить изображения в реальном времени

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

  • + На новые изображения товаров наносятся водяные знаки без каких-либо действий
  • – Замедление загрузки страницы, где изображения не имеют водяных знаков

Заменить изображения через AJAX

  • Вы можете восстанавливать изображения или добавлять водяные знаки на все изображения товара.
  • Если включена опция “Заменять изображения в реальном времени”, все изображения будут снова заменены.
  1. Сохраните настройки, чтобы применить все изменения к новым водяным знакам.
  2. Нажмите Обновить для замены старых водяных знаков на изображениях с водяными знаками.
  3. Создайте изображения с водяными знаками (нажмите кнопку Создать и ждите)

Не закрывайте эту страницу до завершения процесса.

Пользовательский CSS

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

Аддон

Кнопки медиатеки – кнопки медиатеки WordPress для добавления водяного знака на изображение или восстановления изображения.

Обновление изображений

Чтобы обновить изображения и снова не добавлять на них водяные знаки, нужно всего четыре шага:

  1. Отключите опцию Добавьте водяной знак к изображению при первой загрузке на страницу магазина или на страницу товара в разделе Заменить изображения в реальном времени.
  2. Сохраните настройки.
  3. Нажмите на кнопки Обновить в Заменить изображения через AJAX.
  4. Не закрывайте эту страницу до завершения процесса.

Для разработчиков

Хуки-события

includes/functions.php

br_get_woocommerce_version()

Общественная функция для получения версии WooCommerce

return string. woocommerce version

woocommerce-products-image-watermark.php

Все эти функции находятся в классе BeRocket_image_watermark в качестве статических функций.

admin_init ()

Функция инициализации скриптов и настройки страницы в админ-панели.

options ()

Добавить страницу параметров в админ-меню.

br_get_template_part( $name = ” )

Получить часть шаблона.

  • $name – название шаблона

Шаблоны по умолчанию помещаются в папку плагина woocommerce-products-image-watermark/templates.

Для перезаписи шаблона в папке темы создайте папку с именем woocommerce-image_watermark и поместите новый шаблон с таким же именем в эту папку.

add_watermark_to_images( $post_id )

Добавьте водяные знаки на изображения, прикрепленные к товару с id $post_id.

  • $post_id – id товара

Хуки-фильтры

image_watermark_get_template_part

Шаблон, который используется в плагине. 

Параметры

  1. template – ссылка на шаблон, который будет загружен.
  2. name – название шаблона.

Использование

<?php
function change_image_watermark_get_template_part ( $template, $name ) {
//your code here
    return $template;
}

add_filter( 'image_watermark_get_template_part', 'change_image_watermark_get_template_part', 10, 2 );
?>

br_watermark_check_types

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

Параметры

  1. types – массив с размерами изображений: shop_catalog, shop_single, shop_thumbnail.

Использование

<?php
function change_br_watermark_check_types ( $types ) {
//your code here
    return $types;
}

add_filter( 'br_watermark_check_types', 'change_br_watermark_check_types', 10, 2 );
?>


br_watermark_replace_types

Массив размеров изображения для добавления водяных знаков.

Параметры

  1. types – массив с размерами изображений: shop_catalog, shop_thumbnail, эскиз, 

Использование

<?php
function change_br_watermark_replace_types ( $types ) {
//your code here
    return $types;
}

add_filter( 'br_watermark_replace_types', 'change_br_watermark_replace_types', 10, 2 );
?>


Файлы

  • woocommerce-products-image-watermark.php – основной файл плагина 
  • css – стили плагина:
    • admin.css – стили для настроек плагина
    • colpick.css – стили для блока выбора цвета
    • font-awesome.css – стандартные стили Font Awesome
    • jquery-ui.min.css – стили для jQuery UI
  • fonts – шрифты Font Awesome
  • includes – папка с дополнительными файлами PHP
    • functions.php – общественные функции
    • updater.php – BeRocket Updater для обновления плагинов с сайта BeRocket
  • js – папка с файлами Javascript
    • admin.js – скрипты для настроек плагина
    • colpick.js – скрипты для настроек блока выбора цвета плагина 
  • templates – шаблоны для настроек, стиля списка и кнопок
    • settings.php – настройки главной страницы плагина