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ファイルかサイト固有のプラグインに追加するだけだ。
[cbk2］
このコードによって、ショートコード[recentposts]を使って最近の投稿のリストを表示することができます。
では、Collapse-O-Maticショートコードにショートコードを追加して、折りたたみ可能な最近の投稿のリストを作成します。
このようにショートコードを追加するだけです：
[expand title="Recent Posts"][recentposts][/expand]。
このショートコードは、WordPressサイトのテキストウィジェット、投稿、またはページに追加できます。テストサイトではこのように表示されました。
以上、この投稿がWordPressで最近の投稿をドロップダウンで表示するのに役立てば幸いです。WordPressでキラーエディトリアルカレンダーを作成するための6つのヒントもご覧ください。
この投稿を気に入っていただけたなら、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでもご覧いただけます。
Yvonne Manders
I made a mistake and solved it.
WPBeginner Support
Glad you were able to solve the issue
管理者
Yvonne Manders
Hi,
I installed the collapse-o-mattic and pasted the code in the functions.php file.
After that I pasted the shortcode [expand title=”Recent Posts”][recentposts][/expand] in a textwidget, but nothing happened.
Am I missing something?
Best regards, Yvonne
WPBeginner Support
You would want to place the shortcode in the text editor rather than the visual editor to ensure you don’t have styling blocking the shortcode from working.
管理者
Erika
Line 3 has an error. The closing option tag is missing its closing “/”. This is generating a blank option in the menu.
WPBeginner Support
Thank you for letting us know, the code should be fixed now
管理者
Amjad
Hi there. I have used above code to show all my posts in a drop down but its not sorted. I have two questions here:
1. How can i sort posts by title?
2. How can i show posts of a specific category in dropdown instead of showing all posts?
WPBeginner Support
For what it sounds like you’re wanting, you would want to take a look at our other tutorial here: https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
管理者
Rolando
Nice article! How can you make it by a specific category and not just all your categories? Also, can it be done alphabetical?
Farai Mugaviri
Thank you so much for the great help there. I wouldalso want to display categories in a dop-down list, if you can help with that…. But now what if I update my Wordpress, is it even possible? I saw somewhere they talked about challengess when updating the wordpress and risking losing data because of hardcoding the PHP functions
Robert
Great tool, thanks for that!
Is it possible to sort the post output in the list in alphabetical order?
Thanks in advance for your reply!
Regards,
Robert
Andre
Its possible to show the posts dropdown with a button to submit?
‘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 .= ‘
FIND SCHOOL NOW
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’);’
Emily Johns
Very neat Stuff!! Great Read and easy to understand.
NG SHAIKH
It is an excellent article. Beginners like me can understand power of WordPress and its plug-ins by such articles.
I would be enlightened if some articles are written to display a message on specific page and not on all posts and pages.
It will also help beginners if a few articles are written to display a form for user entry which can be saved in the database
Julie S
I really like the drop-down menu of recent posts. How can I control the width of this drop down menu? It defaults too long for my sidebar.
WPBeginner Support
Try adjusting the width using CSS:
select#rp_dropdown { width:200px; }1-click Use in WordPress
管理者