preタグにコピーボタンとコード用タグを設置するカスタマイズ

→ サイトを見てみる

当サイトではデフォルトの「preタグ」を使っています。

.sample{
ここにコード
}

このままだと寂しいので、「コード用タグを4色」と「コピーボタン」を設置しました。

HTML
copyする

ここにコード

CSS
copyする

ここにコード

php
copyする

ここにコード

JavaScript
copyする

ここにコード

少しだけ短くなるので完成後はショートコードにしました。

「赤字」のclassでタグのカラーを変更「コードの種類を記入」のところに「HTML」とか「CSS」と入力すれば、上記のサンプルのようになります。

ショートコード
copyする

<pre>[codetag class="htmltag"]コードの種類を記入[/codetag][copytag]
ここにコード
[/copytag]</pre>

最初<pre>タグもショートコードにしてみましたが、「"」が「”」になったり「'」「’」になって、phpとかjavaのコードを貼り付ける時うまくいきませんでした。（原因わかる人教えてください）

なので<pre>タグはそのままでそれ以降をショートコード化しました。

一応CSSだけならシンタックスハイライト用プラグイン「prismjs」などでも応用できるはずです。

preタグ内をコピーする【jQuery】を設置

最初にコードをワンクリックでコピーできるようにボタンの処理を実装していきます。

「functions.php」に以下を貼り付けよう。

functions.php編集

functions.php
copyする

function pre_custom() {
echo <<< EOM
<script>
window.addEventListener('DOMContentLoaded', function(){
$("body").on("click",".precopy",function(e){
var textElem = $(this).parent().find(".copy_tag");
window.getSelection().selectAllChildren(textElem[0]);
document.execCommand("copy");
$(this).addClass("precopy-active");
$(this).delay(2000).queue(function() {
$(this).removeClass("precopy-active").dequeue();
});
});
});
</script>
EOM;
}
add_action( 'wp_footer', 'pre_custom' );

これでpreタグ内のコピーボタンが動作するようになりました。

preタグをカスタマイズするCSS

続いて、コード用のタグやコピーボタンのデザインを整えていきましょう。

以下のコードを子テーマの「style.css」にコピペしてください。

Cyberduckの使い方WordPressの子テーマを分かりやすく解説

style.css
copyする

