申し訳ありませんが、テーマというよりもここでの旅が重要なので、バックストーリー全体から始めなければなりません。
少し前に、ある男性が私に手紙をくれて、自分の置かれている状況について説明してくれました。彼の会社には公共ラジオ用の WordPress サイトが多数あり、その多くは基本的にポッドキャストの本拠地となっています。彼がそれらすべてにとって理想的だと考えた機能が 1 つあります。それは、「固定された」オーディオ プレーヤーを持つことです。ポッドキャストを再生した後、そのポッドキャストを停止せずにサイト内を移動し続けることができるのと同じです。
WordPress では、他の通常の Web サイトと同様にページ全体のリロードが行われ、リンク処理や履歴操作で特別なことは何も行われないため、これを WordPress で実行するのはやや難しいです。ページがリロードされると、ページ上の音声の再生が停止します。それがウェブの仕組みです。
では、WordPress サイトでどのように実現できるでしょうか?そうですね、ヘッドレス WordPress サイトにして、フロントエンド全体をシングル ページ アプリとして再構築することもできます。楽しそうですが、電話をかけるのは躊躇します ただ このため XNUMXつ もの。
他に何ができるでしょうか？ページがリロードされないようにする方法を見つけることができるかもしれません。でこれをやったのを覚えています 10年前の小さな静的サイト, しかし、それは本格的な WordPress サイトではなかったので、当時は URL を更新する気さえありませんでした。
これをやったらどうなるでしょうか…
- 内部リンクのクリックをインターセプトする
- その URL のコンテンツを Ajax 化した
- ページ上のコンテンツをその新しいコンテンツに置き換えました
これを jQuery で簡単にやってみます。
$("a").on("click", () => { const url = $(this).attr("href"); $.get(url + " main", (data) => { $("main").html(data); history.pushState({}, "", url); });
});それは文字通り機能することからそれほど遠くありません。見ておきたいのは a popstate イベント 戻るボタンを処理する必要がありますが、あと数行だけです。
この仮説の世界では、サイトを次のようにレイアウトします。
<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>それですべて <main> コンテンツが置き換えられ、URL が変更されますが、 <audio> プレイヤーは一人で安心してプレイを続けることができます。さらに JavaScript を記述して、再生中のポッドキャストなどを更新する方法をユーザーに提供することになります。
ただし、ここではさらに考えるべきことがあります。コンテンツ上のインライン スクリプトは実行されますか?更新するのはどうですか <title> あまりにも？エッジに関する懸念事項が十分にあり、おそらくそれに対処するのにイライラするでしょう。
これを使って遊んでみたかったので、WordPress テーマを組み合わせて、 ターボ 何かを手書きする代わりに。 Turbo (Turbolinks の新しいバージョン) は、まさにこの目的のために設計されています。これは JavaScript ライブラリをページにドロップするだけで (ビルド プロセスや構成は必要ありません)、そのまま機能します。内部リンクのクリックや新しいコンテンツの Ajax などをインターセプトします。しかし、これには興味深い機能があります。 data-turbo-permanent HTML 要素の属性を使用すると、そのリロード後もその属性が保持されます。それで私は ここのオーディオプレーヤーでそれを行いました.
ただし、これが問題です。
このプロジェクトをきちんと終わらせる時間がありません。芝居をするのは楽しかったけど、ちょっと興味が薄れてしまった。したがって、今のところはそのままにしておきます。
It ほとんど 動作しますが、最初のナビゲーションでオーディオの再生が停止し、その後は動作するという明らかなバグが 1 つあります。修正可能だとは思いますが、このゲームにはスキンがあまりありません。私はただ頭を下げてこのコードを残しておき、誰かが役に立つなら拾ってくれると思います。
ここでもう 1 つ問題になっているのは、Turbo が Basecamp からのものであり、Basecamp には むしろ爆縮した 最近、彼らのソフトウェアを使用するのがあまり気分が良くありません。サム・スティーブンソンが Turbo の 75% を書きました そして、ソフトウェアが独自の基盤に移されない限り、そのソフトウェア（または他の関連プロジェクト）には触れないと述べています。ターボはすでに不安定な位置にあったように見えました バギー Turbolinks と比較して、現在はオンになっています 非常に 険しい地面。
