WPML

PHPを使用してカスタムElementorウィジェットを翻訳可能にする方法

更新日: 2024年11月7日

カスタムPHPコードとWPMLフィルターを使用して、翻訳用にカスタムElementorウィジェットを手動で登録する方法を説明します。

カスタムElementorウィジェットには2つのタイプがあります。

複雑なウィジェットをWPMLで翻訳可能にするには、次の2つの方法のいずれかを使用できます。

  1. 推奨: WPMLの設定ファイルであるwpml-config.xmlを使用します。このプロセスは、翻訳用にページビルダーウィジェットを登録する方法のチュートリアルで説明されています。
  2. 手動: カスタムPHPコードを使用します。この方法を使用する場合は、このページのガイドラインに従ってください。

PHPによるWPML翻訳サポートの追加

手動プロセスを実演するために、Elementorのウィジェットの1つを取り上げ、WPMLサポートを含めるように拡張しました。このウィジェットはこちらのGitHubページにあります。

1. ウィジェットへのWPMLフィルターの追加

すべてのカスタムウィジェットプラグインについて、そのinitアクション中にwpml_elementor_widgets_to_translateフィルターを追加する必要があります。WPMLはこのフィルターを使用して、翻訳が必要なウィジェットテキストに関する詳細情報を収集します。

Elementorウィジェット用のWPMLフィルター
add_filter( 'wpml_elementor_widgets_to_translate', [ $this, 'wpml_widgets_to_translate_filter' ] );

このフィルターは、翻訳が必要なすべてのウィジェットタイプをリストした配列を渡します。この配列には、デフォルトのElementorパーツと翻訳が必要なものに関する情報が含まれています。

次の例のように、新しいウィジェットタイプをこの構造に追加する必要があります。

Elementorウィジェットの追加
public function wpml_widgets_to_translate_filter( $widgets ) {
  $widgets[ $this->get_name() ] = [
     'conditions' => [ 'widgetType' => $this->get_name() ],
     'fields'     => [
        [
           'field'       => 'title',
           'type'        => __( 'Hello World Title', 'hello-world' ),
           'editor_type' => 'LINE'
        ],
     ],
  ];

  return $widgets;
}

2. 翻訳を処理するカスタムクラスの作成

フィルターを配置したら、ウィジェットの翻訳を管理するカスタムクラスを作成します。integration-classフィールドでクラス名を指定します。

より複雑なウィジェットを特徴とするカスタムクラスの指定
public function wpml_widgets_to_translate_filter( $widgets ) {
  $widgets[ $this->get_name() ] = [
     'conditions' => [ 'widgetType' => $this->get_name() ],
     'fields'     => [],
      'integration-class' => 'My_Custom_Widget_WPML_Support’,
     ],
  ];

  return $widgets;
}

fields配列では、次の要素を指定できます。

  1. field – フィールドのidです。これは、Control_stack::add_control関数を介してコントロールを追加するときに使用されるidと同じです。
  2. type – フィールドのタイプです。これは、翻訳者がどのフィールドを翻訳するかを知るのに役立つように、WPML 翻訳エディタに表示されるテキストです。
  3. editor_type – これは、WPML翻訳エディタで使用されるテキストフィールドのタイプです。有効な値はLINE、AREA、およびVISUALです。

3. IWPML_Page_Builders_Moduleインターフェースの実装

統合クラスはgetおよびupdate関数を実装する必要があります。get関数は翻訳が必要な文字列のリストを返し、update関数は翻訳を受信したときにElementorデータを更新します。

より複雑なウィジェットを特徴とするカスタムクラスの例
/**
* Class IWPML_Page_Builders_Module
*/
interface IWPML_Page_Builders_Module {
  /**
   * @param string|int $node_id
   * @param mixed $element
   * @param WPML_PB_String[] $strings
   *
   * @return WPML_PB_String[]
   */
  public function get( $node_id, $element, $strings );

  /**
   * @param string|int $node_id
   * @param mixed $element
   * @param WPML_PB_String $string
   *
   * @return array
   */
  public function update( $node_id, $element, WPML_PB_String $string );
}

4. field_idを使用したブロック内の同じフィールドの複数回の出現の処理

ブロック内に同じフィールドが複数回出現する場合は、field_idを使用してElementorブロック内のフィールドを記述します。これにより、ノード内の同じフィールドの出現を区別できます。

同じフィールドの複数回の出現
public function wpml_widgets_to_translate_filter( $widgets ) {
 $widgets[ $this->get_name() ] = [
    'conditions' => [ 'widgetType' => $this->get_name() ],
    'fields'     => [
       'title_1' => [
          'field'       => 'title',
          'field_id'   => 'title_1',
          'type'        => __( 'Hello World Title', 'hello-world' ),
          'editor_type' => 'LINE'
       ],
       'title_2' => [
          'field'       => 'title',
          'field_id'   => 'title_2',
          'type'        => __( 'Hello World Title', 'hello-world' ),
          'editor_type' => 'LINE'
       ],
    ],
 ];

 return $widgets;
}

5. WPML_Elementor_Module_With_Itemsクラスを使用した他の要素のリストを持つウィジェットの処理

スライドウィジェットなど、一部のElementorウィジェットには要素のリスト（見出しやボタンを持つ複数のスライドなど）が含まれています。カスタムウィジェットに同様のリストがある場合は、WPML_Elementor_Module_With_Itemsクラスを拡張して、各アイテムの翻訳を個別に処理できます。

他の要素のリストを特徴とするカスタムクラスの例
/**
* Class WPML_Elementor_Slides
*/
class WPML_Elementor_Slides extends WPML_Elementor_Module_With_Items {

  /**
   * @return string
   */
  public function get_items_field() {
     return 'slides';
  }

  /**
   * @return array
   */
  public function get_fields() {
     return array( 'heading', 'description', 'button_text' );
  }

  /**
   * @param string $field
   *
   * @return string
   */
  protected function get_title( $field ) {
     switch( $field ) {
        case 'heading':
           return esc_html__( 'Slides: heading', 'wpml-string-translation' );

        case 'description':
           return esc_html__( 'Slides: description', 'wpml-string-translation' );

        case 'button_text':
           return esc_html__( 'Slides: button text', 'wpml-string-translation' );

        default:
           return '';
     }
  }

  /**
   * @param string $field
   *
   * @return string
   */
  protected function get_editor_type( $field ) {
     switch( $field ) {
        case 'heading':
        case 'button_text':
           return 'LINE';

        case 'description':
           return 'VISUAL';

        default:
           return '';
     }
  }

}

WPMLコアプラグインの以下のフォルダーで、さらに多くの例を見つけることができます。

  • ..\wp-content\plugins\sitepress-multilingual-cms\addons\wpml-page-builders\classes\Integrations\Elementor\modules\

クラスは必ずinit フックで読み込むようにしてください。WPML 4.5以降では、initアクションフックの前にクラスを読み込むと致命的なエラーが発生します。

執筆者：Amir · 最終更新日：2024年11月7日