,

6 октября, 2024

Создаем систему для партнерских программ в WordPress

Всем привет! В рамках реализации задачи по монетизации блога на wordpress мне пришла в голову мысль добавить партнерских программ на свой сайт, пертнерок тех компаний услагами которых я пользуюсь самостоятельно, но для реализации этой задачи нужно немного допилить wordpress, от сторонних плагинов по традиции решил отказаться потому что не хочу =) и к тому же для реализации такой простой задачи достаточно будет возможностей wordpress. Итак, поехали. Далее я опишу процесс создания системы партнерских программ для блога.

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

Открываем functions.php темы и добавляем туда что-то вроде:

add_action('init', 'register_post_types');

function register_post_types()
{
    register_post_type('partner', [
        'label' => null,
        'labels' => [
            'name' => 'Партнерки',
            'singular_name' => 'partner',
            'add_new' => 'Добавить партнерку',
            'add_new_item' => 'Добавление партнерки',
            'edit_item' => 'Редактирование пертнерки',
            'new_item' => 'Новая партнерка',
            'view_item' => 'Смотреть партнерку',
            'search_items' => 'Искать патнерку',
            'not_found' => 'Не найдено',
            'not_found_in_trash' => 'Не найдено в корзине',
            'parent_item_colon' => '',
            'menu_name' => 'Партнерка',
        ],
        'description' => '',
        'public' => true,
        'show_in_menu' => null,
        'show_in_rest' => null,
        'rest_base' => null,
        'menu_position' => null,
        'menu_icon' => null,
        'hierarchical' => false,
        'supports' => ['title', 'thumbnail'], // 'title','editor','author','thumbnail','excerpt','trackbacks','custom-fields','comments','revisions','page-attributes','post-formats'
        'taxonomies' => [],
        'has_archive' => false,
        'rewrite' => true,
        'query_var' => true,
    ]);
}

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

Но по-мимо изображения и название так же требуется добавления реферальной ссылки, для этого потребуется для нового типа с партнерами зарегистрировать кастомезированые поля записей, поэтому добавляем следующий код в functions.php

add_action('add_meta_boxes', 'my_extra_fields_meta_box', 1);

function my_extra_fields_meta_box()
{
    $post_type = 'partner';
    add_meta_box('extra_fields', 'Дополнительные поля', 'extra_fields_box_func', $post_type, 'normal', 'high');
}

function extra_fields_box_func($post)
{
    ?>
    <p>
        Ссылка:
        <label>
            <input style="width: 100%;" type="text" name="extra[link]"
                   value="<?= get_post_meta($post->ID, 'link', 1) ?>"/>
        </label>
    </p>
    <p>
        Комментарий:
        <textarea type="text" name="extra[description]"
                  style="width:100%; height:50px;"><?= get_post_meta($post->ID, 'description', 1) ?></textarea>
    </p>
    <p>
        Количество переходов:
        <input type="text" name="extra[count]" value="<?= get_post_meta($post->ID, 'count', 1) ?>" disabled="disabled">
    </p>
    <input type="hidden" name="extra_fields_nonce" value="<?= wp_create_nonce('extra_fields_nonce_id') ?>"/>
    <?php
}

Я решил для своей системы добавить еще 2 свойства партнера, комментарий — для внутреннего использования и подсчета количества переходов по моей реферальной ссылке.

Для того чтобы дополнительные поля сохранялись так же требуется добавить следующий хук

add_action('save_post', 'my_extra_fields_save_on_update', 0);

function my_extra_fields_save_on_update($post_id)
{
    // базовая проверка
    if (
        empty($_POST['extra'])
        || !wp_verify_nonce($_POST['extra_fields_nonce'], 'extra_fields_nonce_id')
        || wp_is_post_autosave($post_id) || wp_is_post_revision($post_id)
    ) {
        return false;
    }

    $extra = $_POST['extra'];

    // Все ОК! Теперь, нужно сохранить/удалить данные

    // Очищаем все данные
    $extra = array_map('sanitize_text_field', $extra);
    foreach ($extra as $key => $value) {
        // удаляем поле если значение пустое
        if (!$value) {
            delete_post_meta($post_id, $key);
        } else {
            update_post_meta($post_id, $key, $value); // add_post_meta() работает автоматически
        }
    }

    return $post_id;
}

