Simplicityで固定ページの中にカテゴリ新着記事をサムネイル付きで表示する方法

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

微調整終わりましたので、報告します。

スポンサーリンク

主要カテゴリをグローバルメニューに移したので、カテゴリ別の新着記事が出るようにした

【お知らせ】ブログの上部メニュー表示変更と、Twitterタイムライン設置について
【お知らせ】ブログの上部メニュー表示変更と、Twitterタイムライン設置について
こんにちは。部長ナビ(@nabi_1080)です いくつかお知らせがあります。 1 トップメニュー上部の「グローバルメニュー」と呼ばれる部...

グローバルメニューはドロップダウンだったんですけど、それをやめて、主要カテゴリをグローバルメニューに表示しました

すると、今回いじったのは「Mac」のカテゴリですけど、Macって言っても、アクセサリーや、アプリ、Tipsと言った色々な内容があって、グローバルメニューからアクセスしたときに「5記事くらいずつ表示」できれば良いなーと思って色々探しました

「もぐ」さんのコードを使わせていただき、ウチ用にアレンジした

WordPressでのサムネイル付きカテゴリ別新着記事一覧のコード
WordPressでニュースサイトに近いサイトを作っていたのですが、カテゴリ別に記事一覧を出したいと思って色々と探していました。カラムを2つとか3つに分けて、それぞれ縦にサムネイルを付けてカテゴリ別に新着記事を出すことを

こちらのサイトを発見しました。Simplicityでした。で、色々調整したんですけど、かなり変えましたので、コードを紹介します。

もぐさんと同じにしたい方は、もぐさんのサイトへどうぞ。ウチと同じにしたい方は、下のコードを使って下さい

注意点

いくつか注意点があります

1 「Exec PHP」というプラグインを最初に入れること

2 WordPressの投稿画面で作業するときは「ビジュアル」ではなく「テキスト」でやること。MarsEditの場合は「HTML」の作業画面でやること

これらが注意点です。特に2は注意しないと、PHPのコードだけが表示されるという意味不明な状態になります。初心者は注意!

変更点

もぐさんと変えたのは次の点です

1 サムネイルの大きさ変更

2 カテゴリー名を大きくし、赤くした

3 上下のドットラインを取った

4 更新の時間を取った

5 タイトルだけにして、内容の抜粋を取った

6 カテゴリの一覧という最後の記述を削除

こんな感じですね。

コード紹介

まずは、style.cssに貼る、CSSのコードから。コレも微妙に変更しておりますので、参考にどうぞ

/* -----------------------------------------------------------------------
    カテゴリ別新着記事一覧・部長ナビ風アレンジ
----------------------------------------------------------------------- */
.postlist-category {
    margin: 15px 0 10px 0;
    padding: 5px;
}
.postlist-category img {
    float: left;
    margin: 10px 6px 10px 0;
    width: 70px;
    height: 70px;
}
.postlist-category a {
    display: block;
}
.postlist-category-inner {
    margin: 0;
    padding: 1px;
}
.postlist-category-inner p {
    font-size: 16px;
    margin: 1px 0 5px 3px;
}
.postlist-datetime span {
    font-size: 10px;
}

次に、固定ページに書くPHPのコードです。

最後に「p」が入ってますが、コレを入れると、並べたときに次のカテゴリ名がかぶらなくなります

$catというところに、スラッグ名を入れて下さい。スラッグ名はWordPress管理画面のカテゴリ一覧で見ることができます。$numは「表示する記事の数」です。

完成形

Mac
Mac
Macに関する記事まとめ ★Macレビュー Macに関するレビュー記事です! ★Mac Mac本体に関する記事です!Pro、Air、12...

こんな感じになります。よろしければどうぞ!もぐさん、ありがとうございました!

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

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索