web-dev-qa-db-ja.com

Wordpressのコントロールパネルにプレビューを追加する

私は新しいwordpressテンプレートを作成しようとしていて、その中にコントロールパネルを追加しました。このコントロールパネルの中に、地図上のどこに配置したいかをユーザーが選択できるオプションがあります。コントロールパネルを介してdivの左と上の属性。これで、変更のプレビューを表示できるiframeを追加する方法がわかりましたが、望みどおりに機能しません（プレビューを追加する方法はこちらをご覧ください： テーマコントロールでCSSを変更するパネル ）追加したいのは、リアルタイムプレビューです。ユーザーがTOPまたはLEFT属性のプレビューを変更するとすぐに、それが「ライブ」ブログに表示せずにそれが何をしているのかを表示する必要があります。

これが私の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"),
);

これは、コントロールパネル内にプレビューを表示するために使用する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>

さて、今大きな問題はリアルタイムでプレビューを追加するためのSTEP TO STEPの方法があることです（私はそれをうまく説明する方法がわかりません、本当にごめんなさい...）、あなたはそれが可能になると思いますかAJAXを使用するには？ （私はそれについて聞いたことがありますが、私はプログラマーではありませんので、ダミープルーフの方法で書いてください!!!）SAVEボタンだけでなくPREVIEWボタンも追加する必要がありますか？追加するには？ digitalnatureによるMystiqueのテーマを知っていますか？このようなものは素晴らしいでしょう！あなたがここでそれを書くことができないならば、なぜあなたはあなたのウェブサイトの上で非常に良い、そして段階的な、チュートリアルを書きませんか？ WordPress 3.x用のたくさんの機能を備えた非常に優れたTheme-Optionパネルを作成する方法についての優れた記事が不足しているかもしれません。ご清聴ありがとうございました。

theme-developmentcsstemplatesajaxtheme-options
3
Downloadtaky

Mystiqueテーマ（プレビューBTW付きのオプションパネルの素晴らしい例）を見ると、主なアイデアはフォームフィールドOnChangeまたはchange（）イベントをJqueryと少しのajaxでプレビューするためのものです。

それで、あなたはajaxによってプレビューをロードするために1つの機能を持っています

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

自動プレビュー効果を作成するには、PHPでJQueryを使用します。

$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"というIDを持つ2つの入力フィールドと、 "themepreview"というIDを持つIframeをラップするdivがあると仮定します。

そしてそれはあなたが始められるべきです。

更新：

追加する必要があることを私は忘れていました：

add_action('wp_ajax_site_preview', 'mystique_get_site_preview');

今

コードの最初の部分と最後の行は、functions.phpに入ります。

そして第二部はあなたのテーマオプションパネルページに行く必要があります。

4
Bainternet

作者が彼の要求を解決したように見えても、私はこれを達成する方法に関するより良い解決策を投稿するつもりです（私はMystique btwの作者でもあります）。多分それは他人を助けるでしょう。

だから、最初にあなたはiframe文書 - あなたのホームページが必要です。私はそれを得るためにajaxを使っていますが、必ずしもそうする必要はありません。他のHTMLと同じように、通常はテーマ設定フィールドの上にiframeを追加できます。

<?php home_url(); ?>/?themepreview（またはユーザーadd_query_argなど）のように、iframeターゲットURLにクエリ引数を追加することを忘れないでください。これは重要です、後で見ます。

次に、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の内容を変更するには、フロントエンドにも上記のスクリプトを含める必要があります。しかし、これは上記のquery引数が存在する場合にのみ行います。そのため、テーマのプレビューが要求されたときにのみそれらを含めます。すべてのページロードでは含まれません。

フロントエンドのドキュメントでは、受信部分を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');

});

以上です ：）

Mystiqueのバージョン3のサンプルコードもあります。

0
onetrickpony