10分SHAREツイートシェアはてブLINEPocket今回は、コピペだけでスライダーをWordPress内に作る方法をご紹介します。Swiperというものを使用するため、プラグインは使っていません!プラグインを使用せずにどうにかして実装しようとするのが好きです(笑)スライダーを使用することで何個もリンクを並べると見にくいし長くなるというデメリットをなくせます。今回の記事では、前半に簡単なスライダーの作り方、後半に関連記事にスライダーを組み込む方法について紹介しています。1.スライダーはどんな見た目になる?スライダーが完成し、関連記事を表示させると、以下の画像のようになります。各スライド1枚の横の長さは250pxで、広告を入れたいと思ったときに、広告作成するときの最小の横幅にしています。スマホ/マウスでのフリック/ドラッグでの移動が可能で、最初は自動で動くのですが、一回押すと自動で動かなくなります(この辺は調節可能です)もちろん、記事ではなく画像にして、あとでサイズをCSSで適宜調節することで旅の思い出スライドショーにすることも可能です。Swiperのデモ(こちらから見れます)では、画面が小さくなると、スライド1枚1枚の横幅が狭まることで「絶対3枚表示させる」ようになっています。WordPressで使うときは関連記事などは特にデザインが崩れると勿体ないため、スライド1枚1枚の横幅は固定にしています。2.Swiperを使用して作成する基本的なスライダーの入れ方ですが、まず<head>~</head>の中にコレ↓を入れます。href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">これは、CDNというものを使ってスライダーに必要な要素をもろもろ取ってきている感じです。CDNとはコンテンツ・デリバリー・ネットワークは、高度に分散されたサーバープラットフォームで、ウェブアプリケーションやストリーミングメディアなどのコンテンツを配信するために最適化されています。このサーバーネットワークは、エンドユーザーによるウェブコンテンツのリクエストに直接応答して、高速かつ安全なメディア配信を実現するため、多数の物理ネットワークロケーションに分散されています。これは、コンテンツサーバー(オリジンとも呼ばれる)とエンドユーザー/クライアントとの中間サーバーの役割をします。出典:https://www.akamai.com/jp/ja/cdn/what-is-a-cdn.jsp次に、以下のコードを</body>のすぐ上に入れます。外観テーマエディターfooter.php上記の場所に</body>があると思います。</script>そして、この部分の<script></script>で挟まれている部分が色々な機能の設定部分ですので、ここをいじって自動でスライドが動くだとか、ループさせるかだとかを設定できます。今回はこのままでOKです。スライダーのHTML次に、スライダーのHTMLです。style=”height:200px;”>に書き換えてください。しないとなぜかスライダーの部分に上下スクロールバーが出てきます。スライダーのCSS最後に、CSSです。250px;}style.cssの一番下にコピペでOKです。これら4つをコピペすることで、以下の画像のような一旦簡単なスライダーが出来上がります。画像を使用してスライドショーを作りたい場合には、ここで紹介したHTMLコードの「ここに入れたものがスライドする」の部分を画像に書き換えることでスライドショーが作れます。次に関連記事に応用して、記事冒頭でも見せた以下の画像のように表示する方法を書いていきます。このようにするためには、関連記事の部分テーマのコードを書き替えていきます。外観テーマエディターkanren.php以下のコードを関連記事の部分と書き換えれば完成です。?></div>このコードを参考にして、同じような内容に書き換えていけば完了です。あなたのサイトのURLを入れる部分もありますので、調節してください。以下に紹介しているコードは関連記事のタイトル+抜粋文を入れるためのものなので、元々存在している場合は削除するなりコメントアウトするなりしましょう。?></div></dd></dl>そして、CSS側の、関連記事の部分もいじる必要があります。10px;}以上のコードを使用すれば、関連記事をスライダー形式で見せることが可能です。最後に、スライダーに広告を挟みたい!という場合です。GoogleAdsenseから、インフィード広告を新規作成→手動で公告スタイルを作成する→上部の画像を選択して、編集画面にてコンテナの幅を最小値の250pxまで抑えてください。他は「見出し→短い」「説明→説明を表示しない」にして、他は純粋に好みで。同様に関連記事の部分を書き換える公告を挟みたい場合も同じように、kanren.phpを書き換えます。以下を参考に途中に広告を挟めばできます。?></div>上記のコードでは、関連記事として5記事が表示され、2記事目が広告になります。コード中の数字を書き換えることで自由に変更可能ですので、やってみてください。5.まとめ今回の記事ではSwiperを使用してのスライドづくり関連記事を表示する方法そこに広告を挟む方法について紹介しました!テーマの編集は自己責任ですので、消えて元に戻らなくなった!ということにならないようにバックアップをとってやりましょう。関連記事を2列以上で表示させる方法についても紹介しています。コピペでOK!関連記事を2列以上でタイル状に表示する方法WordPressでブログをやっているけど、関連記事を画像付きで綺麗に2列以上で表示したい!という方におすすめできる記事になっています。コピペで簡単に変更可能です!関連記事のデザインを見やすくきれいにすることで1画面でより多くの記事が目につくので、回遊率も上がります。