プラグインを使わずWordPressにスライダーを作る方法【コピペでOK】

CDNとは

コンテンツ・デリバリー・ネットワークは、高度に分散されたサーバープラットフォームで、ウェブアプリケーションやストリーミングメディアなどのコンテンツを配信するために最適化されています。このサーバーネットワークは、エンドユーザーによるウェブコンテンツのリクエストに直接応答して、高速かつ安全なメディア配信を実現するため、多数の物理ネットワークロケーションに分散されています。これは、コンテンツサーバー（オリジンとも呼ばれる）とエンドユーザー／クライアントとの中間サーバーの役割をします。

出典：https://www.akamai.com/jp/ja/cdn/what-is-a-cdn.jsp

JavaScript var swiper = new Swiper('.swiper-container', < slidesPerView: 'auto', spaceBetween: 30, loop: true, centeredSlides: true, pagination: '.swiper-pagination', autoplay: 1500, disableOnInteraction: false, >);

そして、この部分が色々な機能の設定部分ですので、ここをいじって自動でスライドが動くだとか、ループさせるかだとかを設定できます。

スライダーのHTML ここに入れたものがスライドする1 ここに入れたものがスライドする2 ここに入れたものがスライドする3 ここに入れたものがスライドする4

「ここに入れたものがスライドする」の部分は増やしたり減らしたり自由ですので、改変はご自由にどうぞ。

スライダーのCSS .swiper-container < width: 100%; height: 100%; >.swiper-slide < width: 250px!important; height: auto!important; overflow: visible; text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; >.swiper-slide img < width: 100%; height: auto; >.mainvisual WordPressでスライドショーを作るには？

スライダーをWordPressの関連記事に使う場合

このようにするためには、関連記事の部分テーマのコードを書き替えていきます。

関連記事部分のコード修正 ID ); $category_ID = array(); foreach ( $categories as $category ): array_push( $category_ID, $category->cat_ID ); endforeach; $args = array( 'post__not_in' => array( $post->ID ), 'posts_per_page' => $kanrenpost_no, 'category__in' => $category_ID, 'orderby' => 'rand', //ランダム表示 ); $st_query = new WP_Query( $args ); ?>have_posts() ): ?>have_posts() ) : $st_query->the_post(); ?>

">あなたのブログ名

スライダーに公告を挟む場合

最後に、スライダーに広告を挟みたい！という場合です。

同様に関連記事の部分を書き換える関連記事に広告を挟む場合 ID ); $category_ID = array(); foreach ( $categories as $category ): array_push( $category_ID, $category->cat_ID ); endforeach; $args = array( 'post__not_in' => array( $post->ID ), 'posts_per_page' => $kanrenpost_no, 'category__in' => $category_ID, 'orderby' => 'rand', //ランダム表示 ); $st_query = new WP_Query( $args ); ?>have_posts() ): ?>have_posts() ) : $st_query->the_post(); ?>ここにアドセンスの広告のコードを挿入 </article>$ads_infeed_count++; ?>

">あなたのブログ名など

WordPressでスライダー/スライドショーを実装する方法まとめ

Swiperを使用してスライドを作る方法
画像を用いてスライドショーを作る方法
関連記事を表示される方法
そこに広告を挟む方法

関連記事チェックボックスをCSSで装飾してWordPress記事内で使おう【コピペでOK】ポチップとRinkerの違いを長期使用して比較！オススメはどっち？【プラグインなし】WordPressの目次の作り方を解説【コピペで簡単】【コピペでOK】WordPressのカスタマイズ集15選【ほぼ必須のカスタマイズあり】 WordPressのフォントを変更する方法【プラグインなし】【WordPress】タイトルを画像に変更しておしゃれなデザインにする方法

Web系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。

【素朴な疑問】ルービックキューブの考え方！誰でも1分切れるって… お金について学ぶべき5つの理由と絶対身につく学び方4選【若いう…

カテゴリー同じカテゴリーの人気記事 CSSコピペするだけ！ボックスデザイン（囲み枠）25選【色別サンプル62種】ＣＳＳコピペで完了！ハンバーガーメニューの作り方！【WordPress】プラグインなしでブログカードを作る方法【コピペで完成】プラグインを使わずWordPressにスライダーを作る方法【コピペでOK】【コピペでOK】WordPressのカスタマイズ集15選【ほぼ必須のカスタマイズあり】

完成したスライダーはどんな見た目か