WordPress のテーマ「Sparkling」トップページのローテーションの画像 (FlexSlider) の設定方法とか

WordPress のバージョンが 3.5 だったけどようやく 3.9.2 にアップデートしました。そのタイミングでテーマも変更。

Twenty Fourteen で左カラムが復活して3カラムになってるみたいだけど、またそういう流行りがあるんですかね?

このブログは最近スマホ・タブレット流入が大半を占めているので、3カラムではないものがいいので以下にしました。
–>Sparkling – Free flat design WordPress theme developed using Bootstrap 3 and is well suited for blogs, portfolio, design, photography and other creative websites

Featured Slider に画像を表示させるために、専用カテゴリを新設

トップページの画像ローテーションしているところのことを、Featured Slider と言うらしい。それで設定方法を読んでみると意外と面倒くさい。

5. Setup Featured Slider For Homepage

Sparkling theme relies on Flexslider image slider which is built in into theme and no plugin is required.

  1. Slider Settings are located in Theme Options – Main
  2. To enable slider tick checkbox and you will see that two no options will appear “Slider Category” and “Number of slider items”
  3. Select category from dropdown to use for slider
  4. Now select number of slides to be used in slider (newest Posts from that category will be used)
  5. Make sure you have Featured Images uploaded and added for those Posts.

Sparkling Theme Documentation – Colorlib

要するに指定したカテゴリから、指定した数の記事の、アイキャッチ画像をトップページ表示するってことだと思うのだけど、 1920×600 (px) って画像をアイキャッチ画像として毎回登録しないといけないんかよ、ってことは避けたいので、Featured Slider 表示用にカテゴリを新設することになるかと思います。

ん・・と、長年ブログを書いてきた経験上、自分はどうやら記事のカテゴリ分けが苦手なので(記事が増えてきたタイミングでカテゴリを毎回見直すことになる)、このブログはでは記事のカテゴリ分けをしていない。タグ付けはしているので、「こういう趣向のブログですよ」ってのはタグクラウドで来訪者には伝わるし、必要ないと思っている。(そもそもそんなことを気にしてくれる来訪者がどれほどいるだろうかって話はあるんだけど。)

とまぁ、この状況だと普通に別の何かを実装した方が楽な気もするけども、暫く使ってみる。

  1. Featured Slider 用のカテゴリを新設
  2. Featured Slider 用のカテゴリに記事を投稿。アイキャッチ画像に 1920×600 (px) の画像を登録。
  3. Theme Options > Main から「Do You want to display image slider on the Home Page?」のチェックをオンにして、新設したカテゴリを選択

って感じで表示されるはずです。

画像表示用に登録した記事をトップページの記事一覧に表示されないようにしたい。

一覧ページに特定カテゴリの記事一覧を表示するような設定しなくても、古い日付で記事を投稿すればそれで済む話なんだけど、それだとなんかちょっとかっこ悪いので、index.php を編集します。

  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

    <?php if ( have_posts() ) : ?>

      <?php /* Start the Loop */ ?>
      <?php while ( have_posts() ) : the_post(); ?>

ってところに

<?php query_posts("cat=1&showposts=10"); ?>

この一行を追加する。
※カテゴリの ID と、表示記事数は調整してください。

  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

    // 特定のカテゴリのみの表示
    <?php query_posts("cat=1&showposts=10"); ?>
    <?php if ( have_posts() ) : ?>

      <?php /* Start the Loop */ ?>
      <?php while ( have_posts() ) : the_post(); ?>

これで OK 。

20140903追記

どうやら

<?php query_posts("cat=1&showposts=10"); ?>

だけだと、「OLDER POSTS」などのページングが上手く機能しない(2ページ目に遷移しても、1ページ目と同じ記事リストが表示されてしまう)ので、query_posts に変数を引き継がせる以下の様な調整が必要ということがわかりました。

<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">

  //グローバル変数$query_stringを取得
  <?php global $query_string; ?>
  //$query_stringを受け継ぎつつ、特定のカテゴリの記事のみ表示
  <?php query_posts($query_string . "cat=1&showposts=10"); ?>
  <?php if ( have_posts() ) : ?>

    <?php /* Start the Loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>

※コメントアウトの位置は PHP のコードに含まれるように変えてください

今度こそこれでOK。

–>徹底解説!query_postsを使ってWordPressで表示する記事数をカテゴリごとに変更する(プラグイン不使用) | Sabakura Blog

こちらを参考にさせていただきました。
–>特定のカテゴリ記事を新着順にトップページへ表示する方法 [WP] « デザイナーのためのPHP&WP 小ネタブログ

コメントを残す

  • コメント欄には個人情報を入力しないようにしてください。

  • 入力いただいたメールアドレスは公開されませんがサーバーに保存されます。
  • 入力いただいた情報の他に、IPアドレスを取得させていただきます。取得した IPアドレス はスパム・荒らしコメント対処ために利用され、公開することはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください