WordPress

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

2021年5月29日

 

こんにちは、keiです。

 

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

 

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

 

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

 

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

 

 

HTML

 

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

 

今回は、ワードプレステーマ「Twenty Twenty」を使ってTOPページに表示をさせていきます。
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

 

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;
}

 

まとめ

 

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

 

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

 

Blog

2021/11/26

Strongストロングタグ(太字)はSEOで重要?【使いすぎには注意】

  悩む人Strongタグ(太字)がSEOに効果的と聞いたけど実際どうなの?また、ブログで使うStrongタグ(太字)を設定する方法を知りたいです。   こんな悩みに答えます。   本記事の執筆者 WordPress(ワードプレス)を使って1年以上ブログ運営をしており、現在Web業界で7年ほど働いています。   Strongタグ(太字)は、HTMLタグの1つでして、文字を太文字にすることができます。   文章にメリハリをつけることができ、文字を目出せること ...

ReadMore

WordPress

2021/11/21

Wordpressブログでnoteを埋め込む方法を3ステップで紹介!

悩む人Wordpress(ワードプレス)ブログにnoteで紹介した記事を埋め込んでみたいけど、やり方を教えて欲しいです。   こんな悩みに答えます。   本記事の内容 noteとは? WordPressブログにnoteを埋め込む方法3ステップ 【おまけ】WordPressの記事内以外にnoteを埋め込む方法 ブログ内にnoteを埋め込む際の注意点   本記事の執筆者 僕はnoteとWordPressブログで記事更新していまして、WordPressを1年半以上使用しています。 ...

ReadMore

Blog

2021/11/6

【SEO効果あり!】外部リンクとは?外部リンクの効果と調べ方を紹介

  悩む人サイトやブログに外部リンクが大切と聞いたけど外部リンクについて具体的に知りたいです。また、外部リンクを貼ってもらうために必要なことを知りたいです。   こんな悩みに答えます。   本記事の執筆者 WordPress(ワードプレス)を使って1年以上ブログ運営をしており、現在Web業界で7年ほど働いています。   外部リンクは、Webサイトに外部のサイトから貼られているリンクのことです。   外部のサイトから外部リンクが貼られていることで、Googl ...

ReadMore

仕事

2021/10/31

会社で尊敬できる上司とは?尊敬できる上司の特徴12個

  皆さんには尊敬できる会社の先輩上司はいますか?   毎日理不尽に怒ったり、仕事に責任を持たずに部下に丸投げをする先輩上司がいると辞めたいと思いますよね。   また、尊敬できる上司がいないとチームの士気が下がり組織全体のパフォーマンスが下がるなんてこともあります。   本記事では、そんな尊敬できる会社の上司の特徴12個を紹介します。   僕自身こうなりたいと思いましたので、尊敬できる先輩の顔を思い浮かべて記事を書きました。   共感できるところ ...

ReadMore

Blog

2021/10/24

クローズドASPって何?おすすめのクローズドASP3つについても紹介!

  クローズドASPって何?通常のオープンASPと何が違うのか知りたい。また、審査に通過する方法もあるのかを聞きたいです!悩む人   こんな悩みに答えます。   アフィリエイトに登録して収益化を狙おうとした時に、『クローズドASP』という名前を聞いたことがあるのではないでしょうか?   結論からお話しすると、クローズドASPは、選ばれたサイトのみが登録できるASPになります。   記事が検索上位に上がったりすると、ASPから登録のオファーがくるようになりま ...

ReadMore

 

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

 

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

続きを見る

 

今回は以上です。

 

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

 

  • この記事を書いた人

keiblog

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

-WordPress