Utilizzando PJAX in Wordpress

Question

che sto cercando di integrare PJAX nel mio Wordpress installare, ed ecco il codice che sto usando per esso:

<script src="js/jquery.pjax.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     // pjax 
     $('ul a').pjax('#middlewrap') 
    }) 
</script> 

sto solo seguendo la demo che hanno sul PJAX demo page, ma sostituendo il contenitore che hanno usato (#main) con quello per il mio tema Wordpress, che era #middlewrap.

Non vedo errori strani sulla console, ma non funziona neanche. Apprezzo qualsiasi aiuto!

Answer 1

un'occhiata qui: https://github.com/nikolas/pjax-menu Speranza che aiuta :)

EDIT: http://wordpress.org/extend/plugins/pjax-menu/

Answer 2

1. Scarica pjax menu plugin for wordpress.

2. L'archivio si scarica avrà una cartella denominata Nikolas-pjax-menu-XXXXXXX, copiare la cartella nella cartella plugins dell'applicazione wordpress

   /il-tuo-wordpress-app-root/wp-content/plugins/

   mentre rinominandolo a pjax menu per esempio.

3. Attiva il plug-in dal menu Plugin nel pannello di WordPress.

4. Modificare il file javascript

   /your-wordpress-app-root/wp-content/plugins/pjax-menu/pjax_menu.js

   per accogliere i vostri link (ad esempio : '#access .menu a') e contenitore principale del contenuto ('#main').

5. ho usato il seguente codice su WordPress' Twenty Eleven tema v1.2:

   var $j = jQuery; 
   $j(document).ready 
   (
       function() 
       { 
        $j('#access .menu a').pjax('#main').live 
        (
         'click', 
         function() 
         { 
         } 
        ); 
       } 
   ); 
   

6. Ora, quando lo vedi lavora su un tema familiare, modificarlo a vostro piacimento

Answer 3

PJAX menu è un ottimo punto di partenza concettuale, ma è comunque necessario definire manualmente i layout (nell'ambito del proprio div di contenuto dinamico) per ciascun tipo di pagina che si sta tentando di supportare PJAX.

La difficoltà in PJAXifying WordPress è che i layout e il contenuto devono apparire uguali, indipendentemente dai carichi statici o AJAX.Ho preso il ampiamente utilizzato Thematic theme framework (struttura ben definita, altamente estensibile) ed esteso per sostenere PJAX: Thematic PJAX

Allo stesso modo, se si desidera utilizzare un tema diverso per PJAX, ho pubblicato il codice open source come riferimento (github.com/wayoutmind/thematic-pjax), e si applicano le seguenti tecniche:

1. Identificare il layout (s) (. es Template) da utilizzare in tutta sito WordPress
2. estrarre solo gli elementi necessari (postale, barra laterale, etc) per essere visualizzato all'interno del div dinamico

3. Creare modelli specializzati PJAX che agganciano in The Loop per il rendering del contenuto, ad esempio:

   // Load after template initialized, so we can use widgets and sidebar 
   add_filter('get_header', 'myPJAXTemplate'); 
   

4. Se necessario, il lato client JavaScript dovrà update parent, non-dynamic nodes of your dynamic content div (ad es. #wrapper, body, ecc) in risposta a carichi PJAX quindi tutto sembra giusto (ad es. L'aggiunta/rimozione di classi CSS)

5. Per facilitare questa operazione, Avrai quindi a emit some type of indicator (es. X-header) in PHP modello

Answer 4

Ho esaminato un certo numero di approcci a questo e non sono riuscito a trovarne uno che fosse abbastanza semplice o flessibile da renderlo realistico per un tema WordPress con una varietà anche moderata nel layout.

Ho messo insieme il plugin jQuery djax per questo scopo, che consente di definire quali elementi della pagina caricare dinamicamente assegnando loro una determinata classe. L'impostazione predefinita sarà l'identificazione di tutti i collegamenti interni e accetta un array di frammenti di url da escludere come parametro. Ovviamente utilizza lo stato pushstate per conservare la cronologia del browser e si degrada dolcemente se l'API della cronologia non è disponibile. C'è un esempio di un'installazione di WordPress ajaxified che utilizza il tema WordPress Bones nella sezione Esempi live del link sopra.

Questo tema ha richiesto la modifica di 30 lines of code in ajaxify con djax. Dai un'occhiata al primo link per la documentazione e il link per il download.

Answer 5

Bel plug-in. Esempio di utilizzo su un tema (provato con venti Quindici):

1. pagina modello personalizzato

Creare il file page-pjax.php all'interno del tema.
All'amministratore, creare una pagina e utilizzare questo modello. Mostra semplicemente link di archivio con un intervallo intorno a loro.

<?php 
/** 
* Template Name: Pjax Example 
*/ 
get_header(); ?> 
    <div id="primary" class="content-area"> 
     <main id="main" class="site-main" role="main"> 
     <?php 
     $args = array(
      'type'   => 'daily', 
      'limit'   => '', 
      'format'   => 'html', 
      'before'   => '<span class="a-pjax">', 
      'after'   => '</span>', 
      'show_post_count' => true, 
      'echo'   => 1, 
      'order'   => 'DESC' 
     ); 
     wp_get_archives($args); 
     ?> 
     <div id="pjax-container"></div> 
     </main> 
    </div> 
<?php get_footer(); ?> 

2. plug Add pjax e uno script personalizzato

All'interno della cartella /js sul tema aggiungere jquery.pjax.js e il seguente script my-pjax.js.

jQuery(document).ready(function($) { 
    $(document).pjax('span.a-pjax a, #recent-posts-2 a', '#pjax-container', {fragment:'#main'}) 
}); 

3.Load jQuery, pjax e il nostro script personalizzato

In functions.php. Carica solo nella pagina del modello.

add_action('wp_enqueue_scripts', 'load_scripts_so_43903250'); 
function load_scripts_so_43903250() { 
    if (is_page_template('page-pjax.php')) { 
    wp_register_script('pjax', get_stylesheet_directory_uri() . '/js/jquery.pjax.js'); 
    wp_enqueue_script('my-pjax', get_stylesheet_directory_uri() . '/js/my-pjax.js', array('jquery','pjax')); 
    } 
} 

4. NOTE

$(document).pjax(
    'span.a-pjax a, #recent-posts-2 a', // ANCHORS 
    '#pjax-container', // TARGET 
    {fragment:'#main'} // OPTIONS 
); 

ancore sono l'archivio collega e il widget messaggi recenti che ha il ID #recent-posts-2. Rimuoverlo per questo test o aggiungere un altro contenitore di collegamenti come desiderato.

TARGET è hardcoded sul modello.

OPZIONI, il frammento è essenziale in quanto pjax non carica pagine HTML complete, dobbiamo dirgli quale parte della pagina di destinazione vogliamo.
Su Twenty Fifteen, il contenuto si trova all'interno di questo div: <main id="main" class="site-main" role="main">. Regola in base al tema utilizzato.
_{vedi note pjax: https://github.com/defunkt/jquery-pjax#response-types-that-force-a-reload}