wordpress下拉菜单_如何在WordPress中将最近的帖子显示为下拉列表

wordpress下拉菜单

You’re probably familiar with the Category widget in WordPress. Recently, one of our readers asked us if it was possible to display recent posts in a drop down as well. In this article, we will show you how to show recent posts as a drop down in WordPress.

您可能熟悉WordPress中的Category小部件。 最近,一位读者问我们是否也可以在下拉列表中显示最近的帖子。 在本文中,我们将向您展示如何以WordPress的下拉列表形式显示最近的帖子。

Add recent posts as drop down menu
为什么以及谁需要下拉列表中的最新帖子? (Why and Who Needs Recent Posts in Drop Down?)

WordPress comes with a built-in recent posts widget that you can add to any sidebar or widget ready area.

WordPress带有一个内置的最新帖子小部件 ,您可以将其添加到任何侧栏或小部件就绪区域。

This widget simply displays a list of recent posts, and you can choose the number of posts you want to show. But if you want to show more than 5-10 posts, then the list will take a lot of space in your sidebar.

该小部件仅显示最近发布的列表,您可以选择要显示的发布数量。 但是,如果您想显示5-10个以上的帖子,则该列表将在边栏中占用大量空间。

Some WordPress users may need a compact way to display recent posts. In that case, using drop downs or collapsible lists can help you save space.

一些WordPress用户可能需要一种紧凑的方式来显示最新帖子。 在这种情况下,使用下拉列表或可折叠列表可以帮助您节省空间。

Let’s take a look at couple of different ways to show recent posts as a drop down menu in WordPress.

让我们看一下几种不同的方式来显示最近的帖子作为WordPress中的下拉菜单。

在普通的下拉菜单中显示WordPress最近的帖子(手动代码) (Showing WordPress Recent Posts in a Plain Drop Down Menu (Manual Code))

This method uses the built-in wp_get_recent_posts function. All you need to do is copy and paste the following code in your theme’s functions.php file or a site-specific plugin.

此方法使用内置的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');

Now you can use the shortcode [rp_dropdown] in your WordPress post, pages, and text widgets. It will look like this:

现在,您可以在WordPress帖子,页面和文本小部件中使用简码 [rp_dropdown] 。 它看起来像这样:

Recent posts in a drop down menu on a WordPress site
使用插件添加可折叠的最新帖子 (Adding Collapsible Recent Posts Using Plugin)

The above method simply lists your recent posts in a drop down form. Another way to save space is by adding a collapsible list of recent posts which expands when users click on it.

上面的方法只是以下拉列表的形式列出了您最近的帖子。 节省空间的另一种方法是添加可折叠的近期帖子列表,当用户单击该列表时,列表会扩展。

First thing you need to do is install and activate the Collapse-O-Matic plugin. It works out of the box, and there are no settings for you to configure.

您需要做的第一件事是安装并激活Collapse-O-Matic插件。 它开箱即用,没有可供您配置的设置。

The plugin simply allows you to show anything in a collapsible menu using a shortcode.

该插件仅允许您使用简码在可折叠菜单中显示任何内容。

Before we use this plugin, we need a way to easily show recent posts anywhere we want. Simply add this code to your theme’s functions.php file or a site-specific plugin.

在使用此插件之前,我们需要一种方法可以轻松地在需要的任何地方显示最新帖子。 只需将此代码添加到主题的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');

This code simply allows you to display a list of recent posts using the shortcode [recentposts].

此代码仅允许您使用简码[recentposts]显示最近的帖子列表。

Now we will add our shortcode in the Collapse-O-Matic shortcode to create a collapsible list of recent posts.

现在,我们将我们的简码添加到Collapse-O-Matic简码中,以创建可折叠的近期帖子列表。

Simply add the shortcode like this:

只需添加如下的简码:

[expand title="Recent Posts"][recentposts][/expand]

[expand title="Recent Posts"][recentposts][/expand]

You can add this shortcode in a text widget, posts, or pages on your WordPress site. This is how it looked on our test site.

您可以将此短代码添加到WordPress网站上的文本小部件,帖子或页面中。 这就是我们测试站点上的样子。

Collapsable list of recent posts

That’s all, we hope this article helped you show recent posts as drop down in WordPress. You may also want to see these 6 tips to create a killer editorial calendar in WordPress.

仅此而已,我们希望本文能帮助您显示WordPress中的最新帖子。 您可能还想看一下在WordPress中创建杀手级编辑日历的6个技巧

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-show-recent-posts-as-a-drop-down-in-wordpress/

wordpress下拉菜单

好的,下面是一个简单的WordPress导航自适应下拉菜单的代码示例。 1. 首先,您需要在您的WordPress主题添加以下代码片段以启用WordPress导航菜单: ```php <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'fallback_cb' => '__return_false', ) ); ?> ``` 2. 然后,在您的CSS样式表添加以下代码片段来创建自适应下拉菜单: ```css /* 隐藏下拉菜单 */ .nav-menu ul { display: none; } /* 显示当前菜单项下的下拉菜单 */ .nav-menu li:hover > ul { display: block; } /* 隐藏顶级菜单项下的下拉箭头 */ .nav-menu li.menu-item-has-children > a:after { display: none; } /* 显示下拉菜单项的右侧箭头 */ .nav-menu li.menu-item-has-children > ul:before { content: '\f107'; font-family: 'FontAwesome'; font-size: 12px; display: inline-block; margin-right: 5px; } ``` 3. 最后,您需要在您的WordPress导航菜单添加“子菜单”类以指示该菜单项包含下拉菜单。例如: ```php <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'fallback_cb' => '__return_false', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s<li class="menu-item-has-children"><a href="#">Dropdown Menu</a><ul class="sub-menu">%4$s</ul></li></ul>', ) ); ?> ``` 请注意,上面的代码,我们在WordPress导航菜单手动添加了一个包含子菜单的“Dropdown Menu”菜单项。 希望这个简单的代码示例能够帮助您创建一个自适应的WordPress导航下拉菜单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值