WordPress Doc

Codestyling mit Prism ohne Plugin umsetzen

Das Plugin SyntaxHighlighter Evolved ist eine der Standardlösungen, wenn es um das Formatieren von Quellcode geht. Dieser Weg kann allerdings gehörig auf die Performance drücken. Eine Alternative ist das Codestyling mit dem jeweiligen Theme zu verknüpfen und eine kleinere JavaScript-Bibliothek wie Prism oder highlight.js zu nutzen.

Das Beispiel geht unter Verwendung der Bibliothek Prism davon aus, dass die Dateien prism.js und prism.css im Themeordner abgelegt werden. Außerdem soll der visuelle Editor zum komfortablen Formatieren angepasst werden.

functions.php

// Prism JS und CSS einbinden
function codestyling_scripts_styles() {
 wp_register_script( 'prism', get_template_directory_uri() . '/prism.js', '', '0.1', true );
 wp_enqueue_script( 'prism' );
 wp_register_style( 'prism', get_template_directory_uri() . '/prism.css', false, '0.1', 'screen' );
 wp_enqueue_style( 'prism' );
 }
add_action( 'wp_enqueue_scripts', 'codestyling_scripts_styles' );

// TinyMCE-Editor anpassen
function mce_mod( $init ) {
$init['block_formats'] = 'Paragraph=p;Pre=pre;Code=code;Heading 2=h2;Heading 3=h3;Heading 4=h4;Blockquote=blockquote';
$style_formats = array(
array( 'title' => 'CSS', 'block' => 'code', 'classes' => 'language-css'),
array( 'title' => 'HTML/XHTML', 'block' => 'code', 'classes' => 'language-markup' ),
array( 'title' => 'PHP', 'block' => 'code', 'classes' => 'language-php' ),
array( 'title' => 'JavaScript', 'block' => 'code', 'classes' => 'language-javascript' ),
array( 'title' => 'HTTP', 'block' => 'code', 'classes' => 'language-http' ));
$init['style_formats'] = json_encode( $style_formats );
return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');
function mce_add_buttons( $buttons ){
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Referenz

TinyMCE-Editor ab WordPress 3.9: Buttons hinzufügen/entfernen, Formate bearbeiten

Ab WordPress 3.9 hat sich die Ansprache des Editors, der TinyMCE nutzt verändert. Über die functions.php, bevorzugt über ein Plugin, dass im Zweifelsfall einfach deaktiviert werden kann, können weiterhin Bearbeitungen des Editors vorgenommen werden. Im Codebeispiel sind bereits einige Deaktivierungen für Buttons auskommentiert, der Vollständigkeit halber aber aufgeführt.

Buttons entfernen

function delete_buttons($buttons) {
// unset($buttons[0]); // Fett
// unset($buttons[1]);  // Kursiv
// unset($buttons[2]); // Durchgestrichen
// unset($buttons[3]); // Aufzählungszeichen
// unset($buttons[4]); // Nummerierung
// unset($buttons[5]); // Zitat
unset($buttons[6]);  // Horizontale Linie
unset($buttons[7]); // Text links ausrichten
unset($buttons[8]);  // Text zentrieren
unset($buttons[9]);  // Text rechts ausrichten
// unset($buttons[10]); // Link hinzufügen
// unset($buttons[11]); // Link entfernen
unset($buttons[12]); // Weiterlesen-Tag
unset($buttons[14]); // Vollbild-Ansicht
return $buttons;
}
add_filter('mce_buttons', 'delete_buttons');

function delete_buttons_2($buttons) {
// unset($buttons[0]); // Absatzformatierung Auswahl
unset($buttons[1]);  // Unterstreichen
unset($buttons[2]); // Blocksatz
unset($buttons[3]); // Textfarbe
// unset($buttons[4]); // Als Text einfügen
// unset($buttons[5]); // Formatierung löschen
// unset($buttons[6]);  // Sonderzeichen
unset($buttons[7]); // Einzug verringern
unset($buttons[8]);  // Einzug erhöhen
// unset($buttons[9]);  // Schritt widerrufen
// unset($buttons[10]); // Schritt wiederholen
unset($buttons[11]); // Hilfe
return $buttons;
}
add_filter('mce_buttons_2', 'delete_buttons_2');

Absatzformatierung-Auswahl und Format-Auswahl bearbeiten

function mce_mod( $init ) {
$init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4;Heading 5=h5;Blockquote=blockquote';
$style_formats = array (
array( 'title' => 'Fett', 'inline' => 'b' ),
array( 'title' => 'Kursiv', 'inline' => 'em' ),
array( 'title' => 'Unterstrichen', 'inline' => 'span', 'styles' => array( 'text-decoration' => 'underline' ) ),
array( 'title' => 'Durchgestrichen', 'inline' => 'del' ),
array( 'title' => 'Hochgestellt', 'inline' => 'sup' ),
array( 'title' => 'Tiefgestellt', 'inline' => 'sub' )
);

$init['style_formats'] = json_encode( $style_formats );
$init['style_formats_merge'] = false;
return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Referenz