記事内にソースコードを埋め込むプラグインCrayon Syntax Highlighterの設定方法

カスタマイズ関連のことで説明したり、あるいは解説したりする際によく使っている『Crayon Syntax Highlighter』。こちらは、記事内にソースコードを綺麗に埋め込むのに大変重宝するプラグインです。

当プラグインさえインストールし、設定を施しておけばサイト運営者にとって非常に見やすく、そしてしっかりと記事を書いているんだなという印象を与えることもできてしまいます。

ぜひ、インストールし導入しておくことをオススメ致します。

Crayon Syntax Highlighterはなんで必要なの？

Crayon Syntax Highlighterを使って埋め込まれたソースコードとは、
具体的にこのようなものですね。

function pager_keni() {

	$pager = "";

	global $wp_query;
	$max_page = $wp_query->max_num_pages;
	$now_page = get_query_var('paged');
	if ($now_page == 0) {
		$now_page =1;
	}
	if ($max_page > $now_page) {
		$pager .= "<li class=\"nav-prev\">". get_next_posts_link('以前の記事へ') ."</li>\n";
	}

	if (is_paged()) {
		$pager .= "<li class=\"nav-next\">". get_previous_posts_link('新しい記事へ')."</li>\n";
	}

	if ($pager != "") {
		echo "<div class=\"cont-menu-wp\">\n<ul>\n".$pager."</ul>\n</div>\n";
	}
}

 

こんな風に、記事のなかにソースコードを綺麗に埋め込むに当プラグインは必要不可欠です。

サイトのカスタマイズの解説などをするときには必須ですし、
これを使っているだけでかなり信頼性の高い記事だと思ってもらえます。

と、いうのもPHPやCSSの編集をしたことがある方であれば分かるかと思いますが、
コードの編集というのはすごくデリケートで、
スペースや改行などが少しずれていただけでも
サイトのカスタマイズが大幅にずれてしまいます。

あなたがサイトに載せたコードをコピーして貼り付けた読者の方のサイトが、
真っ白になってしまった・・なんてことになったら大変ですよね＾＾；

信頼も失ってしまいますし、もう二度とサイトを見てもらえないかもしれません。

ですから、私たちのような情報発信者は日頃から、
確実で性格な情報だけを提供していかなければいけないですね。

『Crayon Syntax Highlighter』を使うことで、
ユーザーに対し正しいコード情報を提供することができます。

 

Crayon Syntax Highlighterのインストールと有効化

まずは、『Crayon Syntax Highlighter』のインストールと有効化をしていきましょう。

参考記事：WordPressにプラグインをインストールする方法

 

有効化が完了すると、『ダッシュボード＞設定』のなかに
『Crayon』というメニューが新たに追加されます。

 

ここをクリックすると、当プラグインの設定画面が表示されます。

 

Crayon Syntax Highlighterの設定方法

設定画面を開いてみると、下まで様々な設定・変更が可能ですが
基本的には、デフォルトのままで問題ありません。

ご自分でこだわりがある場合は細かな設定はこちらのなかで出来ますので、
好みや用途に合わせて手を加えていくとよいでしょう。

一応見ておくべきなのは『テーマ』と『サイズ』の2点のみです。

 

 

● テーマ

ここでは、表示されるソースコードの色合いやデザインが選べます。
色々な種類があり、背景色なども様々です。

気になるものをクリックしてみると、
下に表示されているコードがテーマに合わせてプレビューしてくれますので、
サイトのデザイン等も考慮ししっくりくるものを選びましょう。

特にこだわらないという場合であればデフォルトの『Classic』で問題ありません＾＾

● サイズ

サイトの記事などの横幅や高さを調節するための場所です。
投稿した際にユーザーが見やすいと思う大きさに調節しましょう。

 

ここまでできれば、あとは記事に埋め込んでいくだけです！

 

Crayon Syntax Highlighterの使い方

さて、ここまではプラグインの設定を解説してきましたが、
ここからは実際に記事に埋め込む方法を解説していきます。

まず、当プラグインを有効化しますと
テキストエディタのなかに『<>』というマークが出現するようになります。

ソースを埋め込みたいところでこのマークをクリックすると、
次にhtmlを記述するタブが出てきます。

 

 

ここでも、下へスクロールすることができ詳細設定することが可能ですが
何もしなければ、上の章で解説した設定画面通りに表示されます。

『コード』というところにソースコードをコピペしたら、
右上の<挿入>をクリックします。

 

 

これだけで、記事のなかに綺麗にソースコードが埋め込まれましたね。

 

 

設定通りに表示されているかどうかを確認するには、
一度プレビューでしっかりと確認してみてくださいね＾＾

 

これで、設定と使い方の解説は以上になります。
お疲れ様でした＾＾

 

まとめ

今回は、記事のなかに綺麗にソースコードを埋め込むためのプラグイン
『Crayon Syntax Highlighter』をご紹介致しました。

これをしっかりと使いこなすことで、
ユーザビリティはもちろんのこと、圧倒的に信頼度が向上します。

トレンドアフィリエイトだと当プラグインを使うことはなかなかないと思いますが、
情報発信を行ううえでは必ずインストールしておきたいプラグインです。

ぜひ、利用してみてくださいね。
それでは最後までご覧いただき、ありがとうございました。