Share
Dans la nouvelle version récente de WordPress, WordPress a ajouté de nouvelles fonctionnalités telles que l'arrière-plan personnalisé, l'en-tête personnalisé, etc., que vous pouvez voir en action dans le thème Twenty Eleven. L’arrière-plan personnalisé ajoutera un extrait de code CSS qui affecte le l’arrière-plan de l’élément, que se passe-t-il si vous souhaitez uniquement que cette fonctionnalité affecte un autre élément que vous spécifiez? Peut-être le , éléments ou une autre balise HTML.
Dans ce tutoriel, j’utilise Twenty Eleven (dans WordPress version 3.4) comme démonstration. Ci-dessous, une fonction qui gère la fonctionnalité d’arrière-plan personnalisé pour ce thème, je l’ai trouvée dans functions.php fichier:
Accentsconagua
add_theme_support ('custom-background', array (// Informez WordPress de la couleur d'arrière-plan par défaut. // Cela dépend de notre palette de couleurs actuelle. 'default-color' => $ default_background_color,)); Et il a été déclaré dans le theme.php déposer sous le wp-comprend annuaire:
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) // Cette fonction est si longue, je ne montre que les objets dont nous avons besoin: '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']); // Fusionne les données des appels précédents add_theme_support (). La première valeur enregistrée gagne. 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 (défini ('BACKGROUND_COLOR')) $ args [0] ['default-color'] = BACKGROUND_COLOR; elseif (isset ($ args [0] ['couleur par défaut'])) || $ jit) define ('BACKGROUND_COLOR', $ args [0] ['couleur par défaut']); if (défini ('BACKGROUND_IMAGE')) $ args [0] ['default-image'] = BACKGROUND_IMAGE; elseif (isset ($ args [0] ['default-image']) || $ jit) define ('BACKGROUND_IMAGE', $ args [0] ['default-image']); Pause; On peut voir le add_theme_support est utilisé sans passer la valeur de wp-head-callback paramètre (sauf pour couleur par défaut) cela signifie que la fonction de rappel par défaut sera appelée. Dans ce cas, c'est _custom_background_cb. Il a également été défini dans theme.php fichier:
fonction _custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); if (! $ background &&! $ color) return; $ style = $ couleur? "background-color: # $ color;" : "; if ($ background) $ image =" background-image: url ('$ background'); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); if (! in_array ($ repeat, tableau ('non-répétition', 'répétition-x', 'répétition-y', 'répétition'))) $ repeat = 'répétition'; $ repeat = "répétition en arrière-plan: $ répétition;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ position, array ('centre', '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;?> Remarquez quelque chose? Oui, l'extrait CSS dont nous avons besoin à la fin de la fonction.
Ce qu'il faut faire
Dans ton functions.php fichier, vous ajoutez le code suivant:
fonction change_custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); if (! $ background &&! $ color) return; $ style = $ couleur? "background-color: # $ color;" : "; if ($ background) $ image =" background-image: url ('$ background'); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); if (! in_array ($ repeat, tableau ('non-répétition', 'répétition-x', 'répétition-y', 'répétition'))) $ repeat = 'répétition'; $ repeat = "répétition en arrière-plan: $ répétition;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ position, array ('centre', '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;?> Tout ce dont vous avez besoin est de remplacer corps.custom-background avec le sélecteur CSS dont vous avez besoin. La fonctionnalité Arrière-plan personnalisé ne modifiera que l'arrière-plan de l'élément que vous définissez, pas le site entier. Ces extraits fonctionnent également avec les anciennes versions de WordPress (3.0 ou antérieures). Terminé!
Nous imitons fondamentalement la fonctionnalité intégrée, mais nous la modifions pour répondre à nos propres besoins..
C'est tout! J'espère que vous aimez ce petit conseil, j'apprécierais vos commentaires.
Mettre à jour: Ce didacticiel a été mis à jour pour corriger les erreurs mentionnées dans les commentaires ci-dessous. Si vous remarquez d'autres erreurs, merci de nous le faire savoir.!
