lightning テーマをカスタマイズ2 ヘッダースライダー編
このページは、当サイト管理人が、WordPress を使ってサイトを作成後、カスタマイズをするにあたって、HTMLやCSSの知識は多少あったものの、WordPress の構造やPHPの知識は皆無だったため、いろいろなサイトの情報をもとにカスタマイズを行ったので、それを忘れないための覚え書きのページです。
WordPress のカスタイズのため、このページを訪れた方がいらっしゃいましたら参考にしていただければと思います。また、参考にさせてもらったサイトの管理者さま本当にありがとうございました。
スライドショーの調整
スライドショーのカスタマイズは、以下のサイトを参考にさせていただいたので、
大変申し訳ないのですが、スライドショーの項目については下記サイトのコピペのような感じになってしまいました。すみません。
★テーマLightningのカスタマイズー子テーマを作ってスライダーのスピードを変更する
上記サイトによれば、 lightning のスライドショーの画像の切り替えは、4秒間隔なので、8秒間隔に変更となっていましたが、自分の感覚では、6秒間隔でよいと思ったので、6秒間隔に変更しました。
手順は
- 【 lightning_child_rakupaso 】フォルダに【 js 】フォルダを作成。
- その【 js 】フォルダに、親テーマの【 js 】フォルダから all_in_header_fixed.min.js ファイルをコピーして貼り付け。
- そのコピーしたファイルを開いて、4000（4秒）を 6000（6秒）に書き換えて保存。
|
1 |
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:6000});});function iframe_responsive(){jQuery('iframe').each(function(i){var iframeUrl=jQuery(this).attr("src");if(!iframeUrl){return;} |
※実際のファイルは、1行が非常に長いです。
親テーマの関数を子テーマで定義し直す方法
子テーマのstyle.cssはそこに記述をすれば親テーマに同じスタイルがあっても子テーマが優先されるので、そんなに難しくないのですが、functions.phpでは、子テーマに記述しただけでは多重定義エラーになるとのことで、手順のみ簡単に記載しておきます。
難しいことはわからないので詳しくは以下のサイトをご覧ください。
WordPress子テーマを作成し任意のphpをカスタマイズする方法
多重定義エラーにならないために、基本的にやることは
「親テーマの関数を無効化（remove）」し、「子テーマの関数を有効化（add）する」
整理すると、以下になります。
- 変更したい親テーマの関数を子テーマのfunctions.phpにコピペする
- コピペした関数の中身と関数名を変更し、別の関数とする
- 親テーマの関数をremoveする
- 子テーマの新関数をaddする
実行手順
まず、子テーマの functions.php を開いて、一番下に、親テーマの functions.php の以下の部分 Load JSのコード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*-------------------------------------------*/ /* 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の名前を2カ所変更する。上のコードで言うと5・6行目
【 lightning_addJs 】 → 【 lightning_addJs_child 】
変更後、下のコードになります。
|
1 2 |
add_action('wp_enqueue_scripts','lightning_addJs_child'); function lightning_addJs_child() { |
それから、jsを読み込んでいるのは、下のコードになります。
|
1 |
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() は、親テーマのフォルダをさしているのでここを
子テーマのフォルダを指す、get_stylesheet_directory_uri() に変更します。
すると↓のようになります。
|
1 |
wp_enqueue_script( 'lightning-js', get_stylesheet_directory_uri().'/js/all_in_header_fixed.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION ); |
次に親テーマの js を読み込んでいる関数を無効にします。
親テーマの lightning_addJs を無効にする関数を追加して、
それをアクションフック init で実行するように登録しておきます。
以下のコードを追加します。
|
1 2 3 4 5 6 7 |
// 親テーマの関数をremoveする関数 function remove_parent_theme_actions() { remove_action('wp_enqueue_scripts','lightning_addJs',3); } // 上記の関数をWordPressのinitに登録 add_action('init','remove_parent_theme_actions'); |
全体として子テーマのfunctions.phpに追加したコードは以下のようになりました。
※黄色にハイライトした行が変更した行になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*-------------------------------------------*/ /* 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'); |
アップ場所は、ドメイン/wp-content/themes/lightning_child_rakupaso/functions.php
出展：ゆうそうとブログ
スライドショーを固定ページに表示
Lightning のヘッダースライダーは、トップページにしか表示されないようになっています。
しかし、ホームページは基本ユーザーの方がどのページに訪問されるかわからないため、固定ぺーじにもスライダーを表示させたいと思いカスタマイズしてみました。
スライダーはトップページにしか表示されないので、
親テーマの front-page.php を確認したところ、3行目のコード
|
1 |
<?php get_template_part('module_slide'); ?> |
がスライダーのコードだとわかりました。
そこで、固定ページの page.php を見てみると下記のようになっていました。
|
1 2 3 4 |
<?php get_header(); ?> <?php get_template_part('module_pageTit'); ?> <?php get_template_part('module_panList'); ?> |
「module_pageTit」が、固定ページの太いタイトルの帯で、
「module_panList」が、パンくずリストのコードです。
このファイルにスライダーのコードを記入すれば固定ページスライダーが表示されるはずなので、
【1】親テーマの page.php をコピー。
【2】子テーマの lightning_child_rakupaso フォルダの中にペースト。
【3】子テーマの page.php を開いて編集、保存すればOK。
太いタイトルの帯は画像があると邪魔だったので、タイトルの帯をコメントアウトで、非表示にして、その下にスライダーのコードを入れてみることに。
すると下記のようになりました。
|
1 2 3 4 5 |
<?php get_header(); ?> <!-- [ <?php get_template_part('module_pageTit'); ?> ] --> <?php get_template_part('module_slide'); ?> <?php get_template_part('module_panList'); ?> |
これをFTPで、子テーマのディレクトリにアップロードすればＯＫ。
アップ場所は、ドメイン/wp-content/themes/lightning_child_rakupaso/
これで固定ページにスライダーが表示されるようになりました。