我认为你的问题是XY Problem. 在WordPress中,您不能在post编辑器中创建这样的菜单。您使用菜单。
一旦你从这一点开始思考你的问题,一切都很简单。:)
首先在主题的functions.php
:
add_action( \'wp_loaded\', \'wpse_78027_register_menu\' );
function wpse_78027_register_menu()
{
register_nav_menu(
\'services\',
__( \'A list of your services. Edit the description!\', \'theme_textdomain\' )
);
}
现在,您可以在中获得菜单界面
wp-admin/nav-menus.php
.
然后,您需要一个自定义助行器来显示不仅仅是链接文本。你很幸运,这个问题has been solved too. 您需要非常简单的标记,所以…
/**
* Custom walker to render the services menu.
*/
class WPSE_78027_Services_Menu extends Walker_Nav_Menu
{
public function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 )
{
$output .= \'<li>\';
$attributes = \'\';
if ( ! empty ( $item->url ) )
$attributes .= \' href="\' . esc_url( $item->url ) .\'"\';
$description = empty ( $item->description )
? \'<p>Please add a description!</p>\'
: wpautop( $item->description );
$title = apply_filters( \'the_title\', $item->title, $item->ID );
$item_output = "<a $attributes><h3>$title</h3>
<div class=\'service-description\'>$description</div></a>";
// Since $output is called by reference we don\'t need to return anything.
$output .= apply_filters(
\'walker_nav_menu_start_el\'
, $item_output
, $item
, $depth
, $args
);
}
}
现在您必须将页面添加到该菜单中。不要忘记编辑描述,或
force that field to be visible:
现在把它粘在一起。打开要使用菜单的页面模板PHP文件并添加:
wp_nav_menu(
array (
\'container\' => FALSE,
\'depth\' => 1,
\'items_wrap\' => \'<ul id="service-menu">%3$s</ul>\',
\'theme_location\' => \'services\',
\'walker\' => new WPSE_78027_Services_Menu
)
);
完美的
在样式表中,现在可以设置此列表的样式,而不会影响任何其他表。
示例代码:
#service-menu {
background: #aaa685;
border-collapse: separate;
border-spacing: 10px;
display: table;
width: 100%;
}
#service-menu,
#service-menu li {
border: 3px solid #e9e9e9;
}
#service-menu li {
display: table-cell;
list-style: none;
padding: 10px;
width: 25%;
}
#service-menu,
#service-menu a {
color: #fff;
}
#service-menu h3 {
font: bold 1.5em/1 serif;
margin: 0 0 .5em;
text-transform: uppercase;
}
.service-description {
font: .9em/1.4 sans-serif;
}
结果:
写这个答案比写代码要花更多的时间。:)