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

   2016.09.06 Simplicity , WordPress

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

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

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

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

こんにちは。部長ナビ(@nabi_1080)です いくつかお知らせがあります。 1 トップメニュー上部の「グローバルメニュー」と呼ばれる部分を変更しました 今まで、左から「紹介」

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

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

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

http://jikitourai.net/thumbnail-category-list-wordpress

こちらのサイトを発見しました。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は「表示する記事の数」です。

完成形

http://nabi1080.com/page-40002

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

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

最新情報をお届けします

RELATED

関連記事

RANKING

今日の人気記事