書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】カルーセルスライダー作成(自作編)2行対応あり

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

前回記事の続きです。

あわせて読みたい

【AFFINGER4-カスタマイズ】カルーセルスライダー作成(プラグイン編)「WP Posts Carousel」をカスタマイズ

今回は自作で作るカルーセルスライダーです。

プラグインで作るカルーセルスライダーもとっても便利なのですが。

  • 2列にしたい!
  • クリックで画像を変えたい!
  • チラっと次の画像が見えるようにしたい!

などいろんな要望がありますよね。

かきてぃー
自作で作ると、そういった臨機応変に対応出来るのが嬉しいところ。

では早速作っていきましょう!

カルーセルスライダー専用のテンプレートを用意する

完成系のイメージはこんな感じ。

<チラッとタイプ>

<1行タイプ>

<2行タイプ>

どのタイプにもメリット・デメリットはあります。

今回はテンプレートを1つで説明するので、複数使いたい方はテンプレートを分けて作成し、それぞれgetして使って下さい。

ちなみに、何かしらの機能を追加する時はテンプレート化することをおススメします。

サイトの改修とかで何でもかんでも「index.php」に書きまくっているソースを見つけますが非常に汎用性が悪いし、分かりにくいし、汚いです。

機能を追加する時は特に苦労するので、必ずテンプレート化しましょう。

今回は「carousel-slider.php」というテンプレートを作りましょうか。

かきてぃー
毎度のことながら、文字コードはサーバーに合ったコード(一般的にはUTF-8)を指定して保存しましょうね。

1行タイプのカルーセルスライダー

最も基本となる2つ目から紹介致します。

これをベースに他の2つを作成するので、よく理解して下さい。

前回の記事で「carousel-slider.php」のテンプレートを作成し、「functions.php」で読み込ませてウィジェットで表示する方法はご説明しましたので割愛します。

いきなり「carousel-slider.php」をカスタマイズするところからなので、分からない方は前回の記事を参照して下さい。

https://kakitare.info/web/carousel-slider/

テンプレートを作成する前にカルーセルスライダーの基本的な階層を説明します。

  • グレー:全体のdiv
  • グリーンカルーセルスライダーのコンテンツエリア
  • イエロー次ページ・前ページへのボタンエリア

この上にスライド用コンテンツを載せます。

  • ブルーカルーセルスライドする為の全体エリア
  • レッド各コンテンツ

グリーンの枠からはみ出たコンテンツを非表示に設定し、JQueryで「次・前ページボタン」がクリックされたらブルーのエリアを左に動かします。

これで、実際にスライドしているように見えるのです。

こんな感じですね。

上記のままでは何も記事が取得出来ないので、カスタム投稿を取得してみましょう。

カスタム投稿「news」の記事を取得します。

いきなり超絶長くなりましたね。

重要なのは以下の通りです。

  • 6行目…カスタム投稿タイプ名が一致していること。
  • 34~40行目…各カスタムフィールド名が一致していること。
  • 50~64行目…評価用の画像を設定すること。
  • 88行目…アイコン画像がない場合の画像URLを設定すること。
  • 100、104行目…タクソノミー名が一致していること。

一致しているとは、「functions.php」に設定した値を対象としてです。

前回、カスタムフィールドを追加して情報を取得するような方法を記載しましたが、今回も使います。

3つ増えているので、念のため「functions.php」のロジックも載せておきます。

  • カスタム投稿対応名
  • タクソノミー名
  • カスタムフィールド名

どれを1文字でも間違えると、動きませんので注意して下さい。

上記をアップロードすると…

こんな感じでカスタムフィールドが増え、設定が出来ます。

任意の情報を設定し、「carousel-slider.php」をアップロードすれば…

はい。情報が正しく取得出来ましたね。

これでcssを調整すれば…

1コンテンツが見れるようになりました!

複数コンテンツを追加し、問題なく表示しているか確認します。

とりあえず情報量的には問題ないのでOKです!

実装したCSS

カルーセルスライダー用にcssを整える

かきてぃー
ここまでやって、まだ半分もいってませんwいつになったら終わるのやらw頑張りましょう!

