マジカルスリー・だいすけのなりゆき長者ブログ

沖縄/大阪WEB広告・ホームページ制作・印刷物制作 マジカルスリー 「福」代表のブログ

*

WordPressで記事のカルーセルスライダー(jQuery的なスライドショー)

      2016/09/09

WordPressがそれなりにいじれると分かってから、嫁様の私への”こき使いっぷり”が激しくなってきております。
だいすけです。こんにちは \(^o^)/オワタ

まんが喫茶に行ってエネルギーチャージしましたよ!・・・どうでもいい情報ですね。

そんなことはさておき下記のようなスライダーがWordPressで必要になりまして・・・。

http://kenwheeler.github.io/slick/ ←これのdemosのところにあるスライダーですね。

スライダーという単語が出てこない旧式な私のようなWEB関係者には、「jQueryを使ったスライドアニメーション」・・・「トップページのメインの画像が流れるやつ」を作るって言ったほうがよいかもしれません。
(検索用にこういう言い回しも入れてみましたw)

しかも、画像のスライダーならともかく、記事のサムネイルとタイトルを出してそれをスライドするのだとか・・・。

そんなこと、正直やったことありませんでしたw

でも、昨今のWEBサイトって結構これ使ってるんですよね・・・。Amazonの影響でしょうね。業界用語でツインテ・・・じゃなかった、ロングテールとかいうやつですね。違いますかね(適当ー)?

フツーのスライダーなら、上記のページのslickとかを使えばできるんですが、記事を引っ張って・・・うむむ。
しかもその記事が普通の記事じゃなくてカスタムフィールドから引っ張ってくるというからタチが悪いw

そんなわけで何が必要かを調べて順番にやっていくことにしました。

  1. 記事のサムネイルを使えるようにする(アイキャッチ画像を使う
  2. カスタムフィールドで登録した画像をアイキャッチ画像に自動設定する(Auto Post Thumbnailを使う)
  3. Wp Posts Carouselを設定する

大雑把に書くとこんな感じでした。

3番のWp Posts Carouselの使い方がちょっと変わっていて、一旦投稿画面で設定ボタンを押してショートコードを作る感じですね。んで、そのショートコードをテンプレートなどにはめ込んで動かす感じです。

(投稿画面はショートコードを出力するためだけに開きました)

テンプレート内でショートコードを動かす方法はこちらで見ていただけると良いのではないでしょうか。

とりあえずざっくりとしか書いていないので後日この記事、整理しよう・・・。

 

 

 

 - WordPressの事

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

  関連記事

GravatarでWordPressのアバターを作ろう

最近物忘れがヒドイ、だいすけです。 テーレッテレー!! ついこの前、ワードプレス …

カスタムフィールドの画像をアイキャッチに自動登録

毎度おなじみ自分への忘備録です。   投稿時にカスタムフィールドの画像 …

WordPressで会員サイト的なものを作りたい

WordPressで会員サイト的なものを作る と言う題目で幾つか記事があったんで …

WordPressのページを印刷しようとするとスタイルが崩れる

WordPressのページを印刷しようとするとガタ崩れする時があると思います。 …

アーカイブページでタームごとに記事一覧を出力する

カスタム投稿の記事一覧を出したい ターム名1(カスタム投稿の「カテゴリ名」のよう …

「パスワードは、記号を含むか、20 文字以上でなければなりません。」で苦しんだ話

ワードプレスのユーザーを追加する際、パスワードを設定するんですが、ここでつまづい …

ショートコードの出力結果が固定ページや投稿の上部に表示される

またもやWordPress覚書。もはやメモ帳代わり。 固定ページなどの途中でPH …

子カテゴリに親カテゴリのテンプレートを引き継がせる

WordPressって基本的に親カテゴリを指定すると、それにぶら下がっている子カ …

マルチサイト化でよくあること・・・参加サイトに表示されない!

WordPressでマルチサイト化すると、左上の「参加サイト」にマウスオーバーし …

WordPressのサーバー移動

WordPressのサーバーお引越し これからWordPressのサーバー移動を …