7のイベントを再登録するWindows7/8/10でRustを別ドライブに展開する際のTIPSPHP+SQLでMySQLのInnoDBのテーブルに複合キーかつ連番のINSERTを実装するネイティブなPHPでselectタグやradioボタンの選択状態をどう表現するかエンターキーによる入力項目のフォーカスの移動をWeb系システムに実装してみるCattleMute>WordPress>WordPressのアーカイブの記事一覧をAjaxを使って追加形式でロードしてみる2017.10.23WordPressのアーカイブの記事一覧をAjaxを使って追加形式でロードしてみるWordPressのワンオフテーマで、Ajaxを使ってボタンを押したら次の記事一覧を表示させたいというような仕様を相談された。タイトルの通り、久し振りにWordPress関係の記事になります。あ、Ajaxのロードなんてプラグイン使えば余裕でしょ(草)となしで。※いちいちテーマに直接書くのが面倒くさくなったので、大凡の動きを踏襲し、新たにコードを作成してプラグインを作りました。興味のある方はこちらからどうぞ。一応のところプラグインを使わずにAjaxでの記事一覧を読み込みをしたい人向けにここのコードは残しておきます。俺も最初、相談された内容ならそういうプラグインってあるんじゃね?とか思いながら適当に探してみた。・・・が、この手のAjaxのWordPressプラグインって意外とヒットしてこない。探し方が悪いのか、はたまた、公式プラグインの数が限られているからなのか・・・。記事一覧の表示形式ってテーマごとに変わってくるから、この手のものは公式プラグインとして作りづらいのかな、とは思った。WordPressのAjaxによる記事一覧出しはわざわざプラグインを入れるほどのもんでもない。基本的なテーマの作り方と、少しのJavaScriptとjQueryの知識があれば、割とかんたんに実装できる。してフォームから送信されたデータをAjax使ってコマネチは既にやったことあるけど、この手のことはまだノータッチだったから、試しに作ってみっか!ということであまり時間と労力を書けずに原型を作成してみた。たたき台として作っているので色々不十分だから、そこら辺はあとで加筆・・・するかもしれないし、しないかもしれない。記事一覧の下にmoreボタンを設置。押したときに動作させる。初回表示の記事一覧の下に、次の記事一覧ページに相当する記事のデータを読んでくる。2ページ以降にアクセスされた場合は、1ページめ+2ページめの記事一覧をガッツリ出す。これらを行うものとして、コードは以下となる。?></a>仕組みとしてはまんまソースコードだけど、functions.phpのtheme_replace_paged_numberは、単なるページ番号ゼロの振替え。functions.phpのtheme_ajax_load_posts_direct_accessでは、直接アクセスがあった際の出力。wp_queryがスタックしているクエリデータを元に、記事一覧を1ページめの内容から当該のページまでクエリ内容に持たせて表示させる。(書くのが面倒だったのでquery_postsでコピペのwhileを回しているが、get_posts()とかでやったほうがいいかもしれない。気にならないなら別に問題なし)functions.phpのtheme_ajax_load_postsでは、次ページめに相当する記事一覧の追加表示を行っている。Ajaxから送信するPOSTデータを「$hold_query→現在のクエリをJSON化したもの」「$hold_query→追加表示するページ番号」にそれぞれ取得して、それをもとに追加表示する記事のクエリを再生成して当該ページ分の記事一覧を表示させる。theme_ajax_load_posts.jsの内容は主にAjaxでの非同期通信の処理内容やボタンの挙動。ある記述方式をクロージャー化している。「init→イベントのバインド呼び出し」「clip→ボタンのイベントリスナーのバインド」「post→イベント発火された際のAjax処理」。functions.phpのtheme_ajax_load_posts_scriptは、JSのグローバル変数theme_ajax_load_varsを出力しているだけ。Ajaxで追加表示させる部分に関して、このtheme_ajax_load_varsで「url→ajaxのURL」「next_paged→次回ページ番号」「max_page→最大ページ数」「query_json→クエリ情報のJSON」を元に進行状態を管理する。(正直、ajax_load_posts.jsのクロージャーにキックして、その中の変数保持で管理してもいいかもしれない)header.phpは関連ファイルの読み込みと、Ajaxの記事一覧表示の宣言をしている。(書いてある内容の通り、可能ならばできるかぎり全てフックした方がいい。‘#main’});で、ボタンと、記事一覧の出力先を指定する。この際、親のDOMには必ずajaxLoadPostsで指定したappendOfのIDを指定しておくこと。?></a>でボタンを↑の箇所以外の適当な場所に設置。Railsの箸休めに短時間でかなりやっつけ気味に作ったため、他必要な内容についてはコメントに書いた。スクリプト周りは砂糖のように甘い。こんなクソ記事書いてる暇あったらもうちょっとべっこう飴程度にまでは煮詰めろよとか突っ込まないこと。記事一覧がロードされて追加表示された際のアニメーションとかは、CSSアニメーション定義しとけば多分おk。URLの書き換えはhistory.replaceStateでも使えばいいじゃない。これだけ書いてとりあえず満足したので入れてない。ロード中ならその表記を行う+ロード終了後ボタンを再帰させる、全ての記事表示済ならボタン消す、かんたんなので割愛。以上の有様なので、コメントに合わせて適宜追記する必要あり。だいたいこんな感じでいけるよーって程度のサンプルコードだとでも思ってもらえるとこれ幸い。カテゴリWordPressこの記事のコメントコメントはないです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。