ブログ

説明

WordPressサイト全体にAjaxを使用してページングされたコンテンツをロードします。プラグインは、投稿、ページ、検索、カスタム投稿タイプ、WooCommerceで機能します。同じテンプレートに複数の投稿セットをページングします。

デモサイトをご覧ください。

プラグインを使用してショーケースページに掲載するウェブサイトを探しています。興味のある方は、あなたのウェブサイトへのリンクを[email protected]にメールしてください。

3つのページ付けタイプから選択できます。

• 無限スクロール–ユーザーが画面の下部に到達すると、新しい投稿を自動的に読み込みます。
• [さらに読み込む]ボタン–クリックして新しい投稿を読み込みます。
• ページ付け–通常のページ付けですが、次のページにAjaxをロードします。

設定

• さらにヘルプが必要な場合は、このビデオをご覧ください。
• プラグインがインストールされたら、[設定]-> [Ajaxページ付け設定]に移動します。
• 該当するテーマのデフォルトを選択します。テーマがリストされていない場合は、正しいセレクターを追加してください。
• ブラウザ開発ツールを使用して見つけることができる4つの必須セレクターがあります。
• 「投稿セレクター」すべての投稿/製品をラップするセレクター。
• 「投稿セレクター」個々の投稿/製品のセレクター。
• 「ナビゲーションセレクター」投稿/製品ナビゲーションのセレクター。
• 「次のセレクター」ナビゲーションの次のリンクのセレクター。
• ページ付けの種類を選択します。
• オプションのコールバックを追加します。
• [変更を保存]をクリックします。

複数の設定

たとえば、サイトでWooCommerceとブログを実行している場合、2つのテンプレートはおそらく異なるセレクターを使用し、管理者設定とは異なるセットアップが必要になります。

• 画面上部の「新規追加」をクリックします。
• 上記の設定手順を繰り返し、[変更を保存]をクリックします。
• 画面の上部で、保存した設定間を移動できます。

複数の投稿セット

同じテンプレート内の複数の投稿セットをクエリして表示し、それらを個別にページ付けすることができます。これには、ここで概説されているテンプレートファイル内の特定の設定が必要です。

設定を削除

• 画面上部で、削除するページネーション設定を選択します。
• 画面の一番下までスクロールして、[削除]をクリックします。

スタイリングロードモアボタン

• さらに読み込むボタンは、cssクラス.malinky-load-moreのdivでラップされ、ボタンのcssクラスは.malinky-load-more__buttonです。
• テーマのstyle.cssファイルでこれらのスタイルを設定します。

初期化（セットアップ）

プラグインはページが最初にロードされたときに初期化され、次にページネーションがAjaxを使用するように更新されます。プラグインをいつでも再初期化する必要がある場合は、JavaScriptで次の関数を呼び出します。

MalinkyAjaxPaging.setUp();

これは、eコマースサイトでのフィルタリングなど、ページで他のjavascript / ajaxを実行する場合に役立ちます。

折り返し電話

• 新しい投稿の各セットがロードされた後に実行される設定に、独自のJavascriptコードを追加します。
• コールバックは、loadedPosts（新しい投稿の配列）とurl（ロードされたURL）の2つのパラメーターを受け取ります。

カスタムイベント

トリガーされるカスタムイベントは3つあります。これらのイベントにバインドして、独自のアクションを実行します。

• malinkyPaginationInitialized。初期化後にトリガーされます。

  document.addEventListener('malinkyPaginationInitialized', function(e) {
        console.log('PaginationInitialized');
      });
  

• malinkyLoadPostsStart。新しい投稿が読み込まれる前にトリガーされます。

  document.addEventListener('malinkyLoadPostsStart', function(e) {
        console.log('LoadPostsStart');
      });
  

• malinkyLoadPostsComplete。新しい投稿が読み込まれた後にトリガーされます。

  document.addEventListener('malinkyLoadPostsComplete', function(e) {
        console.log('LoadPostsComplete');
      });
  

• イベントは、ページで単一のページ付けセットを使用する場合にのみ機能します。

アイソトープ/組積造

アイソトープ/石積みレイアウトを使用している場合は、設定にコールバックを追加して、新しい投稿が追加されたときにレイアウトする必要があります。これは次の形式である必要があります。

$('.grid').isotope('reloadItems').isotope();

クラス名.gridへの参照を独自のコンテナ要素に変更します。

追加

• 無限スクロールを使用する場合は、次の投稿セットが読み込まれる前に、バッファーをピクセル単位で修正するオプションがあります。
• さらにロードボタンを使用する場合は、ボタンのテキストを修正するオプションがあります。
• 独自のpreloader.gifを選択できます。
• ページネーションを使用すると、ブラウザの履歴が維持され、訪問者はブラウザの戻るボタンと進むボタンを期待どおりに使用できます。

条件付き読み込み

デフォルトでは、プラグインはページが読み込まれるたびに読み込まれます。wp-config.phpファイルで次の定数をfalseに設定することで、JavascriptとCSSの読み込みを停止できます。

define('MALINKY_LOAD_JS', false);
define('MALINKY_LOAD_CSS', false);

または、これらの2行をfunctions.phpに追加します

add_filter( 'malinky_load_js', '__return_false' );
add_filter( 'malinky_load_css', '__return_false' );

無効にすると、wp_head（）の前に以下を追加することで、特定のテンプレートにJavascriptとCSSをロードできます。

global $malinky_ajax_pagination;
$malinky_ajax_pagination->malinky_ajax_pagination_styles();
$malinky_ajax_pagination->malinky_ajax_pagination_scripts();