MENU
WordPressを中心にITネタを画像付きでわかりやすく丁寧に解説(旧:ゆうそうとITブログ)
当サイトには広告が含まれております

テーマLightningのカスタマイズー子テーマを作ってスライダーのスピードを変更する

広告
WordPress テーマ
この記事は最終更新日から8年経過しています。内容が古い可能性があります。

テーマLightningを使って実際のWebサイトを作っています。いくつか変更したいことがあるので、子テーマを作りました。作りました、といってもLightningは子テーマが用意されているのでとても簡単です。
手始めとしてスライダーのスピードを変更してみましたのでそれについて書きます。

記事をざっと見る

Lightningの子テーマは準備されているのでダウンロードするだけでOK

Lightningの子テーマは作成元である株式会社ベクトルさんが準備してくれています。

子テーマでのカスタマイズ

このページの、



子テーマカスタマイズサンプル をクリックしてダウンロードします。

lightning_child_sample_v_0_1_2.zip

というファイルがダウンロードされるので、解凍します。解凍すると

lightning_child_sample_v_0_1_2 というフォルダの中に、lightning_child_sample　というフォルダができています。これが子テーマです。sampleがついたままだと何かおかしい気がするのでフォルダを任意の名前、今回は lightning_child_umoto に変更します。
フォルダに入っている　style.css　をテキストエディタで開き、

@charset "utf-8";
/*
Theme Name: Lightning Child Sample
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: lightning
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
Tags: 
Version: 0.1.2
*/

この部分の　Theme Name　を

Theme Name: Lightning Child Umoto

と変更しました。この名前はテーマを選ぶときに一覧で出てくるので、見てわかる名前にしておきます。

そして、自分が使いたいWebサイトの \wp-content\themes　にフォルダごと置きます。

この状態で

ダッシュボード　外観＞テーマ をクリックすると、

今作った子テーマが表示されるので、

有効化 をクリックします。これで表画面を見ると、

Lightningと全く同じ状態のページが表示されました。

スライダーの間隔を長く延ばしたい！スライダーのJSを探す

デフォルトのスライダーは、

slider

こんな感じに表示されます。測ってみたところ4秒間隔で画像が切り替わっているようでした。これをもっと長く、8秒間隔に伸ばしたいと思います。

スライダーを表示しているのはjsだと思いましたので該当のファイルを見つけてみたいと思います。トップページで

右クリックして、ページのソースを表示 をクリックしてページのソースを表示させて、その中から　.js を探しました。

(44): <script type='text/javascript' src='http://w442/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
(45): <script type='text/javascript' src='http://w442/wp-content/themes/lightning/js/all_in_header_fixed.min.js?ver=2.3.1'></script>
(46): <script type='text/javascript' src='http://w442/wp-content/plugins/lightning-advanced-unit/plugins/navigation/js/navigation.min.js?ver=1.1.0'></script>
(48): <script type='text/javascript' src='//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js?ver=4.5.3'></script>
(51): <script type='text/javascript' src='//oss.maxcdn.com/respond/1.4.2/respond.min.js?ver=4.5.3'></script>
(364):     js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3&appId=";
(367):     <script type='text/javascript' src='http://w442/wp-includes/js/admin-bar.min.js?ver=4.5.3'></script>
(373): <script type='text/javascript' src='http://w442/wp-content/plugins/instagram-feed/js/sb-instagram.min.js?ver=1.4.6.2'></script>
(374): <script type='text/javascript' src='http://w442/wp-includes/js/wp-embed.min.js?ver=4.5.3'></script>
(380): <script type='text/javascript' src='http://w442/wp-content/plugins/vk-all-in-one-expansion-unit/js/all.min.js?ver=4.2.2'></script>

12個のjsを読み込んでいます。このテーマ（lightning）のjsは

http://w442/wp-content/themes/lightning/js/all_in_header_fixed.min.js?ver=2.3.1

だけでしたので、ここにスライダーを操作するコードがあると思われます。このjsのどこでスライダーの間隔を決めているのかを見るために、ファイルを開いて、4秒間隔なので4000で検索を書けてみました。すると、

