web-dev-qa-db-ja.com

フォーマットされたテーブルのようなメニューを作成する

私はちょうど数週間前にサイトを立ち上げました 私の友人のためにそれにさらにいくつかのことを追加しましたしかし、ワードプレスの上にコンテンツをレイアウトするためのより簡単な方法があるはずです。私はそれでも苦労しています、そして、私はそれの半分をコーディングしています（あるいは少なくともスタイルを追加すること、CSSを見ることなど）。

私は特にサービス（このテストページではほとんど唯一のもの）とそれらをどのようにレイアウトするかを見ています。それらは醜い表の中にあり、私はその使い方を忘れたと思いますが、他にどのようにしてこのようなコンテンツをレイアウトするべきでしょうか。私の生活を楽にするプラグインはありますか（プレミアム？ - タイプやビューについて聞いたことがありますが、それは良いプラグインですか？）。

しかし、これまでの作業を終えたので、これらのセルの内側に余白を入れるための最善の方法は何ですか？私はほとんどすべてを試しましたが、それはうまくいかないか、ページ上のすべてのテーブルに影響を与えます（ になる元のページ - ここでは です）。

ここで私は文字通りのテーブルコードを追加しました。

<table style="width: 1000px; height: 200px; border-color: #e9e9e9; border-width: 3px; border-style: solid; background-color: #aaa685;" border="3" cellspacing="10" cellpadding="10" align="left">
<tbody>
<tr align="left" valign="top">
<td style="border: 5px solid #e9e9e9;">
<h2><span style="color: #ffffff;"> CLIMATE</span></h2>
<p><span style="font-size: x-small; color: #ffffff;">Our smart technology will help you keep you climate suited to your needs.</span></p> <h2><span style="font-size: small; color: #ffffff;">READ MORE</span>
</h2>
</td>
<td style="border: 5px solid #e9e9e9;">
<h2><span style="color:#ffffff;">SECURITY</span></h2>
<p><span style="font-size: x-small; color: #ffffff;">With our 100% quality Home Automation techniques your home is secure 24/7.</span></p>
<h2><span style="font-size: small; color: #ffffff;">READ MORE</span></h2> </td> <td style="border: 5px solid #e9e9e9;"> <h2><span style="color: #ffffff;"> AUDIO</span></h2> <p><span style="font-size: x-small; color: #ffffff;">Along with your smart lights you can have our flexible music system that works.</span></p>
<h2><span style="font-size: small; color:#ffffff;">READ MORE</span></h2>
</td>
<td style="border: 5px solid #e9e9e9;">
<h2><span style="color: #ffffff;"> LIGHTING</span></h2>
<p><span style="color: #ffffff; font-size: x-small;">Now you can have smart lights. Enjoy our advanced lighting system in your home.</span><span style="color: #ffffff;">
<br /> </span></p> <h2><span style="font-size: small; color: #ffffff;">READ MORE</span>
</h2>
</td>
</tr>
</tbody>
</table>
menusformattingtable
4
kia4567

あなたの質問は 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
        );
    }
}

今度はそのメニューにページを追加しなければなりません。説明を編集することを忘れないでください、または そのフィールドが見えるように強制してください ：

enter image description here

そして今それを一緒に固執する。メニューを使用するページテンプレート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;
}

結果：

enter image description here

この答えを書くのは、コードを書くよりも時間がかかりました。 :)

4
fuxia