Как добавить кнопку Telegram в Kadence Simple Share

В плагине Kadence Simple Share есть кнопки для популярных соцсетей: VK, Facebook, WhatsApp, Email и других. Но в некоторых версиях плагина нет отдельной кнопки Telegram.

Добавить ее можно вручную, без изменения файлов плагина. Это важно: если редактировать сам плагин, изменения пропадут после обновления. Поэтому лучше использовать отдельный PHP-сниппет через WPCode или Code Snippets.

Что получится

После добавления кода рядом с кнопками шаринга появится новая кнопка Telegram. При клике она будет открывать стандартное окно Telegram Share и передавать туда:

• ссылку на текущую страницу;
• заголовок текущей записи.

Код для добавления Telegram

Добавьте этот код в WPCode → Code Snippets → Add Snippet → PHP Snippet:

/**
 * Добавляет кнопку Telegram в Kadence Simple Share.
 */
add_action( 'wp_footer', function () {
    if ( is_admin() ) {
        return;
    }
    ?>
    <style>
        .kt_telegram_share {
            background: #229ED9 !important;
            color: #fff !important;
        }

        .kt_telegram_share:hover,
        .kt_telegram_share:focus {
            background: #1D8EC2 !important;
            color: #fff !important;
        }

        .kt_telegram_share svg {
            width: 1em;
            height: 1em;
            display: block;
            fill: currentColor;
        }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.kt_simple_share_container').forEach(function (container) {
            var hasShareLinks = Array.from(container.children).some(function (child) {
                return child.matches && child.matches('a[class^="kt_"][class*="_share"]');
            });

            if (!hasShareLinks || container.querySelector('.kt_telegram_share')) {
                return;
            }

            var pageUrl = encodeURIComponent(window.location.href.split('#')[0]);
            var pageTitle = encodeURIComponent(document.title);

            var telegram = document.createElement('a');
            telegram.className = 'kt_telegram_share';
            telegram.href = 'https://t.me/share/url?url=' + pageUrl + '&text=' + pageTitle;
            telegram.target = '_blank';
            telegram.rel = 'noopener noreferrer';
            telegram.setAttribute('aria-label', 'Telegram');
            telegram.setAttribute('data-tooltip', 'Telegram');
            telegram.setAttribute('data-placement', 'bottom');
            telegram.setAttribute('data-placement-mobile', 'bottom');

            telegram.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.94 4.16a1.35 1.35 0 0 0-1.39-.2L3.23 10.64c-.88.35-.85 1.6.05 1.9l4.4 1.43 1.7 5.36c.27.84 1.35 1.06 1.93.4l2.45-2.78 4.48 3.3c.75.55 1.82.14 2-.78l3-13.77c.14-.62-.12-1.24-.66-1.54ZM8.55 13.2l8.58-5.34c.16-.1.33.1.2.24l-7.1 6.42-.27 3.13-1.41-4.45Zm2.2 4.5.2-2.25 1.55 1.14-1.75 1.11Z"></path></svg>';

            var whatsapp = container.querySelector('.kt_whatsapp_share');
            var email = container.querySelector('.kt_email_share');

            if (whatsapp && whatsapp.nextSibling) {
                container.insertBefore(telegram, whatsapp.nextSibling);
            } else if (email) {
                container.insertBefore(telegram, email);
            } else {
                container.appendChild(telegram);
            }
        });
    });
    </script>
    <?php
});

Настройки сниппета

В WPCode выберите:

Code Type: PHP Snippet
Location: Frontend Only
Auto Insert: Run Everywhere
Status: Active

После сохранения очистите кеш сайта и браузера.

Как работает код

Код добавляется в футер сайта через WordPress-хук:

add_action( 'wp_footer', function () {

Это значит, что он загружается на внешней части сайта, где уже есть HTML-кнопки Kadence Simple Share.

Проверка:

if ( is_admin() ) {
    return;
}

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

Дальше идет CSS. Он задает кнопке Telegram фирменный цвет:

background: #229ED9;

Это основной корпоративный цвет Telegram. При наведении используется чуть более темный оттенок:

background: #1D8EC2;

Затем JavaScript ищет контейнеры Kadence Simple Share:

document.querySelectorAll('.kt_simple_share_container')

Внутри них плагин хранит кнопки VK, Facebook, WhatsApp, Email и другие.

Проверка:

if (!hasShareLinks || container.querySelector('.kt_telegram_share')) {
    return;
}

делает две вещи:

• не добавляет Telegram туда, где нет кнопок шаринга;
• не добавляет кнопку повторно, если она уже есть.

Дальше код берет URL текущей страницы:

var pageUrl = encodeURIComponent(window.location.href.split('#')[0]);

и заголовок страницы:

var pageTitle = encodeURIComponent(document.title);

После этого создается ссылка Telegram:

telegram.href = 'https://t.me/share/url?url=' + pageUrl + '&text=' + pageTitle;

Это официальный формат Telegram Share. Он открывает Telegram и передает ссылку с текстом.

SVG внутри telegram.innerHTML — это иконка Telegram. Она встроена прямо в код, поэтому не нужно подключать отдельный файл изображения или библиотеку иконок.

В конце код вставляет кнопку после WhatsApp:

container.insertBefore(telegram, whatsapp.nextSibling);

Если WhatsApp нет, кнопка вставляется перед Email. Если нет и Email, она добавляется в конец списка.

Почему ссылка может не отображаться на локальном сайте

Если вы тестируете сайт на локальном домене, например:

localhost
wordpressbook.local
site.test

Telegram может не показывать ссылку или предпросмотр. Это нормально. Серверы Telegram не могут открыть локальный сайт на вашем компьютере.

На живом сайте с публичным адресом вида:

https://example.com/post-name/

ссылка будет передаваться корректно.

Что писать в Tooltip Settings

В настройках Kadence Simple Share есть поля:

Tooltip text before social network name
Tooltip text before email

Можно оставить их пустыми. Но если сайт на русском, удобно заполнить так:

Поделиться в

для соцсетей, и:

Отправить по

для email.

Тогда подсказки будут выглядеть так:

Поделиться в Telegram
Отправить по Email

Итог

Такой способ не меняет файлы Kadence Simple Share и не ломается при обновлении плагина. Код просто находит уже готовые кнопки шаринга на странице и добавляет к ним Telegram с правильной ссылкой, цветом и иконкой.