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

テーマ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 をテキストエディタで開き、

この部分の Theme Name を

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

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

この状態で

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

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

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

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

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

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

slider

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

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

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

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

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

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

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

slider2

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

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

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

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

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

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

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

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

以前も書いたのですが、

先日、「WordPress-子テーマの作り方」という記事を書きました。そこではstyle.cssのことだけ触れていましたが、今回はfunctions.phpを使ってカスタマイズ

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

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

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

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

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

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

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

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

貼り付けます。そして、


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

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

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

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

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

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

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

となりました。

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

slider3

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

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

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

blogの説明をするときに、このボタンの上にカーソルをのせるとこうなる…みたいなときには動画で説明したくなります。しかし、めったなことでは動画にしてきませんでした。なぜなら…面

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

Lightning関連記事一覧

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

毎月行っている八王子WordPressもくもく会ですが、今回コーポレートサイトを作るときにかっこよくて使いやすい(んじゃないか?)と思われるテーマがあるという噂を聞きました。

「コーポレートサイトにもかっこいいテーマ Lightning でコーポレートサイトを作るーその1」では、Lightningというテーマについての説明と、インストール、スライダー

Lightningというテーマを使うとコーポレートサイトがいい感じに作れる、ということで今まで2回に渡ってカスタマイズの方法を書いてきました。Lightningのコーポレートサ

Lightningというテーマはコーポレートサイトを作る際に簡単に「ちゃんとした感じの企業サイト」が作れます。そのインストールやカスタマイズについて、今まで3回にわたってblo

テーマLightningを使って実際のWebサイトを作っています。いくつか変更したいことがあるので、子テーマを作りました。作りました、といってもLightningは子テーマが用

テーマLightningを使って実際のWebサイトを作ったときに、スライダーの上に文字を表示したいなと思いました。スライダーはトップページに大きく表示されるのですが、スライダー

[Amazon sponsored link] WordPress デザイン 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. sakura より:

    兎本様

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

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

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

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

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

    XPOI

  2. 古川繁子 より:

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

    • 兎本美佳 兎本美佳 より:

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

  3. […] しました 「テーマLightningのカスタマイズー子テーマを作ってスライダーのスピードを変更する 」 […]

トップへ戻る