風の羅針盤 | Destination of winds.

【WordPress】 サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編

time 2016/01/16  所要時間:約 2

【WordPress】 サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編

こんにちは。ちゃぼPです。

このサイトでは、WordPressテーマ「マテリアル」を使用しています。

先日より、トップページのデザインが大きく変わっていますが、カテゴリ別のサムネイル付き新着記事を三つ並べてみました。

先に最新の記事を大きく表示するようにしたのですが、

【WordPress】マテリアルのトップページで最新記事を大きく表示してみたぞ | 風の羅針盤 | Destination of winds.
こんにちは。

このサイトではNobuoさん制作の「マテリアル」をテーマとして使用しています。

http://wp-material.net/

こういうパネル調のデザインのテーマって、…

カテゴリ別は、目立たせたいカテゴリだけをピックアップして目立たせることを目的としました。

今日はその方法をご紹介します!

スポンサーリンク

元々の要望は、部長ナビのページ

私ちゃぼPは、昨年末に部長ナビさんから「カテゴリ別の新着記事を表示したいんだよねー」と要望を貰いまして、いろいろと調べながらの作業でした。

【DIY】トップページにサムネ付きカテゴリ別新着記事を実装する・・・作業中(笑) | 風の羅針盤 | Destination of winds.
こんにちは。chaboです。

なんか朝から左目が痛くて、涙が出ます。日曜治らなかったら眼科に行こうかな。

パソコンの見過ぎかもしれないですね・・
現在鋭意作業中!
部長ナビさんのスタッ…

部長ナビのページはカテゴリーが多いので、6個のカテゴリーを表示するようにしています。ってか、本当は6個でも足りないくらいページ数が多いっすね。

Simplicityで「主要カテゴリ最新記事」を表示する方法
こんにちは。部長ナビ(@nabi_1080)です今日も、ちゃぼPプロデュースのSimplicityカスタマイズコードを紹介します!どうしてもやりたかった、gori.me風「主要カテゴリ最新記事一覧」gori.meでは、主要カテゴリの最新記事

私のサイトはページ数も少ないですから、三つにしています。

「loop.php」を編集する

まず、子テーマ内に、「loop.php」が存在しない場合は、子テーマ内にファイルをコピーしてから編集しましょう。

挿入するコードは、以下のようになります。

new_category

上の図のように、

  • カテゴリスラッグ名
  • カテゴリトップのURL
  • カテゴリ表示名

を自分のサイトに合うように変更します。

スラッグ名は、「投稿」–「カテゴリー」から調べられます。

new_category1

なお、上記の例では、ページネーション機能によるトップページのページ送り2ページ目以降では表示させないようにしています。

1ページ目

新着カテゴリ

2ページ目以降

新着カテゴリ

モバイルでは表示しない設定

モバイル表示ではこのボックスは表示しないようにします。

function.phpへのモバイル定義の記述がされていない場合は、以下のページを参考に記載を行います。

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに! | 風の羅針盤 | Destination of winds.
WordPressのテーマを「マテリアル」に変更してしばらく経ちましたが、このテーマは見た目もすっきりしていて本当に見やすいですね。

このテーマの特徴の一つに、画面のサイズに応じて、メインカラム…

先ほど挿入したコードを、下記の「ここに上のコードが入る」の部分に挿入します。

style.cssへ追記

次にstyle.cssへの追記です。

これで完成です。

上記の例はマテリアルでの実装例ですが、トップページを表示するテンプレートに記載すれば、特にマテリアルだけではなく実装できると思います。

カテゴリを目立たせたい方は、試してみてくださいね!

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

コメント

  • こんにちは、鈴江です。
    部長ナビさんのどころでコード使わせていただきました。
    このトップページにカテゴリ新着記事表示やりたかったんです。
    ありがとうございます。
    鈴江

    by 鈴江浩之 €2016年6月5日 11:09 AM

    • どうぞどうぞ!
      どんどん使ってやってください。でも少し色を変えるとかした方がいいかもです。
      あまりに部長サイトに似てしまうので・・・

      by chabo €2016年6月5日 11:56 AM

down

コメントする




*

この記事の関連カテゴリ

関連記事



スポンサーリンク