Benutzerdefinierte Hintergrundfunktion für jedes gewünschte HTML-Element ändern

In der letzten neuen WordPress-Version wurden in WordPress einige neue Funktionen hinzugefügt, z. B. Benutzerdefinierter Hintergrund, Benutzerdefinierte Kopfzeile usw.. Sie können dies im Twenty Eleven-Design in Aktion sehen. Der Benutzerdefinierte Hintergrund fügt ein CSS-Snippet hinzu, das sich auf die. Auswirkt Was ist, wenn Sie möchten, dass diese Funktion nur ein anderes von Ihnen angegebenes Element beeinflusst? Vielleicht die , , oder

Elemente oder ein anderes HTML-Tag.

Etwas herausfinden

In diesem Lernprogramm verwende ich Twenty Eleven (in WordPress Version 3.4) als Demonstration. Nachfolgend finden Sie eine Funktion, die die Funktion Benutzerdefinierter Hintergrund für dieses Thema behandelt. Ich habe sie in gefunden Functions.php Datei:

 add_theme_support ('custom-background', array (// Informieren Sie WordPress über unsere Standardhintergrundfarbe. // Dies ist abhängig von unserem aktuellen Farbschema. 'default-color' => $ default_background_color,));

Und es wurde in der theme.php Datei unter der WP-Includes Verzeichnis:

 Funktion add_theme_support ($ feature) global $ _wp_theme_features; if (func_num_args () == 1) $ args = true;  else $ args = array_slice (func_get_args (), 1);  switch ($ feature) // Diese Funktion ist so lang, ich zeige nur Sachen, die wir benötigen, den Fall 'custom-background': if (! is_array ($ args)) $ args = array (0 => array ()); $ defaults = array ('default-image' => ", 'default-color' =>", 'wp-head-callback' => '_custom_background_cb', 'admin-head-callback' =>, 'admin- preview-callback '=> ",); $ jit = isset ($ args [0] ['__ jit']); unset ($ args [0] ['__ jit']); // Daten aus vorherigen add_theme_support () - Aufrufen zusammenführen. Der erste registrierte Wert gewinnt. if (isset ($ _wp_theme_features ['custom-background'])) $ args [0] = wp_parse_args ($ _wp_theme_features ['custom-background'] [0], $ args [0]);  if ($ jit) $ args [0] = wp_parse_args ($ args [0], $ defaults);  if (definiert ('BACKGROUND_COLOR')) $ args [0] ['default-color'] = BACKGROUND_COLOR;  elseif (isset ($ args [0] ['default-color']) || $ jit) define ('BACKGROUND_COLOR', $ args [0] ['default-color']);  if (definiert ('BACKGROUND_IMAGE')) $ args [0] ['default-image'] = BACKGROUND_IMAGE;  elseif (isset ($ args [0] ['default-image']) || $ jit) define ('BACKGROUND_IMAGE', $ args [0] ['default-image']);  brechen;

Wir können das sehen add_theme_support wird verwendet, ohne den Wert von zu übergeben wp-head-callback Parameter (außer für Standardfarbe) bedeutet, dass die Standard-Callback-Funktion aufgerufen wird. In diesem Fall ist das so _custom_background_cb. Es wurde auch in definiert theme.php Datei:

 function _custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); if (! $ background &&! $ color) return; $ style = $ color? "Hintergrundfarbe: # $ color;" : "; if ($ background) $ image =" background-image: URL ('$ background'); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); if (! in_array ($ repeat, array.) ('no-repeat', 'repeat-x', 'repeat-y', 'repeat'))) $ repeat = 'repeat'; $ repeat = "Hintergrundwiederholung: $ repeat;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ position, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "background-position: top $ position; "; $ attachment = get_theme_mod ('background_attachment', 'scroll'); if (! in_array ($ attachment, array ('fixed', 'scroll')))) $ attachment = 'scroll'; $ attachment =" background -attachment: $ attachment; "; $ style. = $ image. $ repeat. $ position. $ attachment;?>   Etwas merken? Ja, das CSS-Snippet benötigen wir am Ende der Funktion.
 
 Was wir machen müssen
 In deiner Functions.php Datei, fügen Sie folgenden Code hinzu:
  Funktion change_custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); if (! $ background &&! $ color) return; $ style = $ color? "Hintergrundfarbe: # $ color;" : "; if ($ background) $ image =" background-image: URL ('$ background'); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); if (! in_array ($ repeat, array.) ('no-repeat', 'repeat-x', 'repeat-y', 'repeat'))) $ repeat = 'repeat'; $ repeat = "Hintergrundwiederholung: $ repeat;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ position, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "background-position: top $ position; "; $ attachment = get_theme_mod ('background_attachment', 'scroll'); if (! in_array ($ attachment, array ('fixed', 'scroll')))) $ attachment = 'scroll'; $ attachment =" background -attachment: $ attachment; "; $ style. = $ image. $ repeat. $ position. $ attachment;?>   Sie müssen nur ersetzen body.custom-background mit dem CSS-Selektor benötigen Sie. Die Funktion Benutzerdefinierter Hintergrund ändert nur den Hintergrund des von Ihnen definierten Elements, nicht die gesamte Site. Diese Ausschnitte funktionieren auch mit älteren WordPress-Versionen (3.0 oder früher). Alles erledigt!
 Grundsätzlich ahmen wir die integrierte Funktionalität nach, passen sie jedoch an unsere eigenen Bedürfnisse an.
 Das ist es! Ich hoffe, Ihnen gefällt dieser schnelle Tipp, ich würde mich über alle Kommentare freuen.
 Aktualisieren: Dieses Tutorial wurde aktualisiert, um die in den folgenden Kommentaren genannten Fehler zu beheben. Sollten Sie andere Fehler feststellen, teilen Sie uns dies bitte mit!



		
			
	   
	




Code