プラグイン「SyntaxHighlighter Evolved」でソースコード表示

プラグイン「SyntaxHighlighter Evolved」でソースコード表示

2014年4月13日

プラグイン「SyntaxHighlighter_Evolved」でソースコード表示___bibalogueなんとなくブログのデザインを変更したくなって、WordPressのテーマを前にも使っていたことがあるIconic Oneに戻しました。同じようなことを何回か繰り返しているので、そのうちまた変更することになると思います。

シンプルで見やすいデザインを自分で作れるといいのですが、まだまだ学ぶことがたくさんあって、なかなか実現することができません。

さて、今回ブログテーマをIconic Oneにしたついでに、ヘッダー部分にソーシャルネットワークのボタンを表示することにしました。このことは、Feedlyボタンを追加した時に記事にしました

今回は2度目なのでさらに工夫することにしました。まず、Google+を非表示にし、それからボタンを並びを変更し変更することにしました。

最近、Facebookが使いにくくなったという方が僕のまわりに出始めていますが、僕のとってGoogle+はまだ身近なツールではありません。僕の交友関係がある人でGoogle+ユーザーを使っている人はほとんどいない状況で、現時点ではブログに表示するメリットを見つけられないからです。

それから、ボタンの並び順の変更は完全に好みの問題です。オリジナルのままに並べると色の並びが気になってしまったので、並びかえることにしただけです。

そのために、header.phpファイルのコードを次のように書き換えました。僕の場合はだいたい56行目あたりからはじまるコードです。なお、Google+に関する記述は削除しないで、表示しないようにして残してあります。

[html firstline=”56″]
<!–google plus ボタン表示— <a href="<?php echo get_theme_mod( ‘plus_url’, ‘default_value’ ); ?>" rel="author" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/gplus.png" alt="Follow us on Google Plus"/></a>—>
<a href="<?php echo get_theme_mod( ‘rss_url’, ‘default_value’ ); ?>" target="_blank"><img alt="Follow us on rss" src="<?php echo get_template_directory_uri(); ?>/img/rss.png" /></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fbibalogue.com%2Ffeed%2F" target="blank"><img id="feedlyFollow" alt="follow us in feedly" src="http://s3.feedly.com/img/follows/feedly-follow-square-flat-green_2x.png" width="32" height="32" /></a>
<a href="<?php echo get_theme_mod( ‘twitter_url’, ‘default_value’ ); ?>" target="_blank"><img alt="Follow us on Twitter" src="<?php echo get_template_directory_uri(); ?>/img/twitter.png" /></a>
<a href="<?php echo get_theme_mod( ‘facebook_url’, ‘default_value’ ); ?>" target="_blank"><img alt="Follow us on Facebook" src="<?php echo get_template_directory_uri(); ?>/img/facebook.png" /></a>
[/html]

ブログにソースコードを表示するために「SyntaxHighlighter Evolved」というプラグインをインストールしました。このプラグインを使う前は、引用でコードを表示したりしていたのですが、やはりこちらの方がわかりやすいですね。