【ha-Basicテーマ】ヘッダー画像を画像スライダーに変更する方法

【ha-Basic】のパソコントップページに表示されてるようにしている視差効果のある画像。時代としてはこれがトレンドかなぁということで画像にしたのですが、中には複数の画像が次々に入れ替わるスライダーにしたい方もいるかと思います。

と言っても１画像が入れ替わる普通のスライダーではちょっと物足りないということで、「slick.js」を使った全幅スライダーを設置する手順を紹介したいと思います。

スライダー？？全幅？？slick？？ハテナだらけの方も見えるかも・・ということでこのページのタイトル下だけスライダー画像をサンプルとして表示するようにしました。

手順通りに行えば比較的簡単に入れ替えできますので、これがいい！！という方は設置してみてください。

※Wordpressにスライダーを挿入する方法については

初心者でもできる画像編集+加工

 

1 tweet

1 user

slick.jsをWordPressに設置してみよう

https://gazocustomize.xyz/slick-wordpress/

レスポンシブ対応のスライダーslick.jsをWordPressで表示できるようにする方法をご紹介しています。

今回は【ha-Basic】のカスタマイズということで紹介していますが、今使っているテーマでも流用できます（ファイル名などは自身の環境に合わせて置き換えて読んでください）。

【ha-Basicテーマ】ヘッダー画像を画像スライダーにする手順

必要なファイルを入手し、テーマフォルダ内へアップロードする

まずはスライダーを動かす「slick.js」というスクリプトをダウンロードします。

次にヘッダーにスライダーを設置するためのファイルをダウンロードします。

両方ともパソコン上で解凍し、

• 「slick」フォルダをそのままテーマフォルダへアップロード
• 「header-content.php」ファイル（ファイルだけ）をテーマフォルダへアップロード

してください。

ちょこっと解説　FTPを使わずにファイルをアップロードするには？？

テーマフォルダ内へのファイル転送には通常FTPクライアントツールというパソコン用のソフトを使いますが、FTPクライアントの代わりにWordpressサイトの管理画面からファイル操作ができる便利なプラグインもあります。詳しくは

Knowledge Base

Wordpressのプラグイン「File Manager」を使ってサーバー内へファイルを転送する方法

https://www.momosiri.info/cms/wordpress-file-trans/

Wordpressを使用しているサイトでレンタルサーバーのファイルマネージャーやFTPクライアントを使わずにファイルを転送する（アップロード／ダウンロード）方法を紹介します

をご覧ください。

アップロードが終わったら、サイトの管理画面から「外観」→「テーマの編集」をクリックし、出てきた画面の一覧に「slick.js」フォルダと「header-content.php」ファイルがあるかを確認してください（ない場合にはアップロード先が間違っているか、一度画面をリロードしてみてください）。

確認できたら次に進みましょう

スライダーを動かすためのいろいろなコードを追加する

テーマファイルを編集したことのない方には少しハードルの高い作業ですが、書かれている通りにコピペして保存していけば大丈夫です。
※どのファイルから始めても結果は同じですが、テーマメニュー順に紹介します。「」がテーマ編集画面右側のリンクになります。

「a-insert-css.css」への追記

/********** スライダーが一瞬縦並びになるのを防ぐ **********/
.header-slider{
  opacity: 0;
  transition: opacity .5s linear;
}
.header-slider.slick-initialized{
  opacity: 1;
}

「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 –>

「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' );

「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 –>

いろいろなファイルに追記するのはここまでです。

スライダーに表示する画像の準備とアップロード

まずはスライダー表示を体験していただきたいので四の五の言わずに以下のサイズの画像を４枚作成してください。

画像サイズ：1200x400px
画像ファイル名：header-01.png,header-02.png,header-03.png,header-04.pngの４つ（拡張子はすべて.pngにしてください）

画像が用意できたらテーマフォルダ内にある「images」フォルダの中へアップロードしてください。

スライダーを表示する

ここまでくればゴールは目前です！！頑張りましょう！！

視差効果のある画像の代わりにスライダーを表示させるようにします。ここは直接テーマファイルに変更を加えますので注意して行ってください。

1. テーマ編集画面から「header.php」を開きます
2. 以下のコードを探します（下の方にあります）

<!–ヘッダ画像（視差効果）–>
	<aside id="site-top-image" class="box" style="background-image: url(<?php echo get_template_directory_uri() ?>/images/header.png); "></aside>

3. 以下のコードに書き換えます

<!–ヘッダスライダー –>
<?php get_template_part('header-content');//画像スライダー?>

難しい・・と書かれているから大変かもと思ってた方、実は変更箇所はこれだけです。拍子抜けさせてごめんなさい。

余談ですが、多分他のテーマでは追加するコードやこの部分の変更などコードとにらめっこが必要になることが多いですが、こうしたカスタマイズのしやすさもシンプルイズベストなテーマ【ha-Basic】最大の特徴です（自画自賛すみません・・・）。

サイトを表示してみよう！

ここまでの作業をしたら、サイトのトップページを表示してみましょう。視差画像がきちんとスライダーになっていた方おめでとうございます！！

もしもうまく表示されない場合はキャッシュのクリアをしてみてください。それでもダメな場合は上の手順のいずれかが誤っている可能性がありますので再チェックをしてください。

今回のカスタマイズでのQ&A

Q:どうして最初からこの機能を搭載していないの？切り替えできるようにすればいいのに・・・

Q:どうしてスマホなどのモバイルでは表示しないの？

Q:スライドする画像の数を増やしたい

<div><a href="#"><img src="<?php echo get_template_directory_uri() ?>/images/header-01.png" alt="sample"></a></div>

Q:スライド速度などの調整をしたい

いかがでしたか？実際に変更してみたら案外簡単ではありませんでしたか？？

こうした【ha-Basic】のカスタマイズ方法を気が付く限りどんどん追加していきますので、ご自身のサイトの独自性を高めるためにご利用ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。