WordPress

Eigene Styles über den Editor

Recht nützlich finde ich die Erweiterung eigene Styles im Editor hinzufügen zu können. Hierfür gibt es auch wieder zahlreiche PlugIns, aber es geht auch ohne.

In 3 Schritten habt Ihr die Möglichkeit eigene Styles per Klick verwenden zu können.

1. Definiert zuerst Eure Styles-Sheets und schreibt diese in die style.css Eures Themes

   .info, .success, .warning, .error {
     border: 1px solid; margin: 10px 0px;
     padding:15px 10px 15px 50px;
     background-repeat: no-repeat;	
     background-position: 10px center;
   }
   .info {
     color: #00529B; 
     background-color: #BDE5F8;
     background-image: url('custom/info.png');
   }

2. Nützlich ist ebenso die neuen Styles im Editor sehen zu können, hierfür muss der Style-Code in die Datei „editor-style.css“ von Eurem Themes geschrieben werden. Ist die Datei nicht vorhanden, dann legt Sie Euch im Root Eures Themes einfach an.
3. In euer Themes erweitert Ihr nun Eure „function.php“ mit diesem Code:

   // Callback function to filter the MCE settings
   function my_mce_before_init_insert_formats( $init_array ) {
   // Define the style_formats array
   $style_formats = array(
   // Each array child is a format with it's own settings
   array(
   'title' => 'Error',
   'block' => 'div',
   'classes' => 'error',
   'wrapper' => false,
   ),
   array(
   'title' => 'Warnung',
   'block' => 'div',
   'classes' => 'warning',
   'wrapper' => false,
   ),
   array(
   'title' => 'Info',
   'block' => 'div',
   'classes' => 'info',
   'wrapper' => false,
   ),
   array(
   'title' => 'Bestätigung',
   'block' => 'div',
   'classes' => 'success',
   'wrapper' => false,
   ),
   );
   // Insert the array, JSON ENCODED, into 'style_formats'
   $init_array['style_formats'] = json_encode( $style_formats );
   return $init_array;
   }
   // Attach callback to 'tiny_mce_before_init'
   add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
   
   

   Jedes Array ist ein Eintrag im DropDown-Menü „Formate“ und kann problemlose erweitert werden. Es muss natürlich auch immer ein passender Style vorhanden sein.

   „block“ sorgt für die div-Box um denText herum, „classes“ legt die CSS-Klasse fest und „wrapper“ sorgt dafür, dass es nicht als „Absatz“ behandelt wird.

   Es gibt noch etliche weitere Konfigurationsmöglichkeiten, die ihr bei Codex nachlesen könnt.