当サイトではデフォルトの「preタグ」を使っています。
.sample{ ここにコード }
このままだと寂しいので、「コード用タグを4色」と「コピーボタン」を設置しました。
HTMLcopyするここにコード
CSScopyするここにコード
phpcopyするここにコード
JavaScriptcopyするここにコード
少しだけ短くなるので完成後はショートコードにしました。
「赤字」の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.phpcopyする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」にコピペしてください。

style.csscopyする/* 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.csscopyする.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.csscopyする/* 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.csscopyする/* コピーボタンのデザイン */ .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.phpcopyする// コードタグの定義 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を各コード用に変更すればカラーが変わります。
- HTML=htmltag
- CSS=csstag
- php=phptag
- JavaScript=javatag

HTMLcopyする<pre><div class="precopy"><div class="precopy-text">copyする</div></div><div class="copy_tag"> ここにコード </div></pre>
preタグカスタマイズ・まとめ
以上preタグに「コード用のタグ」と「コピーボタン」を設置するカスタマイズについて解説しました。
久々にWordPressイジったけど楽しいですね。
コード用のタグは自己満だが、コピーボタンの実装はカスタマイズ記事なら「UX」の向上を期待できます。
コードをシンタックスハイライトにしたい方は「prismjs」がオススメ。
ただ個人的には、他社サービスへの依存はなるべく避けたいので、オシャレさを取るか、シンプルで済ますかはあなた次第ですね。
※日本語が含まれていないコメントは投稿できません。(スパム対策)