Админка готова! Теперь необходимо доработать шаблоны темы, чтобы партнерские программ начали выводится на сайт.

Забыл кое-что, прежде чем переходить к редактированию шаблонов нужно добавить еще функции для выборки партнера и функцию просирования. Для вывода партнерки я буду использовать рандомную выборку одной партнерской программы из всех. При помощи такой нехитрой функции это можно осуществить. Добавляем в functions.php такую функцию

function get_partner_random() {
    $query = new WP_Query([]);
    $query->query([
        'post_type' => 'partner',
        'post_status' => 'publish',
        'orderby' => 'rand',
        'posts_per_page' => '1'
    ]);

    return $query->posts[0] ?? null;
}

Так как я хочу увеличивать количество переходов на 1 каждый раз при переходе по моей реферальной ссылки требуется добавить функцию проксирования партнерских ссылок. Это можно сделать довольно просто добавив следующий хук в functions.php

add_action( 'init', 'init_proxy' );

function init_proxy() {
    if (
            isset($_GET['action']) &&
            $_GET['action'] == 'partner' &&
            isset($_GET['id']) &&
            is_numeric($_GET['id'])
    ) {
        $query = new WP_Query([]);
        $query->query([
            'post_type' => 'partner',
            'ID' => (int)$_GET['id'],
            'post_status' => 'publish',
            'posts_per_page' => '1'
        ]);
        $posts = $query->get_posts();
        if (!empty($posts[0]->ID)) {
            $count = (int)get_post_meta($posts[0]->ID, 'count', true);
            $count++;
            update_post_meta($posts[0]->ID, 'count', $count);
            header('Location: ' . get_post_meta($posts[0]->ID, 'link', true));
            exit;
        }
    }
}

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

Добавляем новый шаблон для партнерок:

<?php
/** @var WP_Post $partner */
$partner = get_partner_random();
?>
<?php if ($partner): ?>
<article>
    <header class="entry-header">
        <header class="entry-header">
            <h2 class="entry-title"><a href="<?php echo sprintf('/?action=partner&id=%d', $partner->ID) ?>" rel="bookmark"><?php echo $partner->post_title?></a></h2>
        </header>
        <div class="post-thumbnail">
                <a href="<?php echo sprintf('/?action=partner&id=%d', $partner->ID) ?>">
                    <?php echo get_the_post_thumbnail( $partner->ID, 'large'); ?>
                </a>
        </div><!-- .post-thumbnail -->
        <div class="nav-links">
            <div class="nav-next kc-nav-links">
                <a href="<?php echo sprintf('/?action=partner&id=%d', $partner->ID) ?>">Взглянуть →</a>
            </div>
        </div>
    </header>
</article>
<?php endif ?>

И далее добавляем логику вывода этого шаблона в index.php темы

get_template_part( 'header' );

				if ( have_posts() ) :

                    $i = 1;
					while ( have_posts() ) :

						the_post();

						get_template_part( 'content' );

						// If comments are open or we have at least one comment, load up the comment template.
						if ( comments_open() || get_comments_number() ) :
							comments_template();
						endif;

                        if ($i % 5 == 0) {
                            get_template_part( 'partner' );
                        }

                    $i++;
					endwhile;

				else :

					get_template_part( 'content', 'none' );

				endif;
				?>

В этом куске кода я скинул шаблон полностью для наглядности, но по-сути вся правка заключается в добавлении вот этой простой логики:

                        if ($i % 5 == 0) {
                            get_template_part( 'partner' );
                        }

Этот код будет отображать рандомную партнерку после каждых 5 постов

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

А если вам нужна разработка под WP или любая другая помощь по php, можете написать мне в любое время в мой телеграмм на странице профайла

, ,

14 августа, 2024

Организация автодиплоя с BitBucket в WordPress

Доработка моего блога пошла быстрее и файлики стало неудобно заливать по штучно через ssh поэтому пришло время настроить автодеплой. В своих разработках я использую чаще всего git на Bitbucket.

Сделать автодеплой для связки Bitbucket+Wordpress не состовляет большого труда. Далее в статье я покажу как это достаточно просто можно организавать.

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

