web-dev-qa-db-fra.com

Modifier le code CSS via le panneau de configuration du thème

Bonjour à tous, je tente de créer un panneau de configuration avancé pour mon premier modèle Wordpress, mais je ne parviens pas à ajouter la fonction dont j'ai besoin. La fonction que j'essaie d'ajouter est la possibilité de choisir la position d'un DIV (gauche et bas) via le panneau d'administration. (Excuse-moi pour mon très mauvais anglais)

Voici le code que j'ai dans mon functions.php

$shortname = appacqua
array( "name" => "Point on the map",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Have I to activate zona 1?",
        "desc" => "Select if you want to show the first zone",
        "id" => $shortname."_zona1c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 1",
    "desc" => "Choose the position",
    "id" => $shortname."_zona1x",
    "type" => "text",
    "std" => "Left:???"),
array( "type" => "close"),

Je peux voir "box" dans mon panneau d'administration et je n'ai aucun problème avec Checkbox, si j'échoie $ shortname. "_ Zona1x" Il indique le nombre, le seul problème que j'ai, c'est lorsque j'essaie d'ajouter ceci à mon style.css:

.zona1{width:27px;height:27px;background:url(icone/1.png) no-repeat;position:absolute;bottom:0;left:<?php echo $appacqua_zona1x;?>px;}

Cela ne fonctionne pas ... Si j'utilise Google Chrome pour inspecter l'élément, il me donne quelque chose comme:

width: 27px;
height: 27px;
background: url(icone/1.png) no-repeat;
position: absolute;
bottom: 0;
left: <?php echo $appacqua_zona1x;?>px;

Qu'est-ce que je fais mal? Merci beaucoup pour votre aide.

Savez-vous s’il existe un moyen de créer également un aperçu de cette modification à l’intérieur du panneau de commande (comme dans un iFrame ou quelque chose comme ça).

Disons que je suis un "programmeur indépendant": P, alors écrivez-moi "lentement" (lol) et soyez gentil avec moi, merci beaucoup!

adminfunctionscsstemplatestheme-options
3
Downloadtaky

De prime abord, votre ajout de php dans les fichiers css ne fonctionnera pas. Vous devez écrire dans le fichier css lui-même ou le vider directement dans le code HTML comme Jeremy l'a dit pendant que j'écris ceci :)

Écrire un nouveau fichier CSS à chaque fois que vous apportez des modifications peut taxer votre système, mais fonctionne bien si vous n'apportez pas beaucoup de modifications dynamiques à un site actif, par exemple le thème du thème Twenty Weaver.

Un moyen simple de le faire est de transformer votre fichier .css en un fichier .php avec ce qui suit en haut, et votre php/css après.

header('Content-Type: text/css');

L’alternative est de l’écrire dans l’en-tête de votre code HTML, cela fait beaucoup de plugins, et il peut être ennuyeux de modifier le balisage car il n’est pas sémantiquement séparé, mais c’est aussi très facile.

Cela se fait généralement à l'aide de l'API Options: http://codex.wordpress.org/Options_API

Voici un exemple qui a utilisé add_option dans le backend pour la couleur d’arrière-plan (celle-ci est placée dans le fichier header.php, par exemple).

body {
  background-color: <?php echo get_option('background_color'); ?>;

Pour les aperçus, vous pouvez utiliser le lien default_post_link par défaut et utiliser un iframe. Voici un exemple.

 <iframe src="<?php echo clean_url(apply_filters('preview_post_link', add_query_arg('preview', 'true', get_permalink($post->ID)))); ?>" width="100%" height="600" ></iframe>

N'oubliez pas qu'il existe des problèmes de performances lors de l'écriture de styles dynamiques et que vous devez effectuer davantage de recherches sur ce sujet en fonction du contexte.

3
Wyck

Le fichier style.css n'est pas un fichier php, il ne peut donc pas exécuter de code php. Si vous souhaitez inclure ces styles, vous devez créer un générateur de CSS dynamique et l'inclure dans l'en-tête de votre thème ou inclure les styles dans une balise de style.

Je l'ai vu faire les deux, et je considérerais soit acceptable.

Le générateur de css peut être mis en cache par l'utilisateur, il est donc préférable en termes de performances.

2
Jeremy Boyd