Advanced post sliderで新着記事一覧

Advanced post sliderは、画像ではなくて、WordPressの「固定ページ」や「投稿記事」をスライドショー形式で表示してくれる、コンテンツスライダーというジャンルのプラグインです。

私のページでは、トップページの「WordPress Tips」という見出しの下に表示しています。

スライダーに表示するコンテンツは、「固定ページ」または「投稿ページ」を選択できます。
投稿ページの場合には、任意のカテゴリーの投稿のみを表示する、あるいは選択したページのみを表示するなどのカスタマイズが可能です。
「投稿記事を新しいものから○件、新着順にスライダー表示する」という指定にすれば、いわゆる「新着記事一覧」を表示させることができるわけです。

表示用のテンプレートは3パターン用意されています。
私の場合、「サムネイル画像」とそれにかぶらない形で「タイトル+記事内容」が表示できるタイプのTemplate Threeを利用しました。画像重視の場合には、幅いっぱいに画像を表示してタイトルや内容をオーバーレイ表示させるタイプをえらぶといいかもしれませんね。

スライドのスピードや各種エフェクトなども細かく設定できます。

OnePressのカスタマイズ-4. ヘッダに連絡先を追加する

WordPressのテーマ「OnePress」で作るウェブサイトのヘッダ部分の上部に、会社の電話番号などの連絡先を表示させるカスタマイズ方法です。 まず、OnePressのヘッダ部分がどのようになっているのか、OnePressのテーマフォルダ内にある「header.php」というファイルを開いて、内 […]

Smash Balloon Social Post Feed(旧Custom Facebook Feed)プラグインについて

Custom Facebook Feedプラグインの改変方法について、以前記事を書きました。 その記事に「プラグインのアップデートがあると改造が無効になってしまいます」と書きましたが、心配していた通り(笑)、いつの間にかプラグインがアップデートされていました。名称も「Smash Balloon So […]

composerでTwitterのoauthライブラリを利用しタイムラインを取得する

Twitterのタイムラインを取得してWordPressのウェブサイト上に表示させるための手順です。Twitter Developer Acountの取得→サーバーへのcomposerのインストール→abraham/twitteroauthのインストール→タイムライン表示のためのphpコード作成の順に進んでいきます。

TwitterのタイムラインをAPIで取得してサイトに表示してみる

TwitterのDeveloper accountを作成したので、アプリケーション登録をして各種APIキーを取得し、タイムライン表示をアレンジしてみることにしました。 詳しいことは後程ご説明するとして、このようなことができます、という例をお示しします。 今回は「合唱楽譜のパナムジカ」@PanaMus […]

TwitterのDeveloper account登録をしてみる

実は、Twitterのタイムラインを取得していろいろな形式で表示してみる、というようなことについては2010年ころに手掛けた案件がありまして、その当時作成したDeveloper accountが現在も生きていることが判明しました。しかし、新しいアプリケーションを追加してみようとしたところ、「古いアプ […]

Twitterのタイムラインを埋め込んでみる

FacebookページをWordPressのウェブサイトに表示する方法をあれこれやってきましたが、今度はTwitterのタイムラインをサイト内に表示してみましょう。タイムラインを表示するだけなら以下の方法で取得したコードを貼りつけるだけでOKです。 まずこちらのサイトにアクセスします。 画面下のほう […]

固定ページの子ページ一覧をカルーセル表示する

いろいろなものをSwiper.jsを使ってカルーセル表示してみるシリーズの、第4弾です(笑) 固定ページの子ページ一覧を、「アイキャッチ画像・タイトル・本文(抜粋)」を取得してカルーセル表示にしてみます。スライド要素に背景色を入れて、見た目インパクトあるようにしてみました。 サイドバーなしのワンカラ […]

Swiper.jsでフォトギャラリーを作る

  今度は、Swiper.jsを使って、立体的なキューブが回転するような効果のあるフォトギャラリーを作成してみます。「effect: ‘cube’,」をscriptに追加するだけでOKです。 Swiper.jsの導入については以下の記事を参考にしてください。 Fac […]

Swiper.jsを使って新着記事一覧を表示してみる

せっかくSwiper.jsを導入したので、さまざまなカルーセル表示を試してみたいと思います。 新着記事一覧はプラグイン等で簡単に実装できるのですが、自分の思い通りのデザインや動きを実現させるために、自力でコードを書いてみて基本を知っておくのも大事ですよね。 Swiper.jsの導入については以下の記 […]

FacebookのFeedとSwiper.jsを使ってタイムライン表示をアレンジ

Facebookページのタイムラインを、Swiper.jsを利用してWordPressのウェブサイト上にスライダー表示させてみました。画像の上への文字載せは、cssを利用しています。facebookのアクセストークンを取得してjson形式でfeedを取り出し、phpで表示を処理します。

上記の例の設定方法は以下の通りです。

  1. プラグインをインストールして有効化する。
  2. メニューに「Adv. Slider」という項目ができるので、クリック。
  3. まず「Thumbnails」タブをクリックして、スライダー専用のサムネイル画像を設定しておく。名称を「advps-thumb-one」、幅と高さを150px、「Crop」を「true」に。
  4. 使用するテンプレート(Template Three)を選んで、「Add new slideshow」をクリック。
  5. 追加されたスライドの右側の▼マークをクリックして設定画面を展開。
  6. 「Label」に分かりやすい名前を入力
  7. 「Select post using」で、「Query」→「post」→カテゴリを全部選択→表示する記事数を「10」→表示順を「Date」「Descending」に設定して「Save changes」
  8. スライダータイプを「Standard」、エフェクトは「Horizontal」、Auto Playを「Yes」、スピードを「3000」、ポーズを「7000」に設定して「Save changes」
  9. 「Select thumbnail」で「advps-thumb-one」、スライドの幅を「700」に設定。
  10. 「Show on slide」でサムネイル、タイトル、抜粋を選ぶ。「Content width」を「400」、「Excerpt length」を「150」に設定。
  11. 「Pager type」を「Number」、「Pager align」を「Right」に設定。

このように設定して保存し、「Usage」のところに表示されているショートコード[advps-slideshow optset="○"]を表示させたいところに貼り付けます。

Advanced post sliderのいいところは、独自のサムネイル設定をできるところでしょうか。WordPress全体のメディア設定を変更することなく、スライダーで利用するサムネイルのサイズを複数設定することができます。サムネイルをregenerateする必要もありません。