$ git clone git@bitbucket.org:<repository>
$ echo 'www/wp-config.php' >> .gitignore
$ echo '.env' >> .gitignore
$ git add *
$ git push 

Теперь переходим на сервер на котором планируем осуществлять автодеплой. Нам потребуется создать публичный ключ ssh для пользователя от которого будет осуществляться автодеплой ( он же должен быть владельцем файлов сайта на сервере ). Для моего сайта таким пользователем является пользователь www-data, но у него нет shell поэтому генерацию ключей нужно будет осуществить при помощи команды sudo

$ sudo -u www-data ssh-keygen -t rsa

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

$ cat <dir_home_user_www-data>/.ssh/id_rsa.pub

Копируем в буфер обмена то что отобразилось и идем на битбакет с этим


Переходим в раздел Ключи доступа в настройках репозитория нашего сайта

Нажимаем Add key

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

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

Жамкаем на добавление веб-хука

Заполняем название веб-хука
Обязательно указываем адрес к нашему скрипту автодеплоя
Выбираем триггером PUSH событие ( наш скрипт будет вызываться когда в Битбакет будет запушены изменения ) и не забываем проставить статус активности веб-хука


Вот и все, теперь переходим к созданию скрипта деплоя.

<?php

$root_dir = realpath(exec('pwd').'/..');
$result = exec(sprintf('cd %s ; git fetch ; git pull', $root_dir));

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

Теперь мы можем выкачать репозиторий с сайтом на наш удаленный сервер.
Делаем клон рядом с нашей директорией на которую указывает настройки http сервера.
Чаще всего это /var/www

$ cd /var/www
$ sudo -u www-data git clone git@bitbucket.org:wikide/killercoder.git killercoder_git 

И переименовываем директории

$ mv killercoder killercoder_old ; mv killercoder_git killercoder

Теперь мы имеем рабочий сайт, который подключен к репозиторию
И при выполнение команды git push в ветку main будет происходить автоматический деплой на боевом сервере.

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

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

,

4 августа, 2024

Автопубликация постов WordPress в Telegram

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

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

Итак, для репоста в свой телеграм канал, нам потребуется сайт на WordPress, телеграм канал и токен бота, который потребуется получить через папу ботов телеграмма — @BotFather

Открываем @BotFather пишим ему команду

/newbot

В ответ от вас потребуется придумать и ввести имя бота и имя бота с постфексом _bot
После этого папа ботов сгенерирует для вас токен для HTTP API

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

после этого требуется отредактировать wp-config.php и добавить туда константу:

define( 'TELEGRAM_BOT_TOKEN', '<TOKEN>' );

<TOKEN> заменить на тот токен, который мы получили при создании нового бота через @BotFather

После этого нам потребуется определить ID канала для того, чтобы передать нашему боту информацию о том в какой чат требуется отправлять сообщения. В моем случае, я использовал закрытый канал, поэтому мне потребовалось выполнить следующие действия для получения ID канала

  1. Добавляем в качестве администратора нашего новорожденного бота на наш канал
  2. Публикуем тестовый пост ( который потом будет не жалко удалить )
  3. Выполняем элементарный запрос curl
    curl —location ‘https://api.telegram.org/bot<TOKEN>/getUpdates’
  4. В ответ получаем ID нашего чата, который вставляем в wp-config.php
define( 'TELEGRAM_CHANNEL_ID',  <ID_CHANNEL> );

Теперь все готово к написанию нашего основного функционала!

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

В данном случае нас интересуют только новые посты, поэтому мы будем использовать событие WordPress — save_post

Регистрируем новую функцию, которая будет выполнятся каждый раз, когда на сайте будет опубликован новый пост

add_action( 'save_post', 'send_telegram' );

Теперь, напишем код функции send_telegram

function send_telegram( $post_id ) {
    $post = get_post($post_id);
    $is_new = $post->post_date === $post->post_modified;
    if (  !$is_new || wp_is_post_revision( $post_id ) || $post->post_status != 'publish')
        return;
    message_to_telegram( $post );
}

Эта функция выполняет проверяет является ли пост новым публичным и не ревизией поста и если эти условия выполняются, то вызывается функция message_to_telegram

