ワードプレスで内容を非表示にする方法

質問

たびたび失礼いたします。
ワードプレスにおきまして投稿記事の内容の一部を非表示したいのですが、どうすれば良いかご存じの方がおられればご教示お願いいたします。

具体的に申しますと、見出し１が記事タイトル、見出し２がメインの記述のテーマ、見出し３はより詳細な記述、とした場合に、見出し３に関しては必要な方だけに見ていただきたいので基本は非表示にしておきたいのです。
見出しをクリックすると、内容を表示します。

自分で調べまして、似たような方法にスポイラーやプルダウンボックスというようなものを見つけたのですが、制限も多くイメージと少し違ってしまいます。
見出しより下の部分を全て隠してしまうにはどのようにすればよろしいでしょうか？

ご指導よろしくおねがいします。

回答No.2

4017B

あ～はいはい、普通に記事ページを表示している中で部分的に各段落毎にセクションの「表示/非表示」を行いたい訳ですね。そうなって来るとそれはWordPressの機能とかでは無く、純粋にCSSとかJavascriptの話になります。

web上での主だった解説記事ですと…

- https://techacademy.jp/magazine/35280
- https://saruwakakun.com/html-css/reference/hidden-show

～みたいな感じで解説されてますね。要するに <input type="checkbox"> が持つ「チェックボックス」の属性を利用してクリックの有無を判定させ、それに応じて交互に表示と非表示を繰り返す仕組みです。

これはコレで1つのテンプレと言うかトレンドなのでいいんですが…ただし質問者の様にWP上でこの機能を再現させるには少々、問題があります。質問者はもう既に他の幾つかの代替手段を実験してみた様ですのでお分かりかと思いますが、WPで投稿者側から比較的に自由に内容を操作して本文を入力投稿可能なのは、主に投稿ページの本文部分のみであり。それ以外のタグやタイトルなどに関しては、実際に表示されるテキスト文章しか弄れない様な仕様になっています。

<h1>webサイトのタイトル</hi>

<h2>投稿ページのタイトル</h2>

<h3>見出し1</h3> ←クリックで下に続く記事本文を表示/非表示
<div>記事本文 (通常は非表示)</div>

<h3>見出し2</h3> ←クリックで表示/非表示
<div>記事本文 (通常は非表示)</div>

<h3>見出し3</h3> ←クリックで表示/非表示
<div>記事本文 (通常は非表示)</div>

～こんな感じにしたい訳ですよね？まあJavascriptを使えば実装可能ですが、問題は質問者の知識と技術レベルがどの程度かという話になります。JSでwebページ上の挙動を操作するのであれば、現在ではJSの動作速度は格段に速くなりましたし、またjQueryを用いればおおよそ出来ない事は無くなりましたので。

現状、質問者のWPシステムで例文などにある「<h3>見出し</h3>」を書き出す際にはどの様な入力になってますか？何かMarkDown的な入力支援を併用しているのか、それとも本文タイトル以外のコンテンツが全て投稿時に手入力で直にHTMLタグなども直打ちで入力投稿しているのですか？

JSにしろCSSにしろ誤爆誤動作を避けるために、目的のHTMLタグをピンポイントで正確に取得するために、<h3 id="my-headline-01">見出し1</h3> ～みたいな感じで他と絶対に被らない様な唯一無二の個別IDを事前に割り振って置く必要があります。これをして置かないと、仮にちゃんと動作するJSコード等をコピペ使用したとしても、ページ内のどれか1つの「見出し」をクリックしただけで、連動して同一ページ内の全て記事本文が一緒に表示される事になります。

一般的なWPテーマではそこまでしてないはずなので、これは今から質問者自身が functions.php などをカスタマイズして自作するしかありませんが…出来そうですか？

補足

再度回答有り難うがざいます。

＞知識と技術レベルがどの程度か
お恥ずかしながら始めたばかりでして、ほとんど何の知識もないと思っていただいて差し支えないレベルかと思います。

いつもは記事投稿の際はWP標準搭載のビジュアルエディタにて編集しております。
今回の件に際しまして、アコーディオンのコードを改変してみるなどHTMLでの直接編集も試してはおりますがうまく行かず、ご指摘頂いているjavaでの呼び出しに行き着いたのですが当然全く知識がない状態です。そのため今回簡単な方法はないかと思い質問させていただきました。

＞functions.php などをカスタマイズして自作するしかありませんが…出来そうですか？
正直javaがどういった概念で作動するのかもわからないので自身は全くありませんが、それでは進みませんのでなんとか研究してみたいと思います。

回答No.1

4017B

WordPressを特に自己流カスタマイズせずに標準仕様で運用しているのであれば、元からWPには「続きを読む」という機能が実装されています。

- 「続きを読む」のカスタマイズ https://wpdocs.osdn.jp/%E3%80%8C%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E3%80%8D%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA

要するにWP管理画面の記事投稿ページから本文などを入力して記事を投稿する際に…

こんにちわ。クリックして続きをどうぞ。
<!--more-->
今日は特別な記事を公開します。今日は特別なんです。

～みたいな感じで <!--more--> というHTMLタグを一緒に記述して投稿すると、その記事ページがアクセスされ表示された際にWP本体側で自動的に <!--more--> の部分が「続きを読む」に変換され、それ以降に記述された記事本文は非表示になる様になります。そして実際にアクセスした閲覧者が「続きを読む」の部分をクリックすると、それ以降の続きが表示されて記事本文の全てが表示される様な仕組みになります。

まあとりあえず実際に何か短い適当な実験用の記事ページを試しに作って投稿してみてください。実際にどの様な感じになるのかが分かるかと思います。

お礼

回答ありがとございます。
moreタグはその後の文章を非表示にするものではないでしょうか？

通常記事の構成は
h1
h2-1
h3-1
h3-2
h2-2
h3-1
h2-3
h3-1
moreタグですと
h1
h2-1 more
以降非表示になるかと思います。

私の質問は
h1
h2-1
h3-1見出しのみ　（本文非表示）
h3-2見出しのみ　（本文非表示）
h2-2
h3-1見出しのみ　（本文非表示）
h2-3
h3-1見出しのみ　（本文非表示）
というようなことです。
分かりづらかったようで申し訳ありません。