[WordPress] Set up a script code copy button on your blog!Easy copy from text box [jQuery]

Customize

Hello!This time I will show you how to set up a copy button on your blog!

For a blog that introduces scripts and commands like this site, isn't it easier for users to copy easily?I thought, I tried to touch jQuery after a long time to implement it.

I haven't touched it for a while, so I forgot about it, but I tried to complete it with the help of the Internet.

When writing a blog, I wrote it with the intention of reducing the amount of work as much as possible, so please use it if you like ♪

Thing you want to do

I want to install a button to extract and copy the text part from the block where the script code is written.

Implementation example

The text you want to copy is written on a gray background.
You can copy by pressing the button located below it.


@echo off cd% ~ dp0 echo This is a test! pause exit

↓ ↓ ↓ Please paste it in the text box below to see if it is copied ↓ ↓ ↓

It's simple, but it's functional enough ♪

Script example

This time, it is divided into a "main script" that describes the process of copying and a "button script" that sends the name of the text box to be copied to the main script when clicked.

Main script

<script>

//テキストをコピーする関数定義
$('.copytxt').click(function(){

    //ボタンからvalueの値を取得
    var strName = $(this).attr('value');

    //valueの値を名前に持つブロックからテキストを取得
    let strtxt = $('.' + strName).text();

    //テキストエリアを作成
    let $objtxtarea = $('<textarea></textarea>');

    //テキストエリアにテキストを貼り付け
    $objtxtarea.text(strtxt);

    //現在の要素にテキストエリアを展開
    $(this).append($objtxtarea);

    //テキストエリアの中身を選択
    $objtxtarea.select();

    //選択部分をコピー
    document.execCommand('copy');

    //コピー後のテキストエリアを削除
    $objtxtarea.remove();

    //完了メッセージ
    alert("コピーしました");

});

</script>

Button code

<div class="wp-block-button is-style-outline copytxt" value="code-area">
   <a class="wp-block-button__link">コードをコピー!</a>
</div>

How to use

Installation of main script

First, we will install the main script.

Click the Add Block button to add a custom HTML block.
You can find it in most WordPress by typing "custom" in the search bar.

Then, a block for directly inputting HTML will be inserted, so copy and paste the main script from the point where "Enter HTML ..." is written.

When pasted, it will look like ↓.

This completes the installation of the main script.

The script itself is invisible to the user.It is also desirable to be at the end of the article.Therefore, please move it to the end of the article before publishing.

You can change the order of the blocks by dragging the "6 dots" part in the block menu.Alternatively, you can move the block through "∧" or "∨".

If it is not displayed, click another block and then click the block you want to move to display it.

Prepare a block with the code you want to copy

Prepare the following source text.
This time, I'm using the "formatted text" block, but other text blocks are OK.

First, place the text you want to copy in the block.

Then click "Advanced" in the "Blocks" tab from the right menu and name the additional CSS class appropriately for this text box.

Now the text is set up.
Remember that the name you gave here will also be set for the button.

Installation of button cord

This time we will install the code for the button.
This time, I'm using a customized button for WordPress.

Insert a custom HTML block as before.

Paste the copied button code.

After this, write the name you gave to the block that contains the text you want to copy in the "value" part.

If you keep copying, change the part that is "value =" code-area "" to "value =" copybox "" and the name given to the block where you placed the text you want to copy earlier.

Now you are ready.
You can refresh the page to preview it and click the button to copy it.

Display example Click the button to copy the "test code"

Commentary

If you give a detailed explanation of the whole article, the article will be very long, so I will omit the basic part and explain only the important part.
* I think it will be difficult for beginners, so please skip it if you don't need it.

Click the button and pass the arguments to the script

About the operation when clicking

This time, all the buttons are named "copytxt".

This is the description for calling the function in the main script.

$ ('.copytxt'). Click (function ()

This code isWorks when a block named "copytxt" is clickedIt is the content.Therefore, the button is given the name "copytxt".

Even if you install multiple buttons, if you also add "copytxt", all the buttons can start the main script.

Receive the value set in value with "this"

Next is the specification of the block to copy.
You can launch the script in the same way with all the buttons, but you can only copy the same textbox as it is.

However, you can control it by passing the name of the block to the script.The value to be passed was set by "value".

If you set the value of "value" to the block name in this way, you can start the script with that information when you click it.

At that time, the value is temporarily stored in "thisIs a variable.

var strName = $ (this).attr('value') ;dropoff Window

If you write like this,thisFrom "valueWill be pulled out and stored in "strName".
attrIs OK if you think that is a command to pull out the value.

This allowed scripts that do the same thing to change the process depending on the button they clicked.

Copy text with line breaks

This time I had a hard time.
If you copy the text part normally,No line breaksWill be copied with.

Therefore, it is avoided by creating a "textarea" once, pouring it into it, and then copying it.

let strtxt = $('.' + strName).text();         //ブロックからテキスト部分をコピー
/*このままコピーすると改行が消えてしまう*/

/*そのため、テキストボックスを生成して一旦貼り付ける*/
let $objtxtarea = $('<textarea></textarea>'); //貼り付け用にテキストボックスを作成
$objtxtarea.text(strtxt);                     //貼り付け
$(this).append($objtxtarea);                  //ボタンの直下にテキストボックスを追加

/*張り付けたテキストボックスからコピーする*/
$objtxtarea.select();                         //テキストボックスの中身を選択
document.execCommand('copy');                 //コピー実行

/*使い終わったら消してお片付け*/
$objtxtarea.remove();                         //使い終わったテキストボックスを削除

By doing this, I think I was able to create a code that can be used with copy and paste.

Afterword

This time I introduced how to set up a button to copy the script code in WordPress.

I'm wondering if I could explain it well because it's a specialized content ... but I'm personally satisfied because I've completed a script that works properly.

When editing a blog, if you do not simplify each task, you will spend a lot of time stacking up.

My script is made with that part in mind.

・ Once the main script is installed,Do not modify later
-Just name the "value" of the button and the block you want to copy2 steps only

Therefore, if you know how to use it, you can edit it without much effort.

Also, since the base of the button is made based on the WordPress button, if you are familiar with these things, I think that you can change the button design by adding the function name to the button class.

I'm sorry that the shape is a little rough.
If you have any questions, please contact us on Twitter, the inquiry form, and of course, comments.

I hope it helps you.

The site that I used as a reference

Click an element to start processing! Specify an event with onclick of JavaScript | SAMURAI ENGINEERING blog
In this article, we will explain the contents such as "Click an element to start processing! Specify an event with onclick of JavaScript" so that anyone can understand it.By reading this article, you will not only solve your problems, but also discover new discoveries.If you are worried, please read it.
Put a copy button on your blog
It is a method to improve convenience by putting a copy button when writing a script, sample HTML, CSS, etc. in an article. It is a content that can also be used with WordPress.
JavaScript: Implemented a text copy button.
If there is a 〽️ button, it is user-friendly.

Thank you very much!

Comment

Translate »
I copied the title and URL