どうしたらいいのNAVI

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

【WordPress】記事作成や作業を効率化するおすすめのプラグイン

      2015/11/07


ブログをWordpressで運営している人は多いですよね。
ブログをWordpressで運営している上で気になるのが「プラグイン」の存在です。

 
ブログを運営する上で何と言っても多くの時間を費やすのが「記事作成」の作業ですよね。
Wordpressでは、記事の作成を効率化するプラグインが存在し、ブログ運営で必須となる記事作成を機能的に支援してくれます。

 
記事作成を効率化してくれるおすすめのプラグインを導入する事によって、面倒くさくて煩わしかった作業を一気に行う事が出来たりするので、作業時間を大幅に削減して効率化してくれます。

 
Wordpressで記事作成や作業を効率化してくれるオススメのプラグインについて簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【Wordpress】記事作成や作業を効率化するおすすめのプラグイン
 

 

記事作成や作業を効率化するオススメプラグイン

WordPressのプラグインの中には、記事作成や作業を支援してくれるプラグインが存在し、煩わしい入力作業を単純化してくれたり、定型文をテンプレート化してくれたり、ある文字列を全記事一括で削除・更新してくれたりするなど、記事作成から作業までを大幅に効率化してくれるプラグインが存在します。

 
記事作成や作業を効率化する事で、新たな記事作成の作業の時間を確保したり、体を休めたり、新たなアイデアを生み出す時間を作ったりとさまざまな面でポジティブな効果が高いので、記事作成や作業を効率化する事は重要な事です。

 
記事作成や作業を効率化する上では、ブログ収益化の上で重要な「広告の掲載」を簡単にしてくれたり、自動で挿入するプラグインも含んで考える必要があるでしょう。

 
記事作成や作業を効率化してくれるプラグインには次のようなものがあります。

  • ブログ定型文を簡単挿入してくれる TinyMCE Templates
  • Google Adsense等の広告を簡単に自動挿入する Quick Adsense
  • プログラムコードを綺麗に簡単紹介出来る Crayon Syntax Highlighter

 
記事作成や作業を効率化してくれるおすすめプラグインについて具体的に見てみましょう。

 

 

 

