2016年4月21日木曜日

WP jQuery Lightboxがdo_shortcode()で機能しない

WP jQuery Lightboxは、ギャラリーの画像をポップアップして表示してくれる便利なプラグインだ。

エディタでギャラリーを作成して、ギャラリーの設定で「リンク先」を「メディアファイル」にするだけでいい(※jQuery Lightboxプラグインの設定で、「自動的に画像(イメージリンク)にLightbox効果を適応する」のチェックを外していなければ)。

エディタにギャラリーを作成しておけば、ギャラリーの編集で画像の入れ替え等もできて便利なのだが、固定ページの更新に使用する際に、エディタを他の部分の文章の更新に使用するために、ギャラリーをテンプレートファイル内で、

echo do_shortcode('[gallery link="file"]')

で出力することにした。

一見、ギャラリーが正しく表示され問題ないように見えるのだが、画像をクリックするとポップアップせず、画像ファイルが直接開いてしまう。HTMLソースを確認すると、画像リンクに本来追加されるはずの

rel="lightbox[XXX]"

が見当たらない。

対応方法として、

$gallery_shortcode = '[gallery link="file"]';
 print apply_filters( 'the_content', $gallery_shortcode );

とすると、正常に機能した。

検証環境:
 WordPress 4.5
 wp-jquery-lightbox 1.4.8

2016年4月7日木曜日

WordPressのスタイルシート更新スニペット

WordPressを自分で作ったテーマで運用する場合、公開後にもスタイルシートを頻繁に更新することが多いのですが、ローカルにキャッシュされたスタイルシートが反映されてしまい、表示が崩れることがしばしばあります。そんなわけで、作成時に対策をしておきましょう。

functions.php に、以下を記述します。

function myTheme_scripts() {
wp_enqueue_style( 'myTheme-style', get_stylesheet_uri(), array(), filemtime(get_stylesheet_directory().'/style.css') );
}
add_action( 'wp_enqueue_scripts', 'myTheme_scripts' );

内容は説明するまでもありませんが、wp_enqueue_style の「スタイルシートのバージョン番号を指定するパラメータ」に、スタイルシートファイルの更新時刻をセットしています。
スタイルシートのバージョン番号を管理していないずぼらな人向けです。

2016年3月30日水曜日

WordPressでDatepickerを使う

最近のブラウザ(モダンブラウザ)は、type="date"のinputタグでDatepickerの機能が働くので、調子に乗っていると、IEではただのテキストボックスになっていて、後で慌てることになる。

そんなうっかりさんのために、以下のスニペットを記録しておく。

if (!Modernizr.inputtypes.date) {
    jQuery(function($) {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    });
}

Modernizrについては、modernizr.comを参照のこと。

おっと、functions.phpに以下のような記述をして必要なファイルを配置するのを忘れないで。

if( is_page('対応が必要なページ') ) {
wp_enqueue_script ('modernizr', esc_url( get_template_directory_uri() ).'/js/modernizr.js', array('jquery'));
wp_enqueue_script ('jquery-ui-datepicker');
wp_enqueue_style( 'jquery-ui-style', esc_url( get_template_directory_uri() ) . '/css/jquery-ui/jquery-ui.min.css' );
wp_enqueue_style( 'jquery-ui-theme', esc_url( get_template_directory_uri() ) . '/css/jquery-ui/jquery-ui.theme.min.css' );
}
以上