Möchten Sie Ihr eigenes Dropdown-Menü für benutzerdefinierte Stile erstellen? Es gibt wahrscheinlich ein Plugin dafür, aber wir haben einen schnellen Code-Schnipsel erstellt, den Sie verwenden können, um benutzerdefinierte Stile-Dropdowns im visuellen Editor von TinyMCE zu erstellen.
Anweisungen:
Sie müssen diesen Code nur zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin einfügen:
function themeit_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
$settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,';
$style_formats = array(
array( 'title' => 'Button', 'inline' => 'span', 'classes' => 'button' ),
array( 'title' => 'Green Button', 'inline' => 'span', 'classes' => 'button button-green' ),
array( 'title' => 'Rounded Button', 'inline' => 'span', 'classes' => 'button button-rounded' ),
array( 'title' => 'Other Options' ),
array( 'title' => '½ Col.', 'block' => 'div', 'classes' => 'one-half' ),
array( 'title' => '½ Col. Last', 'block' => 'div', 'classes' => 'one-half last' ),
array( 'title' => 'Callout Box', 'block' => 'div', 'classes' => 'callout-box' ),
array( 'title' => 'Highlight', 'inline' => 'span', 'classes' => 'highlight' )
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzuf ilde{A}gen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress kopieren / einf ilde{A}gen, damit Sie Ihre Website nicht versehentlich besch ilde{A}digen.
Wenn Ihnen dieser Code-Schnipsel gefallen hat, werfen Sie bitte einen Blick auf unsere anderen Artikel auf der Website, wie z. B.: 46 der größten Marken der Welt, die WordPress aktiv nutzen und wie man ein benutzerdefiniertes Registrierungsformular in WordPress erstellt.
Scheint nicht mehr zu funktionieren. Ich habe dies gerade hinzugefügt, es ist nichts in meinem MCE passiert. Vielleicht ein Konflikt mit meinem Theme/Page Builder? (Madrigal/WPBakery)
Entschuldigung, dass ich einen alten Beitrag ausgrabe, aber gibt es eine Möglichkeit, dies zu tun und 2 separate 'Format'-Dropdowns zu erstellen? Ich hätte gerne eines mit P-Optionen und eines mit Farboptionen, wenn möglich.
Vielen Dank dafür. Ich habe einen anderen Code-Schnipsel für denselben Effekt verwendet, aber nach dem Upgrade auf WP mit dem neuen TinyMCE-Plugin funktionierte dieser Code nicht mehr. Ich habe dies versucht und es funktioniert immer noch.
Ich weiß es zu schätzen.
Perfekt, freut mich zu hören, dass dieser TinyMCE-Schnipsel Ihnen helfen konnte!
Vielen Dank dafür. Ich habe einen anderen Code-Schnipsel für denselben Effekt verwendet, aber nach dem Upgrade auf WP mit dem neuen TinyMCE-Plugin funktionierte dieser Code nicht mehr. Ich habe dies versucht und es funktioniert immer noch.
Ich weiß es zu schätzen.
Vielen Dank dafür. Ich habe einen anderen Code-Schnipsel für denselben Effekt verwendet, aber nach dem Upgrade auf WP mit dem neuen TinyMCE-Plugin funktionierte dieser Code nicht mehr. Ich habe dies versucht und es funktioniert immer noch.
Ich weiß es zu schätzen.
Vielen Dank dafür. Ich habe einen anderen Code-Schnipsel für denselben Effekt verwendet, aber nach dem Upgrade auf WP mit dem neuen TinyMCE-Plugin funktionierte dieser Code nicht mehr. Ich habe dies versucht und es funktioniert immer noch.
Ich weiß es zu schätzen.
Vielen Dank dafür. Ich habe einen anderen Code-Schnipsel für denselben Effekt verwendet, aber nach dem Upgrade auf WP mit dem neuen TinyMCE-Plugin funktionierte dieser Code nicht mehr. Ich habe dies versucht und es funktioniert immer noch.
Ich weiß es zu schätzen.
Vielen Dank dafür. Ich habe einen anderen Code-Schnipsel für denselben Effekt verwendet, aber nach dem Upgrade auf WP mit dem neuen TinyMCE-Plugin funktionierte dieser Code nicht mehr. Ich habe dies versucht und es funktioniert immer noch.
Ich weiß es zu schätzen.
Toller Beitrag Kevin, danke. Gibt es eine Möglichkeit, die Stile im Editor zu entfernen, ähnlich wie der Benutzer auf die Schaltfläche 'Formatierung entfernen' klicken kann?
Danke Kevin,
Das ist genau die Lösung, nach der ich gesucht habe.
Perfekt, freut mich zu sehen, dass Ihnen der Schnipsel gefällt 🙂
brillant! DANKE!!! Das ist genau die Lösung, nach der ich gesucht habe... sogar mit den richtigen Stilen, die bereits fertig sind!
@twitter-17003417:disqus Cool, freut mich, dass Sie diesen WordPress-Schnipsel nützlich finden. Die richtigen Stile, wow, es ist, als könnte ich Ihre Gedanken lesen 😉 Prost, viel Spaß...
Danke Kevin,
Ich habe eine Lösung gefunden, die mit Zeilenumbrüchen mit dem More Tag (Inhalt teilen) funktioniert.
Es ist auch sehr einfach hinzuzufügen.
Ich möchte hier keine URLs posten, aber das hat mir sehr geholfen.
http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, entschuldige, aber ich habe noch eine letzte Frage.
Der Code funktioniert einwandfrei, es gibt nur ein kleines Problem damit, dass WordPress jeden Absatz in eine einzelne linke oder rechte Spalte einfügt.
Das ist meine Funktion, nichts Besonderes.
function themeit_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons;}add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );function themeit_tiny_mce_before_init( $settings ) { $settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,'; $style_formats = array( array( 'title' => 'Spalten hinzufügen' ), array( 'title' => '← Spalte', 'block' => 'div', 'classes' => 'content-col-left' ), array( 'title' => 'Spalte →', 'block' => 'div', 'classes' => 'content-col-right' ) ); $settings['style_formats'] = json_encode( $style_formats ); return $settings;}add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Und wenn ich anfange, eine Geschichte zu schreiben,
Nehmen wir an, es ist eine Geschichte mit 3 Absätzen, und wenn ich fertig bin, wähle ich den gesamten Inhalt (3 Absätze) zusammen aus und klicke auf die Schaltfläche Stil > Linke Spalte des TinyCME-Editors, aber er umschließt jeden Absatz in eine einzelne ...
Das ist sehr frustrierend zu sehen und aus irgendeinem Grund bekomme ich es nicht zum Laufen.
Ich möchte, dass meine 3 Absätze in P-Tags eingeschlossen werden und alle 3 P-Tags zusammen in einem Div mit der Klasse left-column eingeschlossen werden.
Hallo B.J. Ja, ich kann sehen, was du meinst, das wäre frustrierend, aber zu dem Zeitpunkt, an dem die Dinge eingefügt werden, wäre das TinyMCE und nicht Teil meines Snippets, also denke ich nicht, dass etwas getan werden kann. Das Snippet fügt nur neue Einstellungen hinzu,
Hast du jedoch versucht, einen Zeilenumbruch hinzuzufügen, nachdem es die drei Absätze zu einem zusammengeführt hat? Behebt das die Dinge? Ich werde mich damit beschäftigen und sehen, ob ich etwas für dich tun kann.
Vielen Dank, Kevin,
Kein Problem, froh, dass ich helfen konnte.
Könntest du Spalten mit diesen Dropdown-Stilen erstellen?
Wie im Dropdown-Menü:
Spalte hinzufügen 1 (dies fügt diesen Code hinzu)
Der Cursor sollte hier sein, um Inhalt in P zu schreibenWählen Sie danach im Dropdown-Menü Spalte hinzufügen 2
Zum Hinzufügen einer zweiten Textspalte neben der ersten.
Ich denke, es ist sehr schwierig, Text in 2 Spalten im Content-Entry-Div aufzuteilen, wenn man nicht weiß, wie HTML funktioniert.
Ich möchte dies für einen meiner Kunden wissen, der nur mit einem WYSIWYG-Editor arbeiten kann, aber die Option haben möchte, zwei Spalten im Entry-Div zu haben.
Entschuldigung für mein schlechtes Englisch 🙁
Hallo B.J., ja, Sie könnten ein Div mit der Klasse class=”rgt-column” und ein weiteres mit der Klasse class=”lft-column” hinzufügen. Dann liegt es nur an Ihnen, wie Sie das CSS einrichten, um dies als Spalten funktionieren zu lassen. Wenn Sie das CSS zum Erstellen der Spalten im Editor verwenden möchten, können Sie diesen kleinen Code hinzufügen und ein neues Stylesheet mit dem Spalten-Code erstellen.
function wps_add_editor_style() {
add_editor_style( ‘editor-style-columns.css’ );
}
add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );Auf diese Weise können sie den Inhalt in mehreren Spalten sehen. Möglicherweise müssen Sie ein wenig herumprobieren, um es so zum Laufen zu bringen, wie Sie es möchten.