Erstellen Sie ein formatiertes tabellenähnliches Menü

Question

Erstellen Sie ein formatiertes tabellenähnliches Menü

4

6321 2013-01-02

Ich habe die Website vorein paar Wocheneingerichtet undeinige weitere Dinge hinzugefügt Mein Freund,esmussjedocheine einfachere Möglichkeitgeben,Inhalte über WordPress zuerstellen. Ich habees sogar schwer damit und codiere die Hälfte davon (oderfüge zumindest Stile hinzu,indemichmir das CSS usw. ansehe)

Ich schauemir speziell die Dienste an (so ziemlich daseinzige auf dieser Testseite) und wieman sie anordnet. Siebefinden sichin hässlichen Tabellen,von denenichglaube,ich habe sogar vergessen,wieman siebenutzt,aber wie sollich sonst solche Inhalte auslegen? Gibtesein Plugin,dasmir das Leben leichtermacht (Premium? - Ich habe von Typen oder Ansichtengehört,ist dasein gutes Plugin?).

Wasistjedoch derbeste Weg,um diese Zellen aufzufüllen,daichbisher darangearbeitet habe? Ich habefast alles ausprobiert,aberesfunktioniertentwedernicht oderesbetrifft ALLE Tabellen auf der Seite (die ursprüngliche Seite,auf deres sein wird) welches hierist ).

Ich habe den Garble-Tabellencode hier hinzugefügt,damit Sieihn sehen können.

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

I've just put the site up a couple weeks ago and adding some more things to it for my friend however there's got to be an easier way to lay content out over wordpress. I've having a hard time with it even and I'm codding half of it (or at least adding styles, looking at the CSS, ect)

I'm specifically looking at the services (pretty much the only thing on this test page) and how to lay them out. They are in ugly tables of which I think I even forgot how to use but how else am I supposed to lay out content like this? Is there a plugin that makes my life easier (Premium? - I've heard of Types or Views, is that a good plugin?).

However as I've done the work on this so far, what is the best way to get padding inside those cells? I've tried almost everything but it either doesn't work or it affects ALL tables on the page (the original page where it will be which is here).

I've added the garble table code here is you want to look at it..

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

- Sie haben diese Frage vor ungefähr zwei Wochen untereinem anderen Benutzernamengepostet.Es hieß "Einrichteneinesbearbeitbaren Layoutsim WordPress-WYSIWYG-Editor".Sie habenesentfernt,aberesbefindet sichimmernochim Google-Cache.Diesistein nahes Kopieren/Einfügen von diesem.Bittetu dasnicht.
  
  You posted this question under a different username about two weeks ago. It was called "Setting up an editable layout in the wordpress WYSIWYG editor". You removed it but it can still be found in Google's cache. This is a near copy/paste of that one. Please don't do that.
  - 0
  - 2013-01-02
  - s_ha_dum
- Ichmussteeserneut veröffentlichen,weiliches versehentlichgelöscht habe undesmichnicht wiedertun ließ.Ich habenicht vor,erneut zuposten,aber wennesnichtgefunden werden kann,mussteichesirgendwie wieder aufbauen.
  
  I had to re-post it because I accidentally deleted it and it wouldn't let me do it again. I don't mean to re-post but if it can't actually be found I needed to get it back up some how.
  - 0
  - 2013-01-02
  - kia4567
- Diesisteine HTML/CSS-Frage,keine WordPress-Frage.
  
  This is an HTML/CSS question, not a WordPress one.
  - 0
  - 2013-01-02
  - s_ha_dum
- Ich suchenacheinem Plugin,das den WYSIWYG-Editor organisiert.Das Standard-Padding: 10pxfunktioniertin diesem Fallnicht,daherglaubeich,dassesmit WordPress zutun haben wird.
  
  I am looking for a plugin that organizes the WYSIWYG editor though. The standard padding: 10px isn't working in this case, so I believe it will have to do with wordpress.
  - 0
  - 2013-01-02
  - kia4567
- Plugin-Empfehlungen sindnicht zum Thema.Siehe die [FAQ].
  
  Plugin recommendations are off topic. See the [faq].
  - 0
  - 2013-01-02
  - s_ha_dum

1 Antworten

Stimmen

fuxia · Accepted Answer · 2013-01-03

4

2013-01-03

Ich denke,Ihre Frageistein perfektes Beispielfür das XY-Problem . In WordPresserstellen Sieein solches Menünichtin einem Post-Editor. Sie verwendenein Menü.

Sobald Sie von diesem Punkt an über Ihr Problemnachdenken,ist alleseinfach. :)

Registrieren Sie zuerstein benutzerdefiniertes Navigationsmenüfür diese Listein der functions.php Ihres Themas:

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

Jetzterhalten Sieeine Schnittstellefür das Menüin wp-admin/nav-menus.php.

Dannbenötigen Sieeinen benutzerdefinierten Walker,ummehr alsnur den Linktext anzuzeigen. Sie haben Glück,dass dieses Problem aufgetretenist auchgelöst . Siebenötigenein sehreinfaches Markup,also ...

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

Jetztmüssen Sie die Seiten zu diesem Menü hinzufügen. Vergessen Sienicht,die Beschreibung zubearbeiten oder :

Undjetzt kleben Siees zusammen. Öffnen Sie die Seitenvorlagen-PHP-Datei,in der Sie das Menü verwendenmöchten,undfügen Sie Folgendes hinzu:

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

Perfekt.

In Ihrem Stylesheet können Sie diese Listejetztformatieren,ohne dass dies Auswirkungen aufeine andere Tabelle hat.

Beispielcode:

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

Ergebnis:

Das Schreiben dieser Antwort dauerte länger als das Schreiben des Codes. :)

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:

enter image description here

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:

enter image description here

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

Quelle
fuxia

Ich habe das _Read More_gelöscht,da viergleichnamige Linksfür Benutzer von Bildschirmleseprogrammen sehr ärgerlich sind und diegesamte Boxein Linkist.

I dropped the _Read More_, because four links with the same name are super annoying for screen reader users, and the whole box is a link.
- 0
- 2013-01-03
- fuxia
Deinerstaunlicher Tosho!Ich werde heute Abend daran arbeiten,wennich Ihnen Punktegeben könnte,dieich würde (nicht,dass Sie siebrauchen. Haha),aberes wäre,Ihnen zu zeigen,wie sehriches schätze,dass Sie sich die Zeitnehmen,diese lange Antwort zu schreibenfürmich.Ich werdemichmit diesem XY-Problembefassen,damitichbeim nächsten Mal sicher die richtige Frage stellen kann.DANKESCHÖN!

Your amazing toscho! I'll be working on this tonight, if I could give you points I would (not that you need them. Haha) but it would be to show you how much I appreciate you taking the time out of your day to write this long answer for me. I'll look into that XY problem so I be sure to ask the correct question for next time. THANKYOU!
- 1
- 2013-01-03
- kia4567