Share
Bei der Veröffentlichung von WordPress 3.1 wurde eine neue Funktion namens Post Formats eingeführt, mit der Autoren eines von neun Formaten für ihre Beiträge auswählen können. Theme-Entwickler mussten Unterstützung für jedes Format sowie bedingte Tags und CSS hinzufügen, um das Angebot zu nutzen. Jedes Format kann im Frontend mit einem anderen Layout und Design angezeigt werden, obwohl der visuelle Editor im WP-Admin dies nicht widerspiegelt.
In diesem Tutorial werde ich mich darauf konzentrieren, wie wir das Thema für das Zitatpost-Format so anzeigen lassen können, dass das Layout und das Design des Frontends beim Erstellen eines Posts im visuellen Editor wiedergegeben werden.
Insgesamt gibt es nur neun Postformate, die von einem Design unterstützt werden können: beiseite, Galerie, Video, Audio-, Bild, Status, Verknüpfung, Zitat, Plaudern. Weitere Informationen zu allen in WordPress verfügbaren Post-Formaten finden Sie in Braden Keiths Artikel Post Formats Inside and Out.
Zuerst sollten Sie sicherstellen, dass unser Thema Postformate unterstützt und Bearbeitungsstile. Alles, was wir tun müssen, ist das Folgende in unsere aufzunehmen Functions.php Datei:
Accentsconagua
// Dieses Thema formatiert den visuellen Editor mit editor-style.css entsprechend dem Designstil. add_editor_style (); // Unterstützung für die Zitatpostformate hinzufügen add_theme_support ('postformats', array ('quote')); Spitze: Denken Sie daran, dass beim Hinzufügen von PHP zu einer Datei diese sich innerhalb der Öffnung befinden muss und schließen ?> Tags oder es wird nur als HTML angezeigt, anstatt als PHP verarbeitet zu werden.
Um zu steuern, wie unser Zitat-Post-Format im Frontend angezeigt wird, müssen Sie eine Datei erstellen content-quote.php. Dies ist unsere Seitenvorlage für das Angebotsformat, die in den Ordner unseres Themes aufgenommen werden muss. Hier ist der Code, den wir unserer neuen Datei hinzufügen müssen:
>
Diese Seitenvorlage wird auf unseren Index- und Archivseiten verwendet und wird häufig direkt von der aufgerufen index.php Datei mit dem folgenden Code:
Hier ein Beispiel, wie das Zitat-Post-Format in meinem Gridiculous-Theme für WordPress aussieht:
Um die Dinge so aussehen zu lassen, wie wir es wollen, müssen wir ein paar CSS einbauen:
/ * = Zitat ------------------------------------------ ---------------- * / .format-quote .post-content font-size: 18px; Zeilenhöhe: 27px; Polsterung links: 50px; Schriftstil: kursiv; .format-quote p, .format-quote blockquote margin: 0; .format-quote: before font-family: Georgia, serif; Farbe: # 999; Bildschirmsperre; Schriftgröße: 100px; Breite: 50px; Inhalt: '\ 201C'; Höhe: 0; oben: -40px; Position: relativ; .format-quote blockquote border: 0; Polsterung: 0; Schriftgröße: 18px; Farbe: # 555; zitieren text-align: right; font-style: normal; Bildschirmsperre; Rand unten: 10px; zitieren: vor content: '\ 2013 \ 00A0';
Das obige CSS muss in unserem Theme enthalten sein style.css Datei, aber wir müssen auch eine editor-style.css Datei und fügen Sie es zu unserem Thema. Dieses Stylesheet wird verwendet, wenn wir unseren Beitrag im visuellen Editor anzeigen.
Fast jeder einzelne der beeindruckenden Effekte, die Sie im WordPress-Admin erleben, wird mit jQuery erstellt. Da es bereits auf der Admin-Seite enthalten ist, wollen wir einfach darauf aufbauen, damit unser visueller Editor mit unseren Post-Format-Editor-Styles arbeiten kann.
Wenn eine / js Ordner ist in Ihrem Design noch nicht vorhanden. Erstellen Sie einen und fügen Sie eine neue JavaScript-Datei mit dem Namen editor-styles-post-format.js. Nachdem Sie die Datei erstellt haben, öffnen Sie sie in Ihrem bevorzugten Texteditor und fügen Sie Folgendes hinzu:
(function ($) $ (window) .load (function () var init_post_format = $ ('# post-formats-select') .find ('.post-format: checked') .val (); add_post_format ( init_post_format);); $ ('# post-forms-select') .find ('.post-format') .change (function () var post_format = $ (this) .val (); add_post_format (post_format) ;); Funktion add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; (frames ['content_ifr']) $ ('html', frames ['content_ifr']. document). removeClass (). addClass ('format-' + post_format); (jQuery); Wenn unser jQuery-Skript fertig ist, müssen wir es in die Warteschlange stellen, damit es tatsächlich angezeigt wird, wenn wir uns in unserem Admin bewegen. Hier ist ein weiterer kleiner Codeblock, den wir unserem hinzufügen müssen Functions.php Datei:
add_action ('admin_enqueue_scripts', 'editor_style_admin_script'); Funktion editor_style_admin_script ($ hook) if ('post-new.php' == $ hook || 'post.php' == $ hook) wp_enqueue_script ('editor_styles_post_format_js', get_template_directory_uri ().) / js / editor-styles- post-format.js ', true, array (' jquery '),' 1.0.0 '); Wenn alles vorhanden ist, wird jedes Mal, wenn wir auf dem Post-Bearbeitungsbildschirm in unserem Admin ein Post-Format auswählen, eine Klasse zum visuellen Editor hinzugefügt, ähnlich wie sie im Front-End hinzugefügt wird, und wir können in der Vorschau sehen, wie unser Post funktioniert wird so aussehen, wie wir es schaffen. Wir müssen nur sicherstellen, dass beim Erstellen eines Posts der folgende HTML-Code verwendet wird, damit unser CSS ordnungsgemäß funktioniert.
Für Gott ist nur eines unmöglich: In einem Urheberrechtsgesetz auf dem Planeten einen Sinn zu finden. Mark Twain
Es gibt ein paar Schritte, aber am Ende ist es nicht so kompliziert, Dinge zu schaffen, damit unser visueller Editor mit Postformaten arbeiten kann. Glücklicherweise enthalten viele Designs bereits die meisten dieser Elemente, sodass wir möglicherweise nur die neue JavaScript-Datei erstellen und in die Warteschlange stellen müssen. Eines Tages wird vielleicht sogar ein Patch in WordPress erstellt, sodass diese Funktionalität zum Kernbestandteil wird.
Wenn Sie Kommentare oder Feedback zu den oben genannten Informationen haben, können Sie dies gerne weiter unten besprechen.
