web-dev-qa-db-fra.com

Comment ajouter un style dynamique en ligne?

Je veux ajouter du CSS dynamique, donc actuellement j'ajoute directement au div, c'est-à-dire:

$color = "#000000";
echo '<div style="background:'.$color.'">

Est-ce mauvais d'ajouter du code comme ci-dessus?

J'ai lu dans certains forums que cela alourdit le serveur et que cela n'est pas recommandé par les normes de codage WordPress. Je devrais utiliser wp_add_inline_style(). J'essaie donc de l'utiliser mais cela ne fonctionne pas. Voici ce que j'essaye:

functions.php:

function add_custom_css() {
        wp_enqueue_script('custom-css', get_template_directory_uri() . '/custom.css');          
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );

single.php

$color = "#000111";
$custom_css = "
    .mycolor{
            background: {$color};
    }";

wp_add_inline_style( 'custom-css', $custom_css );

Il n'ajoute aucun code dans le fichier custom.css. Qu'est-ce que je fais mal?

theme-developmentthemeswp-enqueue-style
2
ajay

Essaye ça:

Utilisation de conditions de requête

Mettre la mise en file d'attente de style directement dans le modèle n'est pas conseillé. C'est possible (si vous comprenez l'ordre dans lequel les actions pertinentes sont déclenchées et assurez-vous que votre appel à wp_add_inline_style() a lieu au bon moment dans l'ordre d'exécution). Il est beaucoup plus facile de garder tout le code ensemble et d'utiliser une requête conditionnelle appropriée, telle que is_single(), pour ajouter le style dynamique:

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');   
    // Add dynamic style if a single page is displayed
    if ( is_single() ) {
        $color = "#000111";
        $custom_css = ".mycolor{ background: {$color}; }";
        wp_add_inline_style( 'custom-css', $custom_css );
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );

Réponse originale

functions.php 

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');          
}
add_action( 'wp_enqueue_scripts', 'add_custom_css', 20 );

single.php 

function wpse104657_custom_color() {
    $color = "#000111";
    $custom_css = "
        .mycolor{
            background: {$color};
        }";
    wp_add_inline_style( 'custom-css', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpse104657_custom_color', 21 );

Le troisième paramètre des appels add_action() est la priorité, ce qui indique à WordPress quel ordre pour ajouter l'action: des nombres plus élevés signifient une exécution ultérieure.

Édité pour ajouter Cela n'ajoutera aucun code à custom.css - il ne vous reste plus qu'à ajouter des styles en ligne ifcustom.css a déjà été chargé.

Références

8
Pat J

Il n'ajoute aucun code dans le fichier custom.css. Qu'est-ce que je fais mal?

Ces styles sont ajoutés au document HTML, entre les balises <style> et non dans la feuille de style que vous avez mise en file d'attente. Vous devez toujours mettre la feuille de style en file d'attente avant d'ajouter des styles "intégrés".

Le nom de la fonction est un peu déroutant car il produit des blocs de style et non des styles en ligne. Ce que vous avez fait avec la DIV ci-dessus est un style en ligne. Vous devez les éviter car elles prennent la priorité la plus élevée avant les règles !important (les remplacer serait très difficile).

J'ai lu dans certains forums qu'il ajoute le serveur Burdon

Non, ça ne va pas. Vous vous trompez probablement avec les scripts PHP agissant comme des feuilles de style. Ce sont mauvais.

3
onetrickpony

Peut-être que c'est juste moi, mais on a l'impression que nous sommes à bout de force et que nous avalons un chameau, ici. (c'est une phrase ... regardez-la :))

Si vous construisez un thème auquel peut être associé un thème enfant, il est nécessaire d'ajouter un élément important pour pouvoir le remplacer directement dans un bloc de style via wp_add_inline_style ().

S'il s'agit d'un plug-in personnalisé et que la modification de la couleur d'arrière-plan est une partie essentielle de la fonctionnalité, alors ajoutez-la en ligne.

Je ne vois aucun avantage à trop compliquer cela.

Pour répondre à la question initiale.

Est-ce mauvais d'ajouter du code comme ci-dessus?

La réponse est simple: non, c'est pas mal. Cela a des conséquences, mais les performances du serveur n'en font pas partie, et je ne vois rien dans les normes de codage WordPress qui décourage cela. En général, les styles en ligne doivent être utilisés avec parcimonie et prudence, mais ils ne sont pas mauvais.

Si vous voulez vous assurer de garder les problèmes séparés, vous pouvez ajouter une classe en ligne au lieu de styles.

$color = "black";
echo '<div class=".$color.">'

Et ensuite, définissez .black dans votre feuille de style. (Cela ne fonctionne bien entendu que si vous avez une liste prédéfinie d'options de couleur.)

2
Jeremy Ross

Je le fais dans tous mes modèles, utilisez:

<?php
    function hook_css() {
        ?>
            <style>
                .sub { margin: auto; max-width: 1140px;}
            </style>
        <?php
    }
    add_action('wp_head', 'hook_css');
?>

Cela mettra les balises de style référencées et les styles dans la section head à la fin de

<?php wp_head();?>

Si vous le codez dans un modèle, assurez-vous de le mettre avant le

Section <?php wp_head();?>. Vous pouvez en apprendre plus ici WordPress Codex

0
Zachary Raineri

Il suffit d'utiliser:

add_action('admin_head','myfunc24235235');
function myfunc24235235(){ ?>

  <style>
  .smth{ color:red;}
  </style>

    <?php
}
0
T.Todua