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

2023.01.232024.03.05

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

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

通常の表記

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

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

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');

スクロールできるんです！

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