Wordpress

Dieser Beitrag ist noch in Arbeit und dient mir vorerst mehr als Gedächtnisstütze.

Grundlagen

Als Default-Themes habe ich mich für „gatsby“ entschieden. Um an diesem arbeiten zu können, habe ich mir zuvor ein Child angelegt, so dass ich aller Änderungen besser nachvollziehen kann.

Im Themes kann man unter „Customizer->Farbe“ Hintergrund, Sekundär und Primärfarben einstellen. Hier stelle ich kurz vor wie man diese Farbenreihe erweitern kann, um diese auch im Backend steuern zu können.

In der originalen „functions.php“ kommentiert man die Funktion „function gatsby_scripts()“ und kopiert sich diese in die „funtions.php“ seines Childs. Danach erweitert man den Code der vorgegebenen Analogie.

Zeile 13 hinzufügen: $third = esc_attr( get_theme_mod( ‚third_color‘, ‚#dd9933‘ ) );
Zeile 46 Editieren und die Zeichen „; in eine neue Zeile umbrechen
Nun die Zeile 47 umbrechen, so dass diese zu Zeile 48 wird. Vor der Zeile 48 fügt man nun den CSS-Code für „Third-Color“ ein: h4.widget-title {color: {$third};}

Damit ist die neue Farbe bereits auf der Webseite sichtbar. In diesem Beispiel färbt sich eine H4-Überschrift mit class=widget orange ein. Aber das ist nur die halbe Miete 😉

Leider erkannte das Theme keine Kopie aus /inc/ in meinem Child-Themes, so dass ich den nächsten Schritt direkt in der Original-Datei des Themes durchgeführt hatte.

In der customizer.php befindet sich eine Funktion namens „function gatsby_customize_register( $wp_customize )“ und dort sieht man zwei Blöcke für // Primary color setting und // Second color setting. Einen solchen Block kopieren wir und fügen den unter //second ein und passen bestimmte Zeilen wie folgt an:

// Third color setting
$wp_customize->add_setting( 'third_color' , array(
'sanitize_callback' => 'gatsby_sanitize_hex_color',
'default' => '#dd9933',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'third_color', array(
'label' => __( 'Third Color', 'gatsby' ),
'section' => 'colors',
'settings' => 'third_color',
) ) );

Und ab jetzt kann man die Farbe der Überschriften in einem Widget über das Backend anpassen.

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.

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');
}

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.

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.

Kategorie: Wordpress

WordPress-Themes

Grundlagen

Eigene Styles über den Editor