標準の「詳細」ブロックを使って「続きを見る」コンテンツを作る

公開日:2024(令和6)年10月11日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPressの投稿や固定ページでは、基本的に本文のすべてのコンテンツが表示されるようになっています。

これをニュースサイトのように途中まで表示させて、それから下は「続きを見る」ボタンをクリックすると表示される、そんなコンテンツを標準の「詳細」ブロックを使って実現する方法例を紹介します。

「詳細」ブロックはdetailsというHTMLタグを使用して本来はボタンで開閉するコンテンツを作成するためのもので、今回のような使い方がHTMLとしての使用方法として正しいかは不明なため、あくまでもそんなことができるよという内容になりますから、使用するかどうかは自身で判断ください

「詳細」ブロックを使った「続きを見る」コンテンツのデモ

以下でデモ表示させています。「続きを見る」というリンクをクリックしてみてください。

— 続きを見る —

この部分は最初隠されています

我が家のアイドル「モモ」のかわいい写真
我が家のアイドル「モモ」のかわいい写真

本サイトでは詳細ブロックの開閉をアニメーションにしておりゆっくりと表示されますが、本ページの方法で続きを見る機能を作成した場合にはパッと表示されます

QA Analytics QA Analytics

標準の「詳細」ブロックを使って「続きを見る」コンテンツを作る方法

必要に応じて手動で設定する方法

CSSで簡単に制御できますので、有効化しているテーマのstyle.cssを開き、以下のコードを追加します。

.test-details summary {
    margin: 0 auto;
    width: fit-content;
}

.test-details summary:hover {
	cursor:pointer;
	font-weight:700;
}

details.test-details[open] summary {
    display: none;
}

.test-details summary::marker {
    content: '';
}

次に、投稿や固定ページを新規作成して「詳細」ブロックを挿入します。

「要約を各…」とグレーで表示されている部分に「続きを見る」という文字列を入れます。

「..非表示ブロックを追加する」の部分に、ボタンをクリックするまでは隠れているコンテンツを作成します。

「詳細ブロック」を選択して、右サイドバーの「高度な設定」にある「追加CSSクラス」へ「test-details」と入力します。

終わったら、プレビューして表示させてみて以下のような動作をしたら完了です(簡単すぎ?)

  • 表示画面で本文の左右中央に「続きを見る」という文字列が表示される
  • 「続きを見る」をクリックすると文字列が消え、隠れていたコンテンツが表示される

detailsタグは、見た目に見えなくしているだけで、内容はHTMLへ出力されるので、検索エンジンクローラーなどにも内容はきちんと把握されますから、隠すことで悪影響が出る可能性は低いのではないかと思いますが、通常のページと比べて何か判断基準が変わるのかなどは分かりません

WordPressらしくブロックスタイルを追加する方法(おすすめ)

せっかくブロックエディターを使っているのですから、いちいち追加CSSクラス欄へクラスを追加しなくても、ボタン一発で切り替わるようにしましょう。

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_register_block_design_styles_details(){
	register_block_style('core/details', array(
	'name' =>  'details-readmore',
	'label' => __( '続きを見る',''),
  ));
}
add_action('init','pwcn_register_block_design_styles_details');

続いてstyle.cssへ以下のコードを追加します

is-style-details-readmore
.is-style-details-readmore summary {
    margin: 0 auto;
    width: fit-content;
}

.is-style-details-readmore summary:hover {
	cursor:pointer;
	font-weight:700;
}

details.is-style-details-readmore[open] summary {
    display: none;
}

.is-style-details-readmore summary::marker {
    content: '';
}

これで、「詳細」ブロックを挿入し、右サイドバーのスタイルタブをクリックした時、下図のように「デフォルト」と「続きを見る」というボタンが表示され、「続きを見る」を選択すると、本ページの機能が有効になるようになります。

標準の「詳細」ブロックを使って「続きを見る」コンテンツを作る|Personal WP Customization Notes (PWCN)

なおここまでの措置で、テーマのstyle.cssがブロックエディター側に反映されるようになっていれば、ブロックエディター上も本ページの動作と同じ表現になりますが、そうでない場合は閲覧画面のみ表現が実現されます。

エディター側にも適用させたいという方は以下のページなどを参考に、両方にスタイルが反映されるようにするなどしてください。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法