【ha-Basic】のパソコントップページに表示されてるようにしている視差効果のある画像。時代としてはこれがトレンドかなぁということで画像にしたのですが、中には複数の画像が次々に入れ替わるスライダーにしたい方もいるかと思います。
と言っても１画像が入れ替わる普通のスライダーではちょっと物足りないということで、「slick.js」を使った全幅スライダーを設置する手順を紹介したいと思います。
スライダー？？全幅？？slick？？ハテナだらけの方も見えるかも・・ということでこのページのタイトル下だけスライダー画像をサンプルとして表示するようにしました。
手順通りに行えば比較的簡単に入れ替えできますので、これがいい！！という方は設置してみてください。
※WordPressにスライダーを挿入する方法については
を参考にさせていただきました。
今回は【ha-Basic】のカスタマイズということで紹介していますが、今使っているテーマでも流用できます（ファイル名などは自身の環境に合わせて置き換えて読んでください）。
【ha-Basicテーマ】ヘッダー画像を画像スライダーにする手順
必要なファイルを入手し、テーマフォルダ内へアップロードする
まずはスライダーを動かす「slick.js」というスクリプトをダウンロードします。
次にヘッダーにスライダーを設置するためのファイルをダウンロードします。
両方ともパソコン上で解凍し、
- 「slick」フォルダをそのままテーマフォルダへアップロード
- 「header-content.php」ファイル（ファイルだけ）をテーマフォルダへアップロード
してください。
ちょこっと解説 【テーマフォルダって何？どこ？】
テーマフォルダは「WordPressのインストールされている場所」→「wp-content」→「themes」→「ha-Basic」の中になります。
「ha-Basic」の中には「images」「js」などのフォルダやファイルがたくさんがあります。
ファイルのアップロードにはFTPクライアントツールを使用してください
ちょこっと解説 FTPを使わずにファイルをアップロードするには？？
テーマフォルダ内へのファイル転送には通常FTPクライアントツールというパソコン用のソフトを使いますが、FTPクライアントの代わりにWordPressサイトの管理画面からファイル操作ができる便利なプラグインもあります。詳しくは
WordPressのプラグイン「File Manager」を使ってサーバー内へファイルを転送する方法
をご覧ください。
アップロードが終わったら、サイトの管理画面から「外観」→「テーマの編集」をクリックし、出てきた画面の一覧に「slick.js」フォルダと「header-content.php」ファイルがあるかを確認してください（ない場合にはアップロード先が間違っているか、一度画面をリロードしてみてください）。
確認できたら次に進みましょう
スライダーを動かすためのいろいろなコードを追加する
テーマファイルを編集したことのない方には少しハードルの高い作業ですが、書かれている通りにコピペして保存していけば大丈夫です。
※どのファイルから始めても結果は同じですが、テーマメニュー順に紹介します。「」がテーマ編集画面右側のリンクになります。
「a-insert-css.css」への追記
/********** スライダーが一瞬縦並びになるのを防ぐ **********/
.header-slider{
opacity: 0;
transition: opacity .5s linear;
}
.header-slider.slick-initialized{
opacity: 1;
}ちょこっと解説 このCSSコードがやっていること
使用する環境によって、スライダーに設定した画像が一瞬縦並びになったり、スライダーが完成する前に画像が表示され動作がぎこちなく感じないようにする対策で、少し時間をかけて画像を表示すること、slick.jsが読み込まれてから表示することにするためのコードになります。
「a-insert-footer」への追記
<!-- slick -->
<script>
jQuery(function() {
jQuery('.header-slider').slick({
autoplay: true, // 自動再生
autoplaySpeed: 4000, // 自動再生で切り替えをする時間
speed: 3000, // 自動再生でスライドさせるスピード
infinite: true, // 無限スクロール
slidesToShow: 3, // スライドのエリアに画像がいくつ表示されるかを指定
slidesToScroll: 1, // 一度にスライドする数
arrows: true, // 左右の次へ、前へボタンを表示
dots: true, // 画像下のドット（ページ送り）を表示
centerMode: true,
centerPadding: '6%',
pauseOnHover:false,
variableWidth: true,
});
});
</script>
<!-- /slick -->ちょこっと解説 何をしているコード？
ヘッダースライダーをどのように表示させ、どのように動かすのかを決定するコードになります。上の例ではトップページ用スライダーとして「.header-slider」というCSSセレクタに対してどうする？というコードになっていますが、別のシーン（投稿内やサイドバーウィジェットなど）で別の動作をするものを表示したい場合には、コード全体をコピーした上で「.header-slider」セレクタを別のものにし、それに応じてスライダー画像の設定を行うようにします。
スライダーの動作制御に使用できるオプション項目については公式サイトをご覧ください
「a-insert-functions」への追記
// jquery読み込み -----
function my_scripts_method() {
wp_enqueue_script(
'slick.min',
get_stylesheet_directory_uri().'/slick/slick.min.js',
array( 'jquery' ),
'1.8.1', true
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );ちょこっと解説 何をしているコード？
テーマのfunctions.phpはサイトに何かの動作をさせたり、動作を制御したりするためのコードになります。
上のコードではスライダーを動作させるための基本となるファイル「slick.js」というJavaスクリプトを読み込むように指示しています
「a-insert-header」への追記
<!-- slick CSS -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css" media="screen" />
<!-- /slick CSS -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- /jQuery -->ちょこっと解説 何をしているコード？
CSSはデザイン要素を決めるためのコードの集まりになります。
ここではサイトにスライダーで最低限必要なデザイン要素が書かれているファイルを読み込むように指示しています
いろいろなファイルに追記するのはここまでです。
スライダーに表示する画像の準備とアップロード
まずはスライダー表示を体験していただきたいので四の五の言わずに以下のサイズの画像を４枚作成してください。
画像サイズ：1200x400px
画像ファイル名：header-01.png,header-02.png,header-03.png,header-04.pngの４つ（拡張子はすべて.pngにしてください）
画像が用意できたらテーマフォルダ内にある「images」フォルダの中へアップロードしてください。
スライダーを表示する
ここまでくればゴールは目前です！！頑張りましょう！！
視差効果のある画像の代わりにスライダーを表示させるようにします。ここは直接テーマファイルに変更を加えますので注意して行ってください。
テーマ編集画面から「header.php」を開きます
以下のコードを探します（下の方にあります）
<!--ヘッダ画像（視差効果）-->
<aside id="site-top-image" class="box" style="background-image: url(<?php echo get_template_directory_uri() ?>/images/header.png); "></aside>以下のコードに書き換えます
<!--ヘッダスライダー -->
<?php get_template_part('header-content');//画像スライダー?>難しい・・と書かれているから大変かもと思ってた方、実は変更箇所はこれだけです。拍子抜けさせてごめんなさい。
余談ですが、多分他のテーマでは追加するコードやこの部分の変更などコードとにらめっこが必要になることが多いですが、こうしたカスタマイズのしやすさもシンプルイズベストなテーマ【ha-Basic】最大の特徴です（自画自賛すみません・・・）。
サイトを表示してみよう！
ここまでの作業をしたら、サイトのトップページを表示してみましょう。視差画像がきちんとスライダーになっていた方おめでとうございます！！
もしもうまく表示されない場合はキャッシュのクリアをしてみてください。それでもダメな場合は上の手順のいずれかが誤っている可能性がありますので再チェックをしてください。
今回のカスタマイズでのQ&A
Q:どうして最初からこの機能を搭載していないの？切り替えできるようにすればいいのに・・・
高機能なテーマではこうした表現の切り替えができるようになっているものもあります。が、切り替えを行うことでページを表示する手順が増え、表示速度に影響が出ます。【ha-Basic】テーマは不要な手順を削減して高速表示することを念頭に開発していますので、必要なものは自身で追加や変更をするようにしているのです。
Q:どうしてスマホなどのモバイルでは表示しないの？
画像スライダーはすべての画像を読み込んで、その中で今表示するべき画像を移動させる機能です。スマホ表示では画像をすべて読み込むデータ量の削減、データを減らすことによる高速表示のためスライダーは表示されないようにしています（もちろんご自身でカスタマイズして表示するようにすることも可能です）。
Q:スライドする画像の数を増やしたい
今回の例では４枚の画像をスライドさせる設定を紹介しました。これをもっとたくさんの画像にする場合には
「header-content」ファイルの中にある以下の行を追加し、画像ファイル名をheader-05などに変更した上で対象となる画像をアップロードすることで無限に増やせます。
ただし、あまり画像を増やすと前のQ&Aでお答えした通り読み込む画像のデータ量が増えますので、多くても５～６枚にとどめておいた方がいいと思います（データ量が多い＝表示速度低下の原因になります）
<div><a href="#"><img src="<?php echo get_template_directory_uri() ?>/images/header-01.png" alt="sample"></a></div>Q:スライド速度などの調整をしたい
「a-insert-functions」への追記に書かれているのがスライダーに対するオプションとなりますので、公式サイトに書かれているオプション項目を見ながら項目の追加・削除・変更を行ってください。
いかがでしたか？実際に変更してみたら案外簡単ではありませんでしたか？？
こうした【ha-Basic】のカスタマイズ方法を気が付く限りどんどん追加していきますので、ご自身のサイトの独自性を高めるためにご利用ください。
ポチップ
ポチップ
