TTSWPはすべての主要なページビルダーで動作します。音声が生成された投稿には、どのビルダーで作成されたかに関わらず、プレーヤーが自動的に表示されます。このページでは、ビルダー別のヒントと既知の注意点を紹介します。
Elementor
デフォルトの動作
Elementorで作成した投稿では、設定した配置位置(タイトルの後、コンテンツの後など)にプレーヤーが表示されます。追加設定は不要です。
ウィジェットによるカスタム配置
グローバル配置ではなく特定の場所にプレーヤーを表示したい場合は、Elementorのショートコードウィジェットを使用します。
- Elementorのレイアウトにショートコードウィジェットを追加します。
[tts_player]を貼り付けます。- 保存します。
ウィジェットを配置した場所にプレーヤーが表示されます。
既知の注意点
- ElementorのプレビューエディターではTTSプレーヤーはレンダリングされません(実際のサイトのみで表示されます)
- テンプレートパーツやヘッダーには、グローバル配置でプレーヤーを含めることができません。ショートコードウィジェットを使用してください
- Elementor Proのテーマビルダーテンプレートはショートコードウィジェット方式に対応しています
Divi
グローバル配置にプレーヤーが自動的に表示されます。カスタム配置の場合は次の手順で行います。
- Diviのレイアウトにテキストモジュールを追加します。
[tts_player]を貼り付けます。- 保存します。
Visual Composer (WPBakery)
テキストブロックまたはRaw HTML要素を使用します。
[tts_player]
Gutenberg (ブロックエディター)
そのまま動作します。グローバル配置にプレーヤーが表示されます。
投稿内にカスタム配置する場合は、カスタムHTMLブロックまたはショートコードブロックを使用します。
[mementor-tts]ナレーションするカスタムテキスト。[/mementor-tts]
クラシックエディター
自動配置はそのまま動作します。カスタムショートコードを使う場合は、テキストエリアに貼り付けるだけです。
Beaver Builder
HTMLモジュールを使用して[tts_player]を貼り付けます。
Oxygen Builder
ショートコードコンポーネントを使用して[tts_player]を貼り付けます。
ビルダー共通の問題
一部のページでプレーヤーが表示されない
次の点を確認してください。
- テキスト読み上げ → コンテンツで該当の投稿タイプが有効になっているか
- 投稿に音声が生成済みか(投稿一覧を開き、TTSカラムに「再生」が表示されているか確認)
- ビルダーが
the_contentフックを上書きしていないか(上書きするビルダーもあります)
ビルダーがthe_contentをバイパスしている場合は、上記のショートコード方式を使用してください。
プレーヤーの位置がおかしい
グローバル配置はWordPressのthe_contentフィルターを対象としています。独自のフックでコンテンツをレンダリングするビルダーでは、プレーヤーが予期しない位置に表示されることがあります。正確に制御するには、ショートコードベースの方法に切り替えてください。