◆記事にソースコードを載せる
リンク先: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/)
一般設定
テーマ: ※初期値のまま
フォント:フォントサイズ指定 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メールを送信」
ログファイルは存在し、書き込み可能です。
では、ちょっとテストしてみます。
1 2 3 4 5 6 7 |
{ "error": { "message": "(#803) Cannot query users by their username (eriko.takashiro)", "type": "OAuthException", "code": 803 } } |
何となく上手くいったようですが、え~ん、思った様に表示されていません(涙)、、、ですが、これにいつまでもかかってられません。という事で、設定についての見直しは後ほどすることにして(一応、記事の中に埋め込むまでは出来ているので、設定ミスを直せば最終的にはちゃんと表示されると言う見通しで^^;)、急ぎの他の案件に取り組む事にします。
※2015.09.04 アップデートした後、単純に「リセット」をかけたら、思った様に表示できました(^^;) プラグインに関しては、勉強中はあまり突き詰めない方がいいようですね(笑)
参照ページ:エス技研(http://blog.s-giken.net/87.html)