Время чтения: 2 мин.
Создание плагина для WordPress, который добавляет кнопку копирования кода к блокам с кодом в контенте, можно реализовать с помощью JavaScript и хуков WordPress. Вот пошаговое руководство:
Шаги для создания плагина:
- Создайте папку для плагина:
- В директории
wp-content/plugins/создайте папку, например,copy-code-button.
- Создайте основной файл плагина:
- Внутри папки
copy-code-buttonсоздайте файлcopy-code-button.php.
- Добавьте код плагина:
Вставьте следующий код в файлcopy-code-button.php:
<?php
/*
Plugin Name: Copy Code Button
Description: Добавляет кнопку копирования кода к блокам <pre><code> в контенте.
Version: 1.0
Author: Ваше имя
*/
// Подключаем стили и скрипты
function ccb_enqueue_scripts() {
// Подключаем стили
wp_enqueue_style(
'ccb-style',
plugins_url('copy-code-button.css', __FILE__)
);
// Подключаем скрипты
wp_enqueue_script(
'ccb-script',
plugins_url('copy-code-button.js', __FILE__),
array(), // Зависимости
null,
true // Подключаем в футере
);
}
add_action('wp_enqueue_scripts', 'ccb_enqueue_scripts');
// Добавляем кнопку к блокам <pre><code>
function ccb_add_copy_button_to_code_blocks($content) {
// Регулярное выражение для поиска блоков <pre><code>
$pattern = '/<pre>(.*?)<\/pre>/is';
$content = preg_replace_callback($pattern, function($matches) {
// Добавляем кнопку и оборачиваем блок в контейнер
return '<div class="ccb-code-container"><button class="ccb-copy-button" onclick="ccbCopyCode(this)">Копировать</button>' . $matches[0] . '</div>';
}, $content);
return $content;
}
add_filter('the_content', 'ccb_add_copy_button_to_code_blocks');- Создайте файл стилей:
- В той же папке создайте файл
copy-code-button.cssи добавьте в него стили для кнопки и контейнера:
.ccb-code-container {
position: relative;
margin: 20px 0;
}
.ccb-copy-button {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #0073aa;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
}
.ccb-copy-button:hover {
background-color: #005177;
}
pre {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}- Создайте файл JavaScript:
- В той же папке создайте файл
copy-code-button.jsи добавьте в него скрипт для копирования кода:
function ccbCopyCode(button) {
// Находим блок <pre><code>, связанный с кнопкой
const codeBlock = button.parentElement.querySelector('pre');
// Копируем текст из блока <pre><code>
if (codeBlock) {
const textToCopy = codeBlock.innerText;
navigator.clipboard.writeText(textToCopy)
.then(() => {
// Меняем текст кнопки на "Скопировано!"
button.innerText = 'Скопировано!';
setTimeout(() => {
button.innerText = 'Копировать';
}, 2000); // Возвращаем текст через 2 секунды
})
.catch((err) => {
console.error('Ошибка при копировании: ', err);
});
}
}Установка плагина:
- Загрузите папку
copy-code-buttonв директориюwp-content/plugins/. - Перейдите в админ-панель WordPress.
- Перейдите в раздел Плагины.
- Найдите плагин Copy Code Button и активируйте его.
Как это работает:
- Фильтр
the_content:
- Плагин ищет все блоки
<pre><code>в контенте и добавляет к ним кнопку «Копировать».
- JavaScript:
- При нажатии на кнопку текст из блока
<pre><code>копируется в буфер обмена с помощьюnavigator.clipboard.writeText().
- Стили:
- Кнопка и блок кода стилизуются для удобного отображения.
Пример использования:
Добавьте в контент блок кода:
<pre><code>
function helloWorld() {
console.log("Hello, World!");
}
</code></pre>После активации плагина рядом с блоком кода появится кнопка «Копировать». При нажатии на неё текст скопируется в буфер обмена.
Примечания:
- Плагин работает только с блоками
<pre><code>. Если у вас другой формат вывода кода, измените регулярное выражение в функцииccb_add_copy_button_to_code_blocks. - Вы можете дополнительно улучшить плагин, добавив поддержку других языков программирования (например, через библиотеку highlight.js) или настройки в админке.
Добавить комментарий