対応事例

ECサイトの構築なら【MDS-エムディーエス-】ホーム > 対応事例 > EC-CUBE > 長い文字列を省略して表示する方法：WordPress/EC-CUBE/jQuery

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

 この記事は最終更新から6年以上経過しています。内容が古くなっている可能性があります。

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

WordPressの場合

    <?php the_title(); ?>

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

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

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


  • …

    [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ではバージョンによって出力コードが異なる場合もありますので、
    ご対応が難しい場合にはご相談いただけますようお願いいたします。

    お問い合わせはこちら

コーディングの代行、デザインを含めたオーダーメイドでのサイト制作、完成後の運用・保守を行うWebメンテナンスプランもご用意しておりますので、お悩みに合わせてお気軽にお問い合わせください。

03-5950-0525平日10:00〜19:00
お問い合わせ（無料）