Der Customizer 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.
Theoretisch könnten die Funktionen alle direkt in die functions.php eingetragen werden. Dies würde diese jedoch unübersichtlich werden lassen, da der Code für das customizing sehr umfangreich 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 eingeloggten Zustand über "Anpassen" vorgenommen werden.
Standard Customizing
Von WordPress bereitgestellte Customizing Einträge. Diese generieren automatisch eine passende Sektion inklusive Titel und Beschreibung.
Hintergrund
erlaubt Änderung der Hintergrundfarbe und des Hintergrundbildes.
add_theme_support( 'custom-background' );
Standardwerte 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 Hinzufü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 Headergrafik 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 semantisch korrekter, wenn das Bild nur einen gestalterischen Nutzen erfüllt.
Benutzerdefiniertes Customizing
Nachfolgend Beispiele für benutzerdefiniertes Customizing. Dies unterscheidet sich zum Standard dadurch, dass Sektion, Titel, Priorität, Beschreibung usw. manuell angelegt werden müssen.
Mit Sektion sind die klappbaren Bereiche innerhalb der Theme Anpassen Funktion gemeint
Der Code um benutzerdefiniertes Customizing in der oben genannten customizing.php oder der functions.php zu aktivieren ist zwar wie bereits erwähnt umfangreich, 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 beliebigen Template anzeigen zu lassen, müssen wir diese via get_option ausgeben. Der Variablenname $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 ausgegeben.
Auswahlliste
Nachfolgender Code würde eine Auswahlliste im Customizer ausgeben. Dargestellt 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 Colorpicker anzeigen zu lassen könnte folgendes Beispiel hilfreich sein. Auch hier gilt selbstverständlich: Ist schon eine Sektion vorhanden muss nur der Einstellungen Block und das Steuerelement 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
?>