Ajaxでの記事一覧の読み込みを対応したWordPressプラグイン「Slightly Ajax Posts Loader Engine」
WordPressの記事一覧をAjaxで読み込むプラグイン「Slightly Ajax Posts Loader Engine」は、WordPress上のアーカイブページでAjaxによる続きの記事一覧の読み込みを行います。
続きの記事一覧の表示は「ボタン」又は「スクロール」により行うことができます。
プラグインによるAjaxでの記事一覧の表示は、トップページ、カテゴリー、タグなどに代表されるアーカイブに対して有効です。
- おおよそのアーカイブについて、対応している・・・はずです。
- 記事一覧の読み込みはボタン又はスクロールから選択できます。
- HTMLのidをベースにして、記事一覧の追加読み込みを行う箇所をプラグインの設定ページで指定します。HTMLの知識がちょっぴり必要です。
- 表示される記事一覧のテンプレートは、テーマからの相対パスで指定します。この際、メインループテンプレート(archive.php他)に読み込んでいるコンテントテンプレート(content.php等)を利用します。テーマのテンプレート構造(テーマのファイル構成)の知識がこれまたちょっぴり必要です。
- ご自身の作ったWP_Queryによるサブループにも対応してます。
また、このプラグインは、以下の内容を想定して開発しています。
- よくあるオーソドックスなブログやサイトの一意の記事一覧に対して、Ajaxでのこれの読み込みを行う
- 記事一覧の読み込みのアクションはボタン又はスクロールから選びたい
- 制作者じゃなくても、Ajaxによる記事一覧の読み込みをできるようにする
- 制作者でも、functions.phpやスクリプトをコピペすることなくAjaxによる記事一覧の読み込みを実装する
開発した経緯としては、上の3項めの意味が大きいです。サイトによって書き方を変えたりして実装するのが面倒なので作って公開しました。
普通にオーソドックスなサイトやブログに対して実装することを想定するため、一意の記事一覧に特化してます。(つまり、記事一覧が1ページ中複数のものには向いてません。)
以下の画像は、Slightly Ajax Posts Loader EngineのAjaxの記事一覧の設定画面の一部です。
利用・再配布・改変等はご自由にどうぞ。
でも、それに伴うトラブルには腐れコーダーのcattlemuteは一切関与しません。自己責任でお願いします。
あと、プラグインの著作権は放棄していません。プラグイン内での著作権の明記を守っていただければ幸いです。
アップロード方法は[プラグイン] > [新規追加] > [プラグインのアップロード]より、ダウンロードしたZIPファイルをそのままアップロードして下さい。
その後、通常通りプラグインを有効化して、プラグインのダッシュボード([サイト内検索]メニュー)の手順で設定することで先に触れた内容のAjaxによる記事一覧が実装可能です。
プラグインの更新履歴
- 2018/09/11 バージョン0.9.1を公開(スクロールの際のバグを修正)
- 2018/05/28 バージョン0.9.0を公開。
その他
このプラグインはいわゆる野良プラグインです。
ですが、一応のところ開発には極力WordPressの定める形を目指して万全を期して作成をしています。
ただし、アップデートについてはサードパーティ製のライブラリ「Plugin Update Checker Library」を利用しています。
※先発で作成しているプラグインとの互換性はありません。
**********
プラグインのダッシュボード([Ajaxの記事一覧]メニュー)より。
Slightly Ajax Posts Loader Engine
このプラグインは、テーマのディレクトリとHTMLについてほんのちょっぴり知識が必要です。
記事一覧に対して、Ajaxでの動的な追加読み込みを行います。
読み込みにおけるアクションはボタン又はスクロールで設定可能です。
追加で読み込む記事ひとつ毎の表示ファイルは、contentテンプレートを利用します。(例:content.php、content-xxx.php)
基本的に、WordPressの公式テーマのテンプレート構成に準拠していれば、テーマのテンプレートを直接触らずに使用できます。
サードパーティ製やオーダーメイド製のテーマで、メインループのテンプレートに記事ひとつ毎のHTMLが直接書かれたテーマにはこのプラグインは向いていないかもしれません。
また、1ページ中に記事一覧の種類が複数に渡るものについては、このプラグインは適していません。
なお、テーマに付記されているページ送りは * あなた * がCSSなどを使用して消さなければなりません。
使い方
まずはお使いのテーマの構造と内容を確認して下さい。
テーマの構造と内容より、正しく設定できていない場合は正常に動作しません。
テーマのファイル構造やファイル内容が以下のようになっている場合の設定例になります。
テーマのファイル構造例 :
[-] your-using-theme-name [-] content [-] content.php [-] content-sub.php [-] archive.php [-] index.php [-] etc...
メインループのテンプレート :
<?php /** * Main Loop Template - archive.php */ get_header(); ?> <div class="wrap"> <div id="primary"> <!-- コンテントテンプレートを読み込む部分の親要素のIDであることに注目して下さい。 --> <section id="main"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); // これは"content/content-sub.php"のコンテントテンプレートをインクルードしていることを意味します。 get_template_part( 'content/content', 'sub' ); endwhile; else : get_template_part( 'content/content', '404' ); endif; ?> </section> <section id="sub"> <?php get_sidebar(); ?> </section> </div> </div> <?php get_footer(); ?>
メインループよりインクルードされるコンテントテンプレート :
<?php /** * Content Template - content/content-sub.php */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <p class="entry-date"><?php the_date(); ?></p> <h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> </header> <div class="entry-content"> <?php the_excerpt(); ?> </div> </article>
この場合の「記事一覧の読込設定」は以下になります。
記事一覧の読込設定 :
初期設定 > 親要素のID |
main |
---|---|
コンテントテンプレートの設定 > 共通で使用するコンテントテンプレート |
content/content-sub.php |
記事一覧の読込設定の詳細
以下は「記事一覧の読込設定」の説明です。
初期設定
親要素のID | ここに指定したIDを親要素として、コントロール領域と記事のコンテントテンプレートの読込みを行います。セレクタでIDを示す # は必要ありません。 |
---|---|
表示モード | 記事一覧を読込むときの表示モードを、ボタン又はスクロールから選択します。 |
moreのキャプション | moreボタンのキャプションを入力します。 |
ローダーのHTML | 記事を読み込む際に、表示するローディングバーを指定したいときはここにHTMLを入力して下さい。 |
コンテントテンプレートの設定
コンテントテンプレートのパスはテーマからの相対パスで指定します。
共通で使用するコンテントテンプレート | 全てのアーカイブに対して設定するコンテントテンプレートを指定します。カテゴリーやタグなどのアーカイブにコンテントテンプレートの指定を行わない場合、全てここに設定したコンテントテンプレートが表示されます。 |
---|---|
トップページのコンテントテンプレート | トップページに対して設定するコンテントテンプレートを指定します。 |
カテゴリーのコンテントテンプレート | カテゴリーアーカイブに対して設定するコンテントテンプレートを指定します。 |
タグのコンテントテンプレート | タグアーカイブに対して設定するコンテントテンプレートを指定します。 |
タームのコンテントテンプレート | タームのアーカイブに対して設定するコンテントテンプレートを指定します。 |
カスタム投稿タイプのコンテントテンプレート | カスタム投稿タイプのアーカイブに対して設定するコンテントテンプレートを指定します。 |
検索ページのコンテントテンプレート | 検索ページに対して設定するコンテントテンプレートを指定します。 |
日付のコンテントテンプレート | 日付アーカイブに対して設定するコンテントテンプレートを指定します。 |
以外のアーカイブのコンテントテンプレート | 上記以外でその他諸々のアーカイブに対して設定するコンテントテンプレートを指定します。 |
コンテントテンプレートのエキストラ設定
ユーザー定義のコンテントテンプレート | * あなた * が作成した独自のコンテントテンプレートを指定します。 * あなた * の独自テンプレートは10個まで設定可能です。 |
---|
テーマ制作者向けの設定
メインループテンプレートでWP_Queryにより記事一覧のループを行う場合、「WP_Queryに持たせるオプション配列」「ユーザー定義のコンテントテンプレート」をテンプレート上で指定して下さい。
以下の関数を利用して、Ajaxでの記事一覧の表示を行えるようにテンプレート上に追記して下さい。
saple_reregister_query_and_script( $_query_array, $_template_type ); | 関数 | Ajaxによる記事一覧の取得用のスクリプトの再生成を行います。
$_query_arrayはWP_Queryの配列を指定します。 |
---|
設置例 :
以下の例では、「コンテントテンプレートのエキストラ設定」中に指定した「ユーザー定義のコンテントテンプレート1」をインクルードしています。
<?php /** * Main Loop Template */ get_header(); ?> <div class="wrap"> <div id="primary"> <?php $args = array( 'post_type' => 'topics', ); saple_reregister_query_and_script( $args, 'user1' ); $query = new WP_Query( $args ); ?> <section id="main"> <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); get_template_part( 'content/content', 'userdefined' ); endwhile; else : get_template_part( 'content/content', '404' ); endif; ?> </section> <section id="sub"> <?php get_sidebar(); ?> </section> </div> </div> <?php get_footer(); ?>
コンテントテンプレートのエキストラ設定 > ユーザー定義のコンテントテンプレート1 |
content/content-userdefined.php |
---|
**********