web-dev-qa-db-ja.com

Appearance-> Themesページでテーマの「Live Preview」のURLを変更するにはどうすればいいですか？

Appearance-> Themesページで、テーマの "Live Preview" URLを変更する方法が必要ですか？テーマのサムネイルを、カスタマイザを開かずにテーマを紹介するデモサイトにリンクさせたい。私はいくつかのコードを調べましたが、私は解決策をあまり見ていませんが、他の誰かがこれにトリックを持っているかどうか疑問に思いました。ありがとう

themestheme-customizer
2
David Labbe

テーマの外部ライブプレビュー

の Live Preview /wp-admin/themes.phpページのボタンは、tmpl-themeマイクロテンプレートから生成されます。

<script id="tmpl-wpse" type="text/template">

    ...cut...

        <div class="theme-actions">

        <# if ( data.active ) { #>
                <# if ( data.actions.customize ) { #>
                        <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a>
                <# } #>
        <# } else { #>
                <a class="button button-secondary activate" href="{{{ data.actions.activate }}}"><?php _e( 'Activate' ); ?></a>
                <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
        <# } #>
        </div>

    ...cut...

  </script>

wp_prepare_themes_for_jsフィルタを介してテンプレートデータを修正することができます。

これが例です：

/**
 * External Live Previews
 */
add_filter( 'wp_prepare_themes_for_js', function(  $prepared_themes )
{
    //--------------------------
    // Edit this to your needs:

    $externals = [ 
        'twentysixteen' => 'http://foo.tld/demo/twentysixteen/', 
        'twentyfifteen' => 'http://bar.tld/demo/twentyfifteen/' 
    ];
    //--------------------------

    foreach( $externals as $slug => $url )
    {
        if( isset( $prepared_themes[$slug]['actions']['customize'] ) )
            $prepared_themes[$slug]['actions']['customize'] = $url;
    }   

    return $prepared_themes;
} );

しかし、load-customizeクラスがクリックイベントを引き起こし、iframeオーバーレイを次のように開くので、これは期待通りに動作しません。

$('#wpbody').on( 'click', '.load-customize', function( event ) {
    event.preventDefault();

    // Store a reference to the link that opened the Customizer.
    Loader.link = $(this);
    // Load the theme.
    Loader.open( Loader.link.attr('href') );
});

をクリックすると Live Preview ボタン、外部のURLで、それはのようなエラーを引き起こすでしょう：

セキュリティエラーが発生しました： 'History'で 'pushState'の実行に失敗しました：URLが 'http://foo.tld/demo/twentysixteen/'の履歴状態オブジェクトは、Originがhttp://example.tld、URLがhttp://example.tld/wp-admin/themes.phpの文書には作成できません。

これを防ぐには、ダブルクリック（本当に信頼できるオプションではありません）するか、外部プレビューリンクのload-customizeクラスを削除します。これがそのようなハックの1つです。

/**
 * Remove the .load-customize class from buttons with external links
 */
add_action( 'admin_print_styles-themes.php', function()
{ ?>
    <script>
        jQuery(document).ready( function($) {
            $('.load-customize').each( function( index ){
                if( this.Host !== window.location.Host )
                    $( this ).removeClass( 'load-customize' );
            } );
        });
    </script> <?php
} );

@daved ここ からthis.Hostというアイデアを得ました。

もう1つのもっと劇的なアプローチはtmpl-themeテンプレートを上書きすることです。

1
birgire

WordpressはテーマプレビューのURLを取得するためにwp_customize_urlを呼び出すようですが、フィルタをかけることができるフィルタの方法はそれほど多くありません（ https://developer.wordpress.org/reference/functions/wp_customize_url/ ）。 admin_urlフィルタに潜在的にフックして変更を加えることができます - しかしcustomize.phpが送信されるときに異なるURLを返すことは明らかにライブプレビュー機能だけではなくカスタマイザのすべてのインスタンスに影響します。これがあなたに関係がないなら、これはあなたが必要とするものかもしれません：

add_filter("admin_url", "my_live_preview", 10, 3);
function my_live_preview($url, $path, $blog_id){
  if($path == "customize.php"){ $url = "http://offsitethemepreviewurl.com"; }
  return $url;
}

その後、この$urlに?theme=name-of-themeを追加することで、そのページでどのテーマが要求されているかを判断できます。

これは合うかもしれないし、そうでないかもしれません。

そうでない場合は、URLを変更するためのフロントエンドJavaScriptが残っていると思います。 admin_enqueue_scriptsを使用して管理者にJavaScriptファイルをエンキューする必要があり（ヘルプについては https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts を参照）、次にLive Previewリンクを参照します。

jQuery(".theme-browser .theme[aria-describedby*='twentysixteen'] .button.load-customize")
  .attr("href", "http://offsitethemepreviewurl.com/");

これは、TwentysixteenテーマのLoad Previewリンクを http://offsitethemepreviewurl.com に変更します。

私はこれらの解決策のどちらもテストしていません...しかし、私はそれらがうまくいくと思います:)

0
Tim Malone

あなたがWPカスタマイザを使用している場合、Javascriptを使って現在のプレビューURLを変更する方法は次のとおりです。

コントロールパネルから現在のURLを変更する予定がある場合は、これを試してください。wp.customize.previewer.previewUrl( url )

プレビューフレームからURLを変更したい場合は、これを試してください：wp.customize.preview.send( "url", url )

さらに、コントロールパネルから現在のプレビューURLを取得する方法は次のとおりです。wp.customize.previewer.previewUrl()

0
mj_azani