Come caricare il contenuto di una pagina con AJAX utilizzando Fancybox in WordPress

Question

Come caricare il contenuto di una pagina con AJAX utilizzando Fancybox in WordPress

10 gen 2014, 00:46:52

Visualizzazioni: 18.9K

Voti: 0

Ho trovato molti tutorial su come caricare dinamicamente le pagine in WordPress e persino i contenuti delle pagine, come questi:

come-caricare-solo-il-contenuto-di-un-post-wordpress-usando-ajax

e

Il modo migliore per caricare il contenuto di una pagina in un popup Fancybox?

Ma non mi portano esattamente dove voglio arrivare.

Il problema principale che sto affrontando è che voglio aprire la pagina all'interno di Fancybox tramite Ajax, ma voglio anche che quella pagina sia accessibile tramite il suo URL normale, nel caso in cui voglia inviare un utente direttamente a quella pagina. Capisco che potrei duplicare ogni pagina (una usando un template ridotto per Fancybox, l'altra per il sito effettivo), ma sembra un incubo di manutenzione in futuro.

Quindi, in breve; voglio utilizzare AJAX per recuperare e caricare solo il contenuto di un post e visualizzarlo usando Fancybox.

Qualche suggerimento ragazzi? :)

user2558393

13

ajax

Tutte le risposte alla domanda

Foxsk8 131 · Accepted Answer · 2014-01-10T02:27:40Z

Ecco qui. Google non utilizza JS e non c'è niente di elaborato. Inoltre, i link possono essere usati senza GET, solo un semplice URL: pagina.com/nome-post/

Nella pagina singola:

<?php
$apost = $_GET["type"];
preg_replace('/_/', 'html', preg_replace('/%/', 'html', htmlentities(mysql_real_escape_string($apost))));
?>
<?php if($apost == 'iframe') { ?>
<?php get_header('single'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="popup people">
    staff del popup
</div>
<?php endwhile; endif; ?>
</body>
</html> 
<?php } else { ?>

<?php get_header(); ?>
<div class="single">
    <?php if (have_posts()) : while (have_posts()) : the_post();?>
    staff del contenuto
    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

<?php } ?>

Su pulsante HTML o link, ecc:

<a href="<?php the_permalink();?>#<?php the_ID(); ?>" data-fancybox-type="iframe" class="various" id="<?php the_ID(); ?>" data-class="<?php echo get_post_type( get_the_ID() ); ?>">Visualizza elemento</a>

In Javascript:

$(".results .results_item a").each(function(){
        var hrefParts = $(this).attr('href').split('#');
        $(this).attr('href', hrefParts[0] + '?type=iframe#' + hrefParts[1]);
        });

$("a").fancybox({
    maxWidth    : 615,
    maxHeight   : 2000,
    fitToView   : true,
    width       : '100%',
    height      : '100%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    wrapCSS : 'people' // aggiunge un selettore di classe al wrap fancybox
});

$("a").click(function(event) {
        window.location.hash = this.hash;
    });

    if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Inserisce l'hash in una variabile e rimuove il carattere #
      var new_class_name = $("#" + hash).data("class");
      $("#" + hash).fancybox({
        maxWidth    : 615,
        maxHeight   : 2000,
        fitToView   : true,
        width       : '100%',
        height      : '100%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        wrapCSS : new_class_name // aggiunge un selettore di classe al wrap fancybox
    }).trigger('click');
      // hash trovato
      } else {
          // Nessun hash trovato
      }