[Ha-Basic] How to make the header image of the top page "enlarge and fade switch" & how to use it in other themes

トップページのヘッダー画像を「拡大&フェード切り替え」にする方法【ha-Basic&その他テーマ】

公開日: ha-Basicテーマ
Knowledge Base Wordpress ha-Basic テーマ

以前に紹介した、【ha-Basic】テーマのトップページにあるヘッダー画像を3Dスライダーへ変更する方法


今回はもう1歩進んで、

  • 表示されている画像が徐々に拡大されていく
  • 一定時間経つと自動で次の画像に切り替わる
  • 切り替え後の画像が徐々に拡大されていく
  • ・・・繰り返し・・・

という形で表現する方法を紹介します。

言葉で伝えてもイメージが湧かないと思いますので、2020年1月20日現在、私が管理する


で採用していますので、一度ご覧いただければと思います。
※パソコンからでないと表示されません

最初に【ha-Basic】での適用方法を紹介しますが、後編ではいろいろなテーマで汎用的に適用する方法&仕組みなどについても紹介していますので、「これええなぁ・・(なぜか関西弁)」と思われた方はぜひ自身のサイトでも採用してみてください。

なお、冒頭で紹介した


では「slick.js」というスクリプトを使いましたが、今回は「swiper.js」というのを使用しています。今回の設定方法は文末にある参考ページを基に、【ha-Basic】テーマへ簡単に組み込めるようにしたもので、「swiper.js」については私自身とても使いこなせるレベルではありませんので、設置後詳しく知りたい方は

の公式サイトを見ていただくか、「swiper」でググっていろいろなページを読んで参考にしてください。

【ha-Basic】テーマでトップページのヘッダー視差画像を「拡大する写真&自動切換え」にする方法

パッケージファイルのダウンロード

から今回のスライダーに必要なものをパッケージ化したファイルをダウンロードします
※直リンク防止のため、「Booth」という外部サイトで配布しています(Boothへの登録、本ファイルのダウンロードは無料です)

ダウンロードしたファイルは圧縮されていますので、パソコン上で解凍してください

パッケージファイルの解凍とアップロード

解凍したパッケージは

swiper
-swiper.min.css
-swiper.min.js
-swiper-header.css
-swiper-header.js
-swiper-header-content.php

という構造になっていますので、FTPなどを使って「swiper」フォルダを丸ごと以下の場所へアップロードします。

サイトが収容されているフォルダ
→wp-content
→themes
→ha-basic

※最後の「ha-basic」を開いたところ(ha-basicフォルダの中)へアップロードしてください

画像の準備とアップロード

スライダーに表示させる画像を準備します。画像の拡大・縮小はされますが、できればサイト幅もしくは画面幅に合わせたものを用意してください。

画像の高さは自動的に500pxに、画像の中央から上下250pxずつの範囲が表示されますから、中央に表示したいものが入っている画像を用意するか、高さ500pxに整えてください。

画像数は何枚でもスライド表示可能ですがすべての画像を読み込む必要があるため、容量の大きい画像をたくさん使用すると表示に時間がかかるようになりますのでご注意ください。

画像の最適化は


が便利です。

準備できたら

サイトが収容されているフォルダ
→wp-content
→themes
→ha-basic
→images

※最後の「images」を開いたところ(imagesフォルダの中)へアップロードしてください

画像読み込みの設定

外観テーマエディタを開いて右側のリンク一覧にある「swiper」というフォルダを開き、「swiper-header-content.php」を開きます。

以下のようなコードが表示されますので

 <div class="swiper-container">
          <div class="swiper-wrapper">
            <!– 背景画像1 –>
            <div class="swiper-slide">
              <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
            </div>
            <!– 背景画像2 –>
            <div class="swiper-slide">
               <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
            </div>
            <!– 背景画像3 –>
            <div class="swiper-slide">
               <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
            </div>
          </div>
          <!– 丸いページネーション –>
          <div class="swiper-pagination"></div>
          <!– 左右のページ送り –>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
