どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法

      2015/11/07


WordPressで作成したブログでソースコードを紹介するとき、綺麗な表示にしてくれるCrayon Syntax Highlighterプラグインを利用している人も多い事でしょう。
人によってはCrayon Sytax Highlighterで作成した内容をショートコードでテンプレート化し、使いまわしたいという人も居るでしょう。

 
しかし、Crayon Syntax Highlighterはデフォルトの状態ではショートコードでテンプレート化したソースコードにはCSSが適用されず、ソースコードがそのまま表示されてしまいます。

 
Crayon Syntax Highlighterの不具合なのか、仕様なのか、考慮不足によるところなのかは不明ですが、運営をする上でショートコードでテンプレート化したソースコードについても、Crayon Syntax Highlighterの綺麗な表示を適用して欲しいものです。

 
Crayon Syntax Highlighterのショートコードでテンプレート化したソースコードにもCSSを適用する方法について、簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法
 

スポンサーリンク


 

Crayon Syntax Highlighterでショートコードでテンプレート化したソースコードにCSSを適用するとは?

Crayon Syntax Highlighterで、ショートコードでテンプレート化したソースコードにCSSを適用するというのは、Crayon Syntax Highlighterの機能で入力したソースコードをショートコードでテンプレート化した際に、Crayon Sytax HighlighterのCSSが適用されずそのまま表示されてしまうので、CSSを適用してショートコード化したソースコードについてもCSSを適用し、綺麗に画面で表示できるようにする事です。

 
Crayon Syntax Highlighterはプラグインの処理上、ショートコードでテンプレート化した内容をプラグイン上でスキャンする事が出来ず、Crayon Syntax HighlighterのCSSを読み込まない、コード部分のHTMLを改変する処理を行わなくなる等が起きます。

 
Crayon Syntax Highlighterでショートコードでテンプレート化したソースコードにCSSを適用させるには、プラグインのPHPを修正する必要があります。
プラグインのPHPを修正する必要があると言っても、とても簡単な修正で済むので、プラグインそのものの回収に抵抗がある人でも簡単にできます。

 

 

 

 

ショートコードでテンプレート化したソースコードにCSSを適用する方法

Crayon Syntax Highlighterで、ショートコードでテンプレート化したソースコードにCSSを適用するには、プラグインのPHPを修正する必要があります。
Crayon Syntax Highlighterをカスタマイズし、ショートコードでテンプレート化下ソースコードにCSSを適用するには次の修正を行う必要があります。

  • Crayon Syntax Highlighterのスキャン処理内でショートコードを展開してからスキャンする

 
Crayon Syntax Highlighterの処理では投稿コンテンツの内容をスキャンし、Crayon Syntax Highlighterでの綺麗な表示を適用するソースコードを探す処理があります。
その処理のなかではショートコードはショートコードのまま読み込まれてしまうので、ショートコードを展開した後にCrayon Syntax Highlighterの実際のスキャンを行うように修正する必要があるのです。

 

Crayon Syntax Highlighterのスキャン処理内でショートコードを展開してからスキャンする

Crayon Syntax Highlighterのスキャン処理内でショートコードを展開してからスキャンするには、次のPHPを修正しカスタマイズします。

  • crayon-syntax-highlighter/crayon_wp.class.php

 
修正をする箇所は「function capture_crayons」関数をカスタマイズし、引数でもらっている投稿コンテンツの内容にあるショートコードを展開する処理を加える必要があります。

 
ブラウザの検索機能で「function capture_crayons」と入力すると修正する関数はすぐに見つかるはずです。
その関数の一行目に次のコードを追記しましょう。ここでは後でカスタマイズしたことがわかりやすいよう、一行目にコメントを挿入しています。

 

 

 
実際に「function capture_crayons」関数に、カスタマイズのコードを追記した後の関数の最初の部分までは次のようなイメージになります。

 

 

この修正を加えて、実際に画面でショートコードでテンプレート化した内容を表示してみるとCSSが適用され、Crayon Syntax Highlighterのみやすい形式で表示されるようになりました。

 

 

 

 

この記事を読むうえで知っておきたい知識

この記事を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

ソースコードを綺麗に紹介できる Crayon Syntax Highlighterについて

【Wordpress】ソースコードを紹介したい! Crayon Syntax Highlighter

Crayon Syntax Highlighterの表示イメージ

Crayon Syntax Highlighterとは、ソースコードを綺麗で読みやすくするWordpressのプラグインです。

 
Crayon Syntax Highlighterには、ブログページを表示した際にプログラムに行番号をつけたり、関数を色分けして表示してくれたり、CSSでの整形が不要だったりと、ブログ運営者にとってもブログページの閲覧者にとってもとても利便性の高いプラグインです。

 
Crayon Syntax Highlighterの対応言語は次の通りです。
ここで紹介されているソースコードを紹介する場合は、綺麗で使いやすい形でユーザに閲覧してもらう事が出来ます。

  • ABAP
  • ActionScript
  • AmigaDOS
  • Apache
  • AppleScript
  • Arduino
  • Assembly (x86)
  • AutoIt
  • C
  • C#
  • C++
  • CoffeeScript
  • CSS
  • Delphi/Pascal
  • Diff
  • Erlang
  • Go
  • Haskell
  • HTML
  • Lisp
  • Lua
  • Microsoft Registry
  • MIVA Script
  • Monkey
  • MS-DOS
  • MySQL
  • Java
  • JavaScript
  • Objective-C
  • Perl
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Python
  • R
  • Ruby
  • Rust
  • Scheme
  • Shell (Unix)
  • Transact-SQL
  • TeX
  • Vim
  • Visual Basic
  • Visual Basic .NET
  • YAML

 
Crayon Syntax Highlighterを利用する上でのメリットは上げ始めるとキリがありませんが、例えば次のようなメリットがあります。
このメリットだけでも、Crayon Syntax Highlighterを導入する根拠とする事が出来るでしょう。

  • コードの種類により、タグや関数を自動的に色分けして見やすい
  • 行番号をつけられるので、記事内の説明も容易になる
  • HTML、JavaScript、CSS、PHPだけでなく多くのコードに対応してる
  • CSS(スタイルシート)での整形が不要になる
  • 表示されたソースコードを簡単にコピーできる

 
Crayon Syntax Highlighterのデメリットとしては画面の表示スピードが落ちる事で、パフォーマンス低下が起こる可能性がある事です。

 
画面の表示スピードが落ちるという事はユーザーの離脱率が上がったり、検索エンジンのクローラーにストレスを与えてSEO的に評価を落としてしまう可能性があるので、著しくパフォーマンスの悪いブログに導入すると更にパフォーマンス低下を起してしまう原因になります。

 
Crayon Syntax Highlighterのデメリットを解消するには「キャッシュ」を利用して、あらかじめ表示したいページを作成しておき、閲覧ユーザやクローラーに対してパフォーマンスの低下を感じさせない事が大切です。

 
Crayon Syntax HighlighterはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
Crayon Syntax Highlighterのインストールは次の手順が主流です。

  • WordPressのプラグインの「プラグインを追加」の画面で「Crayon Syntax Highlighter」と検索する
  • 検索で表示された「Crayon Syntax Highlighter」を「いますぐインストール」ボタンを押してインストール

 
Crayon Syntax Highlighterでソースコードを紹介する場合はエディタ画面の「Crayon」を追加する事で簡単に紹介する事が出来ます。
次の手順でソースコードの追加を行う事が出来ます。

  • エディタ画面の「Crayon」をクリックする
  • 「コード」を入力する
  • 「タイトル」を入力する
  • 「プログラム言語」を選択する
  • 「URL」を入力する
  • 「Line Range」を入力する
  • 「マークするライン」を入力する
  • 追加するコード固有の設定を行う
  • 「挿入」をクリックする

 
細かい設定手順を含めると大変な作業に思えますが、実際にコード紹介で行わなければならないのは最低限『エディタ画面の「Crayon」をクリックする』『「コード」を入力する』『「挿入」をクリックする』のみです。

 

【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因
Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されないというのは、Crayon Syntax Highlighterの内容をショートコードでテンプレート化してショートコードを呼び出す形でブラウザの記事画面に出力するとソースコードの紹介にCSSが反映されないというものです。

 
Crayon Syntax Hilighterの内容をショートコード化としてテンプレート化する事でCSSが反映されない原因は、Crayon Syntax Highlighterが記事内容からCrayon Syntax HilighterのCSSを適用する対象の記事である事を認識できない事です。

 
Crayon Syntax Highlighterで記事内でソースコードが紹介されている事をプラグインが検知すると、HTMLのヘッダーにCrayon Syntax HighlighterのCSSやJSファイルを読み込むようにプラグインが動作する為、テンプレート化したCrayon Syntax Highlighterの内容をショートコードで記述するとタグなどを読み取る事が出来ずに必要なCSSやJSファイルが記事のHTMLに追加されなくなってしまうのです。

 

【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法
Crayon Syntax Highlighterで、ショートコードでテンプレート化したソースコードにCSSを適用するというのは、Crayon Syntax Highlighterの機能で入力したソースコードをショートコードでテンプレート化した際に、Crayon Sytax HighlighterのCSSが適用されずそのまま表示されてしまうので、CSSを適用してショートコード化したソースコードについてもCSSを適用し、綺麗に画面で表示できるようにする事です。

 
Crayon Syntax Highlighterで、ショートコードでテンプレート化したソースコードにCSSを適用するには、プラグインのPHPを修正する必要があります。
Crayon Syntax Highlighterをカスタマイズし、ショートコードでテンプレート化下ソースコードにCSSを適用するには次の修正を行う必要があります。

  • Crayon Syntax Highlighterのスキャン処理内でショートコードを展開してからスキャンする

 

 
