SWELLで特化サイト作ってみた

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編集

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」にコピペしてください。

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

スタイルシート (style.css)編集

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タグの解説

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タグ内のコード用タグを解説

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タグ内のコピーボタンを解説

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を各コード用に変更すればカラーが変わります。

コード別class名
  • HTML=htmltag
  • CSS=csstag
  • php=phptag
  • JavaScript=javatag
ショートコードは「AddQuicktag」に登録しておくと便利。「class」は辞書に登録しておいてもいいし、覚えておいてもいいかと思います。

AddQuicktagの設定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】

コメントはお気軽にどうぞ

\最強のSEO対策ツール・Rank Trackerを解説/