WordPressで記事のカルーセルスライダー(jQuery的なスライドショー)
2016/09/09
WordPressがそれなりにいじれると分かってから、嫁様の私への”こき使いっぷり”が激しくなってきております。
だいすけです。こんにちは \(^o^)/オワタ
まんが喫茶に行ってエネルギーチャージしましたよ!・・・どうでもいい情報ですね。
そんなことはさておき下記のようなスライダーがWordPressで必要になりまして・・・。
http://kenwheeler.github.io/slick/ ←これのdemosのところにあるスライダーですね。
スライダーという単語が出てこない旧式な私のようなWEB関係者には、「jQueryを使ったスライドアニメーション」・・・「トップページのメインの画像が流れるやつ」を作るって言ったほうがよいかもしれません。
(検索用にこういう言い回しも入れてみましたw)
しかも、画像のスライダーならともかく、記事のサムネイルとタイトルを出してそれをスライドするのだとか・・・。
そんなこと、正直やったことありませんでしたw
でも、昨今のWEBサイトって結構これ使ってるんですよね・・・。Amazonの影響でしょうね。業界用語でツインテ・・・じゃなかった、ロングテールとかいうやつですね。違いますかね(適当ー)?
フツーのスライダーなら、上記のページのslickとかを使えばできるんですが、記事を引っ張って・・・うむむ。
しかもその記事が普通の記事じゃなくてカスタムフィールドから引っ張ってくるというからタチが悪いw
そんなわけで何が必要かを調べて順番にやっていくことにしました。
- 記事のサムネイルを使えるようにする(アイキャッチ画像を使う)
- カスタムフィールドで登録した画像をアイキャッチ画像に自動設定する(Auto Post Thumbnailを使う)
- Wp Posts Carouselを設定する
大雑把に書くとこんな感じでした。
3番のWp Posts Carouselの使い方がちょっと変わっていて、一旦投稿画面で設定ボタンを押してショートコードを作る感じですね。んで、そのショートコードをテンプレートなどにはめ込んで動かす感じです。
(投稿画面はショートコードを出力するためだけに開きました)
テンプレート内でショートコードを動かす方法はこちらで見ていただけると良いのではないでしょうか。
とりあえずざっくりとしか書いていないので後日この記事、整理しよう・・・。
関連記事
-
-
マルチサイト引越し時の注意
マルチサイト引越の手順でひっかかったので忘備録。 引越し先のWordPressイ …
-
-
カスタムフィールドの画像をアイキャッチに自動登録
毎度おなじみ自分への忘備録です。 投稿時にカスタムフィールドの画像 …
-
-
WordPressでよく使う新着記事表示のコード
ほんとによく使うので覚え書き。 ちなみにマルチサイトをまたがって新着を取得する場 …
-
-
「パスワードは、記号を含むか、20 文字以上でなければなりません。」で苦しんだ話
ワードプレスのユーザーを追加する際、パスワードを設定するんですが、ここでつまづい …
-
-
WordPressのサーバー移動
WordPressのサーバーお引越し これからWordPressのサーバー移動を …
-
-
WordPressの管理画面が重くなったら(WPML使用サイト向け)
はっきりとした原因は不明なのですが、WPMLを入れていたWordpressサイト …
-
-
WordPressのカテゴリー選択を1つに制限したがチェックできない場合
カテゴリの選択制限をかけている方はおそらく、jqueryを使って行っていると思わ …
-
-
WordPressの検索欄が未入力で全件表示してしまう件
間違えて空欄で検索した時に全件表示・・・。 バグでもエラーでもないんですがなんか …
-
-
子カテゴリに親カテゴリのテンプレートを引き継がせる
WordPressって基本的に親カテゴリを指定すると、それにぶら下がっている子カ …
-
-
GravatarでWordPressのアバターを作ろう
最近物忘れがヒドイ、だいすけです。 テーレッテレー!! ついこの前、ワードプレス …