Wie du im WordPress Customizer deine eigenen Optionen anlegst.

Mit dem Word­Press Cus­to­mi­zer kannst du für dein The­me schnell und bequem Optio­nen zur Ver­fü­gung stel­len. Ich zei­ge dir wie ein­fach das Gan­ze ist und wie du dei­ne ein­zel­nen Sek­tio­nen anlegst.

Theme erweitern #

Damit du eige­ne Sek­tio­nen hin­zu­fü­gen kannst, müs­sen wir uns über einen Action Hook bei Word­Press ein­ha­ken.

Dafür erstel­len wir nun zunächst die Datei “WordPressThemeCustomizer.php” im The­me Ver­zeich­nis. Falls es sich nicht um dein The­me han­delt, soll­test du das Gan­ze in einem Child-The­­me durch­füh­ren.

Anschlie­ßend öff­nest du die Datei und fügst den fol­gen­den Code hin­zu:

class WordPressThemeCustomizer {
   public function __construct() {
      add_action( 'customize_register', array( $this, 'run' ));
   }

   public function run(WP_Customize_Manager $WPCustomizer ) {
   }
}
$WPTC = new WordPressThemeCustomizer();

Nun wird auto­ma­tisch, sobald Word­Press die Action “customize_register” aus­führt die Funk­ti­on “run” aus dei­ner Klas­se “Word­Press­The­me­Cus­to­mi­zer” auf­ge­ru­fen.

Wech­sel nun kurz in die “functions.php” dei­nes The­mes und bin­de dort die neue Klas­se ein.

require_once('WordPressThemeCustomizer.php');

So legst du eine Sektion an. #

Eine neue Sek­ti­on kannst du nun in der Klas­se “Word­Press­The­me­Cus­to­mi­zer” hin­zu­fü­gen, in dem du die Funk­ti­on “run” erwei­terst. Der fol­gen­de Code zeigt dir wie du eine Sek­ti­on mit dem Namen “Title der Sek­ti­on” ein­baust.

public function run(WP_Customize_Manager $WPCustomizer ) {
        $WPCustomizer->add_section( 'deine_sektion', array(
	      'title'       => __( 'Titel der Sektion' ),
      	      'priority'    => 120,
              'description' => __( 'Beschreibung der Sektion')
        ) );
}

Sobald du den Code ein­ge­fügt hast, kannst du die Sek­ti­on für dei­ne Con­trol­ler ver­wen­den. Spä­ter sieht das gan­ze so aus:

Hin­weis: Eine Sek­ti­on wird nur ange­zeigt, wenn die­se min­des­tens einen “Con­trol­ler” hat. Daher wirst du dei­ne Sek­ti­on aktu­ell noch nicht sehen.

So erstellst du einen Controller. #

Word­Press bie­tet dir bereits eine Palet­te an Con­trol­lern, die du ver­wen­den kannst, um dei­ne Optio­nen abzu­bil­den. Falls dir das gan­ze nicht aus­reicht, kannst du natür­lich jeder­zeit eige­ne Con­trol­ler hin­zu­fü­gen. Ich zei­ge dir hier wie du auf die bestehen­den Klas­sen von Word­Press zugreifst, um Stan­­dard-Optio­­nen anzu­le­gen.

• WP_Customize_Control — Ver­wen­det für: Text­fel­der, Text­are­as, Aus­wahl­fel­der, Radi­os und Check­bo­xen.
• WP_Customize_Color_Control — Ermög­licht dir ein Farb­aus­wahl­feld hin­zu­zu­fü­gen.
• WP_Customize_Image_Control — Ermög­licht dir Bil­der hin­zu­zu­fü­gen.

Textfeld hinzufügen

Las uns direkt los­le­gen und ein ein­fa­ches Text­feld inte­grie­ren. Erwei­te­re die Funk­ti­on “run” in der Klas­se “Word­Press­The­me­Cus­to­mi­zer” um fol­gen­de Zei­len:

$WPCustomizer->add_setting( '_hier_kommt_mein_text' );
$TextController = new \WP_Customize_Control(
      $WPCustomizer, 
      '_hier_kommt_mein_text', 
      array(
	     'label'   => __( 'Mein Text:'),
             'section' => 'deine_sektion',
      )
);
$WPCustomizer->add_control( $TextController );

Wei­te­re Infor­ma­tio­nen zu den Para­me­tern fin­dest du im Word­Press Codex.

Spei­che­re das gan­ze und schau es dir im Cus­to­mi­zer an, du soll­test nun sowohl die Sek­ti­on als auch das Text­feld sehen kön­nen.

Natür­lich kön­nen wir das gan­ze jetzt noch erwei­tern.

Bild hinzufügen

$WPCustomizer->add_setting( '_logo' );
$LogoImageController = new \WP_Customize_Image_Control(
	$WPCustomizer, '_logo', array(
		'label'    => __( 'Logo hinzufügen'),
		'section'  => 'deine_sektion',
		'settings' => '_logo'
	)
);
$WPCustomizer->add_control( $LogoImageController );

Farbfeld hinzufügen

$WPCustomizer->add_setting( '_color' );
$TextColorController = new \WP_Customize_Color_Control(
	$WPCustomizer, '_color', array(
		'label'   => __( 'Farbe', 'forge12' ),
		'section' => 'deine_sektion'
	)
);
$WPCustomizer->add_control( $TextColorController );

Auswahlfeld hinzufügen

$WPCustomizer->add_setting( '_decoration' );
$DecorationController = new \WP_Customize_Control(
	$WPCustomizer, '_decoration', array(
		'label'   => __( 'Dekoration', 'forge12' ),
		'section' => 'deine_sektion',
		'type'    => 'select',
		'choices' => array(
			'0' => __( 'Ohne' ),
			'1' => _( 'Unterstrichen' )
		)
	)
);
$WPCustomizer->add_control( $DecorationController );

So sieht das ganze dann aus

Sobald du fer­tig bist, soll­test das gan­ze so oder so ähn­lich aus­se­hen.

So rufst du die Daten ab #

Jetzt müs­sen wir die Daten noch in das The­me inte­grie­ren. Um auf die Para­me­ter zuzu­grei­fen, ver­wen­dest du fol­gen­den Code:

get_theme_mod('<id des feldes>');

Du kannst Bei­spiel­wei­se das oben ange­leg­te Text­feld mit dem fol­gen­den PHP Code abru­fen:

echo get_theme_mod('_hier_kommt_mein_text');

Fazit #

Den Word­Press Cus­to­mi­zer zu ver­wen­den, um dein The­me zu erwei­tern und etwas mehr Usa­bi­li­ty zu bie­ten ist unkom­pli­ziert. Word­Press beweist auch hier mal wie­der das durch den modu­la­ren Auf­bau eine gro­ße Fle­xi­bi­li­tät gewähr­leis­tet wird.

Ich hof­fe, dir hat der kur­ze Arti­kel gefal­len. Falls du Fra­gen oder Feed­back hast, hin­ter­las­se doch ger­ne einen Kom­men­tar.