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

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

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

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2357閲覧

swiperを使った投稿記事のループ処理をしたい

Larkiwing

総合スコア120

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/08 08:44

swiperを使った投稿記事のループ処理をしたいです。

今のhtmlの状態は画像と文章をのせるには十分ですが、この状態を保ちながら
PHPで投稿記事をループさせようとすると、うまくいきません。

PC画面では今のHTMLのように3つだけ表示して、レスポンシブにすると両脇のものが
消えて真ん中にある記事だけを表示させたいです。

以下イメージです。

イメージこんな感じです。

宜しくお願い致します。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!--Swiper--> 9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 11<!-- Bootstrap core JS--> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 13 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script> 14 15 </head> 16 <body> 17 <!-- Slider main container --> 18 <div class="swiper-container"> 19 <!-- Additional required wrapper --> 20 <div class="swiper-wrapper"> 21 <!-- Slides --> 22 <div class="swiper-slide" style="linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%"> 23 <img src="https://picsum.photos/id/1041/650/400" alt=""> 24 <p>aaaa</p> 25 <p>bbbbb</p> 26 27 </div> 28 <div class="swiper-slide"> 29 <img src="https://picsum.photos/id/1042/650/400" alt=""> 30 <p>aaaa</p> 31 <p>bbbbb</p> 32 </div> 33 <div class="swiper-slide"> 34 <img src="https://picsum.photos/id/1043/650/400" alt=""> 35 <p>aaaa</p> 36 <p>bbbbb</p> 37 </div> 38 </div> 39 <!-- If we need pagination --> 40 <div class="swiper-pagination"></div> 41 42 <!-- If we need navigation buttons --> 43 <div class="swiper-button-prev swipe-sign"></div> 44 <div class="swiper-button-next swipe-sign"></div> 45 </div> 46 47 <style> 48 .swiper-button-prev{ 49 position: absolute; 50 display: inline-block; 51 padding: 0 0 0 16px; 52 color: #000; 53 vertical-align: middle; 54 text-decoration: none; 55 font-size: 50px; 56 width: 48px; 57 } 58 59 .swiper-button-prev::before{ 60 position: absolute; 61 top: 0; 62 bottom: 0; 63 left: 0; 64 margin: auto; 65 content: ""; 66 vertical-align: middle; 67 box-sizing: border-box; 68 width: 150px; 69 height: 220px; 70 border: 1px solid #191919; 71 opacity: 0.6; 72 /* -webkit-border-radius: 25%; */ 73 /* border-radius: 25%; */ 74 background-color: #191919; 75 } 76 77 .swiper-button-prev::after{ 78 position: absolute; 79 top: 0; 80 bottom: 0; 81 left: 0; 82 right: 0; 83 margin: auto; 84 content: ""; 85 vertical-align: middle; 86 /* left: 5px; */ 87 box-sizing: border-box; 88 width: 100px; 89 height: 100px; 90 border: 100px solid transparent; 91 border-left: transparent; 92 border-right: 90px solid #fff; 93 } 94 95 .swiper-button-next{ 96 position: absolute; 97 display: inline-block; 98 padding: 0 0 0 16px; 99 color: #000; 100 vertical-align: middle; 101 text-decoration: none; 102 font-size: 50px; 103 width: 48px; 104 } 105 106 .swiper-button-next::before{ 107 position: absolute; 108 top: 0; 109 bottom: 0; 110 right: 0; 111 margin: auto; 112 content: ""; 113 vertical-align: middle; 114 box-sizing: border-box; 115 width: 150px; 116 height: 220px; 117 border: 1px solid #191919; 118 opacity: 0.6; 119 /* -webkit-border-radius: 25%; */ 120 /* border-radius: 25%; */ 121 background-color: #191919; 122 } 123 124 .swiper-button-next::after{ 125 position: absolute; 126 top: 0; 127 bottom: 0; 128 right: 0; 129 margin: auto; 130 content: ""; 131 vertical-align: middle; 132 /* left: 5px; */ 133 box-sizing: border-box; 134 width: 100px; 135 height: 100px; 136 border: 100px solid transparent; 137 border-right: transparent; 138 border-left: 90px solid #fff; 139 } 140 141 </style> 142 143 <script> 144 var mySwiper = new Swiper ('.swiper-container', { 145 loop: true, 146 slidesPerView: 2, 147 spaceBetween: 5, 148 centeredSlides : true, 149 pagination: '.swiper-pagination', 150 nextButton: '.swiper-button-next', 151 prevButton: '.swiper-button-prev', 152 breakpoints: { 153 767: { 154 slidesPerView: 1, 155 spaceBetween: 0 156 } 157 } 158 }) 159 </script> 160 </body> 161</html> 162 163

php

1<div class="container-fluid"> 2 <div class="row py-3"> 3 <div class="col-md-4 col-12"> 4 <div class="bg-white py-3"> 5 <!--サムネイル--> 6 <div class="pb-3"> 7 <?php if ( has_post_thumbnail() ) : ?> 8 <?php the_post_thumbnail(); ?> 9 <?php else : ?> 10 <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/no-image.png" alt=""> 11 <?php endif; ?> 12 </div> 13 <!--記事タイトル--> 14 <h2 class="h4 px-3 pb-3"><?php the_title(); ?></h2> 15 <p><?php the_excerpt(); ?></p> 16 <!----> 17 <div class="text-center"> 18 <p><?php the_date('Y.m.d'); ?></p> 19 </div> 20 </div> 21 </div> 22 </div> 23 </div> 24

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

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

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

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

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

guest

回答1

0

自己解決

https://byacco.work/wordpress-post-slider-no_plugin/
の記事を参考にするとできます

投稿2020/12/08 15:17

Larkiwing

総合スコア120

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.38%

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

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

質問する

関連した質問