ワードプレスの固定ページに新着記事の一覧を表示したい!Newpost Catchプラグインとショートコードの使い方

スポンサーリンク

遠回りをしたけど、ブログで収益化に成功したクマ吉です。

ワードプレスでブログを作成すると、トップページには新着記事の一覧が表示されますよね。

デフォルトではこの動作は正しいのですが、「トップページには新着記事以外にも載せたい画像やコンテンツがあるんですけど!」と言う、お問い合わせや相談メールがあります。

Newpost Catchプラグインとショートコードの使い方をこの記事ではご紹介します。

Aki☆
ねーね、クマ吉さん。ブログのトップページに新着記事の一覧以外に、オリジナルコンテンツ載せたいんだけど・・。
クマ吉
 固定ページでトップページを作ったらどうクマ?
Aki☆
そうすると、新着記事の一覧が無くなっちゃった!
クマ吉
なるほどね。そしたら、プラグインを使うと簡単ですクマ!
クマ吉
Aki☆と同じような問題を抱えている人は多いようです。是非参考にしてもらえると嬉しいクマ!

 

固定ページとしてトップページを作成すると、載せたいコンテンツは表示できるけど、新着記事の一覧が表示されない・・・。

そう、あちらを立てれば、こちらがたたず・・の状態です。

ましてや下手にPHPの部分をカスタマイズして壊れてしまうともっと困る・・・。

この問題を解決するポイントは、

①「Newpost Catch」プラグインを導入する

②固定ページでトップページを作成する

③固定ページにショートコードを記載する

④実現できた!

この4つのポイントを解説していきたいと思います。

 

 

 

これからブログを始める方は、まずは下記の記事もご参考にしてくださいね。

⇒ エックスサーバーの契約からドメイン設定・ワードプレスのインストール手順まで

 

関連 ワードプレスおすすめ無料プラグイン・ツール【厳選まとめ】

 

Newpost Catchプラグインツールのインストール

 

【プラグイン】⇒【新規追加】画面より、【Newpost Catch】と検索します。
Newpost Catchをインストールします。

 

忘れずに【有効化】します。

 


 

CSSコードの追加

 

【外観】⇒【テーマの編集】⇒【スタイルシート style.css】を表示します。

スタイルシートの一番下のページに、下記のCSSコードを貼り付けます。

/* Newpost Catch */
#npcatch li{
overflow:hidden;
clear:both;
vertical-align:top;
}
#npcatch img{
float:left;
padding:5px 10px 5px 0;
}
#npcatch .title a{
font-weight: 700;
}
#npcatch .date {
font-size: x-small;
font-weight: 400;
display:block;
color: #666699;
margin-bottom: 5px;
}
#npcatch li:hover{}
#npcatch li:hover .title{}
#npcatch li:hover .title a{}
#npcatch li:hover .date{}

※スタイルシートは、今後自身のサイトに応じて少しずつカスタマイズするのもOKです。

まずは、貼り付けて動作することを確認しましょう。

 

 

 

固定ページでトップページを作成

 

【固定ページ】⇒【新規追加】にてページを表示します。

トップページに表示したいコンテンツを作成します。

最新記事の一覧を表示させたい箇所を確認します。

 

 

ショートコードを埋め込む

固定ページに下記のコードを記載します。
※テキストモードで記載しましょう。

 [npc width=”20″ height=”20″ date=”1″] 

ショートコードを追加したら、【更新】ボタンをクリックします。

最新記事の一覧が表示されたことを確認できましたでしょうか?

 

 

<ショートコードのオプションについて>

ショートコードのオプションを変更することでサムネイル画像の大きさや、日付の表示有無などの設定が可能です。

オプションは下記の通り11項目あります。

このサイトで使用したのは、シンプルに(3)、(4)、(10)の3つです。

必要に応じて、実験してみてね!

 

