簡単実装！WordPressでHTMXを使ってみた│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

070-2017-3870 無料相談・お見積り
BLOG
開発者ブログ

簡単実装！WordPressでHTMXを使ってみた

WordpressでHTMXを使ってみた

本日は、WordPressでHTMXを使って記事を非同期で呼び出す方法について解説します！

最近、HTMXは手軽にインタラクティブな機能を追加できるとして話題になっていますね。
WordPressのサイトでも、ユーザー体験を向上させるためにHTMXを使うと非常に便利です。
今回は、WordPressとHTMXを組み合わせて、特定の条件で記事を表示する方法を見ていきましょう。

今日解説する以外のHTMXの詳しい解説はまた後日に！

今日のゴール

WordPressでHTMXを使って、記事カテゴリーの切り替えを行ってみます。

サンプル

HTMXとは？

HTMXは、HTMLでインタラクティブな動作を実現するための軽量なJavaScriptライブラリです。JavaScriptの記述を最小限にしながら、動的な要素を簡単に追加できるので、フロントエンドの開発効率が大幅に向上します。

HTMXを使うと、ページの一部分だけを更新したり、非同期でサーバーと通信したりといったインタラクティブな動作が、複雑なJavaScriptフレームワークなしに実装できます。

HTMX公式

HTMXの主な機能

非同期通信（AJAX）

HTMXでは、hx-get や hx-post といった専用の属性をHTMLタグに追加することで、非同期通信（AJAX）を簡単に実現できます。例えば、ボタンがクリックされたときだけ特定のデータをサーバーから取得して表示する、といった処理が可能です。

<button hx-get="/api/data" hx-target="#content" hx-swap="innerHTML">
    データを読み込む
</button>
<div id="content">データを出力する</div>

このコードでは、ボタンをクリックすると /api/data からデータを取得し、その内容を #content の中に挿入します。

HTMLを使ったインタラクティブな動作の設定

HTMXは、JavaScriptの代わりにHTMLの属性を使って動作を制御できるのが特徴です。

hx-trigger という属性を使えば、イベント（クリックやフォームの送信など）に反応するタイミングを簡単に設定できます。
これにより、複雑なJavaScriptコードを記述せずに、HTMLだけで豊富なインタラクションを実現できます。

部分的なページ更新

例えば、hx-target と hx-swap 属性を使って、ページ全体ではなく特定の要素だけを更新することができます。これにより、必要な部分だけを効率的に再描画し、サーバー負荷を抑えつつユーザーにとってもスムーズな体験を提供できます。

高度なコントロール

HTMXは、複数の要素の同時更新や、トランジションのカスタマイズ、他のリクエストが完了するまで次のリクエストを待機する「Polling（定期的なリクエスト）」といった機能も備えています。

また、hx-headers 属性でリクエストヘッダーを追加したり、条件に応じてリクエストをキャンセルするなど、柔軟なカスタマイズが可能です。

その他にもHTMXを使えば色々な事が非同期で行えます。
その他のHTMXの使い方についてはまた後日。

ステップ1：WordpressにHTMXをインストール

HTMXのインストールはとても簡単です。
javascriptを読み込むだけ！
やり方は複数ありますが、今回は手軽な方法を2種類紹介します。

head内で直接読み込む方法

head内でHTMXを読み込む方法は以下の通りで、JavaScriptを一文追加するだけでhtmxが扱えるようになります。今回はこちらでサンプルを実装していきます。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- ▼ これ ▼ -->
      <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
      <!-- ▲ これ ▲ -->
  </head>
  <body>
  </body>
  </html>

functions.phpで読み込む方法

functions.php に以下のコードを追加してHTMXを読み込む方法もあります。

