ブログ記事をコピー禁止にし、ソースコードのみコピペ可能にする方法（作業時間２分）
今回のワードプレステーマカスタマイズの話はブログ記事の一部だけをコピペ可能にする方法をご紹介します。
こんな方に役立ちます
- ブログコピペ禁止にしたけど、ソースコード部分を解除したい人
- WP Content Copy Protection & No Right ClickとHighlighting Code Blockという両方プラグインを使っていてコード部分だけコピペ解除したい方限定の話
目次
Content
ブログ記事をコピー禁止にし、ソースコードのみコピペ可能にするやり方は２ステップのみ
以下の手順でコピペするだけです。
STEP1
外観 > カスタマイズ > 追加CSSに以下のソースコードをコピー
/* ============================================
コードブロックのコピー保護を解除
Highlighting Code Block用の設定
============================================ */
pre,
code,
.hljs,
.highlighting-code-block-container {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
pointer-events: auto !important;
}
/* ========== コピー保護解除 ここまで ========== */STEP2
子テーマのfunction.phpの一番下に追加
/* ============================================
コードブロックのコピー保護を解除
Highlighting Code Block用のJavaScript
============================================ */
function enable_code_copy() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// コードブロック要素を取得
var codeElements = document.querySelectorAll('pre, code, .hljs');
codeElements.forEach(function(element) {
// 右クリックイベントの伝播を停止
element.addEventListener('contextmenu', function(e) {
e.stopPropagation();
}, true);
// コピーイベントの伝播を停止
element.addEventListener('copy', function(e) {
e.stopPropagation();
}, true);
});
});
</script>
<?php
}
add_action('wp_footer', 'enable_code_copy', 999);
/* ========== コピー保護解除 ここまで ========== */以上となります。
一応、どんな挙動するかわからないので、ソースコードを事前にバックアップしておいてください。何かあっても自己責任でお願いします。
今回の記事は備忘録を兼ねて記録しておきました。
あくまでもHighlighting Code Block用のJavaScriptコードなので、他のプラグインでの使用は絶対やめて下さい。
Highlighting Code Blockプラグインは重いのは承知して使ってますが、ワードプレステーマのsangoやcocoonは標準装備で便利でサイトカスタマイズにもいいのですが、【GOLD BLOG（ゴールドブログ）】の方が回遊率、滞在時間が長く、SEOには有利と判断し使ってます。
Highlighting Code Blockの機能がゴールドブログにあればいいなーとは思いますが、とりあえずシンプルなデザインが読むことに集中できるようなのでプラグインでコードを紹介してます。
最新情報は
Xで受け取れます。
この記事を書いた人 Wrote this article
hide
技術選や検定の点数分析からスキー上達のコツをテキスト、イラスト、写真、動画を使って解説。トップページにレベル別のトレーニングがあるのでブックマークしておくと便利です。