ブログ定型文を簡単挿入してくれる TinyMCE Templates

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templatesとは、Wordpressのプラグインの一つで、保存しておいたプラグインを記事の投稿の際に呼び出し、テンプレートとして挿入してくれるプラグインです。 
テンプレートとして保存しておいた内容を執筆の際に使う事が出来るので、自分の良く使う言い回しや言葉等の定型文をテンプレートとして保存しておき、呼び出す事で、記事執筆にかかる負担を軽減する事が出来ます。 
定型文の挿入は良くあるプラグインでは、記事の最初と最後だけに挿入する物が多いと思いますが、TinyMCE Templatesでは記事の途中にも定型文を挿入する事が出来ます。 
TinyMCE TemplatesはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。 
TinyMCE Templatesのインストールは次の手順が主流です。<ul><li>Wordpressのプラグインの「プラグインを追加」の画面で「TinyMCE Templates」と検索する</li><li>検索で表示された「TinyMCE Templates」を「いますぐインストール」ボタンを押してインストール</li></ul><p> <br /> TinyMCE Templatesでは、煩わしい細かい設定はありません。<br /> 強いて言うなら、TinyMCE Templatesの設定と言えば予めテンプレートを作成しておく事だけです。</p><p> <br /> TinyMCE TemplatesはWordpressでブログを運営し、記事を投稿している人ならば直感的に使う事が出来るシンプルな使い方です。<br /> TinyMCE Templatesでは、次のような流れで、定型文をテンプレートとして保存し、記事の投稿の際に挿入する事が出来ます。</p><ul><li>テンプレートを新規追加する</li><li>記事投稿の際にテンプレートを呼び出す</li></ul><p> <br /> TinyMCE Templatesでテンプレートを新規追加では、あらかじめ良く使う定型文や言葉等をテンプレートとして保存しておく事で、記事の執筆の際に挿入するテンプレートとして保存しておく事が出来ます。</p><p> <br /> テンプレートの新規追加は次の手順で行えます。</p><ul><li>Wordpressの項目の中から「テンプレート」を選択</li><li>テンプレートの画面の「新規追加」を選択</li><li>テンプレートの新規追加画面にタイトル、内容を追加</li></ul><p> <br /> 記事投稿の際に、あらかじめ保存しておいたテンプレートを呼び出して定型文を挿入する事が出来ます。<br /> 記事の内容として定型文を挿入する流れは次のように行います。</p><ul><li>記事の内容でテンプレートを挿入したい場所を予め選択しておく</li><li>記事投稿画面の「テンプレートを挿入」ボタンを押す</li><li>挿入したいテンプレートを選択し、「テンプレートを挿入」ボタンを押す</li></ul><p> <br /><p>TinyMCE Tempatesにはテンプレートに定型文を登録する際に、ショートコードを利用する設定にしておく事で、ショートコードを使って定型文を記事に挿入することが出来ます。</p><p> <br /> ショートコードを利用して、定型文を挿入する事で、もしも定型文に修正があった場合に、テンプレートを修正するだけで、一括して定型文を変更する事が出来ます。<br /> ショートコードで定型文を挿入する方法は簡単です。</p><p> <br /> TinyMCE Templatesを使って定型文を挿入するには次の手順を行います。</p><ul><li>テンプレートを「ショートコードとして挿入」する設定にする</li><li>記事投稿画面でテンプレートを挿入する</li></ul></p><p> <br /><p><img width=
TinyMCE Templatesのテンプレート挿入時にHTML自動整形を停止するカスタマイズとは、TinyMCE Templatesに登録したテンプレートを投稿する内容として選択して挿入するときに<p>タグの挿入や<br />タグの追加、不要な改行の削除等のHTML自動整形を停止するカスタマイズのことです。

 
ビジュアルエディター(リッチエディター)で作業をする事がメインの人にとってはあまり気にする必要のないことだと思いますが、テキストをベースに作業をしている人にとっては、入力したテンプレートの内容が勝手に変更されてしまうのは、このプラグインを利用するかどうかを分ける程の死活問題となります。

 
TinyMCE Templatesのテンプレート挿入時のHTML自動整形を停止する方法では、プラグインのPHPファイルを改修して行います。

 

ブログの定型文を簡単挿入できるTinyMCE Templatesについては「【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates」で簡単でわかりやすく、詳しく紹介しているのでチェックしていってください。

 

 

 

Google Adsense等の広告を簡単に自動挿入する Quick Adsense

【Wordpress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense
Google Adsenseの広告を簡単掲載してくれるQuick Adsenseとは、Googleアドセンスのコードをプラグインに設定しておく事で、簡単に広告を掲載してくれるプラグインです。

 
Quick Adsenseでは自動的に記事上と、記事下に設定しておいたGoogleアドセンスを自動的に広告として追加してくれたり、記事の中に自動的に追加してくれる機能。ウィジットする機能があったり詳細な設定が出来たりと広告掲載でとても便利なプラグインです。

 
まとめておくと、Quick Adsenseでは、Googleアドセンス広告を掲載する上で次のような事が出来ます。

  • 投稿記事上に自動的にアドセンス広告を挿入する
  • 投稿記事中に自動的にアドセンス広告を挿入する
  • 投稿記事下に自動的にアドセンス広告を挿入する
  • <!–more–>タグの後に自動的にアドセンス広告を挿入する
  • 最後の段落の前にアドセンス広告を挿入する
  • 任意の段落の後にアドセンス広告を挿入する
  • 挿入した画像の直後にアドセンス広告を挿入する
  • アドセンス広告に関わる各種設定
  • アドセンス広告を挿入してくれる各種クイックタグの利用
  • Wordpressの投稿画面にクイックタグの挿入ボタンを追加してくれる
  • アドセンス広告のウィジットの追加

 
Quick AdsenseはとてもGoogleアドセンスのみならず広告を掲載する上ではとても優れたプラグインなのですが、デフォルトのままだと設定した日本語が文字化けする不具合があります。

 
例えば、「スポンサーリンク」などをQuick Adsenseに直接入力し利用しようとすると、文字化けし意味の分からない記号や文字で表示されてしまいます。

 
Quick Adsenseを利用する上では日本語を入力できるように、次のような対策を行い文字化けを対応する必要があります。

  • Quick Adsenseのプログラムを一部修正する
  • ショートコードの利用
  • 他プラグインとの併用

 

