Schlagwort: Javascript

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

Javascript und CSS über wp_enqueue_scripts einbinden

WordPress bietet eine Möglichkeit um CSS und Javascript über die Funktion wp_enqueue_scripts einzubinden. Der Codex empfiehlt diese Vorgehensweise gegenüber etwa dem hardcoden in den Theme-Dateien wie der header.php oder der footer.php. Zur Verbesserung der Website-Performance können dann gleich noch Script-Aufrufe nach wp_footer (also gegen Ende des Quelltexts) verschoben werden.

In der header.php finden sich beispielsweise solche oder ähnliche Anweisungen, die durch die Funktionen ersetzt werden sollen:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/print.css" type="text/css" media="print" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/themename.js">
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery-migrate.min.js'></script>

In folgendem Beispiel sollen nun die themename.js, die die jquery-Bibliothek benötigt, sowie die style.css und print.css des Themes eingebunden werden. Im wp_footer soll außerdem die WordPress-eigene jquery-Bibliothek eingebunden werden. Ein angenehmer Nebeneffekt ist, dass die eigene jquery-Kopie nicht mehr von Hand aktualisiert werden muss.

functions.php

// Theme Scripts & Styles registrieren
function themename_scripts_styles() {
  // Scripts: Name, URI, Abhängigkeiten, Version, in wp_footer platzieren?
  wp_register_script( 'themename-js', get_template_directory_uri() . '/js/themename.js', array( 'jquery' ), '2.05', true );
  wp_enqueue_script( 'themename-js' );
  // Andere Scripts in den Footer verschieben
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);
  // CSS: Name, URI, Abhängigkeiten, Version, CSS Media Type
  wp_register_style( 'themename-screen', get_template_directory_uri() . '/style.css', false, '20140925', 'screen' );
  wp_enqueue_style( 'themename-screen' );
  wp_register_style( 'themename-print', get_template_directory_uri() . '/print.css', false, '20140925', 'print' );
  wp_enqueue_style( 'themename-print' );
}
add_action( 'wp_enqueue_scripts', 'themename_scripts_styles' );

Beim Erstellen eigener Funktionen können Generatoren zu Hilfe genommen werden. Bei der Verwendung von Child-Themes mit alternierenden CSS-Klassen sollte get_template_directory_uri() mit get_stylesheet_directory_uri() ersetzt werden.

Referenz

Framebreaker über functions.php und wp_head

Verhindert die Anzeige des Inhalts in Frames (sog. Framebreaker).

Plugin

// Framebreaker
 function framebreaker() {
 if (!is_preview()) {
 echo "n<script type="text/javascript">";
 echo "n<!--";
 echo "nif (parent.frames.length > 0) { parent.location.href = location.href; }";
 echo "n-->";
 echo "n</script>nn";
 }
 }
 add_action('wp_head', 'framebreaker');

Referenz