Le contenu de la page pour les arrière-plans personnalisés est créé dans wp-admin/custom-background.php
. Aucune action n'est disponible là où les champs sont imprimés.
Pour ajouter de nouveaux champs, nous devons imprimer JavaScript dans le pied de page. L'action est 'admin_footer-appearance_page_custom-background'
.
Pour enregistrer ces valeurs de champ, nous devons nous connecter 'load-appearance_page_custom-background'
.
L'exemple suivant ajoute une nouvelle option pour background-origin
- utile si vous avez défini une bordure autour body
dans votre feuille de style.
add_action(
'load-appearance_page_custom-background',
array ( 'T5_Background_Origin', 'get_instance' )
);
/**
* Add a new row to the background options table for 'background-origin'.
*
* @author Thomas Scholz http://toscho.de
* @version 2012.09.10
*/
class T5_Background_Origin
{
/**
* Main instance.
* @type object|NULL
*/
protected static $instance = NULL;
/**
* The name for the option. Will be saved as theme option.
*
* @link http://www.w3.org/TR/css3-background/#the-background-origin
* @type string
*/
protected $option = 'background_origin';
/**
* Label on the left side of our new option.
*
* @type string
*/
protected $table_header = 'Background Origin';
/**
* Return an instance.
*
* @wp-hook load-appearance_page_custom-background
* @return object
*/
public static function get_instance()
{
NULL === self::$instance and self::$instance = new self;
return self::$instance;
}
/**
* Save our option and register the form.
*
* @wp-hook load-appearance_page_custom-background
*/
public function __construct()
{
add_action(
'admin_footer-appearance_page_custom-background',
array ( $this, 'form' )
);
if ( empty ( $_POST[ $this->option ] ) )
{
return;
}
check_admin_referer( $this->option, "_t5nonce-$this->option" );
set_theme_mod( $this->option, $_POST[ $this->option ] );
}
/**
* Create the form elements.
*
* @wp-hook admin_footer-appearance_page_custom-background
* @return void
*/
public function form()
{
$nonce = wp_nonce_field(
$this->option,
"_t5nonce-$this->option",
TRUE, // check referer
FALSE // do not echo
);
$html = $nonce . $this->get_radio_fields();
$this->print_script( $html );
}
/**
* Create the jQuery function that inserts our form fields.
*
* @param string $html Radio buttons
* @return void
*/
protected function print_script( $html )
{
$row = "'<tr><th>$this->table_header</th><td>$html</td></tr>'";
?>
<script>jQuery( function <?php echo $this->option; ?>($) {
$('.form-table:last').append(<?php echo $row; ?>);
});</script>
<?php
}
/**
* Helper for form(). Create radio input fields
*
* @return string
*/
protected function get_radio_fields()
{
$value = get_theme_mod( $this->option, 'padding-box' );
$radios = array ( 'padding-box', 'border-box', 'content-box' );
$html = "<p>";
foreach ( $radios as $radio )
{
$html .= sprintf(
' <input type="radio" name="%1$s" value="%2$s" id="%3$s"%4$s>'
. ' <label for="%3$s">%2$s</label> ',
$this->option,
$radio,
"$this->option-$radio",
// returns ' as value delimiters and has to be escaped
addslashes( checked( $value, $radio, FALSE ) )
);
}
return "$html</p>";
}
}
J'ai trouvé la réponse fournie par @toscho très utile, mais comme j'avais plus d'une option à ajouter, j'ai légèrement modifié le code afin que tout ce que j'ai à faire soit de créer une classe étendue simple avec quelques options.
J'ai également trouvé peu pratique de simplement ajouter les options à la fin de la liste, j'ai donc ajouté un argument `` position '' qui vous permet de sélectionner l'une de ces options -
'first'
- Avant le premier réglage (position actuelle)'last'
- Après le dernier réglage (couleur d'arrière-plan actuelle)Integer position
- Le numéro de ligne pour insérer le paramètre avant (doit être un entier)Voici le code -
la source