Sådan Tilføjer Du en Kodekopieringsfunktion til Din WordPress-Side

Ønsker du at give dine besøgende mulighed for nemt at kopiere koder eller tekststykker fra din WordPress-side? En kodekopieringsfunktion kan være en nyttig tilføjelse, der gør det bekvemt for brugerne at kopiere indhold med et enkelt klik eller tryk.

I denne artikel vil vi guide dig gennem processen med at implementere en kodekopieringsfunktion på din WordPress-side ved hjælp af et tilpasset plugin. Ved at følge vores trinvise instruktioner kan du tilføje en “Code field” blok til Gutenberg-editoren og give dine besøgende mulighed for hurtigt og nemt at kopiere koder eller tekststykker.

Jeg vil gennemgå hvert trin, herunder oprettelse af mapper og filer, tilføjelse af nødvendig CSS-styling og JavaScript-kode samt implementering og test af funktionen. Vi vil også diskutere muligheden for at tilføje kode highlight til din kodekopieringsfunktion og give dig alternativer til selvopbygning af pluginet.

Uanset om du er en udvikler, der ønsker at forbedre brugeroplevelsen på din WordPress-side, eller en indholdsleverandør, der ønsker at gøre det nemmere for dine læsere at kopiere og indsætte koder, vil denne artikel give dig den nødvendige viden til at tilføje denne nyttige funktion.

Du kan se et eksempel her ved at holde musen henover feltet:

Jeg bruger funktionen til kode og komandoer hvor det ofte er nemmere at man lige kan kopiere det og indsætte det hvor man un skal bruge det og jeg vil her dele med dig hvordan jeg har lavet det.

Hvordan virker det

Det er lavet som et plugin og virker kun med Gutenberg editoren i WordPress og den fungerer ved at der tilføjes et nyt felt der hedder “Code field”.

I dette felt kan du tilføje din eller hvad du nu ønsker at man skal kunne kopiere ved et nemt tryk eller som skal fremhæves på en anden måde.

Ude på siden bliver det vist i et textarea hvor selve skrive funktionen er deaktiveret, så man ikke kan komme til at ændre koden deri og textareat er sat til at være 100% højde af indholdet i textarea, så du ikke ser en scrollbar.

TIl forskel fra andre af de her COPY code funktioner, så er den jeg har lavet her er at den virker med linjeskift (ved brug af textarea) or samtidig ændre den ikke ting som

om til

som jeg har set andre gøre. Dette opnås ved at konvertere til html inden den indsætter i texarea feltet.

Jeg vil her dele koden med dig så du kan oprette pluginet selv og bruge på din WordPress side. Du kan også blot downloade hele pluginet i bunden af artiklen.

Byg selv pluginet

For at bygge pluginet selv skal du have fil adgang til din WordPress installation og genskab til hvordan du opretter mapper og redigerer filer.

Opret mappe strukturen

Start med at lave en mappe der hedder “custom”, som vil være nanvet på det plugin du er ved at bygge her. Du oprreter den i mappen “/wp-content/plugins/”.

I den nye mappe du har lavet skal du derefter oprette 2 mapper med navnene:
css
js

Opret filerne i mapperne

Du skal nu oprette filerne hvor du i næste trin skal tilføje koden der skal bruges. Du skal ialt oprette 4 filer:

/wp-content/custom/custom.php
/wp-content/custom/css/myplugin-frontend.css
/wp-content/custom/js/myplugin.js
/wp-content/custom/js/myplugin-frontend.js

I mappen “custom” skal du oprette en fil der hedder “custom.php”, det er plugint hovedfil og er den som WordPress indlæser ved aktivering.

Derefter opretter du filen “myplugin-frontend.css” i mappen “css”. Denne fil benyttes til at styre udseende på kopier knappen og kode feltet.

Du skal nu oprette de 2 javascript filer (Dem der ender på .js) i mappen “js” du oprettede før. Filerne kalder du “myplugin.js” og “myplugin-frontend.js”

De to filerne bliver brugt til at bygge selv blokken i Gutenberg og til at styre funktionerne ude på den del af siden dine læsere ser.

TIlføj kode til filerne

I filen /wp-content/custom/custom.php tilføjer du koden nedenunder:

Koden gør at WordPress tilføjer CSS filen “myplugin-frontend.cs” ved indlæsning med funktionen “wp_enqueue_style” og “wp_enqueue_scripts”.

Den tilføjer også blokken til Gutenberg med funktionen “enqueue_block_editor_assets”

og til slut tilføjer den javascript filerne ved indlæsning i frontend med funktionen “wp_enqueue_scripts”

I filen /wp-content/custom/css/myplugin-frontend.css tilføjer du koden nedenunder:

Koden er CSS ( Styling ) der gør at blokken ser ud som den skal, du kan ændre alt det du vil her for at få den styling der passer bedst til din side.

I filen /wp-content/custom/js/myplugin.js tilføjer du koden nedenunder:

