100文字以上のレビューテキストを「もっと見る」で表示させるJavaScript

2024年10月11日2024年12月8日

100文字以上のテキストは、「もっと見る」というリンクをクリックすることで表示されるようにしたい。

その理由が、複数のクチコミを羅列するにあたって、短いテキストと長いテキストが混在して見栄えが悪いため、レイアウトを整えたい。

また、長文のテキストはスマホ表示の際、文字量の多さに、離脱するリスクも考えられるので、ユーザーのストレス軽減のためにも、見たい人だけ見れる状態にする。

また、ページ内のユーザーアクションを誘発させることによって、SEO効果も期待。

ソースコード

100文字以上のテキストは「もっと見る」というリンクをクリックで表示
特定のCSSクラス内のテキストに適応
既存のHTMLやCSSは編集せずJavaScriptのみで実装可能
100文字以下のテキストには「もっと見る」リンクは表示させない
ソースコード上は全文読み込まれているので文字量によるSEOの影響なし

<script>
document.addEventListener('DOMContentLoaded', function() {
    // すべてのテキストコンテナを取得
    const textContainers = document.querySelectorAll('.c-balloon__text');

    textContainers.forEach(function(textContainer) {
        const textContent = textContainer.querySelector('p'); // 各コンテナ内の<p>を取得
        
        // 元のテキストを取得
        const originalText = textContent.innerHTML;

        // テキストの長さを確認
        if (originalText.length > 100) {
            // 最初の100文字を取得
            const truncatedText = originalText.substring(0, 100);
            // 最初の100文字を表示し、「もっと見る」リンクを追加
            textContent.innerHTML = truncatedText + '... <a href="#" class="more-link">もっと見る</a>';

            // 「もっと見る」リンクを取得
            const moreLink = textContent.querySelector('.more-link');
            
            moreLink.addEventListener('click', function(event) {
                event.preventDefault();
                textContent.innerHTML = originalText; // 元のテキストを表示
            });
        } else {
            // 100文字以下の場合はそのまま表示
            textContent.innerHTML = originalText; // 変更しない
        }
    });
});
</script>

このJavaScriptコードをHTMLファイルの<body>タグの最後または<head>タグ内の<script>タグ内に追加。

スマホだと、100文字でもまだ長く感じるので、50文字以上に変更しても良いと思う。

特定のページは適応させない

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 除外したいページのURLまたは部分文字列を指定
    const excludePages = ['/excluded-page', '/another-excluded-page'];
    const currentPath = window.location.pathname;

    // 現在のページが除外対象か確認
    if (excludePages.some(page => currentPath.includes(page))) {
        return; // 除外対象の場合、スクリプトを実行しない
    }

    const textContainers = document.querySelectorAll('.c-balloon__text');

    textContainers.forEach(function(textContainer) {
        const textContent = textContainer.querySelector('p'); 
        
        if (!textContent) return; // 安全対策: <p>要素が存在しない場合はスキップ

        const originalText = textContent.innerHTML;

        if (originalText.length > 100) {
            const truncatedText = originalText.substring(0, 100);
            textContent.innerHTML = truncatedText + '... <a href="#" class="more-link">もっと見る</a>';

            const moreLink = textContent.querySelector('.more-link');
            
            moreLink.addEventListener('click', function(event) {
                event.preventDefault();
                textContent.innerHTML = originalText;
            });
        } else {
            textContent.innerHTML = originalText;
        }
    });
});
</script>

/excluded-page は https://example.com/excluded-page を除外。

WordPressにて特定のタグで適応させない

上記では管理が大変なのでタグを使ってみる。以下をfunction.phpに記述する。

function exclude_script_on_tagged_posts() {
    // 適用させたくないタグのスラッグを指定
    $excluded_tags = array('no-script', 'exclude-this');

    // 現在の投稿が該当タグを持っているかチェック
    if (is_single() && has_tag($excluded_tags)) {
        return; // 該当する場合はスクリプトを出力しない
    }

    // スクリプトを出力
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const textContainers = document.querySelectorAll('.c-balloon__text');

        textContainers.forEach(function(textContainer) {
            const textContent = textContainer.querySelector('p'); 
            
            if (!textContent) return; // 安全対策: <p>要素が存在しない場合はスキップ

            const originalText = textContent.innerHTML;

            if (originalText.length > 100) {
                const truncatedText = originalText.substring(0, 100);
                textContent.innerHTML = truncatedText + '... <a href="#" class="more-link">もっと見る</a>';

                const moreLink = textContent.querySelector('.more-link');
                
                moreLink.addEventListener('click', function(event) {
                    event.preventDefault();
                    textContent.innerHTML = originalText;
                });
            } else {
                textContent.innerHTML = originalText;
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'exclude_script_on_tagged_posts');

「no-script」と「exclude-this」のタグが設定された投稿ではもっと見るを適応させない。