TOPページに複数のカテゴリーの新着記事をサムネイル付きで表示

category

 WordPressのTOPページをカテゴリー別の新着記事一覧を表示するようにカスタマイズしました。
どんな感じかは、HOME を覗いてみて下さい。

カテゴリーの多いブログや、異なる話題を頻繁に取上げるブログの場合だとTOPページが全体の新着記事よりも、カテゴリー別に分けて表示されてた方が訪問者にとっても見やすいのじゃないかな?と思います。

私のHOMEページ通りの解説になりますが、
2種類のプラグインのインストールや、お使いのテーマに適用されてるスタイルによっては修正箇所が多く発生するかもしれません。
個別ページに作るし、親テーマも弄らないのでやり直しが効きますが、くれぐれも自己責任で修正できる方のみでお願いします。

スポンサーリンク

Page Builder by SiteOrigin のインストール

ページを分割してウィジェットを配置するためのプラグイン
「Page Builder by SiteOrigin」をインストールします。

Page Builder by SiteOrigin

インストールして有効化します。

Page Builder by SiteOrigin の使い方。

固定ページ新規作成をクリックすると作成画面右上に
Page Builderのボタンが追加されました。

Page Builder by SiteOrigin

↑のPage Builderボタンをクリック。

Add Rowをクリック。

Page Builder by SiteOrigin

今回は横を2列のページにするので
Set Row Layout「2」として下のInsertをクリック。

Page Builder by SiteOrigin

分割した部分にウィジェットを登録します。

Page Builder by SiteOrigin

↑のように分割された部分をクリックして選択状態にし、Add Widgetをクリック。

使用できるウィジェット一覧が表示されるので「テキスト」を選択

Widgetリスト

作成したいカテゴリーの数だけ同じように追加して下さい。

PHP Text Widget のインストール

テキスト・ウィジェットにPHPを記述できるようにするプラグイン
PHP Text Widget をインストールします。

PHP Text Widget

このプラグインはインストールだけで何の設定もいりません。

ウィジェット・タイトルにリンクを貼る方法

ウィジェットのタイトルには普通に書いてもリンクは貼れません。

リンクを貼るには、タイトル部分を空白にしてテキスト欄へタグを記述します。

私のTOPページのBODYカテゴリーのタイトルの場合、
タイトル前にFont Awesomeのアイコンを入れて↓のように書いています。

<h3 class="widget-title"><a href="http://lahatnggusto.com/category/body"><i class="fa fa-child fa-fw"></i> BODY</a></h3>

広告最短4分で広告を掲載できる『忍者AdMax』

指定したカテゴリーの新着情報をサムネイル付きで取得

↑これの1行目がタイトルとなります。
カテゴリーのURLと名前、Font Awesomeのコードを追記して下さい、

8行目の””の間へカテゴリー名を入れて下さい。

9行目の「4」は表示する記事数です。

サムネイルがオリジナルサイズを読み込んでいたため17行目を変更

最後のlargeの部分を’thumb100’に変更しました。(テーマがSimplicityの場合)

‘thumb100’でもオリジナルのurlになる場合は’thumbnail’に変更して下さい。

確認方法
サムネイルを右クリックして画像urlをコピーしてそのurlを開けばサムネイルサイズが分かります。

以上のソースを自分用に書き換えて、テキスト・ウィジェットへペーストします。

Page Builder by SiteOrigin

タイトルは空欄のままテキストエリアへソースをペースト。

右側のWidget Classpostbox1と入力。
このClass名は2分割したウィジェット全てのスタイルを適用させるのに使用するので、作ったウィジェット全てに記述して下さい。

右下のDesignで背景色を設定できます。

CSSの追加

タイトル色の変更は、6行目。
マウスオーバー色は、16行目で変更できます。

以上!お疲れ様でした。

おすすめ

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る