長い文字列を省略して表示する方法:WordPress/EC-CUBE/jQuery

2014年12月25日


タイトルや説明文等、長い文字列を表示するとレイアウトが崩れてしまう場合、 特にスマートフォン対応時は表示できるスペースも限られているため、 「続きを読む」や「…」等に置き換えて省略したいですよね。



WordPressの場合

    <?php the_title(); ?>

記事タイトルを例にご説明します。 通常、上記のようにタイトルを出力しているかと思いますが、ここに、文字数をカウントする部分を加えます。「mb_substr」を使うのは、日本語を含むマルチバイトに対応するためです。

    <?php echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 10).'...'; ?>

では実際にいつもの「新着情報一覧」で実行してみます。

10文字なので相当短くなりますね……



EC-CUBE(2.11~)の場合

こちらは商品名を例にご説明します。


[mb_substr:0:14]は[mb_substr:表示開始する文字数:表示したい上限文字数]という意味になりますのでお好みで数字を変更して下さい。
省略部分の表示については次の通り。

 //10文字を超えたら
… //…を表示する

[…]を好きな文言に変更して下さい。



jQueryで対応してしまう

出力時点で制御するのではなく、jQueryでやってしまうという方法もあります。
指定したclassがついている要素は一律で省略されてしまいますのでそこだけ注意が必要ですが、「上手く動かない!」と頭を抱えることも少ないので無理にWordPressやEC-CUBEを編集するよりおすすめかもしれません。

$(".hoge").each(function(){
    var txt = $(this).text();
    if(txt.length > 10){
        txt = txt.substr(0, 10);
        $(this).text(txt + "・・・");
    }
});

HTMLは次の通り

<h2 class="hoge">hogeというクラスがついた部分は10文字まで表示する。超えたら[…]で省略する</h2>
実行例

hogeというクラスがついた要素は10文字まで表示する。超えたら[…]で省略する


以上で対応完了となります。
特にEC-CUBEではバージョンによって出力コードが異なる場合もありますので、 ご対応が難しい場合にはご相談いただけますようお願いいたします。

カテゴリー: EC-CUBE, WordPress, 対応事例   パーマリンク

コメントは受け付けていません。

Home >  対応事例 > EC-CUBE > 長い文字列を省略して表示する方法:WordPress/EC-CUBE/jQuery