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

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

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

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

PHP

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

Q&A

解決済

1回答

1629閲覧

WordPressでスライドショーを二段組で表示させたい(Swiper.js)

yuyauver98

総合スコア14

WordPress

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

PHP

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

0グッド

0クリップ

投稿2019/05/16 11:13

編集2019/05/16 11:15

前提・実現したいこと

スライドショーを二段組で表示させたいです。
以下、実現したい配置を数字で表現してます。

番号は小さい順から新着記事にしたいです。

135
246

添付画像が理想の形です。

イメージ説明

もしわかる方いましたら何卒ご教示願いたいです!
よろしくお願いいたします!

難しい

swiper-slideクラスのかたまり(縦2記事)を3つ表示させたいが、、、
そのロジックが全くわからないです。

エラー

・表示される記事がすべておなじになってしまう
・表示数も2 2 2にならない
・表示数が1 2 3になる

front-page.php

php

1<div class="swiper-container Infomation__Blog__Item__Box"> 2 <div class="swiper-wrapper"> 3 <?php 4 $args = array( 5 'post_type' => 'post', 6 'posts_per_page' => 3, 7 ); ?> 8 <?php 9 $my_query = new WP_Query($args); 10 if ($my_query->have_posts()): $separate = 6; $index = 0; while ( $my_query->have_posts() ) : $my_query->the_post();?> 11 <? if ( ( $count % $separate ) === 0 ) { // $count を $separate で割った余りが 0 の場合 12 $index++; // 現在のブロックをプラス1 13 $count = 0; // ブロック内の記事数リセット 14 } ?> 15 <?php 16 $entries[$index][$count] = $args; // $argsを配列に入れる 17 $count++; // ブロック内の記事数をプラス1 18 ?> 19 <div class="swiper-slide"> 20 <div class="Infomation__Blog__Slide"> 21 <?php foreach ( $entries as $entry ) : ?> 22 <a href="<?php the_permalink(); ?>" class="Infomation__Blog__Link"> 23 <?php foreach ( $entry as $detail ) : ?> 24 <div class="Infomation__Blog__Item"> 25 <div class="Infomation__Blog__Item__Left"> 26 <img src="<?= get_template_directory_uri(); ?>/resources/images/Pages/Infomation-Blog-Item-One-Img.png" class="Infomation-Blog-Item-Img"> 27 </div> 28 <div class="Infomation__Blog__Item__Right"> 29 <h4 class="Infomation-Blog-Item-Title"> 30 <?php the_title(); ?> 31 </h4> 32 <p class="Infomation-Blog-Item-Date"> 33 日時:<?php the_time('Y.m.d'); ?> 34 </p> 35 <p class="Infomation-Blog-Item-Text"> 36 <?php echo mb_substr(strip_tags($post-> post_content),0,80) . '...'; ?> 37 </p> 38 <p class="Infomation-Blog-Item-SP-Text"> 39 <?php echo mb_substr(strip_tags($post-> post_content),0,54) . '...'; ?> 40 </p> 41 </div> 42 </div> 43 <?php endforeach; ?> 44 </a> 45 <?php endforeach; ?> 46 </div> 47 </div> 48 <?php endwhile; ?> 49 <?php endif; ?> 50 <?php wp_reset_postdata(); ?> 51 </div> 52 <div class="swiper-button-prev"> 53 <div class="Infomation__Blog__NextBtn__Box"> 54 <img src="<?= get_template_directory_uri(); ?>/resources/images/Pages/Infomation-Event-NextBtn.png" class="Infomation-Blog-NextBtn"> 55 </div> 56 </div> 57 <div class="swiper-button-next"> 58 <div class="Infomation__Blog__NextBtn__Box"> 59 <img src="<?= get_template_directory_uri(); ?>/resources/images/Pages/Infomation-Event-NextBtn.png" class="Infomation-Blog-NextBtn"> 60 </div> 61 </div> 62</div>

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/05/17 07:38

表示したいHTMLコード(PHPで出力したいコード)を質問文に追記してもらえますか。
yuyauver98

2019/05/17 13:59

修正依頼ありがとうございます!
guest

回答1

0

自己解決

この記事を参考に解決いたしました。
http://johnykei.net/wordpress/wordpress-loop-surround-tag/

投稿2019/05/17 14:00

yuyauver98

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問