MENU

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

SWELLカスタマイズ

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

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

通常の表記

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

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

目次

著者

motokiのアバター motoki

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

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

WordPressテーマ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');
スクロールできます

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

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

「スクロールできます」の文言を消したい場合

矢印も含めて「スクロールできます」の文言を消したい場合は以下のコードになります。

function motoki_columns_scroll_hint($text) {
    // スクロールできますのテキストを削除
    $text = str_replace('スクロールできます', '', $text);
    // アイコン部分のHTMLも削除
    $text = str_replace('<div class="c-scrollHint"><span> <i class="icon-more_arrow"></i></span></div>', '', $text);
    return $text;
}
add_filter('the_content', 'motoki_columns_scroll_hint');

まとめ

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

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

SWELLカスタマイズ
  • URLをコピーしました！
目次