Wordpressのプラグインの一つであるQuick Adsenseは日本語の入力に対応していない為、挿入しようとしている広告コード内に日本語が含まれる時に、この日本語の表記が文字化けしてしまいます。

 
文字化けした文字は、何回か設定を保存しているうちに文字化けに、更に文字化けを重ねて膨大テキスト量の広告コードとなってしまう為、Quick Adsenseを利用する上では日本語の対応は必須と言えます。

 
Quick Adsenseの意識している広告である「Google Adsense」でも、広告の名前に日本語表記を用いると、広告のスニペットのコメントとして広告の日本語表記が追加されるので、Google Adsenseの広告を掲載する上でも注意が必要です。

 
Quick Adsenseで日本語文字化けの対応の方法として「quick-adsense-admin.php」を編集する事で、日本語に対応する事が出来ます。
Quick Adsenseの日本語文字化けの対応は次の流れで行いましょう。

  • 「quick-adsense-admin.php」の編集画面を開く
  • 日本語に対応させるPHPコードを追記する

 

Quick Adsenseを使って広告を掲載するには、主に設定によって記事やブログのサイドバーなどに広告を掲載する使い方が基本となります。
設定によって利用する広告や広告の位置などを指定する事で、Quick Adsenseがブログ内のさまざまなな位置に自動で広告を掲載してくれます。

 
つまり、Quick Adsenseを利用する上で、重要となってくるのが設定となります。

 
Quick Adsenseで広告掲載をする上で重要となる設定について具体的に見ていきましょう。
Quick Adsenseの設定は大きく分けると次のような設定に分ける事が出来ます。

  • 記事内に掲載する広告の位置に関する設定
  • 広告を掲載するページの種類に関する設定
  • エディタのクイックタグに関する設定
  • ウィジットとして掲載する広告の設定

 
WordpressでGoogle Adsenseの広告を簡単掲載するプラグインであるQuick Adsenseについては「【WordPress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってくださいね。

 

 

 

プログラムコードを綺麗に簡単紹介出来る 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」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

スポンサーリンク


WordPressで記事作成や作業を効率化するおすすめのプラグイン あとがき

WordPressでブログ運営する上で、記事作成や作業を効率化するおすすめのプラグインについて紹介しました。
情報を提供したり、日記を書いたり、読み物系の記事を書いたりする、どんな作業でもやはり作業の効率化は意識した方が良いと思います。

 
作業の効率化を磨くだけで、ブログの更新がはるかに簡単になりますし、作業効率化の作業が功を奏して新たなアイデアを生んだり、いざというときの解決策を知る事が出来たりと作業の効率化は良い事ずくめなのです。

 
記事作成も楽になり、ブログ更新が苦になっていた人も作業効率化をする事で「ブログの更新ってなんて楽しい作業なんだ!」と感じる事が出来るかもしれません。

 
記事作成・作業が効率化される事で新たな記事を作成する時間や多くの情報を一つの記事で提供する事に割く時間を確保する事が出来るので、検索エンジンからも気に入られ、たくさんの集客を得る事が出来る可能性も効率かは秘めているのです。

 
作業効率化する事で新しい事にもチャレンジする機会も増えてくるので、ブログ更新のあらゆる面でプラスの効果が生まれてくるでしょう。

 
記事作成・作業を効率化して、一味違った優れたブロガーを目指してみてはどうでしょうか。

 

 

 

 

WordPressで記事作成や作業を効率化するおすすめのプラグイン まとめ

WordPressのプラグインの中には、記事作成や作業を支援してくれるプラグインが存在し、煩わしい入力作業を単純化してくれたり、定型文をテンプレート化してくれたり、ある文字列を全記事一括で削除・更新してくれたりするなど、記事作成から作業までを大幅に効率化してくれるプラグインが存在します。

 
記事作成や作業を効率化する事で、新たな記事作成の作業の時間を確保したり、体を休めたり、新たなアイデアを生み出す時間を作ったりとさまざまな面でポジティブな効果が高いので、記事作成や作業を効率化する事は重要な事です。

 
記事作成や作業を効率化する上では、ブログ収益化の上で重要な「広告の掲載」を簡単にしてくれたり、自動で挿入するプラグインも含んで考える必要があるでしょう。

 
記事作成や作業を効率化してくれるプラグインには次のようなものがあります。

  • ブログ定型文を簡単挿入してくれる TinyMCE Templates
  • Google Adsense等の広告を簡単に自動挿入する Quick Adsense
  • プログラムコードを綺麗に簡単紹介出来る Crayon Syntax Highlighter

 

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templates
TinyMCE Templatesとは、Wordpressのプラグインの一つで、保存しておいたプラグインを記事の投稿の際に呼び出し、テンプレートとして挿入してくれるプラグインです。

 
テンプレートとして保存しておいた内容を執筆の際に使う事が出来るので、自分の良く使う言い回しや言葉等の定型文をテンプレートとして保存しておき、呼び出す事で、記事執筆にかかる負担を軽減する事が出来ます。

 
定型文の挿入は良くあるプラグインでは、記事の最初と最後だけに挿入する物が多いと思いますが、TinyMCE Templatesでは記事の途中にも定型文を挿入する事が出来ます。

 
使い方もWordpressで記事を投稿したことがある人なら直感的に使う事が出来るので、ブロガーにとっては馴染みやすいツールの一つとも言えます。

 

Google Adsenseの広告を簡単掲載してくれるQuick Adsenseとは、Googleアドセンスのコードをプラグインに設定しておく事で、簡単に広告を掲載してくれるプラグインです。

 
Quick Adsenseでは自動的に記事上と、記事下に設定しておいたGoogleアドセンスを自動的に広告として追加してくれたり、記事の中に自動的に追加してくれる機能。ウィジットする機能があったり詳細な設定が出来たりと広告掲載でとても便利なプラグインです。

 
まとめておくと、Quick Adsenseでは、Googleアドセンス広告を掲載する上で次のような事が出来ます。

  • 投稿記事上に自動的にアドセンス広告を挿入する
  • 投稿記事中に自動的にアドセンス広告を挿入する
  • 投稿記事下に自動的にアドセンス広告を挿入する
  • <!–more–>タグの後に自動的にアドセンス広告を挿入する
  • 最後の段落の前にアドセンス広告を挿入する
  • 任意の段落の後にアドセンス広告を挿入する
  • 挿入した画像の直後にアドセンス広告を挿入する
  • アドセンス広告に関わる各種設定
  • アドセンス広告を挿入してくれる各種クイックタグの利用
  • Wordpressの投稿画面にクイックタグの挿入ボタンを追加してくれる
  • アドセンス広告のウィジットの追加

 

【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」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

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

スポンサーリンク





 - Wordpress , ,

Message

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

  関連記事

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

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

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!

W3 Total Cacheにはブラウザキャッシュに関する詳細な設定を行う事が出 …

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

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

【Wordpress開発環境】Wordpress初期設定で必要なデータベースの作成
【WordPress開発環境】WordPress初期設定で必要なデータベースの作成

WordPressはレンタルサーバーでブログ運営する場合、多くのレンタルサーバー …

【Quick Adsense】記事中に自動で広告を掲載したい!Quick Adsenseを設定する
【Quick Adsense】記事中に自動で広告を掲載したい!Quick Adsenseの設定

広告でブログの収益化をしている人は「記事中に自動で広告を貼りたい」と考える人も居 …

【Stinger5】Stinger5のカスタマイズ方法のまとめ特集
【Stinger5】Stinger5のカスタマイズ方法のまとめ特集

WordPressでブログを運営し、Stinger5を使っていると自分好みにカス …

【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定
【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定

W3 Total Cacheのブラウザキャッシュでは、画像や動画、音声ファイルと …

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

WordPressで作成したブログでソースコードを紹介するとき、綺麗な表示にして …

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)の全般設定
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)の全般設定

WordPressでブログを運営している人でキャッシュ系プラグインの王道である「 …

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

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