開設してからこっち、このブログではコードの表示にWP SyntaxHighlighterを使っていました。このプラグイン、見た目はシンプルで満足していたんですが、使わない機能が多くてボリュームがあるし、いろいろなコードも吐き出す。で、長いこと更新されていないな、というわけでこのたび変更することにしました。
いくつかのHighlighter系のプラグインをテストしてみるも、どれも私には高機能すぎ…。で、この機にプラグインをやめてhighlight.jsを導入することにしました。ウェブデザインに関してはまさに、過ぎたるは及ばざるが如し、ですからね。
このhighlight.jsの一番気に入ったところは、コードの種類を自動判定してくれるので特別なマークアップが不要ということ。つまり、<pre>と<code>で括ってあげればそれでよいから、データの持ち回しに優れている。導入方法は色々あると思いますが、私はテーマ内に上げて、wp_headに読み込ませています。
wp_enqueue_script('highlight', get_bloginfo('template_directory').'/js/highlight.js');
wp_enqueue_style('highlight', get_bloginfo('template_directory').'/js/好きなテーマ.css');
wp_head();
echo '<script>hljs.initHighlightingOnLoad();</script>'."n";すでにwordpressのプラグインを使っている場合、preタグだけでマークアップされていることも多い。その場合は以下のようにjQueryなどでイニシャライズしてあげればよい。
$(document).ready(function() {
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
});
……と、公式の説明通りに設定でいったん上手くいったと思ったのですが、jsが効いていない記事が！どうやら長文のコードだと自動判別が効かないことがあるらしい。その場合は、そのコードのマークアップを直書きすればよい（<pre><code class=”php”>みたいな感じ）のだけども、今度は、同ページ内の他のpreタグすべてにJSが効かなくなってしまい…。結局テーマのphp内でcodeタグの有無をチェックして挿入することにしました。ま、その方がデザインもしやすいということで、結果OKですかね。
//preタグにcodeタグを挿入する function insert_precode( $comment_content ) { preg_match_all('/<pre.*?>([^`]*?)</pre>/is', $comment_content, $matches, PREG_SET_ORDER); foreach ($matches as $def_pre) { $pre = $def_pre[0]; if ( !preg_match('/<pre.*?>+s*<code.*?>([^`]*?)</code>+s*</pre>/is', $pre) ) { //CODEタグがなければ挿入 $pre = preg_replace('/<pre(.*?)>([^`]*?)</pre>/is', '<pre$1><code>$2</code></pre>', $pre); $comment_content = str_replace( $def_pre[0], $pre, $comment_content ); } } return $comment_content; } add_filter( 'comment_text', 'insert_precode', 9); add_filter( 'the_content', 'insert_precode' );
はじめまして。
Image Lightboxをサイトに使用してカスタマイズしようとして、つまずいてます。。
captionの位置が固定なんですよね…。これを写真の真下あるいは真上に移動させたいのですが、どうにもこうにも…
わかる人にはすぐわかるのでしょうがどうも知識不足で困っています…
CSSだけでは実現できません。
まず、imagelightbox.jsの60行目くらいにあるオプションのcaptionHeight周辺にでも、idとポジションの項目を追加して下さい。
次に107行目当たりのimageへのcss指定を丸ごと以下の様に変更します。
これで準備は完了。あとはinstanceに captionPosi:’image-bottom’, captioned:’my-caption-id’ みたいな感じで自由に設定して下さい。captionPosiはデフォルトがbottomです。ウィンドウの最上部に指定する場合はtop、画像のすぐ上と下に配置する場合はimage-topとimage-bottomを指定します。
cssはimagelightboxの仕様に習って、js側では最低限しか指定していませんので注意して下さい。captionにする要素にはposition:fixedとleft:0, right:0は必要だと思います。あとできればmargin-right:auto, margin-left:autoやborder-box を与えておいて下さい。ただし、ie8で動くかどうかはしりません。あしからず。