article要素について #beforeGutenberg 


article要素について #beforeGutenberg

おはようございます。堀田です。
あじさい企画サイトで、Gutenbergのテスト中です。

あじさい企画サイトは、以下の流れで作成されています。
1. 無料テンプレートサイト:https://f-tpl.com/
 のHTMLテンプレート
2. 1をWordPressにカスタマイズ
3. カスタマイズしまくり、跡形もない。

つまり、css構造が、WordPress用ではない。という現実があります。

さて、beforeGutenbergに戻ります。

1. 今までHTMLで作成してきた固定ページの編集画面を開きます。
2. 自動的にGutenbergのクラシックモードで開きます
3. 編集します。
4. 保存します。→ 『変換した箇所が、自動的に、ブロック変換されます。』※ここ大切。

ブロック構造ですが、複数種類あります。
自分は「段落」タイプをよく利用しておりますが、
その場合、段落前に自動的にarticleが付与されるようです。

さて、articleの意味をおさらいしてみましょう。
https://www.mdn.co.jp/di/contents/4040/50884/

***
article要素はブログの投稿や一覧、ニュースサイトの記事、サイトの更新情報ページなど、その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用します。
***

あじさい企画サイト、もとい、tpl無料テンプレートでは、よく、
.section .articleという、複合クラスがよくつかわれます。

section→articleで、一つのブロックを作成していることの多い自分のサイトでは、「Gutenbergブロックを

で囲む」という難行に取り掛からないといけません。

うーん、GutenbergのHTML編集モードから離れられない。。困ったもんだ。

**********

新しいWordPressサイトを作るあなたにご連絡。
テンプレート内で、1ページ1セクションになるように作成しておいたほうが無難なようです。

とはいえ、Gutenbergも毎週のように変化しています。
そのうち、

のネストが使えるようになるとは思いますが、まあ、その辺は適当にやっていきましょう。

WordPress 5.0対応テーマを作るためには、
ブロックがどんなコードを吐き出すのか、前もってチェックする必要がありますね。

うん。大変です。Codexに任せましょう。たぶん。。

Pocket


Copyright(c) 2016 ajisai-planning All Rights Reserved.