次に先ほどご紹介したデザインのようにcssを整える必要があります。

上記のようなcssは以下の通りです。

クラス名とか変えてなければ、そのまま貼り付けで問題ありません。

上記の通りcssを設定し、試しに31行目の「overflow: hidden;」を削除し画面表示してみて下さい。

すると…。

上記のように矢印アイコンの外側に各コンテンツが並んでいればOKです。

「overflow: hidden;」を有効にすると、1コンテンツのみが表示されているはず。

これで、あとはスライダーを調整するだけになります。

センター表示が嫌なら6行目を削除すればOKです。

「JQuery」でカルーセルスライダーを実行する

かきてぃー
やっとメインのカルーセルスライドを実行するところですね!

まずはJQueryを使用する為に「functions.php」に読み込み処理を書いていきます。

これは前々回の「【AFFINGER4-カスタマイズ】LINEのような動的にメッセージが表示できる診断BOXを作成する」の記事でも使用したので、ファイル名やパスなどに気を付けながら書いていきます。

正常にJQueryが読み込めたらJQueryの中身を書いていきます。

なるべくコメントアウトを記載して作ったので、まずはロジックを見てみましょう。

難しそうにみえて意外と少ない63行!

重要な箇所は8、24、35行目の「slideWidth」に加算するところです。

単純にコンテンツの幅×数でコンテンツエリアの幅を決めています。

上記の画像でいうと、ピンクのコンテンツ幅を確認します。

仮に320pxとしましょう。

コンテンツは4つあるので、320 × 4 = 1280pxとなります。

この1280pxがブルーの幅になるわけです。

かきてぃー
これで、コンテンツがいくら増えても動的に計算し、カルーセルスライダーが作れるというわけです。いやはや。コンピューターは凄いね。

で、さっきの重要なポイント「slideWidth」なんですが、単純に幅×数だとNGです。

なぜって、コンテンツの横にスペース(margin)があるから。

ブルーのエリアって、コンテンツの幅だけなくスペース箇所もあるので、それら全てを定義しなくてはなりません。

今回の場合、コンテンツ「.crselSlider-cont」には「margin:5px」と「border:1px」があります。

1コンテンツあたり、左右にそれぞれ存在するので「margin:5px」× 2  +  「border:1px」× 2となります。

つまり12pxを加算するのです。

クリックした時に正常にスライドされればOKです!

かきてぃー
ここまでが1行表示の基本です。応用でコンテンツのループ表示やラジオボタンの設置、自動スライド機能などもありますが、今回は説明しません!!(長くなるので…)
スポンサーリンク

チラッとタイプのカルーセルスライダー

ここまでの基本を使って上記のデザインを作成します。

これはヘルプサポートにあった要望ですね。

1行タイプと違うのは以下の通り。

  • コンテンツブロックの幅
  • アイコンデザイン
  • アイコンの設定位置

これだけ変えれば上記のデザインになります。

サメくん
基本さえ出来れば簡単や!!
イルカさん
サメくん本当に一人で出来るの?
サメくん
:(;゙゚’ω゚’):プルプル
イルカさん
吹き出しで顔文字使うのやめてくれる?
サメくん
すみません…。調子のりました。教えて下さい。

CSSデザインを調整する

では、チラッとタイプになるようにCSSを変更していきます。

変更箇所はマーカーを引いておきます。

JQueryの調整

一部、JQueryも調整します。

59行目にleft分の余白を加算しました。

上記の変更をし、画面を確認すると…

はい。想定通りの結果になりましたね!

かきてぃー
やっぱり、チラッとデザインの場合、コンテンツをループさせたくなりますよね~

今回はここまでにします!

また時間がある時にどんどん書き足していきますので!

かきてぃー
それでは、本日もお疲れ様でした!

[2017.11.06現在:ここまで]

<追記予定内容>

  • コンテンツループ処理
  • 2行タイプのカルーセルスライダー
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











Comment

  1. 匿名 より:

    ありがとうございます。
    非常に参考になりました。

匿名 にコメントする コメントをキャンセル

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.