function message_to_telegram($post)
{
    $url = get_permalink($post->ID);
    $text = preg_replace('/[\n\r]+/s', "\n\n", strip_tags($post->post_content));
    if (strlen($text) > 500) {
        $text = substr($text, 0, 500) . '...';
    }
    $ch = curl_init();
    $ch_post = [
        CURLOPT_URL => sprintf('https://api.telegram.org/bot%s/sendMessage', TELEGRAM_BOT_TOKEN),
        CURLOPT_POST => true,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 10,
        CURLOPT_POSTFIELDS => [
            'chat_id' => TELEGRAM_CHANNEL_ID,
            'parse_mode' => 'HTML',
            'text' => sprintf("<a href=\"%s\">%s</a> %s \n\n<a href=\"%s\">Взглянуть ?</a>", $url, $post->post_title, $text, $url),
        ]
    ];

    curl_setopt_array($ch, $ch_post);
    curl_exec($ch);
}

Эта функция выполняет отправку ссылку и первые 500 символов нового поста в канал телеграм

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

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

Docker + Wordpress

, ,

31 июля, 2024

Поднимаем локально докер для WordPress

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

Когда-то давно еще во допотоные времена до ядерной войны в 18 веке лет 5 назад мы делали это при помощи вирутальной машины, которая работала через vagrant или вообще разворачивали всю экосистему локально, но сейчас времена наступили другие и появилась докеризация

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

Тут же я хотел продемонстрировать простое решение на докере, которое позволяет развернуть локально такой простой блок на WordPress как этот блог. Итак поехали.

Для начала создаем файл .env с таким содержимым

# префикс, который мы будем использовать для наименования контейнеров в докере
PREFIX=wp

# пароль root для локального контейнера с mysql
MYSQL_ROOT_PASSWORD=somewordpress

# название базы данных root для локального контейнера с mysql
MYSQL_DATABASE=wordpress

# имя пользователя базы данных для локального контейнера с mysql
MYSQL_USER=wordpress

# пароль пользователя базы данных для локального контейнера с mysql
MYSQL_PASSWORD=wordpress

# хоста базы данных на боевом сервере
MYSQL_REMOTE_HOST=remote_host_address

# название базы данных на боевом сервере
MYSQL_REMOTE_DATABASE=remote_wp

# имя пользователя базы данных на боевом сервере
MYSQL_REMOTE_USER=user_db_read

# пароль пользователя базы данных на боевом сервере
MYSQL_REMOTE_PASSWORD=password_db_read

Тут все понятно по комментариям, единственное, что может вызвать вопрос это данные удаленного сервер mysql. Эти данные понадобятся для синхронизации с рабочей базой данных, о котором я напишу ниже. Стоит только отметить, что я рекомендую создать отдельную учетную запись на стороне боевого сервера у которой будет возможность только чтения из базы данных, чтобы в случае утечки этих данных эти данные не могли бы использовать для изменений данных на боевом сервере.

Далее создаем docker-compose.yml

services:
  db:
    container_name: ${PREFIX}-db
    # We use a mariadb image which supports both amd64 & arm64 architecture
    image: mariadb:10.6.4-focal
    # If you really want to use MySQL, uncomment the following line
    #image: mysql:8.0.27
    command: '--default-authentication-plugin=mysql_native_password'
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
    expose:
      - 3306
      - 33060
    ports:
      - 3306:3306
      - 33060:33060
  wordpress:
    container_name: ${PREFIX}-wp
    image: wordpress:latest
    volumes:
      - ./www:/var/www/html
    ports:
      - 8082:80
    restart: always
    environment:
      - WORDPRESS_DB_HOST=db
      - WORDPRESS_DB_USER=${MYSQL_DATABASE}
      - WORDPRESS_DB_PASSWORD=${MYSQL_PASSWORD}
      - WORDPRESS_DB_NAME=${MYSQL_DATABASE}
      - WORDPRESS_DEBUG=false
volumes:
  db_data:

Это основной файл нашей докер системы при использовании которого будет запущено 2 контейнера, контейнер с базой данных mysql и контейнер с образом wordpress

Все настройки перечислять не буду ( почитаете документацию если будет кому нужно ) отмечу только то что в ports: мы биндим порты на локальную машину http будет доступен на порте 8082, а mysql на порту 3306 так же хочу отметить еще что в секции valumes: контейнера wordpress мы биндим локальную директорию ./www в которой будут хранится файлы wordpress. В нее нужно будет развенуть архив с wordpress или скопировать файлы wordpress с удаленного хостинга.

В итоге у нас получается вот такая директория проекта с файлом .env, docker-compose.yml и директорией www с файлами wordpress, если не хотите прописывать данные доступов к базе данных вручную, то перед запуском сборки докера удалите файл wp-config.php. Контейнер wordpress создаст его вручную и пропишет в него доступы из docker-compose.yml

Далее запускаем вот такую простую команду

$ docker compose up -d

Наслаждаемся процессом скачки образов и сборки контейнеров

Если вам повезло, то после этого можете зайти по адресу http://localhost:8082 откроется ваш wordpress

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

Итак, чтобы автоматзировать рутинные задачи создадим Makefile.

Makefile — это такая крутая штука, которая была придумана еще в далкие времена, когда программы компилировали, а программисты еще знали как очищать в своих программах память от мусора и что такое язык С. В Makefile можно перечислять инструции которые потом можно выполнять в той директории в которой присутствует этот файл, вот такой Makefile у меня получился

include .env
export
.DEFAULT_GOAL = help
.PHONY: help

help:
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

up:
	@docker compose up -d

build:
	@docker compose up --build -d

down:
	@docker stop `docker ps -a -q`

shell:
	@docker exec -it $(PREFIX)-wp bash

drop-db:
	@docker exec -it $(PREFIX)-db mysql -e 'DROP DATABASE $(MYSQL_DATABASE) ; CREATE DATABASE $(MYSQL_DATABASE)' -uroot -p$(MYSQL_ROOT_PASSWORD)

sync: drop-db
	@ssh $(MYSQL_REMOTE_HOST) mysqldump -u$(MYSQL_REMOTE_USER) -p$(MYSQL_REMOTE_PASSWORD) $(MYSQL_REMOTE_DATABASE) | docker exec -i $(PREFIX)-db mysql -u$(MYSQL_USER) -p$(MYSQL_PASSWORD) $(MYSQL_DATABASE)

После этого чтобы запустить наш докер с wordpress достаточно будет ввести команду

$ make up

Для того чтобы пересобрать контейнеры

$ make down

Остановить докер

$ make down

И самая интересная команд, команда синхронизации базы данных докера с базой данных боевого сервера

$ make sync

Она удаляет полностью базу данных в докере и полностью забирает ее с боевого хостинга, после этой операции у вас в контейнере базы данных будет полная копия базы боевого сайта с wordpress

В целом это все. Если вдруг возникнут какие-то вопросы и замечания, то можете писать в комменатрии или мне в телеграм, так же если кому-то требуется разработка сайта на wordpress пишите сюда :)

,

29 июля, 2024

Запиливаем удобный блок донатов в WordPress

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

Сначала добавил обычный текстовый блок, но вряд ли кто-то станет выделять и копировать текст для того чтобы отправить куда-то деньги, тогда я захотел немного упросить процесс и решил подключить javascript для решения этой задачи. От поиска готового решения для WP отказался так как для такой ерунды это не целесообразно, а всевозможные расширения и специальные плагины еще и слишком ресурсоемкие, к тому же я вспомнил что Я Ж программист и решил самостоятельно на коленки сделать свое решение. Как по мне так получилось достаточно неплохо, результат можете посмотреть тут ( а заодно и воспользоваться функционалом =) )

Итак, вот код:

Добавляем в стили шаблона css

.term {
	cursor: pointer;
	color: #2f8eff;
	text-decoration: none;
	border-bottom: 1px dashed #2f8eff;
}
.term:after {
	padding-left: 3px;
	content: url('/uploads/donate/copy.svg');
	display: inline-block;
	width: 20px;
	height: 20px;
}
.tooltiped {
	position: relative;
}
.tooltiped .tooltip {
	position: absolute;
	right: 0;
	top: 0;
	visibility: hidden;
	opacity: 0;
	transition: ease 1s;
	background-color: #FFF;
	z-index: 999;
}
.tooltiped:hover .tooltip {
	position: absolute;
	top: 20px;
	visibility: visible;
	opacity: 1;
}
.tooltiped .tooltip .tooltip-content {
	max-width: 150px;
}
.tooltiped .tooltip .tooltip-content img {
	width: 200px;
}
.tooltiped .tooltip .tooltip-content,
.tooltiped .tooltip .tooltip-content a {
	color: #fff;
}
.promp {
	border-radius: 3px;
	background: rgba(47, 142, 255, 0.5);
	position: absolute;
	top: -40px;
	right: -100px;
	padding: 3px;
}