Wordpressでソースコードを紹介するCrayon Syntax Highlighterについては「【WordPress】ソースコードを紹介したい! Crayon Syntax Highlighter」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

Crayon Syntax Highlighterのショートコードでテンプレート化したソースコードにCSSを適用する方法 あとがき

Crayon Syntax Highlighterのショートコードでテンプレート化したソースコードにCSSを適用する方法について解説しました。
Crayon Syntax Highlighterの見映えの良くなる機能はやはり便利ですし、Wordpressのショートコードの処理結果としてコンテンツ内容を表示できる機能も便利です。

どちらも便利な機能なので、組み合わせて使う事で、よりWordpressでの記事作成作業が軽くなった上で、記事を表示させた時の見映えが良くなるのでどちらかが使えないというのはやはりもったいないことだと思います。

デフォルトでCrayon Syntax Highlighterのショートコードでテンプレート化したソースコードにCSSを適用されないのは実は根が深い問題ですが、それはまたの機会に・・・
とにもかくにもCrayon Syntax Highlighterのショートコードでテンプレート化したソースコードにCSSを適用する方法を使って綺麗な見映えでソースコードを紹介していきましょう。

 

 

 

 

Crayon Syntax Highlighterのショートコードでテンプレート化したソースコードにCSSを適用する方法 まとめ

Crayon Syntax Highlighterで、ショートコードでテンプレート化したソースコードにCSSを適用するというのは、Crayon Syntax Highlighterの機能で入力したソースコードをショートコードでテンプレート化した際に、Crayon Sytax HighlighterのCSSが適用されずそのまま表示されてしまうので、CSSを適用してショートコード化したソースコードについてもCSSを適用し、綺麗に画面で表示できるようにする事です。

 
Crayon Syntax Highlighterで、ショートコードでテンプレート化したソースコードにCSSを適用するには、プラグインのPHPを修正する必要があります。
Crayon Syntax Highlighterをカスタマイズし、ショートコードでテンプレート化下ソースコードにCSSを適用するには次の修正を行う必要があります。

  • Crayon Syntax Highlighterのスキャン処理内でショートコードを展開してからスキャンする

 
Crayon Syntax Highlighterの処理では投稿コンテンツの内容をスキャンし、Crayon Syntax Highlighterでの綺麗な表示を適用するソースコードを探す処理があります。
その処理のなかではショートコードはショートコードのまま読み込まれてしまうので、ショートコードを展開した後にCrayon Syntax Highlighterの実際のスキャンを行うように修正する必要があるのです。

 
Crayon Syntax Highlighterのスキャン処理内でショートコードを展開してからスキャンするには、次のPHPを修正しカスタマイズします。

  • crayon-syntax-highlighter/crayon_wp.class.php

 
修正をする箇所は「function capture_crayons」関数をカスタマイズし、引数でもらっている投稿コンテンツの内容にあるショートコードを展開する処理を加える必要があります。

 

 
最後までお読みいただきありがとうございした。

スポンサーリンク





 - Wordpress , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

Crayon Syntax Highlighterとは?
【WordPress】ソースコードを綺麗に紹介したい! Crayon Syntax Highlighter

ブログ運営をしていてプログラムのソースコードを利用したいという人は、「Crayo …

【Wordpress】プラグインを自作する上で絶対に知っておきたい事
【WordPress】プラグインを自作する上で絶対に知っておきたい事

WordPressでブログを運営していて、上級者になってくると「より自分にあった …

【Wordpress】プラグインを使う上で絶対参考にしたい考察
【WordPress】プラグインを使う上で絶対参考にしたい考察

WordPressでブログを運営し、さまざまなプラグインを利用しオリジナリティあ …

【Wordpress】ブログを高速化するプラグイン特集! 高速化の果てへ
【WordPress】ブログを高速化するプラグイン特集! 高速化の果てへ

WordPressでブログを高速化する上で、プラグインの導入は今や必須となってい …

【Wordpress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize
【WordPress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize

WordPressでブログを運営していて、ブログの表示速度を高速化させるために、 …

【Wordpress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense
【WordPress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense

WordPressでブログを運営し、Google Adsenseを使ってブログを …

【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因
【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因

WordPress上のブログでソースコードを紹介するのに、プラグインとしてCra …

【Wordpressプラグイン自作】プラグインの処理をWordpressに実行させる「フック」
【WordPressプラグイン自作】プラグインの処理をWordPressに実行させる「フック」

WordPressでプラグインを自作で開発する人にとって絶対に避けて通る事が出来 …

【TinyMCE Templates】ショートコードで定型文を一括変更!
【TinyMCE Templates】ショートコードで定型文を一括変更!

WordPressでブログを運営している人で「TinyMCE Templates …

【Wordpress開発環境】Wordpressのテーマ・プラグインの開発環境を構築する[Windows7]
【WordPress開発環境】WordPressのテーマ・プラグインの開発環境を一から構築する[Windows7]

WordPressについて知れば知るほど、「オリジナルのテーマを作成したい」「自 …