Advanced post sliderで新着記事一覧
Advanced post sliderは、画像ではなくて、WordPressの「固定ページ」や「投稿記事」をスライドショー形式で表示してくれる、コンテンツスライダーというジャンルのプラグインです。
私のページでは、トップページの「WordPress Tips」という見出しの下に表示しています。
スライダーに表示するコンテンツは、「固定ページ」または「投稿ページ」を選択できます。
投稿ページの場合には、任意のカテゴリーの投稿のみを表示する、あるいは選択したページのみを表示するなどのカスタマイズが可能です。
「投稿記事を新しいものから○件、新着順にスライダー表示する」という指定にすれば、いわゆる「新着記事一覧」を表示させることができるわけです。
表示用のテンプレートは３パターン用意されています。
私の場合、「サムネイル画像」とそれにかぶらない形で「タイトル＋記事内容」が表示できるタイプのTemplate Threeを利用しました。画像重視の場合には、幅いっぱいに画像を表示してタイトルや内容をオーバーレイ表示させるタイプ（Template One）をえらぶといいかもしれませんね。
スライドのスピードや各種エフェクトなども細かく設定できます。
久々のカスタマイズ投稿です。 OnePressの無料版では、heroセクションにスライド画像を表示させますが、有料版だと動画を表示することができます。 無料版をカスタマイズすることで、demoサイトのような動画を画面いっぱいに表示できるようになります。 もちろん、有料版のような細かな設定は難しいので […]
WordPressのブロックエディタを使用すると、Twitterのタイムラインを簡単に埋め込み表示することができます。 「ブロックの追加」→「埋め込み」→「Twitter」と選んで、表示したいTwitterユーザーのURLを入力するだけで、下記左側のような埋め込み表示が実現します（ブロック表示に「左 […]
WordPressのテーマの一つであるCocoon。デザイン設定の多様さと簡単さが魅力ですねー。 Cocoonで「投稿一覧」の表示方法を変更するには、管理画面の「Cocoon設定」の「インデックス」という項目を変更することになります。 デモサイトでは、「縦型カード３列」の「タブ一覧」という表示形式を […]
Graph APIを使ってFacebookページのfeedを取得し、AjaxローディングとJsonを使って３件ずつ読み込んでウェブサイトに表示していきます。Facebookのアクセストークン利用で連携表示が可能になります。
Facebookページに投稿した写真の一覧を、ウェブサイトの画面いっぱいにmasonry表示する方法を考えてみました。各投稿の最初の写真を取得して表示しています。
WordPressとFacebookページを連携させるためのプラグイン、Smash Balloon Custom Facebook Feed（Smash Balloon Social Post Feed）の最新バージョン「4.0」で、写真のサムネイルを取得して表示させる改変方法です。
WordPressのテーマ、Cocoonでデモサイトを作ってみました。サイト表示が非常に軽く完全レスポンシブ対応、Cocoon設定画面からほとんどのカスタマイズが可能、SEO対策が万全などの特徴があるCocoon。「吹き出し」や「ブログカード」、ソースコードのハイライト表示機能などが組み込んであるので、プラグインをいちいちインストールする必要がないのが便利なところです。
WordPressとFacebookを連携させるためのプラグイン「Smash Balloon Social Post Feed 2.18.2」のカスタマイズ方法です。通常版ではサムネイルを表示させることはできませんが、一部を改変することで、画像付きの記事を埋め込むことが可能になります。以前紹介したカスタマイズ方法が古くなってしまったので、記事を書き直しました。
FacebookとWordPressの連携を考えます。Facebookページの投稿を取得してWordPress上に表示させるために、無期限のページアクセストークンを取得します。FacebookのグラフAPIがv8.0の場合の取得方法をチェックしてみました。
WordPressのテーマ「OnePress」をカスタマイズするにあたって、調べてみたコードの内容を解説していきます。今回はトップページの構造と各セクションの読み込みかた、セクションの内容の書き換えについて検討します。
上記の例の設定方法は以下の通りです。
- プラグインをインストールして有効化する。
- メニューに「Adv. Slider」という項目ができるので、クリック。
- まず「Thumbnails」タブをクリックして、スライダー専用のサムネイル画像を設定しておく。名称を「advps-thumb-one」、幅と高さを150px、「Crop」を「true」に。
- 使用するテンプレート（Template Three）を選んで、「Add new slideshow」をクリック。
- 追加されたスライドの右側の▼マークをクリックして設定画面を展開。
- 「Label」に分かりやすい名前を入力
- 「Select post using」で、「Query」→「post」→カテゴリを全部選択→表示する記事数を「10」→表示順を「Date」「Descending」に設定して「Save changes」
- スライダータイプを「Standard」、エフェクトは「Horizontal」、Auto Playを「Yes」、スピードを「3000」、ポーズを「7000」に設定して「Save changes」
- 「Select thumbnail」で「advps-thumb-one」、スライドの幅を「700」に設定。
- 「Show on slide」でサムネイル、タイトル、抜粋を選ぶ。「Content width」を「400」、「Excerpt length」を「150」に設定。
- 「Pager type」を「Number」、「Pager align」を「Right」に設定。
このように設定して保存し、「Usage」のところに表示されているショートコード[advps-slideshow optset="○"]を表示させたいところに貼り付けます。
Advanced post sliderのいいところは、独自のサムネイル設定をできるところでしょうか。WordPress全体のメディア設定を変更することなく、スライダーで利用するサムネイルのサイズを複数設定することができます。サムネイルをregenerateする必要もありません。