Как добавить иконки приложений в WordPress: руководство с примерами

Добавление иконок приложений на сайт WordPress — эффективный способ повысить визуальную привлекательность и удобство для пользователей, особенно если вы продвигаете мобильные приложения или ссылки на App Store и Google Play.

Почему важно использовать иконки приложений на сайте WordPress

Иконки привлекают внимание, помогают быстро ориентироваться и повышают доверие к вашему ресурсу. Особенно актуально для сайтов с мобильной тематикой или SEO-стратегии по продвижению приложений.

Как добавить иконки приложений в WordPress: шаг за шагом

Использование плагинов: Insert Headers and Footers + иконки

Самый простой способ — использование плагинов для вставки пользовательского контента. Например, плагин Insert Headers and Footers.

<!-- Вставить код иконковой кнопки в раздел футера или в нужное место -->
<div class="app-icons">
  <a href="https://play.google.com/store/apps/details?id=yourapp" class="app-icon google-play" target="_blank"><img src="https://wpdream.ru/wp-content/uploads/2023/10/google-play.png" alt="Google Play" /></a>
  <a href="https://apps.apple.com/app/id123456789" class="app-icon app-store" target="_blank"><img src="https://wpdream.ru/wp-content/uploads/2023/10/app-store.png" alt="App Store" /></a>
</div>

Затем добавьте CSS для стилизации:

.app-icons { display: flex; gap: 10px; }
.app-icon img { width: 50px; height: auto; }

Использование плагина Custom Buttons & Icons

Плагин Custom Buttons & Icons позволяет добавлять красивые кнопки с изображениями. Установите и активируйте его, далее создавайте новые кнопки, выбирая иконки из библиотеки или загружая свои.

Пример кода для вставки иконок вручную

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

<div class="wpdream-app-buttons">
  <a href="https://play.google.com/store/apps/details?id=yourapp" target="_blank" class="wpdream-google-play">
    <img src="https://wpdream.ru/wp-content/uploads/2023/10/google-play.png" alt="Google Play" />
  </a>
  <a href="https://apps.apple.com/app/id123456789" target="_blank" class="wpdream-app-store">
    <img src="https://wpdream.ru/wp-content/uploads/2023/10/app-store.png" alt="App Store" />
  </a>
</div>

Добавление стилей для иконок

Обеспечьте корректное отображение, дополнив стиль CSS:

.wpdream-app-buttons { display: flex; gap: 8px; }
.wpdream-google-play img, .wpdream-app-store img { width: 50px; height: auto; transition: transform 0.3s; }
.wpdream-google-play:hover img, .wpdream-app-store:hover img { transform: scale(1.1); }