ヘッダー画像をスライドで複数枚の画像に

  • S

    ヘッダー画像を複数枚のスライド式にカスタマイズしたいのですが、やり方がわかりません。
    ご教示いただけますでしょうか。
    よろしくお願いいたします。

    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    0

  • 横から失礼します。
    swiper　というjs を使う方法しかないかと思います。
    もしくは、ウジット。
    表示したいページに以下を足します。```
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
    <link rel="stylesheet" href=https://unpkg.com/swiper/swiper-bundle.css>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script>
    var swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    spaceBetween: 300,
    loop: true,
    centeredSlides: true,
    pagination: '.swiper-pagination',
    direction: 'horizontal',
    autoplay: true,

    autoplayDisableOnInteraction: false,
    disableOnInteraction: false,
    });
    </script>

    <script>の中が　スライダーの動きを決めています。horizontalは横スクロールタグ。違うタグで　縦も行けます。

    ワードプレスの　このテーマだと管理画面に、ないのでfunction.phpに
    関数を作ります。

           function slider() {
          ?>　
       <div class="mainvisual">
        
                  <div class="swiper-container">
        
                  <div class="swiper-wrapper"> class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
        <img src="画像のURL" width="640" height="360" class="alignnone size-large wp-image-687" />
         </div><!-- 各スライドswiper-slide -->

        <div class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
        <img src="画像のURL" alt="" width="640" height="480" class="alignnone size-large wp-image-208" />
        </div><!-- 各スライドswiper-slide -->


        <div class="swiper-slide" data-swiper-autoplay="5000" style="height:925px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
         <img src="画像のURL" alt="" width="640" height="853" class="alignnone size-large wp-image-86" />
         </div><!-- 各スライドswiper-slide -->

        <div class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
        <img src="画像のURL" alt="画像" width="1000" height="581" class="alignnone size-full wp-image-568" />
        </div><!-- 各スライドswiper-slide -->
        <div class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
        <img src="画像のURL" alt="画像" width="660" height="370" class="alignnone size-full wp-image-700" />
        </div><!-- 各スライドswiper-slide -->

      </div><!-- swiper-wrapper -->
      <div class="swiper-pagination"></div>
      </div><!-- swiper-container -->
      </div><!--mainvisual-->

      <?php
      }?>

    このコードだと5枚の画像がながれます。

    header-image.phpというファイルの２行目から21行までを

    削除して。

    作成した関数　ここでは<?php slider();?> をいれます。

    保存。これで１応は５枚横に動くはずです。

    cssは　
    https://web改善事例.com/js-swiper-sample/
    を参考に作ってください。

    使いかってよく管理画面に入力欄を作る場合は、
    function.phpに
    add_menu_page()　で作成します。
    参考：https://jajaaan.co.jp/wordpress/wordpress-admin-page/

    get_include_onece ()
    で　作ったファイルを呼び出してあげます。

    画像のURLのところを　カスタムフィールド　で作成してあげると、管理しやすくなります。

    どっちにしろ　大改造になります。

    ウジットでやれればいいですが、互換性とかいろいろあるかと思います。
    ショートコードを php に書く方法で、書く場所は
    header-image.phpというファイルの２行目から21行の
    元のコードを消して　書く事になります。

    そんな感じです。
    やり切れないかも知れませんが、　頑張ってみてください。

    ”運営に頼むという裏技もあるかと思います。”

    1