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

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

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

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

<div class='non-ads'>
 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中01 -->
<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>

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

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

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>
<!-- レクタングル中01 -->
<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>

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

これで完成です。

コメントを残す

メールアドレスが公開されることはありません。

PAGE TOP
%d人のブロガーが「いいね」をつけました。