Создание динамических иконок в WordPress с помощью REST API и Vue.js

В современных проектах на WordPress часто возникает необходимость создавать динамические иконки, которые меняются в зависимости от пользовательских данных или состояния сайта. В этом материале мы рассмотрим, как с помощью REST API WordPress и фронтенд-фреймворка Vue.js реализовать динамические иконки, которые можно использовать в любых частях сайта — в меню, в контенте или в админке.

Что такое REST API в WordPress и зачем он нужен для динамических иконок

REST API — это интерфейс, который позволяет обращаться к данным WordPress из внешних приложений или с клиентской части сайта (JavaScript). Благодаря REST API можно запрашивать, создавать, обновлять и удалять данные, такие как посты, таксономии, пользовательские поля и многое другое.

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

Используя REST API вместе с современными фронтенд-технологиями, такими как Vue.js, мы можем создать интерактивный и гибкий компонент иконок, который будет подгружать и менять иконки без перезагрузки страницы.

Подготовка к реализации: создание кастомного REST API эндпоинта для иконок

Чтобы наше приложение могло получать данные об иконках, создадим кастомный REST API эндпоинт. В файле functions.php вашей темы или в отдельном плагине добавьте следующий код:

add_action('rest_api_init', function () {
  register_rest_route('wpicons/v1', '/icon/(?P<name>[a-zA-Z0-9_-]+)', array(
    'methods' => 'GET',
    'callback' => 'wpicons_get_icon_data',
  ));
});

function wpicons_get_icon_data($request) {
  $icon_name = sanitize_text_field($request['name']);

  // Здесь можно добавить логику получения данных иконки из базы или файлов
  $icons = array(
    'heart' => array('svg' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#FF0000"/></svg>'),
    'star' => array('svg' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-0.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#FFD700"/></svg>'),
  );

  if (isset($icons[$icon_name])) {
    return rest_ensure_response($icons[$icon_name]);
  } else {
    return new WP_Error('icon_not_found', 'Иконка не найдена', array('status' => 404));
  }
}

В данном примере мы создаем эндпоинт /wp-json/wpicons/v1/icon/{name}, который возвращает SVG-код иконки по ее имени. Вы можете расширить массив $icons или подключить получение SVG из файлов или базы данных.

Создание Vue.js компонента для динамических иконок

Теперь создадим Vue.js компонент, который будет обращаться к нашему REST API и отображать иконки на странице.

<template>
  <div v-html="svg" class="wpicons-icon"></div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      svg: ''
    }
  },
  watch: {
    name: {
      immediate: true,
      handler(newName) {
        this.fetchIcon(newName);
      }
    }
  },
  methods: {
    fetchIcon(name) {
      fetch(`/wp-json/wpicons/v1/icon/${name}`)
        .then(response => {
          if (!response.ok) {
            throw new Error('Иконка не найдена');
          }
          return response.json();
        })
        .then(data => {
          this.svg = data.svg;
        })
        .catch(error => {
          this.svg = '<!-- Иконка не найдена -->';
          console.error(error);
        });
    }
  }
}
</script>

<style scoped>
.wpicons-icon svg {
  width: 24px;
  height: 24px;
}
</style>

Компонент принимает имя иконки через пропс name, запрашивает SVG через REST API и вставляет его в DOM с помощью v-html. Такой подход позволяет менять иконки динамически на клиенте без перезагрузки.

Пример использования компонента на странице WordPress

Чтобы использовать Vue.js компонент в WordPress, нужно подключить сам фреймворк и собрать компонент через сборщик (Webpack, Vite) или подключить через CDN. Для простоты, предположим, что у вас есть готовый бандл, и вы добавили скрипт на страницу.

В HTML-шаблоне добавьте контейнер для Vue:

<div id="wpicons-app">
  <dynamic-icon name="heart"></dynamic-icon>
</div>

И инициализируйте Vue-приложение в отдельном скрипте:

import Vue from 'vue';
import DynamicIcon from './components/DynamicIcon.vue';

new Vue({
  el: '#wpicons-app',
  components: {
    DynamicIcon
  }
});

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

Расширение функционала: кэширование иконок и поддержка параметров

Для повышения производительности полезно реализовать кэширование SVG на стороне WordPress. Это можно сделать через transient API или файлы кэша. Например, при первом запросе SVG сохранять в transient на сутки:

function wpicons_get_icon_data($request) {
  $icon_name = sanitize_text_field($request['name']);
  $cache_key = 'wpicons_svg_' . $icon_name;
  $svg = get_transient($cache_key);

  if (false === $svg) {
    // Логика получения SVG
    $icons = array(
      'heart' => '<svg ...>...</svg>',
      'star' => '<svg ...>...</svg>'
    );

    if (!isset($icons[$icon_name])) {
      return new WP_Error('icon_not_found', 'Иконка не найдена', array('status' => 404));
    }

    $svg = $icons[$icon_name];
    set_transient($cache_key, $svg, DAY_IN_SECONDS);
  }

  return rest_ensure_response(array('svg' => $svg));
}

Также можно добавить параметры к REST API, например, цвет или размер, и на лету модифицировать SVG. Для этого расширьте эндпоинт и Vue.js компонент.

Добавление параметров в REST API

В функции обратного вызова добавьте чтение параметров:

function wpicons_get_icon_data($request) {
  $icon_name = sanitize_text_field($request['name']);
  $color = sanitize_text_field($request->get_param('color')) ?: '#000000';

  // Получаем SVG и заменяем цвет
  $svg_template = '<svg ... fill="{color}">...</svg>';
  $svg = str_replace('{color}', $color, $svg_template);

  return rest_ensure_response(array('svg' => $svg));
}

Передача параметров из Vue.js

fetch(`/wp-json/wpicons/v1/icon/${name}?color=${encodeURIComponent(this.color)}`)

Таким образом можно гибко управлять отображением иконок.

Заключение по созданию динамических иконок с REST API и Vue.js

Комбинация REST API WordPress и Vue.js позволяет создавать мощные и гибкие решения для динамических иконок. Это особенно полезно для проектов с кастомизацией интерфейса и интерактивностью, где иконки меняются в зависимости от контекста.

Если вы используете темы или плагины от WPSHOP, например, темы Root или плагины Expert Review, то интеграция таких иконок в них станет еще проще и удобнее благодаря современному API и расширяемости.