jQuery(document).ready(function(){jQuery('#top__fullcarousel .carousel-indicators li:first-child').addClass("active");jQuery('#top__fullcarousel .item:first-child').addClass("active");jQuery('.carousel').carousel({interval:4000});});function youtube_responsive(){jQuery('iframe').each(function(i){var iframeUrl=jQuery(this).attr("src");if(!iframeUrl){return;}

4行目に、4000という数字を発見しました。

jQuery('.carousel').carousel({interval:4000});

carousel はスライダーでよく使われる名前だし、intervalは間隔 なのでここだと思います。本当にこれかどうかを見てみるために、一時的に親テーマなのですがこの数値を変えてみてみます。4000を1000（1秒）にしてみて再度読み込み直します。

slider2

慌ただしい(^_^;。1秒間隔になりました。このファイルの修正でいいようです。しかし、このファイルは親テーマなのでここでは修正しません。元に戻しておきます。

このjsを使うということがどこで書いてあるのか？を探してみました。そうすると、lightning functions.php の

/*-------------------------------------------*/
/*    Load JS
/*-------------------------------------------*/

add_action('wp_enqueue_scripts','lightning_addJs');
function lightning_addJs() {
    wp_enqueue_script( 'html5shiv', '//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js' );
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    wp_enqueue_script( 'respond', '//oss.maxcdn.com/respond/1.4.2/respond.min.js' );
    wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );
    wp_enqueue_script( 'lightning-js', get_template_directory_uri().'/js/all_in_header_fixed.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION );
}

ここで読み込まれていることがわかりました。テンプレートだったら子テーマにコピーして書き換えるだけでカスタマイズできたのですが、functions.phpで読み込まれると…さてどうしたらいいかなと思いました。

JSを子テーマにコピーして4秒間隔を8秒間隔にする

ひとまず、スライダーを表示しているjsを子テーマにコピーして「4秒間隔を8秒間隔にする」、という修正をしておきます

lightning_child_umotoフォルダにjsフォルダを作成します。jsフォルダに、親テーマのjsフォルダから all_in_header_fixed.min.js ファイルをコピーして貼り付けます。子テーマにコピーしたファイルを開いて、

jQuery(document).ready(function(){jQuery('#top__fullcarousel .carousel-indicators li:first-child').addClass("active");jQuery('#top__fullcarousel .item:first-child').addClass("active");jQuery('.carousel').carousel({interval:8000});});function youtube_responsive(){jQuery('iframe').each(function(i){var iframeUrl=jQuery(this).attr("src");if(!iframeUrl){return;}

4000（4秒）を8000（8秒）に書き換えて保存します。

親テーマの関数を子テーマで定義し直す方法

以前も書いたのですが、

[ryus_blogcard url=”https://usortblog.com//kothemefunctionsphp/”]

子テーマのstyle.cssはそこに記述をすれば親テーマに同じスタイルがあっても上書きされます。しかしfunctions.phpでは多重定義エラーになってしまいます。

今回は親テーマで二重定義を予防していない、JSなので同じものを2度読み込みたくないということがあるため、以前書いたblogの方法ではダメそうです。

ということでググってこちらのページを見つけました。

WordPress子テーマを作成し任意のphpをカスタマイズする方法

こちらに書いてある方法で、うまくいきました(^^)/（Ceatant Official Blog様、ありがとうございます）

この場合、基本的にやることは「親テーマの関数を無効化（remove）」し、「子テーマの関数を有効化（add）する」という対処になります。整理すると以下のような感じです。変更したい親テーマの関数を子テーマのfunctions.phpにコピペする。コピペした関数の中身と関数名を変更し、別の関数とする。親テーマの関数をremoveする。子テーマの新関数をaddする。

上記の方法を実行する手順を書きます。

まず、子テーマのfunction.phpを開いて、一番下に、先ほどの親テーマのfunctions.phpの

/*-------------------------------------------*/
/*    Load JS
/*-------------------------------------------*/

add_action('wp_enqueue_scripts','lightning_addJs');
function lightning_addJs() {
    wp_enqueue_script( 'html5shiv', '//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js' );
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    wp_enqueue_script( 'respond', '//oss.maxcdn.com/respond/1.4.2/respond.min.js' );
    wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );
    wp_enqueue_script( 'lightning-js', get_template_directory_uri().'/js/all_in_header_fixed.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION );
}

を貼り付けます。そして、

add_action('wp_enqueue_scripts','lightning_addJs_child');
function lightning_addJs_child() {


functionsの名前を2カ所変更（lightning_addJs　→　lightning_addJs_child）します。

jsを読み込んでいるのは、

    wp_enqueue_script( 'lightning-js', get_template_directory_uri().'/js/all_in_header_fixed.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION );

ここになります。get_template_directory_uri() は親テーマのフォルダをさしているのでここを

    wp_enqueue_script( 'lightning-js', get_stylesheet_directory_uri().'/js/all_in_header_fixed.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION );

子テーマのフォルダを指す、get_stylesheet_directory_uri() に変更します。

次に親テーマのjsを読み込んでいる関数を無効にします。

// 親テーマの関数をremoveする関数
function remove_parent_theme_actions() {
    remove_action('wp_enqueue_scripts','lightning_addJs',3);
}

// 上記の関数をWordPressのinitに登録
add_action('init','remove_parent_theme_actions');

親テーマの lightning_addJs を無効にする関数を追加して、それをアクションフック init で実行するように登録しておきます。

全体として子テーマのfunctions.phpに追加したコードは

/*-------------------------------------------*/
/*    Load JS
/*-------------------------------------------*/

add_action('wp_enqueue_scripts','lightning_addJs_child');
function lightning_addJs_child() {
    wp_enqueue_script( 'html5shiv', '//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js' );
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    wp_enqueue_script( 'respond', '//oss.maxcdn.com/respond/1.4.2/respond.min.js' );
    wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );
    wp_enqueue_script( 'lightning-js', get_stylesheet_directory_uri().'/js/all_in_header_fixed.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION );
}

// 親テーマの関数をremoveする関数
function remove_parent_theme_actions() {
    remove_action('wp_enqueue_scripts','lightning_addJs',3);
}

// 上記の関数をWordPressのinitに登録
add_action('init','remove_parent_theme_actions');

となりました。

この状態でトップページを表示すると、

slider3

このように8秒間隔でスライダーが表示されるようになりました(^^)/

おまけ：GIFファイルの秒数、リンク集

記事でスライダーの表示間隔を見せたかったので

[ryus_blogcard url=”https://usortblog.com//screen-to-gif/”]

で、動画をGIFファイルで撮影しました。見直してみると実際より若干速く再生されているようです(^_^;。実際には4秒間隔、1秒間隔、8秒間隔でした。

Lightning関連記事一覧

Lightningについて書いた記事をまとめておきます

[ryus_blogcard url=”https://usortblog.com//lightning-corpo-1/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-2/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-3/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-4/”]
[ryus_blogcard url=”https://usortblog.com//lightning-kotheme-slider-interval/”]
[ryus_blogcard url=”https://usortblog.com//lightning-slider-string/”]

[amazon_searchlink search=”WordPress デザイン”]

WordPress テーマ

この記事が気に入ったら
いいね または フォローしてね！

あなたのシェアが励みになります！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （5件）

  • 兎本様

    先ほどコメントさせていただいたものです。

    内容をよく把握しないまま、やってしまったので、
    時間を置いて、最初からやり直してみました。

    なんとか、スライダーの速度を落として、動くようになりました。

    多分大丈夫だと思うのですが、
    もしものときのために、正常かどうかをチェックする方法を教えていただけると幸いです。

    よろしくお願いいたします。

    XPOI

    返信

  • 子テーマとは違うのですが、子ページをサイドメニューに表示するにはどうしたらよいでしょうか。
    テーマLightningとVK All in One Expansion Unitのウィジェットで「VK_子ページ：先祖階層からの子ページリスト表示
    現在のページの先祖階層からの子ページリストをページ本文の下に表示します。」をサイドバー（共通上部）に入れたのですが表示されません。先祖階層からという言葉が分かりずらいです。
    トップページの意味もよく分かりません。ホームとお知らせがあります。
    4/30からサイトを作り始めていて、まだデータも揃っていなくて仮の画像だったりで四苦八苦中です。よろしくご指導をお願いします。

    返信

    • 古川さん、こんにちは。おたずねの件やってみたところ表示されることがわかりました。やったことは　固定ページで「八王子いろいろ」というページを作成。そのあと「ランチスポット」「イベント」という固定ページを作成しこの2つでは　固定ページの属性　親　で、「八王子いろいろ」を選択しました。これで「八王子いろいろ」の子ページ「ランチスポット」と「イベント」ページができます。ウィジェットで　VK_子ページのリスト を　サイドバー（共通上部）に入れました。
      VK_子ページのリスト が表示されるのは、「八王子いろいろ」か「ランチスポット」「イベント」が表示されているときだけのようです。また、余談ですがどうもこのウィジェットを入れなくても自動的にこのウィジェットと同じ内容が表示されるようで、ウィジェットで追加したら２つ同じ内容のものが表示されていました。

      返信

コメントを残す

記事をざっと見る