function enqueue_htmx_script() {
    wp_enqueue_script('htmx', 'https://unpkg.com/htmx.org@1.5.0', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_htmx_script');

ステップ2：テンプレートファイルを作成する

今回はサンプルなので固定ページに記事を取得していこうと思います。

まず要件の確認として、以下の内容を取得します。

  • htmxでブログの記事を取得
  • 記事はそれぞれ5件取得する
  • カスタム投稿の名前は「post_name」とする
  • タクソノミースラッグは「custom_taxonomy」とする
  • タームのスラッグは、cat1、cat2、cat3とする

実際の環境に合わせて変更してください。

cat1.php、cat2.php、cat3.php
カテゴリーを取得するファイルです。
13行目の絞り込みたいタームのスラッグの箇所は、cat1.phpはcat1。cat2.phpはcat2。cat3.phpはcat3とします。
なお、非同期で読み込むファイルは、固定ページなどにする必要はありません。themesフォルダ内であればOKです。

<?php
// WordPressのコアファイルを読み込む
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');

// 残りのコード
$query = new WP_Query(array(
  'post_type' => 'post_name',
  'posts_per_page' => 5,
  'tax_query' => array(
    array(
      'taxonomy' => 'custom_taxonomy', // カスタムタクソノミーのスラッグ
      'field'    => 'slug',            // タームをスラッグで指定
      'terms'    => 'cat1',   // 絞り込みたいタームのスラッグ
    ),
  ),
));
if ($query->have_posts()) :
  while ($query->have_posts()) : $query->the_post();
?>
    <div class="news-item">
      <h2><?php the_title(); ?></h2>
      <p><?php the_excerpt(); ?></p>
    </div>
<?php
  endwhile;
endif;
wp_reset_postdata();
?>

htmx.php
htmx.phpはカテゴリーを呼び出すファイルです。
your-themeは、ご自身の環境に合わせてください。

<button hx-get="<?php echo site_url('/wp-content/themes/your-theme/cat1.php'); ?>"
  hx-trigger="click"
  hx-target="#news-content"
  hx-swap="innerHTML">
  cat1を読み込む
</button>
<div id="news-content"></div>

ひとまず、上記のhtmx.phpを開いてみます。
この場合、button hx-getでcat.phpを指定しているので、buttonクリックでcat1が表示されます。

サンプル1

ステップ3：buttonにそれぞれのカテゴリーを割り当てる

先ほどのサンプルでcat1が呼び出されたのが確認できましたね！次に、今回のサンプルではcat1、cat2、cat3があるので、同じようにそれぞれを呼び出すためのボタンを準備します。

<button hx-get="<?php echo site_url('/wp-content/themes/your-theme/cat1.php'); ?>"
  hx-trigger="click"
  hx-target="#news-content"
  hx-swap="innerHTML">
  cat1を読み込む
</button>
<button hx-get="<?php echo site_url('/wp-content/themes/your-theme/cat2.php'); ?>"
  hx-trigger="click"
  hx-target="#news-content"
  hx-swap="innerHTML">
  cat2を読み込む
</button>
<button hx-get="<?php echo site_url('/wp-content/themes/your-theme/cat3.php'); ?>"
  hx-trigger="click"
  hx-target="#news-content"
  hx-swap="innerHTML">
  cat3を読み込む
</button>
<div id="news-content"></div>

以下のサンプルでは、ボタンをクリックするたびに、それぞれのカテゴリーの記事が非同期で読み込まれるようになりました。見た目が少し不格好かもしれませんが、そこはご容赦ください(;´･ω･)

サンプル2

ステップ４：デフォルトで記事を表示させる

デフォルトで記事を表示させるには、<div id=”news-content”></div>にちょっとだけコードを追記していきます。

今回のサンプルでは、cat1をデフォルトで読み込み、cat2、cat3をbuttonクリックで呼び出しています。

<div id="news-content" hx-get="<?php echo site_url('/wp-content/themes/imworks/examples/cat1.php'); ?>" hx-trigger="load" hx-swap="innerHTML"></div>
サンプル3

どうですか？とてもスムーズにHTTP通信なしに記事を取得できるようになりました。
どこでどのように非同期通信で記事等を読み込むかは、プロジェクトによって異なってきますが、結構使えそうですね？

しかし、HTMXを使うにあたってデメリットも存在します。
しっかりとデメリットも把握したうえで上手にHTMXを使っていきましょう。
次の章ではHTMXのデメリットを解説していきます。

HTMXのデメリット

HTMXを使った非同期通信（AJAX）を導入する場合、SEO対策が少し複雑になります。

というのも、HTMXで非同期に読み込まれるコンテンツは、JavaScriptを実行しない検索エンジンには認識されないためです。
ここでは、HTMXを使用する際のSEOに関するポイントや、改善策について解説します。

１.コンテンツのデフォルト表示を提供

HTMXの非同期読み込みを利用する場合でも、最初にページを読み込んだ時にすべてのコンテンツがHTMLに含まれているのが理想的です。

検索エンジンがこのHTMLをクロールできれば、HTMXの非同期通信で追加・更新されるコンテンツがインデックスされない場合でも、SEO効果は得られます。

先ほど「ステップ４：デフォルトで記事を表示させる」で紹介したように、非同期で取得する予定のコンテンツをまずHTML内にデフォルトで表示させておきます。

この方法により、検索エンジンがページをクロールした際には、最低限のコンテンツがHTML内に存在するため、SEOの観点でも問題を最小限にできます。

２.プログレッシブエンハンスメントの考え方

HTMXの導入にあたって、JavaScriptを利用しない状態でもコンテンツが表示される「プログレッシブエンハンスメント」戦略を取るのが重要です。

HTMXでの非同期通信は、ユーザー体験の向上に利用し、検索エンジンにはHTMLをベースとしたシンプルなページ構成を提供します。これにより、JavaScriptなしでもHTMLページが機能するため、SEO効果が安定します。

プログレッシブエンハンスメント

3. <noscript> タグを活用する

HTMXの機能はJavaScriptに依存しているため、JavaScriptを無効にしているユーザーや検索エンジンにはコンテンツが表示されません。

そのため、<noscript> タグを使ってJavaScript非対応の環境向けに基本的なコンテンツを提供する方法があります。

<div id="news-content" hx-get="<?php echo site_url('/wp-content/themes/imworks/examples/cat1.php'); ?>" hx-trigger="load" hx-swap="innerHTML"></div>
<noscript>
    <p>JavaScriptが無効です。すべてのコンテンツを表示するには、JavaScriptを有効にしてください。</p>
</noscript>

４.サーバーサイドレンダリング（SSR）を利用

WordPressでHTMXのような非同期機能を活用しつつ、SEOに適したページを提供するためには、サーバーサイドレンダリング（SSR）も検討できます。

ページが初めて読み込まれたときに、サーバー側でコンテンツをレンダリングしてHTMLに挿入すれば、検索エンジンはそのままHTMLをインデックスすることが可能です。

要するに、サーバーサイドレンダリングは、サーバー側で完全なHTMLページを生成し、クライアントに送信する手法です。 このプロセスは、クライアントサイドレンダリング（CSR）とは異なり、ブラウザがJavaScriptをダウンロードして実行する前にページの全体像を構築します。 SSRの使用は、特にSEOの観点から重要です。

５.動的コンテンツのインデックス

一部の検索エンジンはJavaScriptを実行してコンテンツをインデックスすることができますが、確実性に欠けます。

検索エンジンが動的コンテンツをインデックスするのを期待するよりも、重要なコンテンツは初回読み込み時にHTML内に含めるように設計すると良いです。

７.サイトマップと内部リンクの強化

HTMXで非同期に表示されるコンテンツがある場合でも、SEOのためにそれらのコンテンツを通常のHTMLページとしてアクセスできるようにし、サイトマップや内部リンクを適切に設定することで、検索エンジンがすべてのページにアクセスできるようにします。

こちらの方法は、比較的簡単に実装できそうですね！

まとめ

「WordpressでHTMXを使ってみた」はいかがでしたでしょうか？
比較的簡単に実装できそうですよね？

注意すべき箇所はいくつかありますが、使い方によってはユーザー体験を向上させることができそうですね。

是非WordpressでHTMXの導入にチャレンジしてみてください。

アイエムワークスでは、HTMXを使ったホームページ制作や、Vue.js、React.jsを使ったプロジェクトにも対応可能です。もし、お困りごとがございましたら無料相談フォームよりご連絡ください。

ブログ一覧に戻る

LATEST BLOG 最新のブログ

BLOG CATEGORY カテゴリー

BLOG TAG タグ

ARCHIVE アーカイブ

その他のHTML・CSS

その他のHTML・CSSを見る

CONTACT US

お見積りやご相談は、メール又はお電話にてお気軽にご連絡ください。
担当者が丁寧に対応いたします。

無料相談・お見積り