web-dev-qa-db-fra.com

Ajouter un aperçu à un panneau de configuration Wordpress

J'essaie de créer un nouveau modèle WordPress et à l'intérieur de celui-ci, j'ai ajouté un panneau de configuration. À l'intérieur de ce panneau de configuration, une option permet à l'utilisateur de choisir l'emplacement de son choix sur une carte. J'essaie d'expliquer: l'utilisateur peut définir Les attributs left et top de div via le panneau de configuration. Maintenant, je sais comment ajouter un iframe pouvant afficher un aperçu des modifications, mais cela ne fonctionne pas comme je le voudrais (comment ajouter un aperçu? À lire ici: Modifier le code CSS via un contrôle de thème Panel ) Ce que je voudrais ajouter, c'est un aperçu en temps réel . Dès que l'utilisateur modifie l'attribut TOP ou LEFT, l'aperçu de l'attribut doit montrer ce qu'il se passe sans le montrer au blog "en direct".

Voici mon function.php:

array( "name" => "Before we start",
    "type" => "section"),
array( "type" => "open"),
array( "name" => "Where is the map?",
    "desc" => "Insert map page url",
    "id" => $shortname."_pama",
    "type" => "text",
    "std" => "http://examplepage.com"),
array( "type" => "close"),
array( "name" => "Zona 1",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Activate zona 1?",
    "desc" => "Choose yes or no",
    "id" => $shortname."_zona1c",
    "type" => "checkbox",
    "std" => "false"),
array( "name" => "Zona 1 X-Axis",
    "desc" => "Where do you want it on x-axis?",
    "id" => $shortname."_zona1x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 1 Y-Axis",
    "desc" => "Where do you want it on y-axis?",
    "id" => $shortname."_zona1y",
    "type" => "text",
    "std" => "Top:???"),
array( "type" => "close"),
array( "name" => "Zona 1",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Activate zona 2?",
    "desc" => "Choose yes or no",
    "id" => $shortname."_zona1c",
    "type" => "checkbox",
    "std" => "false"),
array( "name" => "Zona 2 X-Axis",
    "desc" => "Choose where you want it on X-Axis",
    "id" => $shortname."_zona2x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 2 Y-Axis",
    "desc" => "Choose where you want it on Y-Axis",
    "id" => $shortname."_zona2y",
    "type" => "text",
    "std" => "Top:???"),
array( "type" => "close"),
array( "type" => "close"),
);

Voici l'iframe que j'utilise pour afficher l'aperçu dans le panneau de configuration:

<iframe src="<?php echo clean_url(apply_filters('preview_post_link', add_query_arg('preview', 'true', get_option('appacqua_pama')))); ?>" width="100%" height="600" ></iframe>

Ok, maintenant la grande question est-il un moyen étape par étape d'ajouter un aperçu en temps réel (je ne sais pas comment l'expliquer mieux, je suis vraiment désolé ...), que pensez-vous que cela sera possible utiliser ajax? (J'en ai entendu parler mais je ne suis pas un programmeur, alors écrivez-moi d'une manière factice !!!) Devrai-je également ajouter un bouton PREVIEW au lieu du bouton SAVE? Comment l'ajouter? Connaissez-vous le thème Mystique de digitalnature? quelque chose comme ce sera génial! Si vous ne pouvez pas l'écrire ici, pourquoi ne pas écrire un très bon tutoriel sur votre site Web? Il manque de bons articles sur la création d'un très bon panneau d'options sur le thème avec de nombreuses fonctionnalités pour wordpress 3.x, vous serez peut-être le prochain et vous nous aiderez aussi ... pauvres noobs :-) Merci beaucoup pour votre temps et votre patience!

theme-developmentcsstemplatesajaxtheme-options
3
Downloadtaky

