SWELLのローカライズ（翻訳）で英語サイトを作っているのですが、たまに日本語表記が残ってしまいます。
テーブルのスクロールヒントもその一つです。
通常の表記
スマートフォンでテーブルの右側に「スクロールできます」の文言が日本語で記載されています。
本記事ではテーブルの「スクロールできます」の文言を変更する方法を紹介します。
テーブルの文言だけを変更するコード
SWELL 2.19.0のswell_table_scroll_hintには、生成済みのヒントHTMLが1引数で渡されます。
元のクラスとアイコンを維持し、表示文言だけを変更します。
変更前のfunctions.phpやスニペットを保存し、元に戻せる状態にします。
有効な子テーマのfunctions.phpかCode Snippetsの一方へ追加します。
旧版のmotoki_table_schroll_hint関数とフックは先に取り除き、併用しません。
親テーマのファイルは編集しないでください。
Scroll horizontallyを表示したい文言へ変更します。
add_filter( 'swell_table_scroll_hint', function ( $hint ) {
return str_replace(
esc_html__( 'スクロールできます', 'swell' ),
esc_html( 'Scroll horizontally' ),
$hint
);
} );対象はスクロール設定を有効にした標準テーブルブロックです。
表示幅はブロック側の設定を引き継ぎます。
このコードだけで通常の表を横スクロール化するものではなく、リッチカラムのヒントも対象外です。
英語ヒントと横スクロールの見本
下の表は、SWELL 2.19.0で上記フィルターを適用して生成したHTMLを掲載した見本です。
表の右端まで横スクロールして確認できます。
キーボードではTabキーで表に移動し、左右の矢印キーで操作してください。
| 確認する項目 | 表示される内容 | 操作 | 右端の確認欄 |
|---|---|---|---|
| 英語のヒント | Scroll horizontally | 表を左右にスクロール | ここまで見えればOK |
| キーボード | 表を選択して操作 | 左右の矢印キー | 戻る方向も確認 |
この見本は表の幅を760px、スクロール対象をPC・スマホの両方にしています。
自分のページでは、テーブルブロックのスクロール設定と幅を用途に合わせて指定します。
見本の表にはキーボード操作用のフォーカス位置も追加しています。
このフォーカス位置は見本のHTMLに追加したもので、上のPHPがTab移動の機能を加えるわけではありません。
実機でのタッチ操作や、翻訳プラグインとのすべての組み合わせは未検証です。
確認と戻し方
PC・スマホで、対象の表だけに指定文言が出ることと、横スクロールできることを確認します。
翻訳プラグインなどが先に別の文字列へ変更している場合は、一致する文字列がなく変更されないことがあります。
戻す場合は今回のフィルターを削除するかスニペットを無効化します。
旧版にあった本文全体のstr_replaceや、未定義の$scrollable・$classNameを使う関数は必要ありません。
冒頭の掲載画像は旧版の記録です。
英語文言を適用した現在の出力は、本記事の動作見本で確認できます。
よくある質問：SWELLでテーブルの「スクロールできます」の文言を変更するとき
この方法では、何を変更できますか？
記事では、SWELLのテーブルに表示される「スクロールできます」のスクロールヒントの文言を変更します。SWELLのローカライズ（翻訳）で英語サイトを作っていて、日本語表記が残ってしまう場合の例です。
どのフィルターを使いますか？
記事では、SWELL 2.19.0のswell_table_scroll_hintには、生成済みのヒントHTMLが1引数で渡されます。元のクラスとアイコンを維持し、表示文言だけを変更します。
コードは、どこに追加しますか？
記事では、変更前のfunctions.phpやスニペットを保存し、有効な子テーマのfunctions.phpかCode Snippetsの一方へ追加します。親テーマのファイルは編集しません。旧版の関数とフックは、先に取り除き、併用しません。
表示したい文言は、どう変えますか？
記事では、コード内の英語の文言（Scroll horizontally）を、表示したい文言へ変更します。
どのテーブルが対象ですか？
記事では、対象はスクロール設定を有効にした標準テーブルブロックです。表示幅はブロック側の設定を引き継ぎます。このコードだけで通常の表を横スクロール化するものではなく、リッチカラムのヒントも対象外です。
変更されないときは、どうしますか？
記事では、翻訳プラグインなどが先に別の文字列へ変更している場合は、一致する文字列がなく変更されないことがあります。
公開前に、何を確認しますか？
記事では、PC・スマホで、対象の表だけに指定文言が出ることと、横スクロールできることを確認します。なお、実機でのタッチ操作や、翻訳プラグインとのすべての組み合わせは未検証です。
元に戻すには、どうしますか？
記事では、今回のフィルターを削除するかスニペットを無効化します。旧版にあった本文全体のstr_replaceや、未定義の変数を使う関数は必要ありません。
