WordPress : 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 des thèmes « Aperçu en direct » dans la page Apparence-> Thèmes ? Je souhaite que les vignettes des thèmes soient liées à un site de démonstration présentant le thème et n’ouvrent pas le personnalisateur. J’ai regardé dans le code mais je ne vois pas grand-chose pour une solution, mais je me demandais si quelqu’un d’autre avait une astuce pour cela. Merci

Solution n°1 trouvée

WordPress semble appeler wp_customize_urlpour 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 potentiellement vous connecter au admin_urlfiltre pour apporter des modifications – mais le renvoi d’une URL différente lors customize.phpde l’envoi affectera évidemment chaque instance du personnalisateur, pas seulement la fonction d’aperçu en direct. Si cela ne vous concerne pas, alors ceci 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;
}

Celui -ci $urlsera ensuite ajouté ?theme=name-of-theme, ce qui vous permettra de déterminer sur cette page quel thème est demandé.

Cela peut convenir ou non.

Si ce n’est pas le cas, je pense qu’il vous reste du JavaScript frontal pour modifier l’URL. Vous devrez 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 référencer le lien Aperçu en direct :

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

Cela devrait changer le lien Load Preview pour le thème Twentysixteen en http://offsitethemepreviewurl.com.

Je n’ai testé aucune de ces solutions… mais je pense qu’elles fonctionneront 🙂

Solution n°2 trouvée

Aperçus externes en direct pour les thèmes

Les Live Previewboutons, sur la /wp-admin/themes.phppage, sont générés à partir du micro template 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>

Nous pouvons modifier les données du modèle via le wp_prepare_themes_for_jsfiltre.

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 load-customizeclasse, qui 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') );
});

Lorsque nous cliquons sur le Live Previewbouton, avec une url externe, cela déclenchera une erreur du type :

Erreur de sécurité non interceptée : Échec de l’exécution de ‘pushState ‘ sur ‘Historique’ : un objet d’état d’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 (pas vraiment une option fiable) ou en supprimant la load-customizeclasse pour les liens de prévisualisation externes. 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’ this.hostidée de @daved ici.

Une autre approche plus drastique consisterait à remplacer le tmpl-thememodèle.

Solution n°3 trouvée

Si vous êtes dans wp customizer, voici comment vous pouvez modifier l’URL d’aperçu actuelle via Javascript :

Essayez celui-ci lorsque vous envisagez de modifier l’URL actuelle à partir du panneau de configuration :
wp.customize.previewer.previewUrl( url )

ou essayez celui-ci pendant que vous avez l’intention de changer l’URL du cadre d’aperçu :
wp.customize.preview.send( "url", url )

De plus, voici comment obtenir l’URL d’aperçu actuelle à partir du panneau de configuration :
wp.customize.previewer.previewUrl()