downloadtaky
  • 0
Новичок

Добавить предварительный просмотр в панель управления WordPress

  • 0

Я пытаюсь создать новый шаблон WordPress, и внутри него я добавил панель управления, внутри этой панели управления есть опция, которая позволяет пользователю выбирать, где он хочет разместить на карте, я пытаюсь объяснить: пользователь может установить левый и верхний атрибуты div через панель управления. Теперь я знаю, как добавить iframe, который может отображать предварительный просмотр изменений, но он не работает так, как хотелось бы (как добавить предварительный просмотр? читайте здесь: Изменение CSS с помощью панели управления темами ). Я хотел бы добавить следующее. предварительный просмотр в реальном времени. Как только пользователь изменяет атрибут TOP или LEFT, предварительный просмотр должен показывать, что происходит, не показывая его в «живом» блоге.

Вот моя функция.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"),
);

Это iframe, который я использую для отображения предварительного просмотра в панели управления:

<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>

Хорошо, теперь большой вопрос, есть ли ШАГ ЗА ШАГОМ способ добавить предварительный просмотр в реальном времени (я не знаю, как это лучше объяснить, мне очень жаль…), как вы думаете, будет ли это возможно? использовать аякс? (Я слышал об этом, но я не программист, так что, пожалуйста, пишите в стиле Dummy Proof!!!) Нужно ли будет добавлять кнопку ПРЕДПРОСМОТР вместо одной кнопки СОХРАНИТЬ? Как это добавить? Вы знаете тему Mystique от digitalnature? что-то вроде этого будет БОЛЬШИМ! Если вы не можете написать это здесь, почему бы вам не написать очень хорошее и пошаговое руководство на своем веб-сайте? Не хватает хороших статей о том, как создать очень хорошую панель Theme-Option с большим количеством функций для wordpress 3.x, может быть, вы будете следующим, и вы также поможете нам… бедные нубы 🙂 Большое спасибо за ваше время и терпение!

Share
  1. Если вы посмотрите на тему Mystique (отличный пример панели параметров с предварительным просмотром, кстати), вы увидите, что основная идея состоит в том, чтобы очистить поля формы от событий OnChange или change(), чтобы загрузить предварительный просмотр темы с помощью Jquery и немного ajax.

    Итак, у вас есть одна функция для загрузки ajax предварительного просмотра

    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();
    }
    

    и для создания эффекта автоматического предварительного просмотра вы используете JQuery с 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>
    

    Теперь этот код предполагает, что у вас есть два поля ввода с идентификаторами «zona1y» и «zona1y» и div, обертывающий ваш Iframe с идентификатором «themepreview».

    и это должно заставить вас начать.

    Обновлять:

    Я забыл, что вам нужно будет добавить:

    add_action('wp_ajax_site_preview', 'mystique_get_site_preview');
    

    Сейчас

    первая часть + последняя строка кода идут в ваш functions.php

    а вторая часть должна быть на странице панели параметров вашей темы.

    • 0
  2. Несмотря на то, что автор решил свою просьбу, я опубликую лучшее решение о том, как этого добиться (кстати, я также являюсь автором Mystique). Может быть, это поможет другим.

    Итак, сначала вам нужен документ iframe — ваша домашняя страница. Я использую ajax, чтобы получить его так же, как и в приведенной выше функции, но вам не обязательно это делать. Вы можете просто добавить iframe над полями настроек вашей темы, как и любой HTML.

    Не забудьте добавить аргумент запроса к целевому URL-адресу iframe, например <?php home_url(); ?>/?themepreview (или пользовательский add_query_arg или что-то еще). Это важно, вы увидите позже.

    Далее вам нужно найти способ связи с iframe. Ознакомьтесь со сценариями postMessage и JSON2. Поставьте их в очередь на странице настроек.

    Теперь просто привяжите функцию к событиям, которые вам нужны для запуска предварительного просмотра в реальном времени. Например, предположим, что у вас есть текстовый ввод с именем «page_width»:

    <input name="page_width" />
    

    в вашей функции jQuery document.ready у вас будет что-то вроде этого:

    // 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
      });
    });
    

    Таким образом, pm функция отправит входное значение в iframe.

    Теперь, чтобы iframe изменил свое содержимое, вам также необходимо включить вышеуказанные скрипты в интерфейсе. Но делайте это только в том случае, если указанный выше аргумент запроса присутствует, поэтому вы включаете их только тогда, когда запрашивается предварительный просмотр темы, а не при каждой загрузке страницы.

    Во внешнем интерфейсе document.ready обрабатывает принимающую часть с помощью 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');
    
    });
    

    Вот и все 🙂

    Вы также можете найти пример кода в версии 3 Mystique…

    • 0

Оставить ответ

You must login to add an answer.