WordpressにプチSPAを設置してみる

Wordpressのページにクエリループのブロックを３つ追加して、それぞれにページングを設置します。 残念ながらこのページングは期待とおりに動作しません。ひとつのリストで次ページをクリックすると、他の２つのリストも次ページが表示されます。 不具合じゃね？と思ってしまいますが、これはwordpressの仕様です。

Wordpressはいってみればいわばノーコードツールです。 html構文を学習しないでWebページが作れます。 JavaScript構文を理解しないでプログラムを作成しようとするのと同じです。 Webページやプログラムの作成が専門の仕事になっていて、その仕事が専門じゃない人にもそれを作成したい要求がある。 その需要は理解できます。しかしまったく同じものが作成できるわけではありません。 このような道具には越えてはいけない境界線があります。 その線を超えようとすると、簡単！なはずだったものが、とたん、逆に足枷になってしまうことがあります。

ひとつのページにページング機能付きの複数の投稿リストを設置するのは、 フロントエンド開発ツールではなんの問題もない課題ですが、Wordpressでは難問です。 ここが越えてはならない境界となります。 この場合だと、「ひとつのページにページングを複数設置することはできない」という割り切りを守ることが重要です。 consを受け入れずにprosだけ受け取ることはできません。

とはいえ、最初の協定がいつのまにか都合良くなし崩されるのも、また世の常です。 割り切りの重要性を簡単に理解してもらえないこともあるでしょう。 実はそのことが最初に解決しなけらばならない一番の課題なのですが、それはさておき、 複数ページングの課題について対応方法を考えてみましょう。 サーバー側でカスタムブロックを作成するなどの方法もありそうですが、そんなことはしたくないでしょう。 ブラウザ側でコードを動かすのが手っ取り早いでしょう。

幸い、最近のwordpressはREST APIを標準で装備しています。 例えばVueでアプリをひとつ作成すれば、わりと簡単に課題をクリアすることができそうな気がします。 WordpressでSPAをホストする場合には、ビルドしたSPAを設置する必要があると思いこんでいましたが、 Vueであれば、jsファイルをアップロードする必要もなく、 ページ内にカスタムHTMLブロックをひとつ設置して、その中に全てを格納することができます。 とはいえ、APIの応答を、カスタムフィールドでソートしたいとか、 現在のAPI仕様で対応していない要件があると、Wordpress側に追加のスニペットコードが必要になる場合もあります。 まだまだな点もありますが、ひとつのページ内に完結できるSPA。ちょっといいかも！と思ってしまいました。

クエリループ３つ分に相当するコードは、スタイルも含めて、300行程になりました。 VSCodeで編集して、HTMLブロックにコピペします。 この300行弱のコードを眺めていると、これを理解するのと、 ブロックエディタの使い方を理解するのとどっちが簡単なのだろう？という思いが浮かんできます。 これはなに？を理解するのは簡単じゃないですよね？＞ブロックエディタ。 ぶっちゃけ、どっちもどっちでしょう。 一旦築かれた巨大なエコノミーを簡単に切り捨てることなどできません。 人が一生をかけて築いてきた立場を簡単に手放すことができないのも同じでしょう。 表立っては、それぞれの立場を賭けてバチバチやってたりするわけですが、 水面下では、案外、うまく相乗りして共存したりしているのかもしれません。