Кнопка копировать, в цитаты Вордпресс
Мне потребовалась кнопка «Скопировать» в блок цитаты.
На своём сайте «Промты» вывожу через цитаты, чтобы было проще копировать с помощью ИИ создал функцию Вордпресс.
Вот код в файл functions.php
// Самый простой рабочий вариант
function working_copy_quote_button() {
?>
<script>
(function($) {
$(document).ready(function() {
$('blockquote').each(function() {
var $blockquote = $(this);
var quoteText = $blockquote.text().trim();
$blockquote.css('position', 'relative').append(
'<button class="copy-quote-btn">Копировать</button>'
);
$blockquote.find('.copy-quote-btn').click(function() {
var $button = $(this);
// Используем старый добрый method
var textarea = document.createElement('textarea');
textarea.value = quoteText;
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
$button.text('Скопировано!');
setTimeout(function() {
$button.text('Копировать');
}, 2000);
} catch (err) {
console.error('Ошибка:', err);
alert('Не удалось скопировать');
}
document.body.removeChild(textarea);
});
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'working_copy_quote_button');Это стили оформления как у меня на сайте на сегодня в style.css:
/*----------------------------------------------------------------------------------------------------*/
/* ЦИТАТЫ */
/*----------------------------------------------------------------------------------------------------*/
blockquote {
display: grid;
background-color: #f8f9fa;
border-left: 2px solid #28a745;
padding: 2%;
font-style: italic;
color: var(--text-color);
margin: 1%;
word-break: break-word;
font-size: var(--font-size-base);
position: relative; /* Важно для абсолютного позиционирования кнопки */
min-height: 60px; /* Чтобы кнопка не наезжала на короткие цитаты */
}
blockquote p {
background-color: #f8f9fa;
color: #232325;
font-size: var(--font-size-base);
margin: 0; /* Убираем отступы для лучшего вида */
padding: 5px 0;
}
blockquote:before {
content: "\201C";
font-size: var(--font-size-3xl);
font-weight: bold;
color: #00a32a;
margin-right: 0px;
line-height: 1;
}
blockquote:after {
content: "\201D";
font-size: var(--font-size-3xl);
font-weight: bold;
color: #00a32a;
float: right;
margin-right: 0px;
line-height: 1;
}
/* Стили для кнопки копирования цитаты */
blockquote .copy-quote-btn {
position: absolute;
top: 10px;
right: 10px;
background: #28a745;
border: 1px solid #28a745;
border-radius: 4px;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
opacity: .6;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
z-index: 10;
color: white;
font-weight: 500;
}
blockquote:hover .copy-quote-btn {
opacity: 1;
transform: translateY(-1px);
}
blockquote .copy-quote-btn:hover {
background: #218838;
border-color: #1e7e34;
opacity: 1;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Состояния кнопки копирования цитаты */
blockquote .copy-quote-btn.copied {
background: #155724;
border-color: #155724;
opacity: 1;
}
blockquote .copy-quote-btn.error {
background: #dc3545;
border-color: #dc3545;
opacity: 1;
}
/* Адаптивность для мобильных */
@media (max-width: 768px) {
blockquote .copy-quote-btn {
top: 5px;
right: 5px;
padding: 4px 8px;
font-size: 11px;
}
blockquote {
padding: 15px;
margin: 10px 0;
}
}Код для себя, шпаргалка. Если вам пригодится — пользуйтесь.
Промт картинки:
Умопомрачительная женщина держит табличку с надписью: скопировать
Зачем нужна кнопка «Скопировать» в блоке цитаты?
В современном цифровом мире мы постоянно обмениваемся информацией, сохраняем её для дальнейшего использования и делимся ею с другими людьми. При этом часто возникает необходимость скопировать текст из какого-либо источника. Например, вы можете встретить интересную цитату, которой захотите поделиться с друзьями или сохранить для себя. Или вам может понадобиться скопировать определение термина для использования в научной работе.
Для удобства пользователей в различных сервисах и приложениях появилась кнопка «Скопировать», которая позволяет быстро и легко скопировать текст из определённого блока. Одним из таких блоков является блок цитаты.
Кнопка «Скопировать» в блоке цитаты даёт возможность быстро скопировать текст цитаты в буфер обмена. Это может быть полезно по нескольким причинам:
Обмен информацией. Вы можете захотеть поделиться интересной цитатой с друзьями, коллегами или подписчиками в социальных сетях. Кнопка «Скопировать» позволит вам быстро отправить цитату в мессенджер или опубликовать её в социальной сети.
Сохранение для дальнейшего использования. Вы можете встретить цитату, которая вам очень понравится, но вы не захотите её сразу публиковать или делиться ею. В этом случае вы можете скопировать цитату и сохранить её в заметках или в файле на компьютере.
Быстрый доступ к цитате. Если вы часто работаете с цитатами или интересуетесь ими, то кнопка скопировать
Позволит вам быстро вернуться к нужной цитате в будущем.
Таким образом, кнопка Скопировать в блоке цитаты является удобным инструментом, который позволяет быстро и легко копировать текст цитаты в буфер обмена. Это может быть полезно для обмена информацией, сохранения цитат для дальнейшего использования или быстрого доступа к ним.
P.S сегодня искал в Яндексе и наткнулся на первой странице в поиске, код был так себе, поэтому исправил на рабочий вариант. Я размещаю промты для картинок, посчитал, что так копировать будет проще. Всем ещё раз хорошего дня!!!
