副業

【WordPress】『Copy Anything to Clipboard』でコピーボタンを設置する!

2021年5月3日

ブログでコピーボタンを設置したいけどやり方がわからない

こんなお悩みを解決します。

 

この記事を読むと何ができるの?

ブログにコピーボタンを設置することができます。

コピーボタンとは、そのボタンを押すことで対象のテキストがクリップボードにコピーできるボタンのことで、CSSやjavascriptなどのコードを掲載するときに設置しているとブログの読者的に便利です。

 

この記事を読んで実装できるのは↓のような見た目のコピーボタンです。

実装できるコピーボタンの例

 

実装できるのは3パターン

  1. 右上に「Copy」ボタンが表示されるやつ
  2. 右上にアイコンが表示されるやつ
  3. 対象のテキストにカーソルを合わせるとボタンが表示されるやつ

 

いずれも表示される文字列は変更できます。

 

 

かなむ
画像付きでわかりやすく説明していきます!

WordPress(ワードプレス)のブログにコピーボタンを設置方法

早速やり方を説明していきます。

流れとしてはこんな感じ。

  1. プラグイン『Copy Anything to Clipboard』をインストールする
  2. 表示するコピーボタンの詳細を設定する
  3. 実際に記事で使ってみる

 

かなむ
順番に説明していきます!

 

手順①:プラグイン『Copy Anything to Clipboard』をインストールする

 

step
1
Wordpressの管理画面にログインして左のメニューから[プラグイン]→[新規追加]を選択します

[プラグイン]→[新規追加]を選択

 

step
2
右上のキーワード入力欄に「Copy Anything to Clipboard」を入力する

入力するキーワードをコピーする(右上のアイコンからコピーできます):

Copy Anything to Clipboard

 

step
3
下記の「Copy Anything to Clipboard」をインストールする

書類二枚重なってるやつ

 

step
3
インストールした「Copy Anything to Clipboard」を有効化する

有効化をぽち

 

かなむ
次でコピーボタンの詳細を設定します

 

手順②:表示するコピーボタンの詳細を設定する

プラグインを有効にしたら、コピーボタンの詳細を設定します。

 

step
1
管理画面の左メニューから[Copy to Clipboard]→[Add New]をクリックする

新規作成の方法

 

step
2
表示された画面で詳細設定をし、[Create]ボタンをクリックする

下記の画面が表示されるので、詳細を設定していきます。

設定内容の説明は後述しますが、画面右側にある[Preview]欄に今のまま保存したらどのように表示されるかがお試し表示されているので、確認しながらやっていくのが◎です。

赤枠のところに現在の見え方が表示される!便利!

設定項目を順番に説明すると

項目 設定内容 備考
Selector 投稿内で使うタグ名を設定する

例えば「pre」とした場合、投稿内で

<pre>あああああ</pre>

とすることで「あああああ」がコピーの対象になる

ここで設定した文字を<>の中に入れて使う

Style

ボタンの表示スタイルを下記から選択する

  • Button
  • SVG Icon
     
  • Cover
 
Button Position

ボタンの表示位置を下記から選択する

  • Inside
  • Outside

枠線の内側(inside)が外側(outside)を選択できる

※[Style]で「Button」「SVG Icon」を選んだ時だけ表示される

Botton Text ボタンの表示名を設定する

例えば「コピー」と入力すると、ボタンが「コピー」ってなる

※[Style]で「Button」「Cover」を選んだ時だけ表示される

Button Copy Text コピーしたあとに表示される文言を設定する 例えば「コピーしました!」とか「コピーに成功しました!」とかに変更できる。
Button Title ボタンにカーソルを合わせたときに表示される文言を設定する

このボタンを押すと何するのか?を説明する文を設定できる。

例えば「クリップボードにコピーする」とかに変更できる。

Create 設定保存ボタン 設定が終わったら最後に押す

 

 

かなむ
設定が完了したら忘れず[Create]ボタンをクリックしましょう!

 

手順③:実際に記事で使ってみる

step
1
記事の編集画面で先ほど設定したタグを使用し、コピーしたい文を囲む

 

<pre>これをコピーする</pre>

と記述すると

これをコピーする

みたいになります

<>で囲んだコードを使用するときはエディタをテキストモードに切り替える必要があります。

 

かなむ
これでコピーボタンが使えるようになりました!

もっと便利に使う

毎回タグを手入力するのめんどくせぇ

っていう場合は、便利なプラグイン『AddQuickTag』を使うのがおすすめです。

 

便利なプラグイン『AddQuickTag』で快適にブログを書く!

続きを見る

 

まとめ:『Copy Anything to Clipboard』でコピーボタンを設定する!

以上でコピーボタンを設定する方法の説明は終わりです。

 

かなむ
今後も僕がブログ作成で困ったことは記事にしていきます

 

他にも『これどうするの?』等があればお気軽にコメントください!

可能な限りで答えますし、一緒に調べます(^^)/

 

おまけ:お手軽にコピーボタンを表示する方法

自分でカスタムはできないですが、もっとお手軽にコピーボタンを表示する方法も併せて紹介しておきます。

  1. 『Copy Anything to Clipboard』をインストール→有効化する
  2. 投稿記事でショートカットコード[copy][/copy]を利用する

 

例えば、投稿記事で↓のようなコードを記載したとします。

[copy]と[/copy]でコピーさせたい文章を囲む

 

↓↓↓するとこんな感じで表示されます↓↓↓

コピーしたい文字列

↑↑↑こんな感じ↑↑↑

 

ボタンの表示は「Copy」に限定され、コピー成功時は「Copied!」に限定されます。

でもめっちゃ簡単。

 

かなむ
お好みでどうぞ!

 

クリックしていただけると励みになります!

にほんブログ村 にほんブログ村へ

-副業
-,