7

PJAXをWordpressのインストールに統合しようとしていますが、使用しているコードは次のとおりです。

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

私は彼らがPJAXデモページに持っているデモをたどっていますが、彼らが使用したコンテナ（#main）を私のWordpressテーマのコンテナであるに置き換えてい#middlewrapます。

コンソールに奇妙なエラーは表示されませんが、どちらも機能しません。助けに感謝します！

4

5 に答える 5

3

ここを見てください：https ：//github.com/nikolas/pjax-menu それが役立つことを願っています:)

編集：http ：//wordpress.org/extend/plugins/pjax-menu/

于 2011-08-22T16:26:38.007 に答える
2

私はこれに対するいくつかのアプローチを検討しましたが、レイアウトが適度に多様であるWordPressテーマに対して現実的にするのに十分なほど単純または柔軟なアプローチを見つけることができませんでした。

この目的のためにdjaxjqueryプラグインをまとめました。これにより、特定のクラスを割り当てることで、ページ上のどの要素を動的にロードするかを指定できます。デフォルトでは、すべての内部リンクをajaxizingし、パラメータとして除外するURLフラグメントの配列を受け入れます。もちろん、pushstateを使用してブラウザの履歴を維持し、履歴APIが利用できない場合は正常に機能を低下させます。上記のリンクの「LiveExamples」セクションに、WordPressBonesテーマを使用した修正されたWordPressインストールの例があります。

そのテーマは、djaxでajaxifyするために約30行のコード変更を要しました。ドキュメントとダウンロードリンクについては、最初のリンクをご覧ください。

于 2012-02-20T05:36:30.210 に答える
2
  1. WordPress用のpjaxメニュープラグインをダウンロードします。

  2. ダウンロードしたアーカイブにはnikolas-pjax-menu-XXXXXXXという名前のフォルダーがあり、そのフォルダーをWordPressアプリケーションのプラグインフォルダーにコピーします。

    / your-wordpress-app-root / wp-content / plugins /

    たとえば、名前をpjax-menuに変更します。

  3. WordPressダッシュボードの[プラグイン]メニューからプラグインをアクティブ化します。

  4. javascriptファイルを編集します

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

    リンク（例:)'#access .menu a'とコンテンツのメインコンテナ（'#main'）に対応します。

  5. WordPressのTwentyElevenテーマv1.2で次のコードを使用しました。

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

  6. おなじみのテーマで動作することがわかったら、ニーズに合わせて変更します

于 2011-10-13T20:06:29.027 に答える
1

PJAXメニューは優れた概念的な出発点ですが、PJAXをサポートしようとしている各ページタイプのレイアウトを（動的コンテンツdivの範囲内で）手動で定義する必要があります。

WordPressをPJAX化することの難しさは、静的またはAJAXの負荷に関係なく、レイアウトとコンテンツが同じに見える必要があることです。広く使用されているThematicテーマフレームワーク（明確に定義された構造、高度に拡張可能）を採用し、PJAXをサポートするように拡張しました：Thematic PJAX

同様に、PJAXとは異なるテーマを使用したい場合は、コードオープンソースをリファレンスとしてリリースしました（github.com/wayoutmind/thematic-pjax）。次の手法が適用されます。

  1. WordPressサイト全体で使用されるレイアウト（つまり、テンプレート）を特定します
  2. 動的div内に表示するために必要な要素（投稿、サイドバーなど）のみを抽出します

  3. ループにフックしてコンテンツをレンダリングする特殊なPJAXテンプレートを作成します。次に例を示します。

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

  4. 必要に応じて、クライアント側のJavaScriptは、PJAXの読み込みに応じて、動的コンテンツdivの親の非動的ノード#wrapper（たとえば、など）を更新して、すべてが正しく表示されるようにする必要があります（たとえば、CSSクラスの追加/削除）。body

  5. これを容易にするために、PHPテンプレートで何らかのタイプのインジケーター（つまり、カスタムXヘッダー）を発行する必要があります
于 2011-12-19T16:13:37.370 に答える
0

素敵なプラグイン。テーマの使用例（Twenty Fifteenで試してみました）：

1.カスタムテンプレートページ

page-pjax.phpテーマ内にファイルを作成します。
管理者で、ページを作成し、このテンプレートを使用します。それは単にそれらの周りにスパンを持つアーカイブリンクを表示します。

<?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.pjaxプラグインとカスタムスクリプトを追加します

テーマのフォルダ内に、次のスクリプト/jsを追加します。jquery.pjax.jsmy-pjax.js

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

3. jQuery、pjax、およびカスタムスクリプトをロードします

でfunctions.php。テンプレートページにのみロードされます。

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.注意事項

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

ANCHORSは、IDを持つアーカイブリンクとウィジェットの最近の投稿です#recent-posts-2。このテストのためにそれを削除するか、必要に応じて別のリンクコンテナを追加します。

TARGETはテンプレートにハードコーディングされています。

オプション、pjaxは完全なHTMLページをロードしないため、フラグメントは不可欠です。ターゲットページのどの部分が必要かを指定する必要があります。
Twenty Fifteenでは、コンテンツはこのdiv内にあります<main id="main" class="site-main" role="main">。使用するテーマに合わせて調整してください。
pjaxノートを参照してください：https ：//github.com/defunkt/jquery-pjax#response-types-that-force-a-reload

于 2017-05-11T19:09:03.677 に答える