SWELL│テーブルの「スクロールできます」の文言を変更する方法

SWELLのローカライズ(翻訳)で英語サイトを作っているのですが、たまに日本語表記が残ってしまいます。

テーブルのスクロールヒントもその一つです。

通常の表記

スマートフォンでテーブルの右側に「スクロールできるんです!」の文言が日本語で記載されています。

本記事ではテーブルの「スクロールできるんです!」の文言を変更する方法を紹介します。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

SWELLでテーブルの「スクロールできるんです!」の文言を変更する方法

やり方は簡単です。

管理画面>外観>テーマファイルエディタ>functions.phpに以下のコードを挿入します。

※コードの中に文言があるので変更しましょう。

※不安な方はCode Snippetsのプラグインを入れて、そこに挿入しましょう。

function motoki_table_schroll_hint(){
		  return '<div class="c-scrollHint sp_"><span>スクロールできちゃいます♪ <i class="icon-more_arrow"></i></span></div>';	  
}
add_filter( 'swell_table_scroll_hint', 'motoki_table_schroll_hint' );

また文言の前のクラスの表示を変えると表示形式を調整できます。

  • スマートフォンだけ表示する場合はc-scrollHint sp_
  • ちなみにPCだけ表示したい時はc-scrollHint pc_
  • PCとSPを両方表示したい時はc-scrollHint _

とクラスの表記を変更してみてください。

フック「swell_table_scroll_hint」のコードの場所

色々変更したい方は元のコードを参考にしてください。

function motoki_table_schroll_hint(){
    $hint_class = 'both' !== $scrollable ? " {$scrollable}_" : '';
    if ( str_contains( $className, 'sp_only' ) ) {
        $hint_class .= ' sp_only';
    } elseif ( str_contains( $className, 'pc_only' ) ) {
        $hint_class .= ' pc_only';
    }
        $hint_src = '<div class="c-scrollHint' . esc_attr( $hint_class ) . '"><span>' . esc_html__( 'スクロールできちゃいます♪', 'swell' ) . ' <i class="icon-more_arrow"></i></span></div>';
        return $hint_src;
}
add_filter( 'swell_table_scroll_hint', 'motoki_table_schroll_hint' );

フックの記載場所:wp-content/themes/swell/lib/gutenberg/render_hook/core_table.php

以上です。

以下、サンプルです。

文言の変更後

スクロールできちゃいます♪
英語ABCDEFGHIJKLMNOPQRSTUVWXYZ
日本語あいうえおかきくけこさしすせそなにぬねのはひふへほまみむめもやよゆらりるれろわをんあいうえおかきくけこさしすせそなにぬねのはひふへほまみむめもやよゆらりるれろわをん

SWELLでリッチカラムの「スクロールできるんです!」の文言を変更する方法

リッチカラムでは専用のフックがなかったので、普通に置換してあげます。

function motoki_columns_schroll_hint($text) {
	$text = str_replace('スクロールできるんです!', 'スクロールできるんです!', $text);
	return $text;
}
add_filter('the_content', 'motoki_columns_schroll_hint');
スクロールできるんです!

ここになにか文言が入ります。

ここになにか文言が入ります。

まとめ

SWELLは正直、多言語対応にはまだまだ整備不足なところがあります。

ほんとうはローカライズ(翻訳)の場所をすべて記載したかったのですが、ちょっとづつ書いていこうと思います。

目次