web-dev-qa-db-fra.com

Remplacer les paramètres CSS des plugins

Je veux remplacer mes paramètres CSS de plugin, mais je ne peux pas le faire dans mon fichier style.css car le plugin CSS est chargé après.

Existe-t-il un moyen d'obtenir un style à appliquer pour remplacer le plugin CSS?

pluginscss
1
Oliver Watkins

Sera intéressant de savoir quelle réponse les développeurs jugent "meilleure", donc comme alternative à la réponse de Johanne (ce qui peut présenter des difficultés si le plug-in charge les scripts en retard ou commence à les déplacer sans avertissement)

Empêcher le chargement de la feuille de style

Si vous avez inclus tous les styles nécessaires dans votre style.css, vous pouvez empêcher le chargement de la feuille de style du plug-in:

add_filter( 'style_loader_tag', 'wpse106104_disable_stylesheet', 10, 2 );
function wpse106104_disable_stylesheet( $link_tag, $handle ){

    if( 'plugin-script-handle' == $handle ){
         $link_tag = false;
    }
    return $link_tag;
}

Cela a l'avantage de ne pas nécessiter de feuilles de style supplémentaires à charger - mais le CSS du plug-in est alors inclus dans tous les chargements de page, ce qui peut ne pas être souhaitable.

Remplacement de la feuille de style

Sinon, vous pouvez copier la feuille de style dans votre thème, la modifier puis vous assurer que WordPress l’utilise à la place:

add_filter( 'style_loader_src', 'wpse106104_replace_stylesheet', 10, 2 );
function wpse106104_replace_stylesheet( $stylesheet_src, $handle ){

    if( 'plugin-script-handle' == $handle ){
         $stylesheet_src = get_template_directory_uri() . '/css/themes-copy-of-plugin.css';
    }
    return $stylesheet_src;
}
3
Stephen Harris

Si vous souhaitez simplement remplacer une classe, par exemple .plugin-class {width: 100px;}, vous pouvez simplement ajouter la même classe à votre fichier style.css et ajouter! Important à celle-ci, ce qui la remplacera.

.plugin-class { width:200px !important;}
1
user156

Inclure les remplacements après les actions wp_head/wp_footer

Les feuilles de style du plugin sont probablement insérées dans la page à l'aide des fonctions de mise en file d'attente de WordPress .

Si tel est le cas, des scripts et des feuilles de style seront ajoutés soit à l'emplacement où wp_head() (généralement un thème header.phpfichier, l'emplacement par défaut) ou où wp_footer() est (généralement un thème footer.phpfichier, si cela est spécifié dans les paramètres de mise en file d'attente), respectivement.

Par conséquent, si vous souhaitez remplacer le plugin css, le responsable de la feuille de style doit être chargé ultérieurement.

En utilisant l'option par défaut de la feuille insérée dans l'en-tête, un extrait de code de code d'en-tête pourrait ressembler à ceci:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/reset.css?ver=1.0" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>?ver=1.0" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php wp_head(); ?>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/plugin-override.css?ver=1.0" />

Mise en file d'attente correcte avec dépendances

Sinon, vous pouvez (devriez) mettre correctement en file d'attente la feuille de style avec les remplacements et la rendre dépendante (WP la chargera ensuite après la dépendance) sur la feuille de style du plug-in.

Pour pouvoir le faire, vous devez examiner le code du plug-in et trouver le descripteur de la feuille de style afin de le référencer en tant que dépendance lors de l'enregistrement du vôtre.
cd /path/to/plugin && grep -r wp_enqueue_style . de * nix Shell devrait vous aider.

Ensuite, dans le fichier functions.php de votre thème, vous ajouterez ce qui suit:

add_action( 'wp_enqueue_scripts', 'wpse_register_plugin_override' );

function wpse_register_plugin_override() {
    wp_register_style(
        'wpse-plugin-override', /* your handle */
        get_template_directory_uri() . '/css/plugin-override.css', /* the file */
        array( 'the-plugins-stylesheet-handle' ), /* dependency */
        1.0 /* version of your stylesheet */
    );
    wp_enqueue_style( 'wpse-plugin-override' );
}
1
Johannes Pille