wp.blocks.registerBlockType(‘myplugin/code’, {
    title: ‘Code Field’,
    category: ‘common’,
    attributes: {
        content: {
            type: ‘string’,
            source: ‘text’,
            selector: ‘textarea’,
        },
    },
    edit: function (props) {
        const { attributes, setAttributes } = props;

function onChangeContent(newContent) {
            setAttributes({ content: newContent });
        }

return wp.element.createElement(wp.components.TextareaControl, {
            label: ‘Code Field’,
            value: attributes.content || ”,
            onChange: onChangeContent,
            rows: 10, // Adjust the number of rows as needed
            readonly: true, // Make the textarea readonly
        });
    },
save: function (props) {
    const { content } = props.attributes;

return wp.element.createElement(‘div’, { className: ‘myplugin-code-output’ },
        wp.element.createElement(‘textarea’, { disabled: ‘disabled’ }, content)
    );
},
});

Koden tilføjer selve blokken til GUtenberg og sørger for at det hele skrives korrekt ude på siden ved at tilføje de nødvendige classes til frontenden. Du kan her også omdøbe blokken til noget andet hvis du ikke ønsker at den skal hedde “Code field”, så kan du blot ændre navnet til noget ndet.

I filen /wp-content/custom/js/myplugin-frontend.js tilføjer du koden nedenunder:

jQuery(document).ready(function($) {

// Button html used to display the button and remove the code from the copied text.
            var btnHtml= ‘<button class=”wcioCopyCodeBtn”>copy</button>’;

// When clicking the button, run this code
            $(“.wp-block-myplugin-code”).on(“click”, “.wcioCopyCodeBtn”, function() {

// Setup some variables
                var $temp = $(“<textarea>”);
                var regex = /<br\s*[\/]?>/gi;

// Replace <br> (newline in html) with \n (newline in text) to make sure multiple lines work.
                var encodedStr = $(this).parent().find(“textarea”).html().replace(regex, “\n”).replace(btnHtml, “”);

// Add a tmp element to store the content (textarea to work with multiple line) and then select / copy content before removing it.
                $(this).parent().append($temp);
                $temp.html(encodedStr).select();
                document.execCommand(“copy”);
                $temp.remove();

// Change the text to a green copied one.
                var self = this;
                self.innerHTML = ‘<span style=”color:#3fb950″>✓ copied</span>’;

// Change the button content back after X amount of seoncds.
                setTimeout(function() {
                    self.innerHTML = ‘copy’;
                }, 2000);

});

// Add the button html to all code tags
            jQuery( “.wp-block-myplugin-code” ).append(  btnHtml );
	  
jQuery(‘.wp-block-myplugin-code textarea’).each(function () {
    this.style.height = ”;
    this.style.height = this.scrollHeight + 3 + “px”;
});

});

Koden tilføjer selve kopier knappen og laver de forskellige ting den skal for at den kan kopiere korrekt.

Sådan tester du om det virker.

Når du har lavet alle filerne og lagt koderne ind skal du blot gå ind i din WordPress installation og aktivere pluginet, hvorefter du i Gutenberg kan finde blokken der hedder “Code field” og begynde at tilføje din egen kode eller tekster der.

Når du har tiføjet en kode skal du ud på siden og se på koden, hvis det virker så burde du når du har musen henover kode feltet se en knap hvor der står “Copy” i. Når du klikker på den burde den kopiere alt tekst fra dit “code field” til udklipsholderen, hvor du så kan sætte det ind hvor du har lyst.

Hvad med code higihlight

Det er muligt at lave code highlight på det her ved at tilføje https://prismjs.com/ til pluginet, det er dog ikke noget jeg har haft behov for og derfor er det ikke tilføjet til min version.

Download plugin

Du kan downloade den færdige kode her: Download custom.zip

Du har nu givet dine besøgende mulighed for at kopiere kode eller andet du lægger i et code tag.

Afslutning: Tilføj Nem Kodekopiering til Din WordPress-Side

Ved at implementere en kodekopieringsfunktion på din WordPress-side kan du gøre det nemt for dine besøgende at kopiere koder eller tekststykker med blot et enkelt klik. Denne funktion er særligt nyttig for udviklere der ønsker at forbedre brugeroplevelsen og give deres læsere mulighed for nemt at kopiere og indsætte koder i deres egne projekter.

I denne artikel har vi gennemgået trinene til at tilføje en kodekopieringsfunktion ved hjælp af et plugin. Vi har gennemgået oprettelsen af mapper og filer, tilføjelsen af nødvendig CSS-styling og JavaScript-kode, samt implementering og test af funktionen. Du har også fået en forståelse for muligheden for at tilføje kodehighlighting til din kodekopieringsfunktion ved at bruge værktøjer som Prism.js.

Husk, at det tilpassede plugin, som vi har delt i denne artikel, er tilgængeligt til download, så du kan komme i gang med at tilføje kodekopieringsfunktionen til din WordPress-side med det samme.