広告 WordPress

【WordPress】プラグインなしでカルーセルスライダーを実装する手順

2021年5月29日

 

こんにちは、keiです。

 

悩む人
悩む人
WordPressでカルーセルスライダーを表示させてみたいけど、プラグインなしで実装してみたい...。

 

こんな悩みに答えます。

 

本記事の執筆者

過去にプログラミングスクールに通っていました。現在はWeb制作会社で8年間働いておりブログで毎月5桁ほど稼いでいます。

 

色んなサイトをみていると、トップページで画像がクルクル回っているカルーセルバナーを見たことがあると思います。

 

今回はWordPress(ワードプレス)でプラグインを使わずカルーセルを実装してみました。

 

制作前は作成が難しそうに感じましたが、1分ほどあれば簡単に実装することができます!
KEI
KEI

 

図解を使って、実装方法を解説していますので、ワードプレスでサイトやブログに実装してみたい方は参考にしてみてください!

 

HTML

 

まずは、HTMLコードをコピーします。

 

今回は、ワードプレステーマ「Twenty Twenty」を使ってTOPページに表示をさせていきます。
KEI
KEI

 

HTMLは以下の通りです。

 

 command
<div> <ul class="slider">
<li><img src="表示する画像" alt=""></li> <li><img src="表示する画像" alt=""></li>
<li><img src="表示する画像" alt=""></li>
</ul>
</div>

 

 

CSS

 

CSSは、以下のコードをコピーします。

 

 command

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" type="text/css">

 

コピーできましたら、「header.php」内にある</head>の直前に貼ります。

 

 

注意

テーマの編集をするので、編集前には必ずバックアップをしておきましょう!

※編集を間違えるとデザインが崩れてしまいます。

 

ワードプレスでバックアップする方法は、以下の記事を参考にしてみてください。

 

関連記事
【便利!】UpdraftPlusプラグインを使ってバックアップする方法【2021年版】

続きを見る

 

コードの貼り付けができましたら、「ファイルを更新」をクリックします。

 

jQuery

 

続いて、jQueryのコードを貼ります。

 

今回は、設定したバナーを一定時間になると自動で切り替わる方法で実装してみます。
KEI
KEI

 

step
1
jQueryをコピー

 

まずは、以下のjQuerryのコードをコピーします。

 

 command

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script> <script type="text/javascript"> $('.slider').slick({ slidesPerView: 'auto', spaceBetween: 30, loop: true, centeredSlides: true, pagination: '.swiper-pagination', autoplay: true, disableOnInteraction: false, }); </script>

参考:https://kenwheeler.github.io/slick/


 

step
2
jQueryをワードプレスに貼る

 

コピーができましたら、「外観 → テーマエディタ → テーマフッター(footer.php)」にコードを貼ります。

 

コードを「</body>」の直前に貼ります。

 

 

貼り付けができましたら、「ファイルを更新」をクリックして完了です。

 

ちなみに、jQueryを使ってスライドを実装する方法には、いくつかやり方があります。

 

例えば、

 

・自動で画像がスライドするやり方

・画像をフェードで切り替える

・画像の可変幅を変えて表示させる

 

上記の通りです。

 