</div>

【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


「画像のファイル名と拡張子」と書かれている部分をアップロードした画像のファイル+拡張子に変更してください

コードは3枚分の画像が表示できるようにしています。追加したい場合は

<!– 丸いページネーション –>

の上に
            <!– 背景画像 –>
            <div class="swiper-slide">
               <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
            </div>
          </div>

を追加して「画像のファイル名と拡張子」を設定してください。

a-insert-header.phpへコードを追加

外観テーマエディタを開き、a-insert-headerをクリックして最終行へ以下をコピペしてください。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.css">

a-insert-footer.phpへコードを追加

外観テーマエディタを開き、a-insert-footerをクリックして最終行へ以下をコピペしてください。

<script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.js"></script>

header.phpの記述内容を変更

変更前

<!–ヘッダ画像(フロントページかつパソコン表示のみ)–>
	<?php if(wp_is_mobile()): ?>
	<?php else: ?>
	<?php if(is_front_page()): ?>
<!–ヘッダ画像(視差効果)–>
	<aside id="site-top-image" class="box" style="background-image: url(<?php echo get_template_directory_uri() ?>/images/header.png); "></aside>
	<?php else: ?>
	<?php endif; ?>
	<?php endif; ?>

変更後

<!–ヘッダ画像(フロントページかつパソコン表示のみ)–>
	<?php if(wp_is_mobile()): ?>
	<?php else: ?>
	<?php if(is_front_page()): ?>
<?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>
	<?php else: ?>
	<?php endif; ?>
	<?php endif; ?>

基本的には設置手順通りに行えば

のように画像が拡大される→次の画像が表示される・・・というスライダーがパソコン表示時のトップページへ表示されるようになります。

細かい調整については文末の「動作やデザインの調整」を参照ください

ベーシックなWordPressテーマ【ha-Basic】を公開しました

【ha-Basic】テーマで画面の左右余白にグラデーション効果を持った色を付ける方法


一般的なテーマのヘッダーへ「拡大する写真&自動切換え」スライダーを設置する方法

基本的な流れは【ha-Basic】テーマへ組み込む場合と同じです。
※親テーマでの設定を前提に説明しますので、子テーマで設定する場合には自身で調べてください(基本的にはコード中のテーマファイルの参照先を変更すれば済むと思いますが検証はしていません)。

