【WordPress】プラグイン⇒Crayon Syntax Highlighter

◆記事にソースコードを載せる

リンク先:Crayon Syntax Highlighter 日本語(https://ja.wordpress.org/plugins/crayon-syntax-highlighter/
リンク先:Crayon Syntax Highlighter(https://wordpress.org/plugins/crayon-syntax-highlighter/

【導入動機】

記事を書く際に、ソースコードの記述が必須となってきた為(完全なるやっつけ独学なので、常に必要に迫られての導入となります^^;)

【状  況】

とりあえずインストールして有効化。

【記事内容】

◆インストール

①管理画面 > プラグイン > 新規追加  > 「Crayon Syntax Highlighter」で検索 > WordPress.org からダウンロード > インストールして有効化

※これに関しては全てのプラグインと共通です

◆設定

①管理画面 > 設定 > Crayon

※急ぎで使いたいので、設定に関しては以下のページを参考に設定を行いました。後は時間のある時に細かい設定方法を勉強したいと思います。

参照ページ:ゆめぴょんの知恵(http://wispyon.com/crayon-syntax-highlighter/

20150625301

20150625302

20150625303

20150625304

一般設定

テーマ: ※初期値のまま

フォント:フォントサイズ指定 16ピクセル、Line Height 20ピクセルに設定して文字を大きめに表示するようにした
※元々のテーマのフォントが小さいので(これもいずれCSSを触るつもりですが、今は初期値のまま)、少し大き目に

サイズ: ※初期値のまま

ツルーバー:
・ツールバーの表示 ⇒ 常に表示 ※変更
・タイトルがある時は表示 ⇒ off ※変更  on ※2015.06.25元に戻す
・ソース言語を表示 ⇒ 表示しない ※変更

行: ※初期値のまま
・コード行を縞模様で表示する ⇒ on
・重要な行にマーキングを有効にする ⇒ on
・Enable line ranges for showing only parts of code ⇒ on
・デフォルトで行番号を表示 ⇒ on
・行番号の切り替えを有効にする ⇒ on
・Wrap lines by default ⇒ off
・Enable line wrap toggling ⇒ on
・行番号の開始数字 ⇒ 1

コード: ※コメントを入れてない項目は初期値のまま
・単純なコードビューを有効にする 「ダブルクリック時」 ⇒ on
・単純なコードの切り替えを有効にする ⇒ on
・デフォルトでプレインコードを表示する ⇒ off
・コードのコピー/貼り付けを有効にする ⇒ on
・新しいウインドウでコードを開くを有効にする ⇒ on
・常にスクロールバーを表示する ⇒ on ※変更
・コードを最小化 ? ⇒ off
・マウスオーバーでページ罫線を超えてコードを展開します ⇒ off
・可能な場合はトグル拡張コードを有効にします ⇒ off ※変更
・コード内のHTMLエンティティを出力 ⇒ on ※変更
・属性内のHTMLエンティティを出力 ⇒ on ※変更
・ショートコードの内容を囲む空白の部分を削除します ⇒ on ※変更
・ショートコンテンツを囲む<コード>タグを削除 ⇒ off ※変更
・区切り文字とタグが混合言語の強調表示を許可する。 ? ⇒ off ※変更
・混合言語のアイコンを(+)を表示 ⇒ off ※変更
・Convert tabs to spaces ⇒ off  ※参考ページにはなかったので初期値のまま
・tab挿入の空白代替え数(単純コードビュー): 4
コー​​ドの前に空白行: 0
コー​​ドの後に​​空白行: 0

タグ:※コメントを入れてない項目は初期値のまま
・インラインタグをキャプチャ ? ⇒ off ※変更
・ラップインラインタグ ? ⇒ off ※変更
・キャプチャの<code>など ? 「inline Tag」⇒ off
・の<code>として バッククォートをキャプチャする ? ⇒ off ※変更
・Crayonsとして<pre>タグをキャプチャ ? ⇒ off ※変更
ミニタグとインラインタグにこのマークアップを使用すると、今されている減価償却します!使用タグエディタを代わりにして、従来のタグに変換します。
・Crayonsとして{php/php}のようなミニタグをキャプチャします。 ? ⇒ on ※変更
・{php}{/php}文の内部でインラインタグをキャプチャします。 ? ⇒ off
・[plain][/plain]タグを有効にします。 ? ⇒ off

プログラム言語: ※初期値のまま
・ソース言語が提供されていない場合は、代替えを使用します。: Default
63 languages have been detected. 解析が成功しました。.

読込ファイル: ※初期値のまま
ローカルファイルのロード時と相対パスがURLに指定されている場合、絶対パスを使用します。:
http://ca-va-ya.com/ ※以降、未入力
相対URLが続きます。

Posts: ※ボタンは触らず
Show Crayon Posts ? / Refresh

タグエディタ: ※コメントを入れてない項目は初期値のまま
No Legacy Tags Found ※参考ページでは「Cobvert Lesacy Tags」となっている
・Encode ? ⇒ off
・<pre> のクラス属性の値から設定名を区切るには「:」を使う。 ?
・Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress) ? ⇒ off
・Display Tag Editor settings on the frontend ⇒ off ※変更
・Add Code button text ⇒ Add Code ※参考ページにはなかったので初期値のまま
・Edit Code button text ⇒ Edit Code ※参考ページにはなかったので初期値のまま
・Quicktag button text ⇒ crayon ※参考ページにはなかったので初期値のまま

その他:※コメントを入れてない項目は初期値のまま
・リモートコードリクエストで使用する為保存したキャッシュをクリアする: 「毎日」「今すぐクリア」
・必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる ? ⇒ on ※変更
・ループを含む可能性のあるページテンプレートのエンキューを無効にします。 ? ⇒ on
・コメント内のクレヨンを許可する ⇒ off ※変更
・Crayon抜粋から削除 ⇒ on ※変更
・唯一の主要なWordpressのクエリからロードクレヨン ⇒ on ※変更
・タッチスクリーンデバイスに対してマウスジェスチャー(例:マウスオーバー)を無効にする ⇒ on
・アニメーションを無効にする ⇒ on
・プログラム実行時の統計を無効にする ⇒ on ※変更
Disable for posts before: 「年 / 月 / 日」※参考ページにはなかったので初期値のまま
・Load scripts in the page footer using wp_footer() to improve loading performance. ⇒ off ※参考ページにはなかったので初期値のまま

デバッグ

エラー: ※参照ページではここは全てoffとなっているが、後々の為、一応初期値のまま
・個々設置(Crayon)のエラーを記録 ⇒ on
・システム全体のエラーを記録 ⇒ on
・カスタムエラーメッセージを表示する ⇒ on
「エラーが発生しました。後でもう一度やり直してください。」

ログファイル:
「ログを見る」「ログをクリア」「管理者にEメールを送信」「開発者にEメールを送信」
ログファイルは存在し、書き込み可能です。

では、ちょっとテストしてみます。

何となく上手くいったようですが、え~ん、思った様に表示されていません(涙)、、、ですが、これにいつまでもかかってられません。という事で、設定についての見直しは後ほどすることにして(一応、記事の中に埋め込むまでは出来ているので、設定ミスを直せば最終的にはちゃんと表示されると言う見通しで^^;)、急ぎの他の案件に取り組む事にします。

※2015.09.04 アップデートした後、単純に「リセット」をかけたら、思った様に表示できました(^^;) プラグインに関しては、勉強中はあまり突き詰めない方がいいようですね(笑)

参照ページ:エス技研(http://blog.s-giken.net/87.html