Swipeboxを子テーマに適用する

Swipeboxの導入とカスタマイズの続きです。
前回の記事では親テーマにSwipeboxを設置していましたが、その後子テーマを使うことにしたのでSwipeboxも子テーマの中に設置してみます。

1.子テーマ内にSwipeboxのファイルを設置する

このサイトのテーマは「Simplicity」と子テーマを利用しています。

まずは最初に子テーマ「simplicity-child」内にSwipeboxのファイルを設置します。子テーマの画像ディレクトリimagesとSwipeboxの画像ディレクトリimgを統合したいところですが、メンテ性を考慮してあえてこのままにします。
child-theme-file

2.子テーマのfunctions.phpを修正

次にSwipebox読み込みコードを子テーマのfunctions.phpに記述します。ただし、関数「get_template_directory_uri()」が使われているため、そのままでは親テーマのディレクトリを参照してしまうので、子テーマのディレクトリを参照させるために関数を「get_stylesheet_directory_uri()」に変更します。

親テーマのfunctions.php

function my_scripts(){
    wp_enqueue_script( 'jquery' );
    if( is_single() ){
            wp_enqueue_style( 'swipebox-style', get_template_directory_uri() .'/css/swipebox.min.css', 'all');
            wp_enqueue_script( 'swipebox', get_template_directory_uri() . '/js/jquery.swipebox.min.js', array(), '1.2.9', true);
            wp_enqueue_script( 'use-swipebox', get_template_directory_uri() . '/js/use-swipebox.js',array(), '1.0',  true);}
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

子テーマのfunctions.php

function my_scripts(){
    wp_enqueue_script( 'jquery' );
    if( is_single() ){
            wp_enqueue_style( 'swipebox-style', get_stylesheet_directory_uri() .'/css/swipebox.min.css', 'all');
            wp_enqueue_script( 'swipebox', get_stylesheet_directory_uri() . '/js/jquery.swipebox.min.js', array(), '1.2.9', true);
            wp_enqueue_script( 'use-swipebox', get_stylesheet_directory_uri() . '/js/use-swipebox.js',array(), '1.0',  true);}
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

3.親テーマからファイルを削除 & PHPのキャッシュをクリア

親テーマの中にコードやファイルが残っていると動作検証ができないのでリネームか削除しておきます。またPHPeAcceleratorの効率を高めるためファイルの更新日時をチェックしない「eaccelerator.check_mtime = “0”」を設定しているので、「eAccelerator control panel」でキャッシュを削除してから動作確認を行います。
eaccelerator_control_panel

これでSwipeboxを子テーマに適用できメンテ性が高まりました。ただメンテ性だけを考えると「Simplicity」にはLightboxが内蔵されているのであえてSwipeboxを使う必要性がないんですよね。Swipeboxの方が速いので使う意味はあるのですが、シンプルイズベストを考えると悩ましいところです。

スポンサーリンク
レクタングル (大)

レクタングル (大)