【WordPressプラグイン「Newpost Catch」でオリジナルのCSSを適用する方法】

WordPressの最新記事にサムネイルを表示するプラグイン「Newpost Catch」ですが、今回のバージョンアップで変更を加えました。

変更点

プラグインフォルダ内にある「style.css」のスタイルcss3,webkitのアクションを適用しないようにしました。また、変更に伴い「Newpost Catch」プラグインのcssスタイルをカスタマイズする方法（オリジナルのcssを適用する方法）をご紹介します。

推奨：「Newpost Catch」専用のCSSファイルを作りましょう

cssをカスタマイズする方法はいろいろあります。私がオススメする方法は「Newpost Catch」専用のcssファイルを作って、そのファイルにスタイルを書く方法です。

「newpost-catch.css」というファイル名でcssファイルを作成して、ご使用のテーマフォルダ/css/配下に置いてください。

cssファイルが作ってあれば、下のように、「newpost-catch.css」ファイルが読み込まれるようにできています。

<link rel="stylesheet" href="テーマフォルダまでのURL/css/newpost-catch.css" type="text/css" media="screen" />

CSSファイルを作ると管理がめんどうだな・・・とお考えの方は

上記は私が推奨するcssのカスタマイズ方法なのですが、cssの扱いは、みなさんそれぞれ違うと思いますので、cssファイルを無駄に分散して管理が煩雑になるのは面倒だ・・・と思われる方もいらっしゃると思います。

その場合は、ご使用中のメインのcssファイルに「Newpost Catch」のスタイルを記述してください。ただし、その場合は私がデフォルトで用意しているcssファイル「style.css」も読み込まれるようになっています。

デフォルトでプラグインフォルダ内のstyle.cssが読み込まれます

<link rel="stylesheet" href="・・・/wp-content/plugins/newpost-catch/style.css" type="text/css" media="screen" />

「Newpost Catch」プラグインがバージョンアップするたびに、プラグインファイル内のcssのスタイルが戻ってしまいますので、プラグインファイル内のcssファイル「style.css」を変更するのはおすすめいたしません。私が推奨する「newpost-catch.css」としてcssファイルを作成して、スタイルを変更されたほうがよろしいのかと、思います。

出力されるhtml,cssはこうなります

（）内の数字は１番目、2番目のに新しい記事のことを表しています。ウィジェットで設定した投稿数の分だけ出力されます。

<h2>「Newpost Catch」タイトル</h2>
<ul id="npcatch">
　<li>
　　<a href="（１）記事url"><img src="（１）サムネイルurl"></a>
　　<span class="title">
　　　<a href="（１）記事url">（１）最新記事タイトル<span class="date">（１）[記事投稿日]</span></a>
　　</span>
　</li>
　<li>
　　<a href="（２）記事url"><img src="（２）サムネイルurl"></a>
　　<span>
　　　<a href="（２）記事url">（２）最新記事タイトル<span>（２）[記事投稿日]</span></a>
　　</span>
　</li>
・・・
</ul>

こちらのコードはご参考程度としてご覧頂いただきまして、実際に出力されたソースコードをご確認して、cssをカスタマイズください。

まとめ

「デフォルトで適用するスタイルは、シンプルでいいんじゃないか」と、前からちょっと考えていましたので、変更しました。また、プラグインをご利用いただいた方で、フィードバックとしてご意見が多かったのが、オリジナル（独自）のcssを適用する方法をお探しの方が多かったことでした。検索ワードでもその兆候が見られました。「Newpost Catch オリジナル css」などで検索されて、このブログを訪れている方が多数いらっしゃいました・・・。

というわけで、オリジナルのcssを作ってお好みのデザインにカスタマイズしてくださいませ。最後に・・・この記事をきっかけにしてプラグインについて興味をお持ちいただけましたら、こちらをご覧下さいませ。ちょっと使ってもいいかな！という方が増えていただけますと、とても嬉しいです。

また、今回の内容につきましては、「Newpost Catch」専用ページ」の「５．CSS（スタイルシート）適用の優先度について」にも随時加筆いたしますので、よろしくおねがいします。

「Newpost Catch」プラグイン専用ページはこちら