Wie funktioniert ein Abschnitt mit Aufzählungszeichen auf unserer Seite?

Wir haben eine statische Site in eine WordPress-Site mit einem von uns entworfenen und erstellten Thema umgewandelt. Wir wissen jedoch nicht, wie wir dieses Problem angehen können, da wir keine große Erfahrung mit WordPress haben.

Unsere Seite hat mehrere Seiten, die natürlich die Vorlage page.php verwenden. Das funktioniert gut für den Inhalt. Aber jede Seite hat eine Liste mit Aufzählungszeichen (es ist eine andere Gruppe von Aufzählungszeichen für jede Seite).

Bildbeschreibung hier eingeben

Der Website-Inhaber möchte sowohl den Inhalt der Seite (OK) als auch die Aufzählungsliste bearbeiten.

Nicht genug Erfahrung in WordPress, um den besten Ansatz dafür zu kennen. Es ist nicht wirklich eine Seitenleiste (wie ich es verstehe). Braucht es ein Plugin? Ist es normal, den Eigentümer der Website anzuweisen, dass er

  • Tags (plus classnnamen und einige divs und span) in seinem Seiteninhalt verwenden muss? Oder gibt es eine Lösung mit PHP, um die richtigen Kugeln für die richtige Seite aufzurufen? Sollte es ein Widget sein?

    Das kann nicht so ungewöhnlich ein Problem sein, also was ist die normale Lösung?

    Solutions Collecting From Web of "Wie funktioniert ein Abschnitt mit Aufzählungszeichen auf unserer Seite?"

    Im Allgemeinen, da WordPress das größte Verkaufsargument ist, ist das Content-Management, was die Kunden am meisten wollen, sind Sites, die sie bearbeiten können, ohne irgendeinen Code im Weg zu haben oder irgendwelche Chancen, dass sie etwas kaputt machen könnten – also HTML in den Texteditor über ungeordnete / geordnete Listen zu stellen schlechte Praxis und vereitelt den Punkt, Inhalte leicht zu verwalten.

    Nach dem Bild, das Sie als Beispiel angegeben haben, sieht es so aus, als ob diese Aufzählungslisten nicht inline mit dem Rest des Inhalts sind, so dass Sie HTML benötigen, um dieses Layout zu erhalten. Um den HTML-Code außerhalb des Texteditors zu behalten und die Bearbeitung für Sie und Ihren Kunden so sauber wie möglich zu halten, würde ich vorschlagen, sich nicht mehr auf page.php zu verlassen und eine eigene Seitenvorlage zu erstellen.

    In der Vorlage können Sie alle benötigten HTML-Dokumente ausgeben und die Schleife verwenden, um im Haupttext-Editor etwas aufzurufen. Ohne Plugins zu verwenden, können Sie die Vorteile von benutzerdefinierten Feldern oder mit einem Plugin nutzen, mit einem Magic Field, wo sie ihre Aufzählungsliste bearbeiten können. Wenn Ihre Vorlage jeder Seite zugewiesen wird, werden beim Aufrufen des Seiteninhalts und der aus einem Feld stammenden Liste nur die Inhalte dieser bestimmten Seite abgerufen. Und es wird auch komplizierten HTML im Texteditor eliminieren, indem es in der Vorlage verbleibt, die sich um Ihre Schleifen und functionalität herum befindet.

    Wenn Sie wirklich, wirklich nicht möchten, dass der Client überhaupt HTML schreiben muss, sogar uls / lis, wenn Sie Magic Fields und Ihre eigene Vorlage verwenden, können Sie ein Feld erstellen, das auf dem WP-Admin dupliziert werden kann und benutze eine foreach mit PHP in deiner Vorlage. Etwas wie das:

     < ?php if ( get_field('list-item') == TRUE ) : ?>  
      < ?php $listItems = get_field('list-item'); foreach($listItems as $listItem) { echo "
    • " . $listItem . ""; } ?>
    < ?php endif; ?>

    Dieses Beispiel wird im Magic Fields 2 Wiki unter “Arbeiten mit Gruppen, doppelten Gruppen und doppelten Feldern” näher erläutert. Im Grunde nimmt es die Felder von dieser Seite, und mit jedem doppelten Feld wird es in ein li eingewickelt. Und wenn Ihr Client das Feld überhaupt nicht verwendet, wird die if-statement um die gesamte Sache nur das HTML vollständig auf dem Front-End verstecken. Hoffe, das hilft dir, in die richtige Richtung zu gehen. Viel Glück!

  • Klicken Sie einfach im visuellen Editor von WordPress auf das Symbol “Liste”, um eine Liste zu erstellen, und umgeben Sie dann die Liste in der “Codeansicht” mit

    Das wahrscheinlich am benutzerfreundlichste wäre, einen neuen visuellen Editor zu erstellen, der die

    und die Liste für Sie erstellt. Ihr Benutzer würde dann einfach jeden Listeneintrag hinzufügen …

    In Kommentaren haben Sie einige gute Ideen für eine komplexe Lösung, aber wenn Ihr Client eine statische Site verschiebt und Listen nicht sehr oft ändert, sollten Sie einfach Listen in einer div / sidia mit einer benutzerdefinierten CSS-class umbrechen.

    Das Hinzufügen einer komplexeren Lösung ist nicht unbedingt eine gute Sache. Vor allem, wenn Listen relative Links zu Websiteinhalten enthalten. Mit simply side + css können Sie Inhalte in der Zukunft ohne Plugins / zusätzlichen Code usw. einfach auf neue Seiten / Themen verschieben. Shortcodes / Metaboxen usw. brechen diese Trennung von Inhalt und Mechanik, daher sollte IMHO nach Möglichkeit vermieden werden.

       

    Wenn der Listeninhalt dynamisch sein sollte und beispielsweise die letzten 10 Beiträge anzeigen soll, ist die Verwendung von Metabox + Shordcodes der beste Weg, dies zu tun.

    Dies ist eine Lösung, die Sie Ihrem Kunden zur Verfügung stellen können, indem Sie, wie bereits gesagt, eine Metabox verwenden. Sie können dies in Ihrer functions.php kopieren / einfügen:

     add_action( 'add_meta_boxes', 'bullet1545_add_custom_box' ); add_action( 'save_post', 'bullet1545_save_custom_meta_box' ); function bullet1545_add_custom_box( $post ) { add_meta_box( 'Bullet Meta Box', // ID, should be a string 'Side List', // Meta Box Title 'bullet1545_custom_meta_box_content', // Your call back function, this is where your form field will go 'post', // The post type you want this to show up on, can be post, page, or custom post type 'normal', // The placement of your meta box, can be normal or side 'high' // The priority in which this will be displayed ); } function bullet1545_save_custom_meta_box(){ global $post; // Get our form field if( $_POST ) : $bullet1545_custom_meta = esc_attr( $_POST['bullet1545-custom-meta-box'] ); // Update post meta update_post_meta($post->ID, '_bullet1545_custom_meta', $bullet1545_custom_meta); endif; } function bullet1545_custom_meta_box_content( $post ) { // Get post meta value using the key from our save function in the second paramater. $bullet1545_custom_meta = get_post_meta($post->ID, '_bullet1545_custom_meta', true); echo ' '; echo ''; } 

    Dadurch erhalten Sie eine Textarea in Ihrer Nachbearbeitungsseite.

    Vorderes Ende

    Jetzt könnten Sie in Ihrer page.php folgenden Code verwenden:

     < ?php $myBullets = get_post_meta(get_the_ID(), "_bullet1545_custom_meta", true); // retrieve the content of your metabox echo '
      '; $textareaData = '
    • '.str_replace(array("\r","\n\n","\n"),array('',"\n","
    • \n
    • "),trim($myBullets,"\n\r")).'
    • '; // this line converts all the lines that are inside your textarea in li lines, removing empty lines echo ''; ?>

    Ich hoffe, dass es so klar wie möglich ist. Mit dieser Lösung müssen Sie auch kein Plugin pflegen und der Website-Besitzer muss keine li-Tags verwenden.

    Dies ist ziemlich einfach, indem Editor-Stile aktiviert werden. Es fügt dem Editor ein Styles-Drop-down hinzu, mit dem Sie problemlos classnnamen zu bestimmten Elementen hinzufügen können.

    Fügen Sie Ihrer functions.php Folgendes hinzu:

     // pushes the style select dropdown into the list of // TinyMCE controls on the 2nd line of the toolbar add_filter( 'mce_buttons_2', 'custom_mce_buttons_2' ); function custom_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons; } // this adds items to the styles dropdown we just added. // The options in the array control how it works, you can // add styles that wrap content in a block or inline element // with a specific class, you target specific elements only // and more add_filter( 'tiny_mce_before_init', 'custom_mce_before_init' ); function custom_mce_before_init( $settings ) { // array of items for styleselect dropdown $style_formats = array( array( 'title' => 'Bulleted list', 'selector' => 'ul', 'classes' => 'alignright big-bulletted-list' ) ); $settings['style_formats'] = json_encode( $style_formats ); return $settings; } 

    Vollständige Anleitung hier: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/

    Damit der Client die vorgenommenen Änderungen sehen kann, können Sie ein Editor-Stylesheet hinzufügen. Wieder in deinen functionen.php verwende:

     add_editor_style('editor.css'); 

    In dieser editor.css könnten Sie dann passende Stile zB hinzufügen.

     .alignright { float: right; } .big-bulleted-list { padding: 20px; list-style: none; } .big-bulleted-list li { padding-left: 20px; background: url(bullet.png) no-repeat left center; } 

    Codex-Seite zu Editor-Stilen finden Sie hier: http://codex.wordpress.org/Editor_Style

    Sie können Ihre Aufzählungslisten mit einem div im Texteditor umschließen und dann das div entsprechend formatieren. Keine Notwendigkeit, Meta-Boxen oder Shortcodes zu erstellen. Beispielsweise:

     
    • List Item 1
    • List Item 1
    • List Item 1
    • List Item 1
    • List Item 1

    Dann style einfach die class entsprechend. In unserem Beispiel wird so etwas die Listen direkt auf den Text übertragen.

     .blright { float:right; width:auto; max-width:30%; } .blright ul { width: 100%; display:block; list-style: none; } .blright ul li{ list-style: disc outside url("images/li.png"); } 

    JSFIDDLE
    http://jsfiddle.net/rCaCw/2/