web-dev-qa-db-fra.com

Comment changer l'URL "Live Preview" des thèmes dans la page Apparence-> Thèmes?

J'ai besoin d'un moyen de changer l'URL "Live Preview" des thèmes dans la page Apparence-> Thèmes? Je souhaite que les miniatures des thèmes soient liées à un site de démonstration présentant le thème et n'ouvrent pas le personnalisateur. J'ai jeté un coup d'œil dans le code, mais je ne vois pas grand chose à la recherche d'une solution, mais je me demandais si quelqu'un d'autre avait un truc pour ça. Merci

themestheme-customizer
3
David Labbe

Externe Aperçus en direct ​​Pour les thèmes

Le Live Preview les boutons, sur la page /wp-admin/themes.php, sont générés à partir du [tmpl-theme micro-modèle:

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

Nous pouvons modifier les données de modèle via le filtre wp_prepare_themes_for_js.

Voici un exemple:

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

Mais cela ne fonctionnera pas comme prévu, à cause de la classe load-customize, cela déclenchera un événement click et ouvrira une superposition iframe avec:

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

Quand on clique sur le Live Preview bouton, avec une URL externe, cela déclenchera une erreur comme:

Uncaught SecurityError: Impossible d'exécuter 'pushState' sur 'History': Un objet d'état historique avec l'URL 'http://foo.tld/demo/twentysixteen/' ne peut pas être créé dans un document avec l'origine 'http://example.tld' et l'URL 'http://example.tld/wp-admin/themes.php'.

Nous pourrions empêcher cela en double-cliquant (ce qui n'est pas vraiment une option fiable) ou en supprimant la classe load-customize pour les liens de prévisualisation externe. Voici un tel hack:

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

où j'ai eu l'idée this.Host de @daved here .

Une autre approche plus radicale consisterait à remplacer le modèle tmpl-theme.

1
birgire

Wordpress semble appeler wp_customize_url pour obtenir l'URL d'aperçu du thème, et il n'y a pas beaucoup de filtres auxquels vous pouvez vous connecter ( https://developer.wordpress.org/reference/functions/wp_customize_url/ ). Vous pouvez éventuellement vous connecter au filtre admin_url pour apporter des modifications - mais le renvoi d'une URL différente lorsque customize.php est envoyé aura évidemment une incidence sur chaque instance du personnaliseur, et pas uniquement sur la fonction d'aperçu en direct. Si cela ne vous concerne pas, alors cela pourrait être ce dont vous avez besoin:

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

Ce $url sera ensuite ajouté par ?theme=name-of-theme, ce qui vous permettrait de déterminer sur cette page le thème demandé.

Cela peut ou peut ne pas convenir.

Si ce n'est pas le cas, je pense qu'il vous reste du JavaScript pour modifier l'URL. Vous devez mettre en file d'attente un fichier JavaScript dans l'administrateur à l'aide de admin_enqueue_scripts (voir https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts pour obtenir de l'aide), puis faites référence au lien de prévisualisation en direct:

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

Cela devrait changer le lien Charger l'aperçu pour le thème des vingt-six ans en http://offsitethemepreviewurl.com .

Je n'ai testé aucune de ces solutions ... mais je pense qu'elles vont fonctionner :)

0
Tim Malone

Si vous utilisez wp customizer, voici comment modifier l'URL de prévisualisation actuelle via Javascript:

Essayez-le lorsque vous envisagez de modifier l'URL actuelle à partir du panneau de commandes: wp.customize.previewer.previewUrl( url )

ou essayez celui-ci pendant que vous avez l'intention de changer l'URL du cadre de prévisualisation: wp.customize.preview.send( "url", url )

De plus, voici comment obtenir l'URL de prévisualisation actuelle à partir du panneau de commandes: wp.customize.previewer.previewUrl()

0
mj_azani