web-dev-qa-db-fra.com

Comment puis-je développer la fenêtre Personnalisation de WordPress sans plug-in?

Le problème avec Customize:

Ne serait-il pas agréable si WordPress rendait redimensionnable la zone Personnaliser affichée dans l'image ci-dessous?

En l'état actuel des choses, cela peut être un peu délicat de travailler dans une barre latérale écrasée.

Pour cette raison, je fais habituellement tout mon CSS dans un éditeur externe, puis je le copie dans la barre latérale.

C'est en discussion sur WordPress

Les développeurs de WordPress cherchaient à améliorer l'interface utilisateur du Customizer, que vous pouvez voir ici . Cela résoudrait le problème, mais jusque-là ...

Cette question ne concerne pas CSS

Cette question n’explique pas pourquoi j’ai utilisé le Customizer pour CSS - j’ai mes raisons - c’est un tout autre sujet.

La question:

Quelle est la meilleure façon de personnaliser cette zone WordPress pour la rendre extensible ou plus large sans avoir besoin d’un plugin? Cela faciliterait le travail avec toutes les personnalisations, pas seulement CSS.

* Cette modification doit faire partie du thème enfant pour éviter d'être écrasée par les mises à jour.

enter image description here

enter image description here

functionscustomizationuser-interfaceadmin-ui
1
Invariant Change

Vous pouvez développer la zone de personnalisation WordPress sans plug-in en appliquant une simple ligne de code CSS.

.wp-full-overlay-sidebar {
   width: 30% !important; /* The width of the customize area */
}
.wp-full-overlay.expanded {
  margin-left: 30%; /* Here would be the width as same as the customize window width you set */
}

Accrochez le CSS à la fonction admin_enqueue_scripts() pour le charger dans la zone de personnalisation de WordPress. L'exemple de mise en file d'attente de fichiers CSS est donné ci-dessous.

add_action('admin_enqueue_scripts', function() {
   wp_enqueue_style('your-prefix-admin', get_template_directory_uri().'/assets/css/admin.css');
});

Remarque: Ce code doit être placé dans le fichier functions.php de votre thème. Vous devez créer un fichier nommé admin.css dans le répertoire assets/css (créez le répertoire s'il n'existe pas) dans votre thème.

Pour le thème enfant, vous devriez utiliser la fonction get_stylesheet_directory_uri() au lieu de la fonction get_template_directory_uri().

1
Eh Jewel

Je dirais qu’il n’est généralement pas judicieux d’apporter des modifications majeures à CSS via le personnaliseur. En plus de l'espace limité, il est difficile de localiser une règle CSS spécifique que vous pourriez avoir besoin de modifier et vous ne savez pas quand et pourquoi vous avez effectué le changement.

Vous devez ajouter des règles CSS dans votre thème, qui doivent être sous GIT, qu'il s'agisse d'un thème principal ou d'un thème enfant.

Oui, cela prendra un peu plus de temps, mais vous récupérerez la totalité de votre investissement la première fois que vous aurez besoin de comprendre pourquoi vous avez une règle spécifique.

0
Mark Kaplun