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

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

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

初心者用の情報を掲載。

 

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

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

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

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

最初の準備


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

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

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


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

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


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

これは隠されている部分のデザインを決めるスタイルシートです。デザインが気に入らない方はこのスタイルシートを編集してください。編集する場合は display: none; この記述だけは消さないようにしてください。これは最初に非表示にしておくという指定です。

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


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

4. JavaScriptを貼り付ける


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

slideToggle(400); と書かれている部分を見てください。これは隠されている部分を表示する(非表示にする)速度を表しています。もっと速く表示したい場合は数字を 400 未満に設定してください。例えば 100 を設定すると、0.1 秒で表示が行われます。逆に大きな数字を設定すると、ゆっくりと表示が行われます。1000 を設定した場合は 1 秒かけて表示が行われます。半角数字で好みの速度を設定してください。

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


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

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

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>タグの赤文字部分を同じ文字列にしてください。

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

後は スライドボタン / スライドリンクテストコメント と書かれている部分をそれぞれ好きな文字に書き換えてみてください。扱い方がわかると思います。

最後に


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

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

“WordPressの記事の一部を折りたたんで表示する方法 – ネタバレ防止” への2件の返信

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

    初めまして。
    突然のメッセージ失礼します。
    ワードプレス初心者です。
    こちらは、ただの御礼メールになります笑。

    もっと見るボタンを作りたくていろんなサイトを見たのですが、手順に従ってもうまくできない、そもそも難しそうで手が出ない、といった状況の中、貴殿のホームページにたどり着きました。
    CSSをいじるのは初めてで最初高いハードルを感じていたのですが、説明が親切丁寧で、実際にコメントがたためるようになった時は本当に嬉しかったです( ; ; )!
    これからも愛読させていただきます。ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)