シンプルで使いやすいWordpress用無料テーマ【ha-Basic】の配布、テーマカスタマイズの方法のご紹介など

無料WordPressテーマ【ha-Basic】でサイドバーウィジェットへローテーションバナーを設置する方法

公開日:2020年9月13日 カスタマイズいろいろ マニュアル

【ha-Basic】テーマ、バージョン2.0.1.0で導入した、サイドバーウィジェットへローテーションバナーを設置する方法を紹介します。ローテーションバナーとはちょうどこの右にある一定時間で入れ替わる広告のことを言います。広告だけでなく、写真(画像)などのコンテンツも表示できます。

※旧バージョンを利用の場合は機能しませんので、こちらから最新バージョン(2.0.1.0以降)をダウンロードし、アップロード更新をお願いします。

※この機能は、トップページの上部に表示できる画像スライダーを動かす仕組みを応用・拡張したものです。特に大きくテーマ仕様が変更となったものではありませんのでご安心ください。

※本機能を有効にすることで、今まではトップページで、スライダー画像を表示させる設定を行った際だけ有効にしていた「swiper.js」というスクリプトを全コンテンツで動作するようになりますので、多少表示速度に影響が出ることがありますのでご注意ください。

サイドバーへのローテーションバナー設置方法(基本編)

本機能を使ってサイドバーへローテーションバナー(広告や画像など)を表示させる方法を解説します。

仕様上、幅336px、高さ280pxの広告または画像に対応します(それよりも大きなものは中央を中心に336px X 280pxへトリミングされます)。その他の大きさのローテーションバナーを設置したい場合は「違う大きさのローテーションバナーに変更したいときは」を参照ください。

それでは進めていきましょう。

ローテーション広告が動作するようにテーマカスタマイザーで設定変更する

管理画面から外観カスタマイズha-Basic設定追加コンテンツ・コードを開きます

左側の項目にある「すべての投稿・固定ページでスライダー用スクリプト(swiper.js)を読み込む」にチェックを入れ、上の公開ボタンをクリックします。

カスタムHTMLウィジェットへコードをコピーし、広告を挿入する

管理画面から外観ウィジェットを開き、「カスタムHTML」ウィジェットをサイドバーへ追加します。

以下のコードをコピーして挿入します。

<div class="ad-280-pk">
<div class="swiper-container ad-280">
<div class="swiper-wrapper">
<!-- スライド1 -->
<div class="swiper-slide">
<div class="slide-img">
スライドコンテンツ(広告や画像など)をここに上書き①
</div>
</div>
<!-- スライド2 -->
<div class="swiper-slide">
<div class="slide-img">
スライドコンテンツ(広告や画像など)をここに上書き②
</div>
</div>
<!-- スライド3 -->
<div class="swiper-slide">
<div class="slide-img">
スライドコンテンツ(広告や画像など)をここに上書き③
</div>
</div>
<!-- スライドを増やすコードのブロックを挿入 ここから -->
<!-- スライドを増やすコードのブロックを挿入 ここまで -->
</div>
</div>
</div>

あとは、幅336px X 高さ280pxの画像タグや広告コードを挿入すれば完成です。

上のコードでは、①~③の3つのコンテンツがローテーション表示されるようにしています。

スライドするコンテンツの数を増やしたい場合は

<!-- スライドを増やすコードのブロックを挿入 ここから -->
<!-- スライドを増やすコードのブロックを挿入 ここまで -->

の間に

<div class="swiper-slide">
<div class="slide-img">
スライドコンテンツ(広告や画像など)をここに上書き
</div>
</div>

を必要に応じて追加してください。

違う大きさのローテーションバナーに変更したいときは

ここまではサイドバーへローテーションバナーを表示させる方法を説明しました。

ここでは、サイドバーではなく本文内で今回のローテーションバナーを設置したい場合の変更方法を説明します。

今回のローテーションバナーを設置するにあたり、「swiper.js」というスライダースクリプトを使用しています。このスクリプトを使って何かを表示する場合、デザイン要素(CSS)で高さを指定する必要があります。テーマのデフォルトCSS設定ではサイドバーウィジェットへ336px X 280pxのコンテンツを表示することを前提に高さを280pxに限定しているため、本文へ幅広のローテーションバナーを設置する場合には、コンテンツの高さによっては大きく余白が空いてしまうことがあります。

そこで以下のコードを追加して、高さの設定をし直します。

/*** 下のスライダー ***/
.ad-280-pk {
margin:auto;
max-height:280px;
}
.ad-280 .swiper-container {
margin:auto;
max-height:280px;
}
.ad-280 .slide-img {
background-size: cover;
background-position: center center;
}
.swiper-container.ad-280.swiper-container-fade.swiper-container-initialized.swiper-container-vertical {
height: 280px;
}

まずは上のコードを親テーマのusercontentstyle.additional.cssの中、

または

子テーマのstyle.cssへ追記します。

※親テーマの場合、テーマの更新によって設定が消失する可能性がありますので、子テーマの使用をおすすめします

追記したら、コード中にある「280px」という部分を適切な高さに直せば終了です。

※実際に表示させても高さが変わらない場合はキャッシュのクリアを行ってみてください(大抵のブラウザの場合はキーボードで「Ctrl」+「F5」を入力することでクリアできます)

複数のローテーションバナーを設置したいときは

これを行うには、テーマ操作・スクリプトの追加・CSSの追加・スクリプトの適用といった知識が必要であり、初心者の方には難しいと思いますので、手順のみ簡単に解説しておきます。

※子テーマの使用を前提としています

手順としては

  1. 親テーマのswiperop-sliderフォルダをパソコンへダウンロードします
  2. ダウンロードしたフォルダにある2つのファイルを適当な名前に変更します
  3. ファイル名を変更した「〇〇.js」を開き、先頭行のスクリプト名(adSwiper336280)とクラス名(.ad-280)を変更します
  4. ファイル名を変更した「〇〇.css」を開き、3のクラス名を割り当てます
  5. 変更後の「op-slider」フォルダを子テーマの中へアップロードします
  6. wp_enqueue_script関数を使って、jsファイルとcssファイルをテーマ内に読み込ませます
  7. 上で紹介したHTMLコード中の「swiper-container ad-280」の部分を「swiper-container 変更したクラス名(「.」(ドット)なし)」へ変更し、コンテンツ設定後、テンプレートや本文内へコピーします

これで別のローテーションバナーが追加できます。

※この状態では高さが280pxになっていますので、本文内へ違う高さのコンテンツを表示する場合はCSSで適宜変更してください。

ざっくりとになってしまいましたが、ある程度テーマ操作のできる方ならこれで増やせるはずです。上記の手順を基にご自身で研究して設置してみると知識深耕につながるかと思いますので、チャレンジしてみてください。

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしていますブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

いつでもご相談・お見積りの依頼を受け付けています

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

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

【スポンサーリンク】