実装するには、「jQuery$('.slider').slick({」の下に追加してあげます。

 

詳しくは、「slick – the last carousel you’ll ever need」で紹介しているので、参考にしてみてください。

 

step
3
CSSで装飾

 

最後に、CSSで装飾してあげます。

 

 command
.slider div {
text-align: center;
height: 300px;
width: 100%;
}
.slider img {
width: 300px;
height: auto;
vertical-align:middle;
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;
}

 

jQuery】カルーセルスライダーおすすめプラグイン3選

jQuery】カルーセルスライダーおすすめプラグイン3選

 

カルーセルスライダーは、jQueryを使って作ることもできます。

 

おすすめのjQueryプラグイン3つをご紹介します。
KEI
KEI

 

1. bxSlider

 

1つ目に紹介するのが、bxSliderです。

 

bxSliderは、初心者でも簡単に設置することができ、レスポンシブ対応されているのがいいところです。

 

オプション機能も豊富に用意されているプラグインです。
KEI
KEI

 

カルーセルスライダーを使ったことのない方は、まずはbxSliderを使ってみるのがおすすめです。

 

2. slick

 

slickは、無限ループやスワイプなど、あらゆるカスタマイズができます。

 

また、こちらもレスポンシブデザイン対応に強いです。

 

bxSlider同様に、初心者から上級者まで幅広くプラグインです。
KEI
KEI

 

3. FlexSlider2

 

最後に紹介するのが、FlexSlider2です。

 

見慣れたカルーセルスライダーから上級者向けのカルーセルスライダーが紹介されています。
KEI
KEI

 

また、サムネイルを用いたページ送りやデザイン、エフェクトを設定でき、幅広くカスタマイズできます。

 

WordPressでプラグインなしでカルーセルを実装!:まとめ

 

今回は、WordPressプラグインなしでカルーセルを実装してみました。

 

最後に、当ブログで使っているWordPressテーマ・アフィンガー5を使用するとボタン1つで簡単に実装ができます。

 

収益化・アフィリエイト

2024/2/18

メルカリアフィリエイトが開始!?デメリット・メリットと他のアフィリエイトとの違いを紹介

    こんな悩みに答えます。   本記事の執筆者 当ブログでは、アフィリエイトやブログで役立つ情報を発信しています。3年以上ブログを運用しており今ではアフィリエイトで毎月5桁稼いでいます。   メルカリアフィリエイトはメルカリで紹介したい商品をブログやSNSでリンクを貼り、購入されることで報酬を獲得できる制度です。     本記事ではそんなメルカリアフィリエイトを始めるデメリット・メリット、始める時に気をつけておく注意点について紹介します! & ...

ReadMore

収益化・アフィリエイト

2024/2/18

楽天アフィリエイトの登録方法と効率的に収益化する方法を解説!【裏技あり】

    こんな悩みに答えます。   本記事の執筆者 楽天アフィリエイトに登録しブログ運営を3年間継続し毎月5桁ほど稼いでいます。当ブログではおすすめのアフィリエイトからWordPressの使い方まで初心者に分かりやすいように紹介しています。   楽天アフィリエイトを始めてブログやSNSで収益化を考えているのではないでしょうか? 楽天アフィリエイトは楽天会員に登録していれば誰でも始めることができ、ブログ・SNSにリンクを貼ってアフィリエイトを始めることができます。 & ...

ReadMore

アメリカ留学 ブログ

2024/2/25

留学中ブログ書ける?書き方と収益を得るまでのコツを紹介【体験談】

    こんな悩みに答えます。   本記事の執筆者 過去にアメリカに1年間留学した経験があり、現在ではブログで3年以上情報発信をして月に5桁安定して稼いでいます。実際に留学を経験した大変さブログで稼ぐことの難しさ両方を理解しており、留学でブログを書くことのデメリット・メリットを紹介します。   留学を始めたら少しでも留学に関する情報を発信して、自身の留学の記録を残したり人の役に立ちたいと考えると思います。そんなときにブログを始めてみようか考えるのではないでしょうか? ...

ReadMore

収益化・アフィリエイト

2024/2/28

DMMアフィリエイトは稼げる?始めるやり方からブログでリンクを貼る方法を紹介!

    こんな悩みに答えます。   本記事の執筆者 当ブログではWordPressの使い方から、ブログで稼ぐ方法を初心者向けに発信しています。ブログアフィリエイトを3年以上継続しており、ブログ収益は毎月5桁ほど稼いでいます。   DMMアフィリエイトはDMM.comが運営しており、DMMならではの商品「DMMブックス」「PCゲーム/ソフトウェア」といったジャンルを紹介できます。   またアダルト系で知名度が高いFANZAもあるため、アフィリエイトでアダルト ...

ReadMore

収益化・アフィリエイト

2023/11/16

アフィリエイトのレントラックスは怪しい?評判は?【高単価案件多数】

    本記事では、こんな悩みに答えます。   本記事の執筆者 Web業界でWebディレクターとして8年以上働いています。WordPressでブログを3年以上運営しており、アフィリエイトで毎月5桁ほど稼いでいます。   ブログアフィリエイトを始めたら、クローズドASPという名前を聞いたことがあるかもしれません。 クローズドASPの中でもレントラックスは高単価案件が多く、他のクローズドASPに負けないほど複数の高単価案件・業種を扱っています。   本記事では ...

ReadMore

 

当ブログからアフィンガーを購入すると、特典プレゼントが手に入るのでぜひ参考にしてみてください!

 

特典
当ブログ限定!AFFINGER6(アフィンガー6)の特典5つをプレゼントします

続きを見る

 

今回は以上です。

 

ここまで読んでいただきありがとうございました。

 

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴8年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress