서식이 지정된 표와 같은 메뉴 만들기

귀하의 질문이 XY 문제 에 대한 완벽한 예라고 생각합니다. WordPress에서는 게시물 편집기에서 이러한 메뉴를 만들지 않습니다. 메뉴를 사용합니다.

이 시점부터 문제에 대해 생각하기 시작하면 모든 것이 쉽습니다. :)

먼저 테마의 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에 메뉴 인터페이스가 생겼습니다.

그런 다음 링크 텍스트 이상의 것을 표시하려면 맞춤 보행기가 필요합니다. 운이 좋습니다.이 문제는 해결되었습니다 . 매우 간단한 마크 업이 필요하므로…

 /**
 * 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
        );
    }
}
 

이제 해당 메뉴에 페이지를 추가해야합니다. 설명을 편집하거나 해당 필드를 적용하는 것을 잊지 마십시오. 공개 :

이제 함께 붙입니다. 메뉴를 사용할 페이지 템플릿 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;
}
 

결과 :

이 답변을 작성하는 것은 코드를 작성하는 것보다 더 많은 시간이 걸렸습니다. :)

I think your question is a perfect example for the XY Problem. In WordPress you do not create such a menu in a post editor. You use a menu.

Once you start thinking about your problem from this point, everything is easy. :)

First register a custom navigation menu for this list in your theme’s 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' )
    );
}

Now you get an interface for the menu in wp-admin/nav-menus.php.

Then you need a custom walker to show more than just the link text. You are lucky, this problem has been solved too. You need very simple markup, so …

/**
 * 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
        );
    }
}

Now you have to add the pages to that menu. Do not forget to edit the description, or force that field to be visible:

And now stick it together. Open the page template PHP file where you want to use the menu and add:

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
    )
);

Perfect.

In your stylesheet you can style this list now without affecting any other table.

Sample code:

#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;
}

Result:

Writing this answer took more time than writing the code. :)