/*　preタグ用・不要なコードは各自削ってね　*/
.entry-content pre {
position: relative;
background: #364549;
color: #e3e3e3;
margin: 0 0 1.5em;
padding: 1em;
font-size: 95%;
border: none;
}
/*　code用タグ　*/
pre .htmltag, pre .csstag, pre .phptag, pre .javatag {
position: absolute;
top: 0;
left: 0;
background: #ffbd5b;
color: #fff;
padding: 0 5px;
}
pre .csstag {
background: #6bb6ff;
}
pre .phptag {
background: #f88080;
}
pre .javatag {
background: #90d581;
}
pre .htmltag:before, pre .csstag:before, pre .phptag:before, pre .javatag:before {
font-family: "Font Awesome 5 Free";
content: '\f121';
padding-right: 6px;
}
/*　コピーボタン用はここから　*/
.precopy {
position: absolute;
top: 0;
right: 0;
width: 130px;
background: #cbce64;
color: #fff;
cursor: pointer;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.precopy:before {
left: -100%;
position: absolute;
width: 100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
content: "コピーしました";
}
.precopy-text:before{
font-family: "Font Awesome 5 Free";
content: '\f0c5';
padding-right: 6px;
}
.precopy-active{
background:#9c9c9c;
}
.precopy-active:before {
left: 0;
}
.precopy-active .precopy-text {
-webkit-transform: translateX(300%);
-moz-transform: translateX(300%);
-ms-transform: translateX(300%);
transform: translateX(300%);
}
.copy_tag {
margin: 20px 0;
}

カラーやテキストなどはお好きなものに。

「コピーしました」の部分があまり長いとスマホで見たとき、左側のコード名タグと被ってしまうので注意してください。

細かい調整をしたい方は以下の解説をどうぞ。

preタグの解説

style.css
copyする

.entry-content pre {
/*　preタグ全体を相対位置に指定（必須）　*/
position: relative;

/*　preタグの背景色　*/
background: #364549;

/*　preタグ内のテキストカラー　*/
color: #e3e3e3;

/*　preタグの外側の余白　*/
margin: 0 0 1.5em;

/*　preタグの内側の余白　*/
padding: 1em;

/*　preタグ内のフォントを少し小さく（オススメ）　*/
font-size: 95%;

/*　preタグ周りの枠線なくすSANGO限定（他テーマは不要）　*/
border: none;
}

preタグ内のコード用タグを解説

style.css
copyする

/*　preタグ内code用タグ　*/
pre .htmltag, pre .csstag, pre .phptag, pre .javatag {
/*　code用タグを左端へ設置　*/
position: absolute;
top: 0;
left: 0;

/*　code用タグを背景色（HTML用）　*/
background: #ffbd5b;

/*　code用タグをテキストカラー　*/
color: #fff;

/*　code用タグの左右に余白を作る　*/
padding: 0 5px;
}

/*　code用タグCSSの背景色　*/
pre .csstag {
background: #6bb6ff;
}

/*　code用タグphpの背景色　*/
pre .phptag {
background: #f88080;
}

/*　code用タグjavaの背景色　*/
pre .javatag {
background: #90d581;
}

/*　code用タグの左側にアイコンを追加　*/
pre .htmltag:before, pre .csstag:before, pre .phptag:before, pre .javatag:before {
font-family: "Font Awesome 5 Free";
content: '\f121';

/*　code用タグのアイコンの右側に余白を作る　*/
padding-right: 6px;
}

preタグ内のコピーボタンを解説

style.css
copyする

/*　コピーボタンのデザイン　*/
.precopy {

/*　コピーボタンを右端へ設置　*/
position: absolute;
top: 0;
right: 0;

/*　コピーボタンの横幅指定（スマホも意識するならこれくらいがオススメ）　*/
width: 130px;

/*　コピーボタンの背景色　*/
background: #cbce64;

/*　コピーボタンのテキストカラー　*/
color: #fff;

/*　コピーボタンにマウスを合わせると指マークを表示　*/
cursor: pointer;

/*　コピーボタンのテキストを真ん中へ　*/
text-align: center;

/*　コピーボタンの押した後のテキストを非表示に　*/
overflow: hidden;

/*　コピーボタンを押した時に動くスピードを調整　*/
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}

/*　コピーボタンを押した後に出てくるテキストを指定　*/
.precopy:before {

/*　テキストを左側に吹っ飛ばす　*/
left: -100%;

/*　テキストを画面の左上に飛ばす　*/
position: absolute;

/*　ボタンを押した後テキストが真ん中に来るように　*/
width: 100%;

/*　テキストが右側に動くスピードを調整　*/
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;

/*　ボタンを押した後のテキスト指定（長いとスマホ時被ってしまうので注意）　*/
content: "コピーしました";
}

/*　copyするが右側から戻ってくるスピード調整　*/
.precopy .precopy-text{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}

/*　コピーボタン用アイコン　*/
.precopy-text:before{
font-family: "Font Awesome 5 Free";
content: '\f0c5';
padding-right: 6px;
}

/*　コピーボタンを押した後の背景色　*/
.precopy-active{
background:#9c9c9c;
}

/*　コピーボタンを押した後のテキストの位置調整（変更しないこと）　*/
.precopy-active:before {
left: 0;
}

/*　copyするを右側に移動させる（200〜300%推奨）　*/
.precopy-active .precopy-text {
-webkit-transform: translateX(300%);
-moz-transform: translateX(300%);
-ms-transform: translateX(300%);
transform: translateX(300%);
}

/*　preタグ内の上下に余白を作る　*/
.copy_tag {
margin: 20px 0;
}

preタグをショートコード化する

最後にpreタグ用ショートコードの作成です。もう一度「functions.php」に追記してください。

functions.php
copyする

// コードタグの定義
function pre1( $atts, $content = null ) {
// ショートコードを内部で出力
$content = do_shortcode( shortcode_unautop( $content ) );
extract( shortcode_atts( array(
'class' => 'pretag',
), $atts ) );
return '<div class="' . esc_attr($class) . '">' . $content . '</div>';
}
add_shortcode('codetag', 'pre1');

//preコピーボタンの定義
function pre2( $atts, $content = null ) {
return '<div class="precopy"><div class="precopy-text">copyする</div></div><div class="copy_tag">' . $content . '</div>';
}
add_shortcode('copytag', 'pre2');

ショートコード
copyする

<pre>[codetag class="htmltag"]コードの種類[/codetag][copytag]
ここにコード
[/copytag]</pre>

「赤字」のclassを各コード用に変更すればカラーが変わります。

AddQuicktagの使い方と設定【隠れた機能も全て解説】

HTML
copyする

<pre><div class="precopy"><div class="precopy-text">copyする</div></div><div class="copy_tag">
ここにコード
</div></pre>

preタグカスタマイズ・まとめ

以上preタグに「コード用のタグ」と「コピーボタン」を設置するカスタマイズについて解説しました。

久々にWordPressイジったけど楽しいですね。

コード用のタグは自己満だが、コピーボタンの実装はカスタマイズ記事なら「UX」の向上を期待できます。

コードをシンタックスハイライトにしたい方は「prismjs」がオススメ。

ただ個人的には、他社サービスへの依存はなるべく避けたいので、オシャレさを取るか、シンプルで済ますかはあなた次第ですね。

参考記事：【jQuery】ワンクリックでコピーするボタンを作る【WordPress】

→ サイトを見てみる