【WordPress】 記事中にコピーしやすい文字を挿入する方法


ユーザーが文字をコピーしやすい仕掛けを作りたい・・・!

WordPress のサイトを運営しているとたまに、

何かの文字をコピーしてもらいたい

という瞬間があると思います。

例えば、クーポンコードとか、お店の住所とか、電話番号とか、合言葉とかですね。

このようにWordPress の記事中の「ある文字」をコピーしてもらいたい場合、

文字をクリック・タップしただけで選択状態になる HTML のコードを使いたいところですよね。

 

 

記事中にコピーしやすい文字を挿入する方法

そこでググってみたところこちらの記事に遭遇↓

この記事によると、

というHTMLコードで、クリックやタップして選択したら選択状態になる文字が作れるようですね。

 

試しに作ってみたところこんな感じになりました↓

 

確かに確かに、

クリック、タップしたら選択状態になって、すぐにコピーできるではありませんか。

 

ここで鍵になってくるのが、 textarea 要素にある

onfocus

という属性ですね。

「イベントハンドラ」と呼ばれるもので、ユーザーの反応に対して動作する属性になります。

onfocusというのはフォーカスされた瞬間、つまり、

ユーザーがクリックやタップをした瞬間に反応するイベントハンドラになります。

 

その「フォーカスされた瞬間」に何をするかというと、this.select()です。

これはつまり、

textarea という要素自身(this)がselect()というメソッドを発揮することで、選択状態になるみたいですね。

いやあここら辺は奥が深そうなので勉強してみたいですね。

 

 

テキスト編集モードで更新しよう

という感じで、

というイベントハンドラをtextarea要素に指定してやるだけで簡単に作れましたね。

このイベントハンドラはtextarea要素だけでなく、

  • a
  • area
  • button
  • input
  • select
  • label

にも使えるようです。

 

ただ、WordPressの記事中にこのコードを使う場合に注意したいのが、

テキスト編集モードを使う

ということです。

 

 

記事の「更新」や「公開」の際に、テキスト編集モードでコードを入力した後に、ビジュアル編集モードに切り替えてしまうと、

なぜか textarea 要素のイベントハンドラの属性が消失します。

テキスト編集モードで記事を更新や公開してあげないと、仕掛けが作れないという点に注意しましょう。

 

それでは!

Lin

 

【参考記事】

 

Pocket
LINEで送る

コメントはこちらからお願いします!



もう1本読んでみる