WordPress のカテゴリウィジェットにはおそらく慣れているでしょう。最近、読者の一人から、最近の投稿をドロップダウンで表示することも可能かどうか尋ねられました。この記事では、WordPress で最近の投稿をドロップダウンとして表示する方法をご紹介します。
ドロップダウンで最近の投稿が必要な理由と対象者
WordPressには、サイドバーまたはウィジェット対応エリアに追加できる組み込みの最近の投稿ウィジェットが付属しています。
このウィジェットは最近の投稿のリストを単純に表示し、表示したい投稿数を選択できます。しかし、5〜10件以上の投稿を表示したい場合、リストはサイドバーに多くのスペースを占有します。
一部のWordPressユーザーは、最近の投稿をコンパクトに表示する必要がある場合があります。その場合、ドロップダウンや折りたたみ可能なリストを使用するとスペースを節約できます。
WordPressで最近の投稿をドロップダウンメニューとして表示するいくつかの異なる方法を見てみましょう。
WordPress の最近の投稿をプレーンなドロップダウンメニューで表示する (手動コード)
この方法は、組み込みのwp_get_recent_posts関数を使用します。テーマのfunctions.phpファイルまたはサイト固有のプラグインに次のコードをコピーして貼り付けるだけです。
function wpb_recentposts_dropdown() {
$string .= '<select id="rpdropdown">
<option value="" selected>Select a Post</option>';
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts($args);
foreach( $recent_posts as $recent ){
$string .= '<option value="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"].'</option> ';
}
$string .= '</select>
<script type="text/javascript"> var urlmenu = document.getElementById( "rpdropdown" ); urlmenu.onchange = function() {
window.open( this.options[ this.selectedIndex ].value, "_self" );
};
</script>';
return $string;
}
add_shortcode('rp_dropdown', 'wpb_recentposts_dropdown');
add_filter('widget_text','do_shortcode');
これで、WordPress の投稿、ページ、テキストウィジェットで ショートコード [rp_dropdown] を使用できます。表示は次のようになります。
プラグインを使用して折りたたみ可能な最近の投稿を追加する
上記の方法は、最近の投稿をドロップダウン形式で一覧表示するだけです。スペースを節約する別の方法として、ユーザーがクリックすると展開される折りたたみ可能な最近の投稿リストを追加する方法があります。
まず、Collapse-O-Matic プラグインをインストールして有効化する必要があります。これはすぐに機能し、設定はありません。
このプラグインは、ショートコードを使用して、折りたたみ可能なメニューに任意のものを表示することを可能にします。
このプラグインを使用する前に、最近の投稿を好きな場所に簡単に表示する方法が必要です。このコードをテーマのfunctions.phpファイルまたはサイト固有のプラグインに追加するだけです。
function wpb_recentposts() {
$string .= '<ul>';
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts($args);
foreach( $recent_posts as $recent ){
$string .= '<li><a href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"].'</a></li> ';
}
$string .= '</ul>';
return $string;
}
add_shortcode('recentposts', 'wpb_recentposts');
add_filter('widget_text','do_shortcode');
このコードは、ショートコード [recentposts] を使用して最近の投稿のリストを表示できるようにするだけです。
ここでは、最近の投稿の折りたたみ可能なリストを作成するために、Collapse-O-Maticショートコードにショートコードを追加します。
ショートコードを次のように簡単に追加します。
[expand title="最近の投稿"][recentposts][/expand]
このショートコードは、WordPressサイトのテキストウィジェット、投稿、またはページに追加できます。これは、テストサイトでの表示方法です。
これで、WordPressで最近の投稿をドロップダウンとして表示する方法についてのこの記事がお役に立てば幸いです。また、WordPressでキラー編集カレンダーを作成するための6つのヒントもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでもフォローできます。
マウロ・ヴィカリオット
著者様、
関数 wpb_recentposts_dropdown() の 2 行目にタイプミスがあります。
” $string .= … “ ではなく、” $string = … “ にする必要があります。
WPBeginnerサポート
.= と = は少し異なる使い方をします。このユースケースでは、タイプミスではありません。
管理者
Yvonne Manders
間違いを犯しましたが、解決しました。
WPBeginnerサポート
Glad you were able to solve the issue
管理者
Yvonne Manders
こんにちは、
collapse-o-matticをインストールし、functions.phpファイルにコードを貼り付けました。
その後、textwidgetにショートコード [expand title=”Recent Posts”][recentposts][/expand] を貼り付けましたが、何も起こりませんでした。
何か見落としていることはありますか？
よろしくお願いいたします。Yvonne
WPBeginnerサポート
スタイルがショートコードの動作を妨げないように、ビジュアルエディターではなくテキストエディターにショートコードを配置することをお勧めします。
管理者
Erika
3行目にエラーがあります。終了オプションタグに終了の「/」がありません。これにより、メニューに空のオプションが生成されています。
WPBeginnerサポート
Thank you for letting us know, the code should be fixed now
管理者
Amjad
こんにちは。上記のコードを使用して、すべての投稿をドロップダウンに表示しましたが、ソートされていません。ここに2つの質問があります：
1. タイトルで投稿をソートするにはどうすればよいですか？
2. すべての投稿を表示する代わりに、特定のカテゴリの投稿をドロップダウンに表示するにはどうすればよいですか？
WPBeginnerサポート
おそらくお探しのものについては、こちらの別のチュートリアルをご覧ください: https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
管理者
ロランド
素晴らしい記事です！特定のカテゴリのみで、すべてのカテゴリではなく、どのように作成できますか？また、アルファベット順にすることはできますか？
Farai Mugaviri
大変助かりました。ドロップダウンリストにカテゴリを表示したいのですが、可能でしょうか？でも、今Wordpressをアップデートしたらどうなりますか？PHP関数をハードコーディングすることによるアップデート時の課題やデータ消失のリスクについてどこかで話されているのを見ました。
ロバート
素晴らしいツールです、ありがとうございます！
リストの投稿出力をアルファベット順に並べ替えることは可能ですか？
お返事お待ちしております！
敬具、
ロバート
アンドレ
投稿ドロップダウンを送信ボタン付きで表示することは可能ですか？
‘function wpb_recentposts_dropdown() {
$string .= ‘
Select your School’;
$args = array( ‘numberposts’ => ‘5’, ‘post_status’ => ‘publish’ );
$recent_posts = wp_get_recent_posts($args);
foreach( $recent_posts as $recent ){
$string .= ” . $recent[“post_title”].’ ‘;
}
$string .= ‘
今すぐ学校を探す
var urlmenu = document.getElementById( “submitschool” ); urlmenu.onclick = function() {
window.open( this.options[ this.selectedIndex ].value, “_self” );
};
‘;
return $string;
}
add_shortcode(‘rp_dropdown’, ‘wpb_recentposts_dropdown’);
add_filter(‘widget_text’,’do_shortcode’);’
エミリー・ジョンズ
とても素敵なコンテンツです!! 素晴らしい読み物で、理解しやすいです。
NG SHAIKH
素晴らしい記事です。私のような初心者でも、このような記事でWordPressとそのプラグインの力を理解できます。
特定のページにメッセージを表示し、すべての投稿やページに表示しないようにする記事が書かれていれば、大変参考になります。
ユーザー入力フォームを表示し、データベースに保存できる記事がいくつか書かれていると、初心者にも役立ちます。
Julie S
最近の投稿のドロップダウンメニューはとても気に入っています。このドロップダウンメニューの幅を制御するにはどうすればよいですか？サイドバーにはデフォルトで長すぎます。
WPBeginnerサポート
CSSを使用して幅を調整してみてください：
select#rp_dropdown { width:200px; }1-click Use in WordPress
管理者