質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

645閲覧

投稿(記事)で複数の画像を登録し、WEBサイトで作ったサムネイルスライダーを表示するにはどうすればいいでしょうか?

oyu

総合スコア48

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/02/18 23:41

前提・実現したいこと

WEBサイトで作ったサムネイルスライダーをwordpressの投稿詳細ページに表示したいのですが
どのように設置するのでしょうか?
single-works.phpのテンプレートを使い詳細3ページによってサムネイルスライダー画像が切り替わるイメージの作り方です。

このようなサムネイルスライダーを表示させたいです。
イメージ説明

投稿ページでHTMLとして編集でソースコードを流し込みました。
イメージ説明

single-works.phpのソースコード

single

1<?php get_header(); ?> 2 <main id="works_detail-bg" class="works_detail-container"> 3 <div class="works_detail-contents"> 4 <section class="works_detail-blc clearfix"> 5 6 <?php if(have_posts()): ?> 7 8 <?php while(have_posts()): the_post(); ?> 9 10 <div class="works_detail-left"> 11 <div id="wrap"> 12 <ul id="slider"> 13 <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li> 14 <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li> 15 <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li> 16 <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li> 17 <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li> 18 <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li> 19 </ul> 20 <ul id="thumbnail-list"> 21 <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li> 22 <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li> 23 <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li> 24 <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li> 25 <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li> 26 <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li> 27 </ul> 28 </div> 29 </div> 30 <div class="works_detail-right"> 31 32 <h2 class="title"><?php the_title(); ?></h2> 33 <span class="txt"><?php the_content(); ?></span> 34 <p class="content"> 35 </p> 36 </div> 37 38 <?php endwhile; ?> 39 40 <?php endif; ?> 41 42 </section> 43 44 </div> 45 </main> 46<?php get_footer(); ?>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ACFのリピーターフィールドを使うのが旧来の一般的な対応方法だろうけど
スライドショーのブロックのプラグインぐらいそろそろ出てるだろう

検索したらすぐ出た

しかしプラグインで追加したブロックはカスマイズはほぼできない
思い通りのスライドショーにカスタマイズとかはまず諦めることになるかも

オリジナルにこだわるならブロックを自作するのも選択肢
ただしスライドショーのブロックは初めての自作ブロックとしては
かなりハードルが高いので簡単なところから順番に作っていこう

投稿2020/02/19 05:38

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyu

2020/02/19 07:27

お聞きしたいのですが、 プラグインを使いサムネイルスライダーは設置はできないのでしょうか?
KazuhiroHatano

2020/02/19 08:27

すでにあるスライドショーをなんとかそのまま流用したいとか オリジナルのデザインのスライドショーにしたいならACFで対応するのが現実的 オリジナルに拘らないなら管理画面でプラグイン検索して適当なの探せばよし 旧来のプラグインのスライダーはまあだいたい jqueryのライブラリ使ってるのでカスタマイズの自由度も大体その範囲 使われてるのは大体slick、bxslider、nivosliderとかあたり slickが比較的柔軟でレスポンシブ nivosliderはトランジションが壮麗ではあるけど柔軟性はない
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問