WooCommerceシングル製品ページにクリックトリガーモーダルボックスを追加するためのプロフェッショナルガイド

このチュートリアルでは、WooCommerceシングル製品ページにクリックトリガーされたモーダルボックスを統合する方法を詳しく説明しています。 WordPressおよびWooCommerce固有のフック（WP_FOOTERやWOOCOMMERCE_BEFORE_ADD_TO_CART_FORMなど）を活用することにより、モーダルボックスのHTML構造を動的に効率的に挿入し、JavaScriptを組み合わせて、コードのモジュアリティとパフォーマンスの最適化を防ぎながら、そのディスプレイと非表示を実装できます。

1。概要と準備

クリックトリガーされたモーダルボックスをWooCommerceシングル製品ページに追加することは、追加情報、プロモーションコンテンツ、または特定のフォームを紹介するための一般的な要件です。このチュートリアルでは、WordPressのフック、PHP、HTML、およびJavaScriptを介してこの機能を実装する方法をガイドします。

前提条件：

• WooCommerceがインストールされた実行中のWordPress Webサイト。
• テーマが更新されたときにカスタマイズされたコンテンツを上書きしないように、すべてのコード変更を行うために子供のテーマを使用することを強くお勧めします。
• PHP、HTML、CSS、およびJavaScriptを基本的に理解してください。

主に、子テーマのfunctions.phpファイル、JavaScriptファイル、およびCSSファイルで動作します。

2。モーダルボックスHTML構造の定義

まず、モーダルボックスのHTML構造を定義する必要があります。この構造には、モーダルボックスのタイトル、コンテンツ、クローズボタンが含まれます。

Child Theme Directoryでは、Modal-box.htmlというファイルを作成します（後でその内容を直接埋め込みますが）、またはPHP関数で直接書き込むことができます。

 
<div id="popup" class="modal-box" style="display：none;">  
  
    <a href="%EF%BC%83" class="js-modal-close close">×</a>
    <h3>モーダルボックスタイトル</h3>
  
  <div class="modal-body">
    <p>これはモーダルボックスの主なコンテンツです。 </p>
  </div>
  
    <a href="%EF%BC%83" class="js-modal-close"> close </a>
  
</div>

注：

• ID = "Popup"は、JavaScriptのポジショニングモーダルボックスに使用されます。
• class = "Modal-Box"は、CSSスタイルに使用されます。
• class = "js-modal-close"は、javascriptバインディングクローズイベントに使用されます。
• style = "display：none;"キーであり、ページがJavaScriptによってトリガーされるまでロードされるとモーダルボックスが隠されることを保証します。

3.モーダルボックスHTMLをページに動的に挿入します

ModalボックスのHTML構造を、PHP関数を介してページのWP_Footerフックに直接挿入することがベストプラクティスです。これにより、モーダルボックスのHTMLがページの下部にロードされ、ページレンダリングのブロックを回避し、他のすべてのコンテンツの後にロードされます。

次のコードを子供のテーマfunctions.phpファイルに追加します。

 /**
 *モーダルボックスHTMLをページの下部に挿入します（製品ページのみ）
 */
関数your_modal_footer_content（）{
  // WooCommerce製品シングルページにモーダルボックスHTMLのみをロードする
  if（！is_product（））{
     戻る; //それが製品ページではない場合、コンテンツは出力されません}
？>

<div id="popup" class="modal-box" style="display：none;">  
  
    <a href="%EF%BC%83" class="js-modal-close close">×</a>
    <h3>モーダルボックスタイトル</h3>
  
  <div class="modal-body">
    <p>これはモーダルボックスの主なコンテンツです。 </p>
  </div>
  
    <a href="%EF%BC%83" class="js-modal-close"> close </a>
  
</div>
<p><strong>キーポイント説明：</strong></p>

• add_action（ 'wp_footer'、 'your_modal_footer_content'）;：このフックは、your_modal_footer_content関数のコンテンツをhtml

以上がWooCommerceシングル製品ページにクリックトリガーモーダルボックスを追加するためのプロフェッショナルガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。