Der Custo­mizer von WordPress erlaubt es das Design im Live Editor auch für ungeübte Anwender anzupassen. Diese Funktionen müssen natürlich in der functions.php des Themes verfügbar gemacht werden.

Theore­tisch könnten die Funktionen alle direkt in die functions.php einge­tragen werden. Dies würde diese jedoch unüber­sichtlich werden lassen, da der Code für das custo­mizing sehr umfang­reich werden kann. Aus diesem Grund erstelle ich eine customizer.php und lade diese in die functions.php

require_once(get_template_directory().'/customizer.php');

Die Änderungen können dann im einge­loggten Zustand über "Anpassen" vorge­nommen werden.

Standard Custo­mizing

Von WordPress bereit­ge­stellte Custo­mizing Einträge. Diese generieren automa­tisch eine passende Sektion inklusive Titel und Beschreibung.

Hinter­grund

erlaubt Änderung der Hinter­grund­farbe und des Hinter­grund­bildes.

add_theme_support( 'custom-background' );

Standard­werte vergeben

$defaults = array(
	'default-color'          => '',
	'default-image'          => '',
	'default-repeat'         => '',
	'default-position-x'     => '',
	'default-attachment'     => '',
	'wp-head-callback'       => '_custom_background_cb',
	'admin-head-callback'    => '',
	'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Header

erlaubt die Änderung der Textfarbe im Header und das Hinzu­fügen eines Header Bildes.

$defaults = array(
	'default-image'          => '',
	'width'                  => 0,
	'height'                 => 0,
	'flex-height'            => false,
	'flex-width'             => false,
	'uploads'                => true,
	'random-default'         => false,
	'header-text'            => true,
	'default-text-color'     => '',
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $defaults );

Um die Header­grafik anzuzeigen benötigen wir noch ein img Element

<img class="aligncenter" src="<?php header_image();?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="headerimage">

ODER wir lösen dies über ein Pseudo Element

<style>
      .container::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background:url('<?php header_image();?>') top center no-repeat;
        height: <?php echo get_custom_header()->height;?>px;
      }
</style>

Mehr Code, aber seman­tisch korrekter, wenn das Bild nur einen gestal­te­ri­schen Nutzen erfüllt.

Benut­zer­de­fi­niertes Custo­mizing

Nachfolgend Beispiele für benut­zer­de­fi­niertes Custo­mizing. Dies unter­scheidet sich zum Standard dadurch, dass Sektion, Titel, Priorität, Beschreibung usw. manuell angelegt werden müssen.

Mit Sektion sind die klapp­baren Bereiche innerhalb der Theme Anpassen Funktion gemeint

screenshot-at-nov-29-18-28-12


Der Code um benut­zer­de­fi­niertes Custo­mizing in der oben genannten customizing.php oder der functions.php zu aktivieren ist zwar wie bereits erwähnt umfang­reich, jedoch ist dieser nicht schwierig zu verstehen.

Text ausgeben

<?php

function mo_customize_register($wp_customize) { //Funktion Customizer

  //Sektion erstellen
  $wp_customize->add_section('mo_section1', array ( //Sektion mo_section1 erstellen
    'title'             => 'Sektion 1', //Titel der Sektion
    'priority'          => 1, //Anzeigepriorität
    'description'       => 'Beschreibung der Sektion', //Beschreibung
  ));

  //Einstellungen
  $wp_customize->add_setting('mo_setting1', array (
    'default'           => 'Platzhalter', //Platzhalter als Standardwert
    'sanitize_callback' => 'sanitize_text_field', //Sichere Textausgabe
    'type'              => 'option', //Alternative 'theme_mod'
  ));

  //Steuerelemente
  $wp_customize->add_control('mo_control1', array (
    'label'             => 'Beschriftung', //Beschriftung
    'section'           => 'mo_section1', //Sketion für das Steuerelement
    'settings'          => 'mo_setting1', //Einstellungsset für das Steuerelement
    'type'              => 'text', //Art der Eingabe
  ));
}

add_action('customize_register', 'mo_customize_register'); //Registrierten Customizer am Action Hook ausgeben

?>

Um die Eingabe im Anpassen Modus des Designs in einem belie­bigen Template anzeigen zu lassen, müssen wir diese via get_option ausgeben. Der Varia­blenname $mo_test kann natürlich frei vergeben werden.

<?php $mo_test = get_option('mo_setting1'); echo $mo_test; ?>

In diesem Beispiel wird der Typ Text aus der Einstellung mo_setting1 ausge­geben.

Auswahl­liste

Nachfol­gender Code würde eine Auswahl­liste im Custo­mizer ausgeben. Darge­stellt ist wieder der gesamte Code. Wir müssen natürlich nicht jedes mal eine neue Sektion erstellen.

<?php

function mo_customize_register($wp_customize) { //Funktion Customizer

//Sektion erstellen
$wp_customize->add_section('mo_section', array ( //Sektion mo_section1 erstellen
  'title'               => 'Anpassungen', //Titel der Sektion
  'priority'            => 1, //Anzeigepriorität
  'description'         => 'Benutzerdefinierte Anpassungen', //Beschreibung
));

//Einstellungen für Blendmode
$wp_customize->add_setting('mo_blendmodes', array (
  'default'             => 'normal', //Platzhalter als Standardwert
  'sanitize_callback'   => 'sanitize_text_field', //Sichere Textausgabe
  'type'                => 'option', //Alternative 'theme_mod'
));

//Steuerelemente für Blendmode
$wp_customize->add_control('mo_control_blendmode', array (
  'label'               => 'Blendmodus wählen', //Beschriftung
  'section'             => 'mo_section', //Sketion für das Steuerelement
  'settings'            => 'mo_blendmodes', //Einstellungsset für das Steuerelement
  'type'                => 'select', //Art der Eingabe "Auswahlliste"
  'choices'             => array ( //Array mit Listeneinträge
      'normal'          => 'Normal',
      'multiply'        => 'Multiplizieren',
      'difference'      => 'Differenz',
      'soft-light'      => 'Weiches Licht',
  ),
));

}

add_action('customize_register', 'mo_customize_register'); //Registrierten Customizer am Action Hook ausgeben

?>

Farben

um einen Color­picker anzeigen zu lassen könnte folgendes Beispiel hilfreich sein. Auch hier gilt selbst­ver­ständlich: Ist schon eine Sektion vorhanden muss nur der Einstel­lungen Block und das Steuer­element neu erzeugt werden.

<?php

function mo_customize_register($wp_customize) { //Funktion Customizer

//Sektion erstellen
$wp_customize->add_section('mo_section', array ( //Sektion mo_section1 erstellen
  'title'               => 'Anpassungen', //Titel der Sektion
  'priority'            => 1, //Anzeigepriorität
  'description'         => 'Benutzerdefinierte Anpassungen', //Beschreibung
));

//Einstellungen für Schriftfarbe
$wp_customize->add_setting('mo_color', array (
  'default'             => 'white', //Platzhalter als Standardwert
  'sanitize_callback'   => 'sanitize_text_field', //Sichere Textausgabe
  'type'                => 'option', //Alternative 'theme_mod'
));

//Steuerelemente für Schriftfarbe
$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'mo_color_control',
        array (
            'label'     => 'Schriftfarbe wählen',
            'section'   => 'mo_section',
            'settings'  => 'mo_color',
            )
        )
);

}

add_action('customize_register', 'mo_customize_register'); //Registrierten Customizer am Action Hook ausgeben

?>