既存のWordPressをプラグイン未使用で簡単にSPA(シングルページアプリケーション)に対応する方法

今更な感じもしますが、SPAはSingle Page Applicationシングルページアプリケーション）の略称になります。

単一ページで構成されページ遷移を行わず、同一ページ内でコンテンツの表示を切り替えていきます。
Wordpressでもプラグインもありますが、未使用でも結構簡単に対応可能です。（以前途中まで記載して下書きのままになっていた為、今更ですが追記して公開しました）

REST APIを普通に使用してクライアント側で構築しても良いですが

WPのテンプレートレイアウトがヘッダー、ナビ、フッター、メインコンテンツ等切り分けてテンプレート化できていれば、テンプレートを利用してHTMLタグをデータとして返す形にすれば簡単に実装可能です。

基本的な実装の考え方は
クライアント側は、ページ遷移を行っていたイベントをhistory.pushState()のURL設定とajaxでの書き換え用htmlの取得をできるように修正します。

サーバー側の処理としては、例えば、 ”https://www.noribase.net/2020042389” の様なページ表示用のURLは今まで通りの仕組みとし https://www.noribase.net/2020042389.json とした場合は、jsonデータとして（必要であればそれぞれの構成要素も）を返す仕組みを組み込みます。

ただ、既存の処理のままですとそのままHTML出力してしまいますのでJsonとして返す為に ob_get_contents()関数を使用します。（jsonでなくhtmlのテキストデータで返すの有ればそのまま出力する形でも問題ありません）この関数を使用すると、出力用のバッファを変数に格納できます。


if ( have_posts() ) :

        ob_start();//出力バッファリングを有効にします。

        while ( have_posts() ) :
        the_post();
            get_template_part('main/content', 'lst');


        endwhile;
        $tags= ob_get_contents();//出力バッファを変数に格納
        ob_end_clean();//出力バッファをクリア
    endif;

後は$tagsをjsonデータとして返すだけです。 REST APIのWP REST APIで独自エンドポイントを使用する形でも可能です。その場合も


$response = new WP_REST_Response(array('tags'=＞$tags),200);

のようにしてHTMLタグとして戻します。

この方法ですとhtmlタグでデータを取得するため、クライント側のJSの処理もメインコンテンツ部分を取得後置き換えるだけの単純な実装で可能です

2022年08月3日
IT関連

systemdでSpring Bootアプリケーションのサービス管理

既存のWordPressをプラグイン未使用で簡単にSPA(シングルページアプリケーション)に対応する方法

ビール用

日本酒用