(1) id(string) – ulエレメントのid名(default:npcatch)
(2) cat(int) – カテゴリID(default:NULL)
(3) width(int) – サムネイルのwidth値(default:10)
(4) height(int) – サムネイルのheight値(default:10)
(5) posts_per_page(int) – 表示件数(default:5)
(6) sticky(boolean) – 先頭に固定表示の記事を表示するかどうか(on:1 off:0 default:0)
(7) offset(int) – 先頭からx番目の記事から表示(default:0)
(8) orderby(string) – 記事の並び方(default:date)
(9) order(string) – orderbyで並べた記事を昇順か降順で表示(降順:DESC 昇順:ASC default:DESC)
(10) date(boolean) – 記事の公開日の表示有無(on:1 off:0 default:0)
(11) dynamic(boolean) – 同じカテゴリの最新記事を動的に表示する。(カテゴリIDを指定している場合は、こちらの値が優先されます)また、投稿タイプが「post」の時のみ設定が有効になります。「post」以外のページを表示している場合はカテゴリIDの値を優先します。(on:1 off:0 default:0)

 


 

Aki☆
クマ吉さん、意外と簡単でしたね!PHPの修正になると少々ヤバかったね・・
クマ吉
そだねー。 うまくプラグインを利用して、時間短縮を図るのです!

 

 

その他おすすめプラグインについて

 

ワードプレスでブログを立ち上げたら、運営するためにはプラグインが必須となりますが、何を選んでいいの?

このような悩みを解決している記事です。

本記事では、プラグインの目的を明確にしていますので、自身のブログ運営で必要なモノをしっかりと選んで、記事作成に重きを置けるように環境設定をしていきましょう!

 

ワードプレスおすすめ無料プラグイン・ツール【厳選まとめ】
ワードプレスでブログを立ち上げたら、運営するためにはプラグインが必須となりますが、何を選んでいいのでしょうか?今回は、すべて無料で使用できるワードプレスのおすすめプラグイン12選!として、初めてブログを立ち上げた初心者の方にとって有益なプラグインを目的別にご紹介していきます

 

 

最後にまとめ

プラグインを使用すると簡単にできます。

PHPのスキルがある方は、必ずしもこのプラグインツールを使用する必要はありません。

使用しているテーマの種類にもよりますが、content.phpなどの部分を修正することでも実現は可能です。

クマ吉も当初はPHPの追加修正を試みました。

修正する箇所などは把握できたのですが、思った表示にならず、そこで、かなりの時間を費やしてしまいました。

その時間があったら2~3記事作成できちゃいます。

PHPは少しずつ勉強しながらカスタマイズしていきますが、今は記事作成をしていきたいので便利なプラグインツールを利用しながら作業軽減をしていけたらと思っています。

 

関連 グーグルアドセンスの厳しい審査に通るには?合格方法や文字数などを解説2019

関連 【簡単】ブログのアクセス数を10倍に増やす正しい方法!

 

 

日常会話の英語フレーズ一覧【ビジネスでも使える厳選まとめ集】ではカテゴリ別に使えるフレーズをピックアップしています。

まとめて読みたい方は是非ご覧ください。

 

私はこれで英語をマスターしました!
コンサル&無料体験レッスン実施中

専属コンサルタントが、現在のレベル、課題と目標を明確にして短期間で最適な学習方法をアドバイスします。

こんな方へ
・どうやって勉強したらいいかわからない
・なんとなく英会話スクールに迷われている方
・英会話教室に通ったけど、話せるようにならなかった
・自分の英語の弱点を知りたい方
・一度オンライン英会話をやったけれども飽きてしまった方
・海外の方との会議や海外出張で英語が話せず困っている
・今すぐビジネス英会話を覚えたい方
・途中でやめてしまった経験がある




受講開始して、途中で「思っていたのと違う」「自分には無理そう」等感じたら、 開始から30日以内であれば受講費を全額返金するシステムがあるので安心です。

ブログ構築/ワードプレス
スポンサーリンク
スポンサーリンク
シゲキタイムズ

コメント

タイトルとURLをコピーしました