Добавляем в шаблон небольшой javascript:

    window.onload = () => {
        document.querySelectorAll(".term").forEach(function(e) {
            e.addEventListener("click", function() {
                navigator.clipboard.writeText(e.innerText).then(function() {
                    e.insertAdjacentHTML('beforebegin', '<div class="promp">скопировано</div>');
                    setTimeout(function(){
                        document.querySelectorAll(".tooltiped .promp").forEach(function(p) {
                            p.remove();
                        });
                    },1000);
                }).catch(function (error) {
                    console.error('Error:', error);
                });
            });
            e.addEventListener("mouseover", () => {
                e.insertAdjacentHTML('afterEnd', '<div class="tooltip"><div class="tooltip-content"><img src="' + e.dataset.url + '" /></div></div>');
            });
        });
    }

Ну и собственно блок с реквизитами:

<p>
    <span class="tooltiped">
        <strong>Карта ( Т-банк ):</strong> <span class="term" data-url="">5536913774062992</span><br>
    </span>
    <span class="tooltiped">
        <strong>USDT (Сеть Solana):</strong> <span class="term" data-url="/uploads/donate/USDT.jpg">HEzoskh3Gmehztu578DWFzq3PBmsoCZSVkzM25AYtCmQ</span> <br>
    </span>
    <span class="tooltiped">
        <strong>BTC:</strong> <span class="term" data-url="/uploads/donate/BTC.jpg">bc1qmnze7qda4eutpzyzjesyr05p0cf4myfrppqz2f</span><br>
    </span>
    <span class="tooltiped">
        <strong>TON:</strong> <span class="term" data-url="/uploads/donate/TON.jpg">UQC7ZauWx4qlSknEd-Ag9NEF5jXq3QT7sd8nJtWRPgWdWBj0</span><br>
    </span>
    <span class="tooltiped">
        <strong>Litecoin:</strong> <span class="term" data-url="/uploads/donate/LTC.jpg">ltc1qlphwcvh0lzmewuupjas3k2uh6d5sjdpcnxyvp0</span><br>
    </span>
    <span class="tooltiped">
        <strong>Ethereum:</strong> <span class="term" data-url="/uploads/donate/ETH.jpg">0x834C17E4bd362AAd6Ba85A665197DE3111f9b7D2</span><br>
    </span>
    <span class="tooltiped">
        <strong>DASH:</strong> <span class="term" data-url="/uploads/donate/DASH.jpg">XgkG5z3zoUATHCKWAP9W76qMTR8938J5ev</span><br>
    </span>
    <span class="tooltiped">
        <strong>XRP:</strong> <span class="term" data-url="/uploads/donate/XRP.jpg">rLnU6E5DSpWNeo2xEDfARpo2jDR1ymWRkh</span><br>
    </span>
    <span class="tooltiped">
        <strong>XLM:</strong> <span class="term" data-url="/uploads/donate/XLM.jpg">GDV3OMVJYL6LJI2HKXNBKQYYVTBQ3LY2LOX2DZVNCYPXV26JI4BZJNLX</span><br>
    </span>
    <span class="tooltiped">
        <strong>HBAR:</strong> <span class="term" data-url="/uploads/donate/HBAR.jpg">0.0.5028861</span><br>
    </span>
    <span class="tooltiped">
        <strong>Solana:</strong> <span class="term" data-url="/uploads/donate/SOL.jpg">HEzoskh3Gmehztu578DWFzq3PBmsoCZSVkzM25AYtCmQ</span><br>
    </span>
    <span class="tooltiped">
        <strong>Cardano:</strong> <span class="term" data-url="/uploads/donate/ADA.jpg">addr1v9pkq5weeqz33kc8aljul5wj4yslr8zxe6flwfan2psvquszy73dg</span>
    </span>
</p>

Готово! =)