Dacă ai un site WordPress care conține tutoriale, documentație sau orice tip de conținut cu fragmente de cod, un buton de copiere este o modalitate excelentă de a face codul ușor accesibil pentru utilizatori. În acest articol, îți voi arăta cum să implementezi un buton de copiere pentru fiecare bloc de cod din postările sau paginile tale, astfel încât vizitatorii să poată copia rapid codul fără a-l selecta manual.

Ce vei învăța în acest articol:

1. Cum să adaugi un buton de copiere pentru fiecare bloc de cod.
2. Cum să stilizezi butonul pentru a-l face vizibil și ușor de utilizat.
3. Cum să adaugi feedback vizual utilizatorilor atunci când codul este copiat cu succes.

1. Adăugarea Butonului de Copiere în Blocurile de Cod

Pentru a implementa un buton de copiere, vom folosi un script JavaScript care va selecta textul din blocul de cod și îl va copia atunci când utilizatorul apasă pe buton.

De obicei, codul sursă este plasat în blocuri de tipul <pre><code>, care sunt utilizate pentru a reda codul în mod corespunzător în pagină.

Cum funcționează blocurile <pre><code>:

• <pre>: Eticheta <pre> preservează spațiile și caracterele speciale din textul sursă. Este utilizată pentru a reda text preformatat.
• <code>: Eticheta <code> este folosită pentru a delimita și a marca fragmentele de cod sursă.

De exemplu, un bloc de cod PHP ar putea arăta astfel în HTML:

<pre><code>
function afiseaza_mesaj_pe_postari() {
echo ‘&lt;p&gt;Acesta este un mesaj personalizat adăugat pe fiecare postare!&lt;/p&gt;’;
}
add_action(‘the_content’, ‘afiseaza_mesaj_pe_postari’);
</code></pre>

De exemplu, un bloc de cod PHP ar putea arăta astfel în pagina ta:

function afiseaza_mesaj_pe_postari() {
    echo '<p>Acesta este un mesaj personalizat adăugat pe fiecare postare!</p>';
}
add_action('the_content', 'afiseaza_mesaj_pe_postari');

2. Implementarea Butonului de Copiere

În acest pas, vom adăuga un buton de copiere lângă fiecare bloc de cod. Vom utiliza un ID unic pentru fiecare bloc de cod, astfel încât să putem gestiona corect copierea textului. În plus, butonul va oferi feedback vizual utilizatorilor după ce codul este copiat cu succes.

Pentru a face acest lucru, vom folosi un script JavaScript care copiază textul din blocul de cod atunci când utilizatorul apasă pe buton.

3. Adăugarea Butonului de Copiere în Conținutul Postărilor

Funcția PHP va adăuga butonul de copiere în fiecare bloc de cod din conținutul postărilor tale WordPress.

Opțiunea 1: Adăugarea Codului în functions.php

Pentru a implementa această funcționalitate într-o temă WordPress, poți adăuga direct în fișierul functions.php al temei tale. Iată cum poți face acest lucru:

1. Mergi în Panoul de administrare WordPress.
2. Mergi la Aparente > Editor de temă.
3. Găsește fișierul functions.php în partea dreaptă (lângă style.css).
4. Adaugă codul PHP pentru butonul de copiere.

Opțiunea 2: Crearea unui Plugin Personalizat

Dacă vrei să păstrezi funcționalitatea chiar și atunci când schimbi tema, o opțiune mai bună este să creezi un plugin personalizat. Poți adăuga funcționalitatea folosind Snippets Code, fără a modifica fișierul functions.php.

1. Mergi în Panoul de administrare WordPress.
2. Mergi la Snippets > Adaugă un Snippet Nou.
3. Adaugă codul pentru butonul de copiere.
4. Salvează și activează Snippet-ul.

4. Stilizarea Butonului de Copiere

Butonul de copiere trebuie să fie ușor de găsit și de folosit. Vom adăuga un set de stiluri CSS pentru a face butonul mai vizibil și pentru a oferi un feedback vizual mai plăcut. De asemenea, vom adăuga un efect de hover pentru a face butonul interactiv.

Codul pentru Implementare

Acum, vei copia codul de mai jos și îl vei adăuga în fișierul functions.php sau într-un plugin personalizat folosind Snippets Code.

<?php

// Adaugă butonul de copiere pentru fiecare bloc de cod
function add_copy_button_for_code() {
    ?>
    <script>
    function copyCode(id) {
        var copyText = document.getElementById(id); // Preluăm blocul de cod
        var range = document.createRange();
        range.selectNode(copyText);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        try {
            document.execCommand('copy'); // Copiază textul selectat
            // Schimbă culoarea butonului și textul după copiere
            var button = document.querySelector('button[data-code-id="' + id + '"]');
            button.innerHTML = "Codul a fost copiat!";
            button.style.backgroundColor = "#e0280b"; // Culoare la succes
            setTimeout(function() {
                button.innerHTML = "Copiază Codul";
                button.style.backgroundColor = "#4CAF50"; // Culoare normală
            }, 2000); // Resetarea după 2 secunde
        } catch (err) {
            alert('Eroare la copiere: ' + err);
        }
        window.getSelection().removeAllRanges(); // Curăță selecția
    }
    </script>
    <?php
}
add_action('wp_footer', 'add_copy_button_for_code'); // Plasează scriptul în footer-ul site-ului

// Funcția care adaugă butonul de copiere în blocurile de cod din conținut
function auto_add_copy_button_to_php_code($content) {
    // Adăugăm un buton de copiere doar în blocurile de cod
    $content = preg_replace_callback('/<pre><code.*?>(.*?)<\/code><\/pre>/s', function($matches) {
        // Generăm un ID unic pentru fiecare bloc de cod
        $unique_id = 'code-' . rand();
        // Returnăm HTML-ul cu butonul de copiere
        return '<button data-code-id="' . $unique_id . '" onclick="copyCode(\'' . $unique_id . '\')">Copiază Codul</button><pre><code id="' . $unique_id . '">' . $matches[1] . '</code></pre>';
    }, $content);
    
    return $content;
}
add_filter('the_content', 'auto_add_copy_button_to_php_code'); // Modifică conținutul postărilor

// Stilizarea butonului de copiere
function add_copy_button_styles() {
    ?>
    <style>
        button {
            background-color: #4CAF50; /* Culoare de fundal */
            color: white; /* Culoare text */
            padding: 10px 20px; /* Margini */
            border: none;
            cursor: pointer;
            font-size: 16px;
            margin-bottom: 10px;
            transition: background-color 0.3s ease, transform 0.3s ease; /* Tranziție pentru schimbarea culorii și efecte */
        }
        button:hover {
            background-color: #45a049; /* Culoare la hover */
            transform: scale(1.05); /* Efect de zoom la hover */
        }
        button:active {
            transform: scale(1); /* Revine la dimensiunea normală */
        }
    </style>
    <?php
}
add_action('wp_head', 'add_copy_button_styles'); // Adăugăm stilurile CSS

Concluzie

Implementarea unui buton de copiere pentru blocurile de cod pe site-ul tău WordPress va îmbunătăți semnificativ experiența utilizatorilor, facilitând copierea rapidă a codului. Această funcționalitate este ușor de adăugat, folosind fie fișierul functions.php, fie un plugin personalizat prin Snippets Code.

Copiază codul de mai sus și adaugă-l în fișierul tău functions.php sau într-un plugin personalizat. Dacă ai nevoie de ajutor suplimentar sau de alte personalizări, sunt aici să te ajut! 😊