こんにちは、ジロウです。
今回は、WordPressプラグイン「Newpost Catch」を使って、固定ページに新着記事一覧を表示し、トップページに設定する方法をご紹介します。
このプラグインの素晴らしいところは、インスールしてしまえば、任意のページにショートコードを記入するだけで、新着記事一覧をサムネイル付きで表示できるところです。
でもちょっと見た目が気に入らなかったので、さらにカスタマイズをしたところ、実に簡単に実装することができました♪
「Newpost Catch」を使ってトップページを作りたい理由は？
僕が「Newpost Catch」を使ってトップページを作りたい理由・・・
それはズバリ、
「トップページに記事一覧を表示しつつ、アドセンス広告をも表示したいから」
であります。
もちろん、規約に則った形で♪
ブログを運営していると、やけにトップページにばかりアクセスが集まる時期があります。
僕が趣味で続けているブログなんぞは、「Jetpack by WordPress.com」のサイト統計情報によれば、1日のPVのうち10％ほどが「ホームページ／アーカイブ」であります。
この原因はともかくとして、全体のアクセスが増えつつある中、なんかちょっともったいない・・・。
と言うのは、トップページにはアドセンス広告ユニットを設置していないからであります。
では、なぜトップページにアドセンス広告ユニットを設置していないのか？
このブログのトップページには、WordPressの「表示設定」⇒「フロントページの表示」から、「最新の投稿」を表示するようにしているからです。
つまり、「最近の記事一覧」を、サムネイル＆抜粋文を含めて10記事ほど表示する設定にしてあるんです。
「この記事一覧の途中にアドセンス広告ユニットを設置したい！」
そう考えたのが始まりでした。
ところが、WordPressテーマの構造のせいでしょうか、記事一覧の途中には、デフォルトではアドセンス広告ユニットを設置できません・・・。
いや、テーマによっては、カスタマイズすれば意外に容易なものもあります。
でも、そのブログで使っているTCDのテーマ「MAG」では、難しいようなんです・・・。
カスタマイズに詳しくない僕は、TCDに問い合わせましたよ、もちろん。
しかしその回答は、
「調査が必要であるものの、仕様を大幅に変更することが想定される」
とのことで、カスタマイズの依頼をすると最大で3万円くらいはかかるんだとか！
「そりゃちょっと勘弁して下さいよぉ～（汗）」
ってことで、こうなったら自力で何とかしてやろうということになったわけです。
「Newpost Catch」のインストール＆使い方とカスタマイズ方法
では、「Newpost Catch」のインストール＆使い方と、僕が実践したカスタマイズ方法をご紹介します。
WordPressの管理画面（ダッシュボード）から、
［プラグイン］⇒［新規追加］
と進みます。
ページの右上にある［プラグインの検索］欄に、「Newpost Catch」と入力します。
検索すると、表示画面の左上に出てくるはずです。
［今すぐインストール］をクリックし、
切り替わった［有効化］をクリックします。
これでインストールは完了♪
あとは、「固定ページ」の［新規追加］を開いて、「テキスト」モードに切り替えてから、本文欄に次のショートコードを入力するだけ。
[npc]
「プレビュー」してみると、最新記事一覧が表示されているはずです。
でもでも！！
これじゃあ、サムネイルは小さいし、たんなる箇条書き状態だし、投稿日も表示されていませんよね・・・。
なので、トップページの記事一覧にふさわしい見てくれにカスタマイズしていきます♪
が、しかし・・・
見た目のカスタマイズについてですが、疎い僕が自力でできるはずもありません・・・。
そこで、小一時間ほどググった末に、素晴らしい情報にたどり着きました！
ヾ(≧∀≦*)ﾉ ｷｬｰ
それが下記の「参考サイト」であります♪
Non太さんのブログ「Love Wife Life」より、次の記事がすごく役に立ちましたので使わせていただきました♪
と言うより、マルっと真似させていただきました！
ｍ(＿ ＿)ｍ ありがとうございます！
その方法は実に簡単♪
まず、先ほどの個別記事に入力したショートコードを、下記に変更します。
[npc width=”100″ height=”100″ date=”1″]
そしたら、WordPressテーマの「スタイルCSS」にコードを追記するだけなんです。
TCDテーマでは、管理画面（ダッシュボード）の、
［外観］⇒［CSS編集］
で、「追加CSS」欄に下記のコードを追記するだけです。
ほかのテーマでも、ほぼほぼ同じか、
［外観］⇒［テーマの編集］⇒「スタイルシート（style.css）」
で追記できるはずです。
/* Newpost Catch */
#npcatch li{
overflow:hidden;
clear:both;
vertical-align:top;
border-bottom: 1px dotted #666666;
}
#npcatch img{
float:left;
padding:5px 10px 0 0;
}
#npcatch .title a{
font-weight: 700;
text-decoration: none;
}
#npcatch .date {
font-size: small;
font-weight: 600;
display:block;
color: #adb5bf;
margin-bottom: 5px;
}
#npcatch li:hover{}
#npcatch li:hover .title{}
#npcatch li:hover .title a{}
#npcatch li:hover .date{}
すると、さきほどショボかった記事一覧の見た目が見違えます♪
ぼかしちゃって申し訳ないんですが、サムネイルが大きくなり、投稿日が加わり、さらに記事と記事の間に仕切り線が入りました。
かなり“それらしく”なりましたよね♪
これで、「めでたしめでたし♪」といきたいところですが・・・
表示されている記事の数が気に入りません！
「Newpost Catch」を使った記事一覧に表示する数ですが、デフォルトでは5記事になっています。
僕は7記事くらいは表示したかったので、ここからは自力でカスタマイズしましたよ♪
と言っても、運良く簡単に変更することができました♪
［プラグイン］⇒［インストール済みプラグイン］と進み、
プラグインの一覧から「Newpost Catch」を探してください。
見つかったら、［編集］をクリックして「プラグイン編集」画面にジャンプします。
「newpost-catch/class.php」を選択してクリック。
表示されたボックス内から、次の部分を探します。
けっこう下の方です。
// default value extract( shortcode_atts( array( 'id' => 'npcatch', 'post_type' => 'post', 'post_status' => 'publish', 'cat' => NULL, 'width' => 10, 'height' => 10, 'posts_per_page' => 5, 'sticky' => 0, 'offset' => 0, 'orderby' => 'date', 'order' => 'DESC', 'date' => 0, 'meta_key' => '', 'dynamic' => 0, ), $atts ) );
このうち、上図コードの9行目、
「posts_per_page’ => 5,」という項目の数字を、
「posts_per_page’ => 7,」みたいに任意の数字に書き換えてください。
そして画面左下の［ファイルを更新］をクリックします。
これが最新記事一覧に表示される記事数で、ここを書き換えることで表示画面に反映されるはずです。
で、結局トップページの構成をどうしたのか？って言うと、
トップページっぽい見出しの下に、テーブルタグを使った人気記事のリンク画像を貼り付け、その下にアドセンス広告ユニット・・・。
そして、ご紹介した最新記事一覧を表示させて、その下にまたアドセンス広告ユニットを設置したのであります。
スマホ表示すると、テーブルタグで作った人気記事の部分がかなり縦長になりますが、まあまあ許容範囲です。
アドセンス広告ユニットの配置については、たぶん規約に反していないと思うんですが・・・。
これでどれくらいの収益アップにつながるか、しばらく観察してみたいと思います。
もともと、かなりコアなジャンルを扱っているんで、検索需要そのものが少ないんですが・・・。
ま、趣味ですからね♪
コメントを残す