iCatch_wordpress

新着記事情報を、特定の場所と端末で表示させました!

今日は、@yellow_bucketsです。
今回は、僕のブログでまたプラグインを一つ追加しましたので、紹介したいと思います。

 

今回やりたいこと

今回僕がやりたいことは以下の通りです。
・記事ページでサムネイル画像の上に新着記事を5つ表示する。
・表示したい画面は、記事ページのみで、モバイルのみ表示させる。

 

僕がやったこと①:「What’s New Generator」をインストールする

まず初めに、新着記事を表示させるためのプラグイン「What’s New Generator」をインストールします。
こちらのプラグインは、「設定」ー> 「What’s New 設定」で細かい設定をすることができます。

▼僕はこんな感じで設定しました。
mini1415016464

▼あとは、このプラグインを記事画面でのみ反映させたいので、「single.php」のサムネイル画像の上に記述します。
mini1415016528

 

僕がやったこと②:「style.css」に追記

続いて行ったこととして、端末ごとに表示/非表示をしなければいけませんので、CSSファイルに記述をします。

▼全体の部分では非表示に。

 
/* モバイル用最新記事一覧 */
.showWatsNew {
    display: none;
}
 

▼モバイル、タブレット(縦の場合)は表示に。

@media screen and (max-width: 960px) {
/* モバイル用最新記事一覧 */
   .showWatsNew {
      display:block;
   }
}

これで表示したいページと端末の設定はおしまいです。

 

僕がやったこと③:「What’s New Generator」の編集

ひとまずやりたいことはこれで終了したのですが、思わぬ事態が。。

▼日付が入っていることによって、見栄えがちょっと変に思っちゃったんですね。。
mini1415017068

なので、日付表示しないようにしましょう。。

▼プラグイン一覧画面から、「What’s New Generator」の「編集」から、以下の文言を削除しました。
mini1415017242

▼削除した結果がこちら。
mini1415026893

完成!!

 

まとめ

今回僕が試しにプラグインまで編集しちゃいましたが、結構あっという間にできました!
ここ最近、仕事が忙しくて、wordpress全然触れていませんでしたが、ひとまずこれで一件落着。。

またこのブログに何か機能を追加したら報告したいと思います!

 
今回はここまで。

 

最後に

最後まで読んで頂きありがとう御座います。

もし気に入っていただいて、以下のリンクボタンからRSS登録やSNSでフォローしていただけると、とても励みになります。
宜しくお願い致します。

・RSS on c/w XXX.net
follow us in feedly

・SNS on c/w XXX.net

・SNS on yellow_buckets

 
最新記事一覧はこちらから。
このブログについて。