【ha-Basicテーマ】ヘッダー画像を画像スライダーに変更する方法
【ha-Basic】のパソコントップページに表示されてるようにしている視差効果のある画像。時代としてはこれがトレンドかなぁということで画像にしたのですが、中には複数の画像が次々に入れ替わるスライダーにしたい方もいるかと思います。
と言っても1画像が入れ替わる普通のスライダーではちょっと物足りないということで、「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サイトの管理画面からファイル操作ができる便利なプラグインもあります。詳しくは
をご覧ください。
アップロードが終わったら、サイトの管理画面から「外観」→「テーマの編集」をクリックし、出てきた画面の一覧に「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はデザイン要素を決めるためのコードの集まりになります。
ここではサイトにスライダーで最低限必要なデザイン要素が書かれているファイルを読み込むように指示しています
いろいろなファイルに追記するのはここまでです。
スライダーに表示する画像の準備とアップロード
まずはスライダー表示を体験していただきたいので四の五の言わずに以下のサイズの画像を4枚作成してください。
画像サイズ:1200x400px
画像ファイル名:header-01.png,header-02.png,header-03.png,header-04.pngの4つ(拡張子はすべて.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:どうして最初からこの機能を搭載していないの?切り替えできるようにすればいいのに・・・
Q:どうしてスマホなどのモバイルでは表示しないの?
Q:スライドする画像の数を増やしたい
「header-content」ファイルの中にある
<div><a href="#"><img src="<?php echo get_template_directory_uri() ?>/images/header-01.png" alt="sample"></a></div>
という行を追加し、画像ファイル名をheader-05などに変更した上で対象となる画像をアップロードすることで無限に増やせます。
ただし、あまり画像を増やすと前のQ&Aでお答えした通り読み込む画像のデータ量が増えますので、多くても5~6枚にとどめておいた方がいいと思います(データ量が多い=表示速度低下の原因になります)
Q:スライド速度などの調整をしたい
いかがでしたか?実際に変更してみたら案外簡単ではありませんでしたか??
こうした【ha-Basic】のカスタマイズ方法を気が付く限りどんどん追加していきますので、ご自身のサイトの独自性を高めるためにご利用ください。
WordPressのカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
【スポンサーリンク】