(cache)WordPressの記事の一部を折りたたんで表示する方法 – ネタバレ防止

WordPress の記事を書いていて、ここの説明長くなっちゃうから折りたたんで必要な人だけに表示したいな、と思うことありませんか？

このブログは解説系のブログなので、慣れている人には必要ないけど、初心者の人に向けた情報などを掲載したいときに、記事の一部を折りたたんで表示しています。

初心者用の情報を掲載。

みなさんどこかで一度は見たことがあると思いますが、「もっと読む」「続きを読む」と書かれたリンクが同じタイプの機能になります。今回はそれを記事のどこにでも好きなように設置できるようになる方法を解説していきます。

続きを読むボタンなんていらない！という方もおられると思いますが、これはいろんなことに使えるテクニックなので、ぜひ自分なりに使用方法を考えてみてください。

例えばこんなふうにも使えますよ。なにかネタバレを含む記事を書いた時にネタバレを読みたくない人のために、クリックしないと見られない記事を載せておくと、読者に対して親切なブログだと感じてもらえるのではないでしょうか。

なんとラスボスは●●だった！こんな感じで、本・映画・ゲームなどのネタバレ防止に使えます。

最初の準備

スタイルシートと JavaScript を利用してこの機能を実現します。コードをコピペするだけで簡単に利用できるように解説していますので、まずは Simple Custom CSS and JS というプラグインをインストールしてください。インストールしたことがない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには？

1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。スタイルシートを追加するページに移動します。

2. スタイルシートを貼り付ける

タイトルのフォームに Slide Contents CSS と入力し、下のコードを入力するフォームの /* */ 赤文字で囲まれた英文をすべて削除してから、以下のコードを貼り付けて公開ボタンを押してください。

      
        .slide-contents {
      
          background: #f2f2f2;
      
          width: 100%;
      
          border: #666 1px solid;
      
          margin: 0 0 20px 0;
      
          padding: 20px 20px 0 20px;
      
          display: none;
      
        }

view raw wordpress-slide-contents.css hosted with

by GitHub

3. JavaScriptを追加するページに移動する

続いて ダッシュボード > Custom CSS & JS > Add Custom JS を選んで、JavaScript を追加するページに移動します。

4. JavaScriptを貼り付ける

さきほどのスタイルシートと同じ手順で、タイトルを Slide Contents JS にして、以下のコードを貼り付けて公開ボタンを押してください。

      
        jQuery(function(){
      
          jQuery('[data-slide-contents]').click(function(event) {
      
            event.preventDefault();
      
            var slideContents = jQuery(this).data('slide-contents');
      
            jQuery('#' + slideContents).slideToggle(400);
      
          });
      
        });

view raw wordpress-slide-contents.js hosted with

by GitHub

5. 記事にHTMLのタグを追加する

記事の新規追加ページ、または編集ページを開いて、以下の HTMLタグをテキストエディタで貼り付けてください。ビジュアルエディタでは機能しませんので、必ずテキストエディタを開いてください。

      
        <button data-slide-contents="slide-contents-1">スライドボタン</button>
      
        <a href="#" data-slide-contents="slide-contents-1">スライドリンク</a>
      
        <div id="slide-contents-1" class="slide-contents">
      
        テストコメント
      
        </div>

view raw wordpress-slide-contents.html hosted with

by GitHub

貼り付け終わったら プレビュー ボタンを押してチェックしてみましょう。

6. プレビュー

スライドリンク

テストコメント

記事をプレビューすると、このような表示になっています。ボタンとリンクのそれぞれで表示・非表示の切り替えが行えます。

7. 重要なポイント

HTMLタグは、折りたたむ部分ごとに文字を変えなければならないところがあります。以下のコードの赤文字部分を見てください。

<button data-slide-contents="slide-contents-1">スライドボタン</button>
<div id="slide-contents-1" class="slide-contents">
テストコメント
</div>

ボタンを利用する場合は、<button>タグの赤文字部分と、<div>タグの赤文字部分を同じ文字列にしてください。

<a href="#" data-slide-contents="slide-contents-1">スライドリンク</a>
<div id="slide-contents-1" class="slide-contents">
テストコメント
</div>

リンクを利用する場合は、<a>タグの赤文字部分と、<div>タグの赤文字部分を同じ文字列にしてください。

この文字は半角英数字で折りたたむ場所ごとに違う文字列を指定する必要があります。記事が変わったからといって、同じ文字列を使わないようにしてください。同じ文字列がブログ内に存在する場合は、正常に動作しなくなりますので、必ず折りたたむ場所ごとに、被らない唯一の文字列を設定するようにしてください。

最後に

「おっ！このブログ、ギミックがあって面白いな」と思わせられるテクニックなので使ってみて損はないですよ。

長い解説を折りたたむ時や、ネタバレ防止以外でも使えると思うので、ぜひいろいろなシーンで活用してみてください。

最初の準備

1. スタイルシートを追加するページに移動する

2. スタイルシートを貼り付ける

3. JavaScriptを追加するページに移動する

4. JavaScriptを貼り付ける

5. 記事にHTMLのタグを追加する

6. プレビュー

7. 重要なポイント

最後に

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル