WordPressで最新記事の隣などに、記事に設定したアイキャッチ画像を自動で表示するウィジェットプラグイン「Newpost Catch」をバージョンアップしました。最新記事の横に小さくサムネイルっぽく表示させたりもできます。画像付きの記事は、視認性もわりと上がるんじゃないかと思っています。
ウィジェットで設定できる項目が増えました
プラグインを有効にして、ウィジェットを設置すると、こんな感じになります。
いずれ内容は「プラグイン専用ページ」にも詳しく書くとして、今回は追加・変更になった部分を説明します。
1.カテゴリ別に新着記事を表示/非表示
これまでプラグインを使用していただいた方からの要望で、最も多かったのが「カテゴリ別に新着記事表示できないのかな~」というものでした。なので、今回機能を追加しました。
カテゴリのIDを入れて表示したい新着記事だけ表示させる
デフォルト値は空欄になっていまして、新しい記事から順番に、すべての新着記事が表示されます。
このルールは、WordPressCodexの「WP_Query」にあるcatパラメーターのルールに準じて入力ください。下に例を書きましたので、ご参考くださいませ。
例1:特定のカテゴリのみ表示(8のカテゴリのみ表示)
例2:マイナス値の付与で特定のカテゴリを除外して表示(8のカテゴリのみ除外して表示)
例3:カンマ区切りで複数のカテゴリ表示(8は除外、9,10のカテゴリを表示)
※カテゴリのIDを調べる方法
ところで、「カテゴリーのIDってどうやって調べるんだろ」という場合は、WordPressの管理画面「カテゴリー」から確認することができます。こちらに具体的な方法を書きましたので、ご参考くださいませ。
2.「この投稿を先頭に固定表示」させている記事の表示/非表示
表示/非表示のチェックボックスをウィジェットから設定できるようにしました。
下のようにチェックを入れた記事を表示させるかどうか設定できます。
※固定記事を表示させている場合の投稿件数について
投稿件数+先頭に固定している記事となります。
例:投稿件数5件、固定記事2件 → 7件表示
という感じです。固定記事を表示させる場合は、うまく件数を調整ください。
3.デフォルトCSS(スタイルシート)の適用の有無と独自スタイルシートの適用
CSSの適用方法についての問い合わせも多かったので、以下の機能を追加しました。チェック「する」「しない」で読み込むCSSを切り替えられます。
チェックする場合
「Newpost Catch」プラグインフォルダ内に「style.css」ファイルがありますので、読み込みます。
チェックしない場合
「newpost-catch.css」ファイルが存在していれば、優先して読み込みます(設置場所:ご使用のテーマフォルダ/css/newpost-catch.css)。ファイルが存在していない場合は、何も読み込まない状態ですので、ご使用のテーマで使用しているCSSファイルなどにスタイルを記述して見た目を整えましょう~。CSSファイルを分散して管理したくない方(いくつもCSSファイルを作りたくない方)には、こっちの設定がおすすめですかね。
4.複数ウィジェット設置可能
今まで私自身が気にしていなかったんですが、今回の追加機能をうまく使って「特定のカテゴリを複数ピックアップして表示させられたらいいよね」と思って、できるようにしました。そんなのやっておけよ、と思う方もいらっしゃるかもしれないですね。というわけで、今回のバージョンから、複数ウィジェットを設置できます。
5.投稿日の表示形式
「投稿日」にチェックを入れると記事を公開した日が表示されます。
この表示はWordPressの「設定」→「一般」の日付フォーマットに準じて表示されるように変更しました。
6.細かいプログラムの見直しやアンインストール時の挙動など
追加機能、というわけではないのですが、今では非推奨となったコードを変更したり、ウィジェットを設置した時にデフォルト値を入れておくように、とか、プラグインをアンインストールする時にプラグインの設定データをきれいさっぱり残さず削除するプログラムを追加したり、とか、目立ったことはあまりやっていないのですが、そんなことをしました。
以上、大きく分けると6点の変更がありました。
次のバージョンアップではすごく便利になる予定
やれることは広がったけど「もっとこうなるといいな」ってのがどんどん出てきますね。あるフレッシュな方に試作品を使ってもらいまして、「そうだよねぇ、あったらいいよねぇ。」みたいなことをユーザー目線でいただいたりもしました。
とても感謝しています。そういった流れもあって、次のバージョンアップでは「飛躍的に便利になる予定」ですので、また出来上がったらこのブログなどでお知らせしますね。
このプラグインの使いどころなどについて
新着情報にサムネイル(アイキャッチ)を表示させるプログラムは、できる方にとっては造作もないこと「かも」しれないですが、このプログラムを感覚的に使うことができるメリット(ウィジェットはドラッグ&ドロップで設置、並び替え、個別に設定もできる、など)は、まあまあ大きいと思います。
WordPressを使ってWEB制作する方も、ブログをカスタマイズされている方も、工数削減できる気がするんですが、どうでしょうかね。。私自身は、このような機能を実装するために1からプログラムを書いて時間をかけるならば、1つでも多くのコンテンツを発信、記事を書いたほうがいい派です。ともあれ、私がそう思うのは、お客さんにWordPressを管理画面ごと納品物とする場合には「このプラグインで好き勝手に最新記事を表示させてね!」って感じにしていて、おかげさまで評判も上々だからです。ほんと、作ってよかった!
というわけでして、このプラグイン「Newpost Catch」を使ったことがない方は、この機会にぜひとも。もちろん無料ですのでWordPress.org公式サイトよりダウンロード・インストールください。WordPressの管理画面からのインストールもできますね(こっちの方が理解しやすいかもです)
今までご使用になられている方も、これから使ってみようかな~と思われた方も、どうぞよろしくです!
「Newpost Catch」プラグイン専用Facebookページがあります
WordPressプラグイン「Newpost Catch」の活用事例や更新情報などを配信しています。情報を受け取る場合は「いいね!」でフォローくださいますよう、よろしくお願いします。
プラグイン使わせていただいております。
今回、さっそく更新したのですが、更新後、スタイルシートがリセットされたようなので、チェックを入れてstyle.cssをいじってみたところ、何も反映されないので、困っています。
どうしたらいいでしょうか…。
リストのマーク(黒い点)と画像の回り込みをしたいのですが…。
以前は出来ていたので、何をどう変更すればいいのかわかりません。
すみません。よろしくお願いします。
2013/05/21 23:07:06
ツイート
シェア
どうもありがとうございます。
いただいたコメントの件ですが、
ウィジェットの設定で「プラグインフォルダ内のデフォルトcss(チェックすると適用)」にチェックを入れると、「プラグインフォルダ内」に存在する「style.css」ファイルを読み込むように作られています。
・触っていらっしゃる「style.css」ファイルとは、どのフォルダにある「style.css」ファイルのことでしょうか。
また、プラグイン更新に伴い、プラグインフォルダ内の内容すべてを更新します。
これまで、プラグインフォルダ内の「style.css」をカスタマイズされていた場合は、その内容がリセットされます。
このことは、WordPress.orgプラグイン配布サイトのFAQページ「http://wordpress.org/plugins/newpost-catch/faq/」に記載してあります。(英文)
同様に、日本語解説ページにも記載されております。「https://www.imamura.biz/blog/newpost-catch」
・上記について今一度ご確認願えませんでしょうか。
・また、ご確認をいただいた上で、今一度起こっている現象について、ご確認くださいますでしょうか。
※ご質問の意図と私の理解のズレがありましたら申し訳ありません。その点を含めてご指摘いただけますと、解決も早いかもしれません。
何卒、よろしくお願いいたします。
2013/05/22 01:37:19
ツイート
シェア
こんにちは。
ご丁寧なお返事ありがとうございます。
プラグインフォルダ内のstyle.cssがリセットされるという注意事項は、設置した当時は読んでいたのですが、それをすっかり忘れて更新してしまいました。
wp-content/plugins/newpost-catch/style.css
↑このファイルをいじっているのですが、間違っていますか?
リストマークを消すのと、画像に文字の回り込みができればいいのですが…。
初心者の説明ですみません。
更新する前はできていたので…どうすればいいのか、行き詰ってしまいました。
2013/05/22 19:09:52
ツイート
シェア
何度もすみません。無事解決しました。
素晴らしいプラグインをありがとうございます。
これからも使わせていただきますね。
2013/05/23 14:13:05
ツイート
シェア
自己解決されたのですね!すいません、お返事が遅くなりました><
「wp-content/plugins/newpost-catch/style.css」
は、プラグインフォルダ内の「style.css」ですので、プラグインがアップデートされるたびに書き換わるファイルです。次回から、プラグインがアップデートされてもご自身がカスタマイズしたスタイルを維持するには、
ウィジェットの「プラグインフォルダ内のデフォルトCSS(チェックすると適用)」のチェックを外した上で、
1.「ご利用のテーマフォルダ/css/newpost-catch.css」ファイルを作成して、そこにスタイルを記述する
2.「ご利用のテーマフォルダ/style.css」などの、テーマのデザインなどで現在使っているスタイルシートに、「Newpost Catch」用のスタイルを記述する
いずれかの方法(細かく書くともっとたくさんあるのですが、この2パターンがいろいろ考えないでラクです^^)で、今後は管理いただけますと、今回の様なことに遭遇することもないのでは、と思っています。
ご連絡をいただきまして、ありがとうございました。
私の説明が不足している個所も多々あるなぁと感じましたので、このスタイルシートの適用については、今後使っていただく方にとってもうちょっとわかりやすい説明を書いていきますね!
それでは、今後ともどうぞよろしくお願いします~!!
2013/05/24 00:00:56
ツイート
シェア
はじめまして。
Newpost Catch本当に嬉しいプラグインです。
しかし、サムネイル画像の横(右)に文字を表示したいのですが、どうやっても画像の下に文字が回りこんでしまいます。CSSで float:leftと指定はしております。
テーマはSightというものを使っております。
ずっと調べているのですが、原因が分からず大変困っております。
教えていただけないでしょうか?
2013/06/27 09:28:12
ツイート
シェア
どうもありがとうございます。
CSSに関するご質問で、最も多いのが画像とテキストの回り込みに関するものですね。。
以下は一例ですが、私のこのブログで使用しているスタイルです。CSSのセレクタを「#npcatch」から始まるように記述しています。こうすれば、他の設定に干渉することも少ないと思います。(少ない、ですので確実にこれをコピーして使えばいける!というわけではないです)
ご使用のテーマやご環境、また、現状頂いている情報に対して、具体的に私が問題になっているサイトを確認できる手段がありませんので、今のところお伝えできるのはここまでとなります。
#npcatch{
margin:0px;
}
#npcatch li{
font-size:12px;
overflow:hidden;
clear:both;
margin:0px 0px 5px;
vertical-align:top;
}
#npcatch img{
float:left;
padding:0px;
box-shadow:0px 0px 7px #bbb;
}
#npcatch .title{
width:170px;
float:right;
padding:0px;
}
#npcatch li:hover{
}
#npcatch li:hover .title{
}
#npcatch li:hover .title a{
}
#npcatch li:hover .date{
}
今一度、CSSの書き方を見直していただけますよう、よろしくお願いいたします。
2013/06/27 19:50:53
ツイート
シェア
はじめまして、とてもいいプラグインで以前から使わせてもらってますw
最新版にUPしたのですが、わからないところがあったので質問させていただきます。
プラグインで最新記事だけでなく更新した記事も表示させることってできますか?
以前(1.0.7)では、
を追加したら更新記事も表示されてたんですが、最新のものでは表示されなくて。。。
もしできるようなら教えてもらえないでしょうか?
よろしくお願いします。
2013/06/27 16:34:07
ツイート
シェア
どうもありがとうございます。
本プラグインは、更新した記事を表示させるようには作られていないです。
お好みでコードを変更されたようなのですが、ちょっとコード改変についてのサポートはいたしかねます(コメント欄にはタグは反映できないようにしてあります)
他にも多くのご要望をいただいておりまして、次回以降のバージョンアップ時に対応をするかどうか「検討」をさせて頂ければと思います。
やり方に対するご回答にはなっていないのですが、何卒ご了承いただけますよう、お願いいたします。
2013/06/27 19:29:30
ツイート
シェア
わかりました。
ありがとうございます。
2013/06/28 09:24:50
ツイート
シェア
はじめまして。
プラグインダウンロードさせていただきました。
ありがとうございます。
newpost-catch/style.cssを編集しようとしましたが、「停止中」の表示なってます。
ウイジェットで
プラグインフォルダ内のデフォルトCSS(チェックすると適用)のチェックをしてもしなくても同じです。
どうしても画像の横にテキストがキレイに表示されません。
ご教示いただければうれしいです。
よろしくお願いします。
2013/07/06 01:30:57
ツイート
シェア
はじめまして。
コメントをいただいてから、どう返信をするのが望ましいのかと、ずっと悩んでいたのですが、
1.まず大前提として、WordPressの管理画面から、直接プラグインを編集するのは控えたほうが良いと思います。
2.また、プラグイン編集画面から「Newpost Catch」プラグインを選択し、「style.css」をご覧になられて、「停止中」ってなっているよ、これ、CSS効いてないんじゃないの?ということをご質問されていると理解しているのですが、「停止中」の表示で問題ありません。ウィジェットの設定でCSSのチェックを「する」「しない」で、読み込むCSSファイルが変わる、という機能が本プラグインでは備わっています。
3.されたいことは、「スタイルシート(CSS)で見た目を整えたい」事だと理解しています。Newpost Catchの専用ページ「https://www.imamura.biz/blog/newpost-catch」にある「CSS(スタイルシート)適用の優先度について」は、あらかじめご覧いただいてますでしょうか。どうやって見た目を整えるのがいいのか、注意点が書いてあります。
上記3点をご理解いただいた上で、
A.ご使用のWordPressのテーマファイルに「style.css」ファイルがあれば、そちらに書くか、
B.「Newpost Catch」専用のCSSファイル「newpost-catch.css」を作って、そちらに書くか、
おすすめは上の2つですので、管理されやすい方法を採用いただければ、と思っています。
以上、長くなりましたが、ご質問の意図と私の回答がずれていましたらすみません。その点も含めてご指摘くださいますよう、お願いいたします。
2013/07/08 19:48:31
ツイート
シェア
はじめまして「Newpost Catch」をよく利用させて頂いております。
CSSのカスタマイズなど色々と作業をし、ひと通り見た目は整える事ができるようになりました。
例えば、All in One SEO Packなどから書き出されるdescriptionやkeywordsをサムネイルと同時に表示させることは可能でしょうか?拙い文章で申し訳ございませんが、ご教授頂ければ幸です。
2013/07/09 19:15:26
ツイート
シェア
どうもはじめまして。
ご質問の件ですが、そういった表示はできないようになっております。
ご希望に添う事が出来ず、すみません。
2013/07/11 19:51:30
ツイート
シェア
はじめまして。
プラグイン使わせていただいております。ありがとうございます。
今回はひとつ解決したいことがあり、コメントさせていただきました。
サイドバーに使用すると、問題なく表示されるのですが、
記事に使用すると、右上に小さな黒く丸い点が現れるのです。
(ウィジェットとして使用しても、ショートコードで使用しても同じ結果でした)
たくさん検索してみたのですが、これといった解決策も見当たりません。
cssを触ったりとか、そういったことは何もしておらずまっさらな状態です。
どうすればこの黒い点を消すことができますでしょうか?
お忙しいところ恐縮ですが、ご教授いただけましたら幸いです。
どうぞよろしくお願い申し上げます。
2015/06/30 14:28:06
ツイート
シェア
どうもはじめまして~。
プラグインを使っていただいてありがとうございます。
似たようなお問い合わせをたびたびいただきますので、近日中に手順を書いて公開いたしますね。
すみませんが、今しばらくお待ちくださいますよう、よろしくお願いいたします。
2015/06/30 21:29:34
ツイート
シェア
どうもです~。
ご返信が遅くなりました。にもかかわらず記事を書く時間がちょっと取れなくて・・・すみませんが、コメント欄でご案内させていただきます。
ご使用のテーマフォルダ内に「style.css」というファイルがあると思います。
その「style.css」ファイル内の最後尾に、以下のコードを入れると黒い点(これは「マーカー文字」と広く呼ばれています)が消えると思います。
ul#npcatch{
list-style-type:none;
}
既に解決されているようでしたらすみません。お試しくださいませ。
2015/07/07 01:26:34
ツイート
シェア