【Simplicity2カスタマイズ⑨】主要カテゴリー6つの最新記事をトップページ上段に表示する方法

s-category

Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。

Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。

今回行うカスタマイズは、「主要カテゴリー6つの最新記事を、トップページ上段に表示させる」です。

どういうことかと言うと、こちらの記事(Simplicityで「主要カテゴリ最新記事」を表示する方法 / 部長ナビ)を完全にコピーさせて頂きました。

▼1080.comさんのトップページ

部長ナビさんのTOPページからお借りしました。

部長ナビさんのTOPページからお借りしました。

これですこれ。

トップページにズラーっと並ぶ記事一覧のさらに上に、主要カテゴリー6つの最新記事を表示させることが出来ると言うなんとも素晴らしいカスタマイズ。

メチャ格好良いですよね!

ということで、これをもう少し細かく解説しながらCSSコードはお借りしてカスタマイズしたいと思います。

スポンサーリンク

最新記事を表示させるまでの手順

1.親テーマにある【list.php】を子テーマに移動させる

まず初めにCSSコードの編集をしたいページが【list.php】です。

でもこのページは元々は親テーマにしかないものなので、子テーマに移動しましょう。

移動の仕方はこちら⇒親テーマから子テーマへ、カスタマイズしたいページをコピーする方法【ロリポップサーバーの場合】をご覧ください。

ロリポップじゃなくて分からない人は、ググったりして頑張って子テーマへと移動させてください。(親テーマでもいいという方は自己責任で)

2.子テーマに移動させた【list.php】に追記

list.phpの67行目辺り~77行目あたりに以下のコードがあります。(黄色くしているのが77行目)

▲ここまではそのままです。

この下に以下のコードを追加します。(部長ナビさんのコードを自分用に書き換えています)

実は上記コードはそのままコピペするだけではうまくいきません。

なぜなら自分でカテゴリーを作った際に、そのカテゴリー用のURLをそれぞれ作ったと思います。

表示させたい最新記事は、自分で作ったURL(スラッグ)に書き換えてあげないと反応しないんです。

以下、自分のカテゴリーのURLを記入するとはどういうことか説明しています。

▼1段目左のCSSコードの一部s-2016-05-23_18h17_29

上記は実際に先程記載したコードの一部です。

①②③を変更する必要がありますが、それぞれ解説しておきます。

①【test1】と書かれている部分

ここを自分がカテゴリーを作った時に指定したURL(スラッグ)に書き換えます。

言い換えれば、【自分のドメイン/category/ここの部分/】のURLを書くということ。

【test1】と書かれているものを自分のカテゴリーのURLに変更すれば、指定したカテゴリーの最新記事が表示されることになります。

②【/category/test1/】と書かれている部分

これは上部に表示されるタイトルをクリックした時に移動させたいURLを書きます。

もし最新記事を表示させているカテゴリーと違うカテゴリーのページを表示させたいという場合、Simplicity2で言えば【*-*(自分のドメイン)-*.com/category/カテゴリーURL/】となっているはずなので、赤字の部分を【/category/test1/】と書かれている部分と書き換えます。

それでリンクがちゃんと反応するはず。

③【テストカテゴリー1】と書かれている部分

ここは②で設定したURLリンクの表示名をどうするかというものです。

②で設定したカテゴリーURLのカテゴリー名にしておくのが無難かと。

僕の場合で言うと、①でテストカテゴリー1の最新記事を表示させて、②と③でその上部に表示される文字を【テストカテゴリー1】として、そのままテストカテゴリー1のリンクに飛ぶようなコードになっています。

これで【list.php】に記述するコードは終わりです。

3.スタイルシート(style.css)に追記する

ここも好みで色々な色にカスタマイズが出来ますが、部長なびさんからは少し色合いを変えて下記のコードを追記します。

上記コードで黄色く表示している行は、部長ナビさんが紹介してくれているコードからは自分のカラー用に変更した箇所です。

簡単に言うと、上部のタイトル部分を左から青・赤・緑のタイトルカラーにしてみたこと。

そしてタイトルの下に出てくる投稿日の枠内の色を白というかアイボリーっぽい色に変更しています。

またこのカスタマイズでは記事一覧の枠線を消しているので、サムネイル画像の幅が220pxだと足りなかったので240pxに変えました。

▼これでトップページの記事一覧の上に、6つのカテゴリーの最新記事が表示されるようになりました。s-2016-05-23_18h53_56

テストカテゴリーとして1~6まで作ってましたが、うまく6つのカテゴリーの最新記事が表示されています。

注意点としては、このカスタマイズを行った場合、表示させているカテゴリーのページに行った場合も上部には6つの記事が表示されることになります

それ以外のカテゴリーのページに行った場合は表示されません。

スポンサーリンク

主要カテゴリー6つの最新記事を表示する / まとめ

ブログ形式で行おうと思っている場合は、もしかすると必要のないカスタマイズかもしれません。

僕の場合は少しだけポータルサイト風にも出来たらいいなと思ったので、このカスタマイズを真似させて頂きました。

細かく説明してますが、カスタマイズのCSSコードは部長ナビさんが紹介してくれているコードをそのままコピーさせてもらってます。

カスタマイズに挑戦したい人は、ぜひ参考にしてもらえれば幸いです。

次のページはこちら⇒【Simplicity2カスタマイズ⑩】カエレバ・ヨメレバ・トマレバをカスタマイズする!

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。