設置の手順

  1. パッケージファイルをダウンロードします
  2. から今回のスライダーに必要なものをパッケージ化したファイルをダウンロードします
    ※直リンク防止のため、「Booth」という外部サイトで配布しています(Boothへの登録、本ファイルのダウンロードは無料です)

  3. スライド表示させる画像の準備します
  4. スライダーに表示させる画像を準備します。画像の拡大・縮小はされますが、できればサイト幅もしくは画面幅に合わせたものを用意してください。

    画像の高さは自動的に500pxに、画像の中央から上下250pxずつの範囲が表示されますから、中央に表示したいものが入っている画像を用意するか、高さ500pxに整えてください。

    画像数は何枚でもスライド表示可能ですがすべての画像を読み込む必要があるため、容量の大きい画像をたくさん使用すると表示に時間がかかるようになりますのでご注意ください。

    画像の最適化は


    が便利です。

    画像はすべて「images」というフォルダの中に入れておきましょう

  5. ダウンロードしたファイルを解凍します
  6. 先程ダウンロードしたパッケージファイルをパソコン上で解凍します。

    解凍したパッケージは

    swiper
    -swiper.min.css
    -swiper.min.js
    -swiper-header.css
    -swiper-header.js
    -swiper-header-content.php

    という構造になっています

  7. 画像フォルダとパッケージをアップロードします
  8. 先程作成した「images」というフォルダと「swiper」フォルダを、現在使用しているテーマのフォルダ内へアップロードします

    ※テーマによっては既に「images」「swiper」と同名のフォルダが存在する場合がありますから、上書きしないようにしてください(今回アップロードするフォルダ名を変更して適用できますが、ご自身にスキルがない場合には今回の方法は断念したほうがいいと思います)。

    ※きちんとアップロードできているかは外観テーマエディタを開いて右側のリンク一覧に「swiper」というフォルダがあるかどうかで判断できます。もしもない場合にはアップロード先が間違っていますので再確認してください。

    外観テーマエディタを開いて右側のリンク一覧にある「swiper」というフォルダを開き、「swiper-header-content.php」を開きます。

    以下のようなコードが表示されますので

     <div class="swiper-container">
              <div class="swiper-wrapper">
                <!– 背景画像1 –>
                <div class="swiper-slide">
                  <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
                </div>
                <!– 背景画像2 –>
                <div class="swiper-slide">
                   <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
                </div>
                <!– 背景画像3 –>
                <div class="swiper-slide">
                   <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
                </div>
              </div>
              <!– 丸いページネーション –>
              <div class="swiper-pagination"></div>
              <!– 左右のページ送り –>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
    </div>

    「画像のファイル名と拡張子」と書かれている部分をアップロードした画像のファイル+拡張子に変更してください

    コードは3枚分の画像が表示できるようにしています。追加したい場合は

    <!– 丸いページネーション –>

    の上に
                <!– 背景画像 –>
                <div class="swiper-slide">
                   <div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
                </div>
              </div>

    を追加して「画像のファイル名と拡張子」を設定してください。

  9. テーマ内へスライダーを読み込ませるコードを挿入します
  10. 外観テーマエディタを開き、「header.php」を開きます。

    コード中の</head>の直前に以下のコードを追記します

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.css">

    同じように外観テーマエディタから「footer.php」を開きます。

    </body>の直前に以下のコードを追記します

    <script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.js"></script>

    同じように外観テーマエディタから再度「header.php」を開きます。

    いろいろとコードが書かれていますが、<body…>と書かれているところから下が実際に表示される部分になっていますので、実際の表示と見比べながらここだ!!と思う場所へ

    <p>ここにスライダーが表示されるハズ・・・</p>

    をひとまず挿入して保存→ページの再表示をしてみてください。思った場所に「ここにスライダーが表示されるハズ・・・」という文字が表示されるようでしたら位置は確定ですから
    <p>ここにスライダーが表示されるハズ・・・</p>

    の代わりに
    <?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>

    を挿入すればOKです。

    ※【ha-Basic】テーマのようにパソコン表示時のトップページだけにスライダーを表示したい!場合は

    <?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>

    の代わりに
    <!–ヘッダ画像(フロントページかつパソコン表示のみ)–>
    	<?php if(wp_is_mobile()): ?>
    	<?php else: ?>
    	<?php if(is_front_page()): ?>
    <?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>
    	<?php else: ?>
    	<?php endif; ?>
    	<?php endif; ?>

    を挿入します。

    ※通常のテーマではすべてのページに共通するページ先頭の部分(ヘッダー)は、上の説明のように「header.php」に書かれていますが、テーマによっては「single.php」「page.php」「frontpage.php」「home.php」などに書かれていることもありますので、適宜読み替えてください。

以上で指定位置に画像スライダーが表示されます(表示されない場合には手順のチェックをする、ブラウザのキャッシュをクリアする等の措置をしてみてください)。

[su_spoiler title="キャッシュのクリア?どうやるの?" style="fancy" icon="arrow-circle-1"]

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR
[/su_spoiler]

動作やデザインの調整

デザインの設定は「swiper」フォルダの中の「swiper-header.css」の中に書かれていますので、そちらでカスタマイズしてください

動作(表示時間や遷移させる時間など)の調整は「swiper」フォルダの中の「swiper-header.js」の中に書かれていますので、そちらで調整してください

参考にさせていただいたページ

Knowledge Base Wordpress ha-Basic テーマ
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

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

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報