201709/13

WordPressでソースコードを機能させずに表示させるプラグイン

アドセンスを非表示にする記事を書こうとしたら、
説明のためのタグを入れると、
そのタグが有効になってしまって困りました。

説明のためにタグを記載して、
・タグが機能しないように
・しかもコピペができるように
するにはどうすればいいのかな。

良く見る　こういった状態にしたい。　↓

<div class='non-ads'>
 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中０１ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4232461656474788"
     data-ad-slot="061698734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
</div>

そこでいろいろ調べて、こちらも時間をかけてやっとできましたので忘れないように記事にしておきます。

1 ソースコードをエディタのように表示できるプラグイン

ソースコードをエディタのように表示できるプラグイン

SyntaxHighlighter Evolvedをインストールする

Word Press の管理画面　ダッシュボードに行きます。
プラグイン　→　新規追加　を選択します。

次に　キーワード　の覧に　SyntaxHighlighter Evolvedと入力します。

SyntaxHighlighter Evolved　の　今すぐインストール　をクリックします。

インストールができたら、有効化　をクリックして有効化します。

これで　SyntaxHighlighter Evolved　が有効化されました。

SyntaxHighlighter Evolvedの設定をする

左側のメニューの　設定　→　 SyntaxHighlighter Evolved　を選び、SyntaxHighlighter Evolved　の設定画面に移動します。

SyntaxHighlighter Evolvedのバージョンを選ぶ

バージョン2　または　バージョン3　のどちらかを選びます。

•バージョン2
行の折り返しが許可されています。
•バージョン3
長い行の場合は横スクロールバーが表示されます。
訪問者がマウスを使用してドラッグかダブルクリックで、コードの部分を強調表示し、クリップボードにへコピーできます。

SyntaxHighlighter Evolvedのテーマを選ぶ

テーマ　のところで、ソースコードの表示スタイルを選びます。

私は　Django　を選んでいます。
表示スタイルは、設定画面の下のほうに　プレビュー　が表示されていますので、そちらで確認ができます。

Django

デフォルト

規定の設定をする

規定の設定

これで、投稿の編集　画面を閉じて、各記事の画面に移動します。

SyntaxHighlighter Evolvedの使い方

記事の中でショートコードを設置する

表示したい記事の投稿ページにいきます。

そこで　表示したいソースコードを　[　　]ソースコード[/　　]　で囲みます。

例えば、下記のようにすると

このように表示されます。

<div class='non-ads'>
 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中０１ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4232461656474788"
     data-ad-slot="061698734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
</div>

ソースコードの種類によって　[　　]　の中を変更します。

これで完成です。