WordPressで記事に直接ショートコードを載せたい場合、そのまま記事のブロックにコードを書き込んでも、Webページ上ではコードが表示されません。
たとえば、下のコードはアフィリエイト広告を載せるためのカッテネというプラグインに使用するショートコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
[kattene] { "image": "【画像URL】", "title": "【タイトル】", "description": "【説明】", "sites": [ { "color": "orange", "url": "【メインのURL】", "label": "Amazon", "main": "true" }, { "color": "blue", "url": "【商品のURL】", "label": "Kindle" }, { "color": "red", "url": "【商品のURL】", "label": "楽天" }, { "color": "green", "url": "【商品のURL】", "label": "楽天Kobo" }, { "color": "pink", "url": "【商品のURL】", "label": "audiobook" } ] } [/kattene] |
これをコードとして貼り付けると、下のようにHTML表示されてしまします。

これでは、コードを紹介することが出来ませんね。
今回は、WordPress上でコードをテキスト表示するための設定方法についてご紹介します。
ソースコードのまま掲載するにはプラグインが必要
ソースコードを記事に掲載するにはプラグインを導入すれば簡単です。
「Crayon Syntax Highlighter」というプラグインを入れてみましょう。
インストール方法は、
- プラグイン>新規追加> Crayon Syntax Highlighter の検索>インストール>有効化
プラグインを忘れずに有効化します。
テキスト入力欄で、○に+が書かれたものを押すと、フォーマットの中に整形済みテキストがあります。

これがコードを記事に埋め込むツールです。
これをクリックすると、コード入力欄が表示されますので、コードを書き込みます。

この状態でプレビューしてみると、しっかりコードが埋め込まれていまね。
コードの表示を変えたければ、プラグイン>インストール済みプラグインからCrayon Syntax Highlighterの「settings」をクリック。

Themeを変えて好みの表示に変えることが出来ます。

好みの表示形式が決まったら、ページ最下部のSave Changesをクリックすると設定が反映されます。
どうぞ使ってみて下さい!
この記事へのコメントはありません。