Codeを表示するプラグイン
WordPressではいろいろなプラグインが公開されています。
ソースコードをきれいに表示し、簡単にコピーできるようにするプラグインはたくさんあります。
プロンプトを表示させたいがコピーしたくない
ただ、Bashのコードを書く時には、たとえば
$ls -lのように先頭にプロンプトの「＄」を記載したいものです。
ただし、コピーする際にはこの「＄」はコピーしたくない。
そんなわがままにトライしてみました。
結果は以下のようになりました。
$ls -l
追加したコード
functions.phpにコードを追加
まず最初にfunctions.phpに以下のコードを追加しました。
PHP
function enqueue_custom_scripts() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
wp_enqueue_style('custom-css', get_stylesheet_directory_uri() . '/css/custom.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');custom-jsとして/js/custom.jsを、custom-cssとして/css/custom.cssを追加する宣言です。
新規にcustom.jsを追加
次に、custom.jsです。
JavaScript
document.addEventListener('DOMContentLoaded', function() {
var copyBtns = document.querySelectorAll('.copy-btn');
copyBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
var copyText = btn.previousElementSibling;
var range = document.createRange();
range.selectNode(copyText);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
alert('コピーしました！');
});
});
});これは、先の記述のとおり/js/custom.jsとして保存します。
新規にcustom.cssを追加
次にcustom.cssです。
CSS
.code-container {
position: relative;
background-color: #1e1e1e;
padding: 15px;
border-radius: 5px;
color: #ffffff;
font-family: 'Courier New', Courier, monospace;
}
.copy-text {
background-color: #3e3e3e;
padding: 2px 5px;
border-radius: 3px;
}
.copy-btn {
position: absolute;
top: 5px;
right: 5px;
background-color: #4CAF50;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.copy-btn:hover {
background-color: #45a049;
}
.code-container pre {
color: #a0a0a0; /* これにより、$の色が明るくなります */
}これも先の記述どおり、/css/custom.cssとして保存します。
投稿本文にカスタムHTMLとして追加
ここまでできたら投稿本文内にカスタムHTMLブロックを追加し、以下のコードを記載します。
HTML
<div class="code-container">
<pre>$<span class="copy-text">ls -l</span></pre>
<button class="copy-btn">Copy code</button>
</div>すると以下のように表示されます。
$ls -l
上記HTMLの「ls -l 」の部分を他のコマンドに書き換えればいろんなコマンドを表示してコピーできるようになります。
色合いを変えたい場合は、CSSを調整してください。
ファイルの追加・修正方法がわからない方へは機会をみてやり方を説明したいと思います。
本日はここまでで失礼します。
