Modifica della funzione di sfondo personalizzato per qualsiasi elemento HTML che desideri

Nella recente nuova versione di WordPress, WordPress ha aggiunto alcune nuove funzionalità come Sfondo personalizzato, Intestazione personalizzata, ecc., Puoi vederlo in azione nel tema Twenty Eleven. Lo sfondo personalizzato aggiungerà uno snippet CSS che effettua l'effetto lo sfondo dell'elemento, cosa succede se si desidera che questa funzione abbia effetto su un altro elemento specificato? Forse il , , o

elementi o un altro tag HTML.

Scopri qualcosa

In questo tutorial, utilizzo Twenty Eleven (in WordPress versione 3.4) come dimostrazione. Di seguito una funzione che gestisce la funzione Sfondo personalizzato per questo tema, l'ho trovata functions.php file:

 add_theme_support ('custom-background', array (// Lascia che WordPress sappia quale sia il nostro colore di sfondo predefinito // Questo dipende dalla nostra combinazione di colori corrente. 'default-color' => $ default_background_color,));

Ed è stato dichiarato nel theme.php file sotto il wp-includes directory:

 function 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) // Questa funzione è così lunga, mostro solo cose di cui abbiamo bisogno case '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']); // Unisci i dati delle precedenti chiamate add_theme_support (). Vince il primo valore registrato. 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 (defined ('BACKGROUND_COLOR')) $ args [0] ['default-color'] = BACKGROUND_COLOR;  elseif (isset ($ args [0] ['default-color']) || $ jit) define ('BACKGROUND_COLOR', $ args [0] ['default-color']);  if (defined ('BACKGROUND_IMAGE')) $ args [0] ['default-image'] = BACKGROUND_IMAGE;  elseif (isset ($ args [0] ['default-image']) || $ jit) define ('BACKGROUND_IMAGE', $ args [0] ['default-image']);  rompere;

Possiamo vedere il add_theme_support è usato senza passare il valore di wp-testa-di callback parametro (tranne per default-colore) significa che verrà richiamata la funzione predefinita di callback. In questo caso, cioè _custom_background_cb. E 'stato anche definito in theme.php file:

 function _custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); se (! $ background &&! $ color) restituisce; $ stile = $ colore? "background-color: # $ 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 = "background-repeat: $ repeat;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ position, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "background-position: top $ posizione; "; $ 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;?>   Notare qualcosa? Sì, lo snippet CSS di cui abbiamo bisogno alla fine della funzione.
 
 Cosa dobbiamo fare
 Nel tuo functions.php file, si aggiunge il seguente codice:
  function change_custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); se (! $ background &&! $ color) restituisce; $ stile = $ colore? "background-color: # $ 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 = "background-repeat: $ repeat;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ position, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "background-position: top $ posizione; "; $ 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;?>   Tutto ciò di cui hai bisogno è di sostituire body.custom-background con il selettore CSS di cui hai bisogno. La funzione Sfondo personalizzato cambierà solo lo sfondo dell'elemento che definisci, non l'intero sito. Questi frammenti funzionano anche con le vecchie versioni di WordPress (3.0 o precedenti). Tutto fatto!
 Stiamo fondamentalmente imitando la funzionalità integrata, ma modificandola per adattarla alle nostre esigenze.
 Questo è tutto! Spero vi piaccia questo suggerimento, apprezzerei qualsiasi commento.
 Aggiornare: Questo tutorial è stato aggiornato per correggere gli errori menzionati nei commenti qui sotto. Se noti altri errori, faccelo sapere!



		
			
	   
	




Codice