Si vous regardez le thème Mystique (un excellent exemple de panneau d'options avec aperçu BTW), vous pouvez voir que l'idée principale est de laver les événements OnChange ou change () de champs de formulaire pour charger l'aperçu du thème avec Jquery et un peu d'ajax.

Vous avez donc une fonction à charger en ajax l'aperçu

function mystique_get_site_preview() {
  check_ajax_referer("site_preview"); ?>
  <iframe id="themepreview" name="themepreview" src="<?php echo get_option('home'); ?>/?preview=1"></iframe>
  <?php die();
}

et pour créer l’effet de prévisualisation automatique, utilisez JQuery avec PHP:

$nonce = wp_create_nonce('site_preview');
?>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#$zona1y").change(function() {// if a user changed the y-Axis
            check_preview_refresh();
            }
        );
        jQuery("#$zona1x").change(function() {// if a user changed the x-Axis
            check_preview_refresh();
            }
        );
    });

    function check_preview_refresh(){
        if (jQuery("#zona1y").val() != '' && jQuery("#zona1x").val() != '' ){
            jQuery.ajax({
                type: "post",url: "admin-ajax.php",data: { action: 'site_preview', _ajax_nonce: '<?php echo $nonce; ?>' },
                success: function(html){
                    jQuery("#themepreview").html(html);
                    jQuery("#themepreview").show();
                }
            });
        }
    }
</script>

Maintenant, ce code suppose que vous avez deux champs d'entrée avec l'id de "zona1y" et "zona1y" et une div enveloppant votre Iframe avec l'id de "themepreview".

et cela devrait vous aider à démarrer.

Mettre à jour:

J'ai oublié que vous devrez ajouter:

add_action('wp_ajax_site_preview', 'mystique_get_site_preview');

À présent

la première partie + la dernière ligne de code vont dans votre functions.php

et la deuxième partie doit aller sur la page de votre panneau d'options de thème.

4
Bainternet

Même s'il semble que l'auteur ait résolu sa requête, je vais vous proposer une meilleure solution pour y parvenir (je suis également l'auteur de Mystique, d'ailleurs). Peut-être que cela aidera les autres.

Donc, vous avez d’abord besoin du document iframe - votre page d’accueil. J'utilise ajax pour l'obtenir comme dans la fonction ci-dessus, mais vous n'avez pas nécessairement besoin de faire cela. Vous pouvez simplement ajouter normalement l'iframe au-dessus des champs de configuration de votre thème, comme pour tout code HTML.

N'oubliez pas d'ajouter un argument de requête à l'URL cible de l'iframe, tel que <?php home_url(); ?>/?themepreview (ou l'utilisateur add_query_arg ou autre). C'est important, vous verrez plus tard.

Ensuite, vous devez trouver un moyen de communiquer avec l’iframe. Découvrez les scripts postMessage et JSON2 . Mettez-les en file d'attente dans votre page de paramètres.

Maintenant, liez simplement une fonction sur les événements dont vous avez besoin à l'aperçu en direct à déclencher. Par exemple, supposons que vous ayez une entrée de texte nommée "page_width":

<input name="page_width" />

dans votre fonction document.ready de jQuery, vous obtiendrez quelque chose comme ceci:

// event can be anything, click/change/input or a custom colorpicker event...
$("input[name='page_width']").change(function(){

  // get the value entered by the user
  var current_page_width = $(this).val();

  // send this value trough postMessage to the iframe document
  pm({
    target: window.frames["themepreview"],  // this needs to be the iframe ID
    type: 'page_width',
    data: current_page_width
  });
});

Donc, la fonction pm enverra la valeur d'entrée à l'iframe.

Maintenant, pour que l’iframe change de contenu, vous devez également inclure les scripts ci-dessus sur le front-end. Mais ne le faites que si l'argument de requête ci-dessus est présent. Vous ne les incluez donc que lorsqu'un aperçu de thème est demandé, et non à chaque chargement de page.

Dans le document du client frontal, gérez la partie réceptrice avec pm.bind():

// first argument should be the "type" from above
pm.bind('page_width', function(data){

  // data that's being received is the 'current_page_width', so just set the new width to the element you need to
  $('#page').css('width', data + 'px');

});

Et c'est tout :)

Vous pouvez également trouver un exemple de code dans la version 3 de Mystique ...

0
onetrickpony