1ヶ月前に投稿

ブロックエディタで記事をclass付きタグ(tag)で囲む

4

ブロックエディタで記事を書く際に
本文をclass付きタグで囲む必要がある時、
皆さまはどうしていますか?

カスタムHTMLで囲んだ。

カスタムHTMLで囲んでみると・・・。

ブロックがエラーになった。

「このブロックには、
想定されていないか無効な
コンテンツが含まれています。」
と言うエラーメッセージ?が出た!

要は、
終了タグ(end tag)がないよ。
開始タグ(start tag)がないよ。
と言う事らしいのです。

特に問題ないと思うのですが、
あまり気持ちよくない。

調べてみると、
グループブロックを使うと、
class付きタグで囲む事が出来ます。

グループブロックの中に段落ブロック。

グループブロックは、
ブロックを複数選択してグループ化します。
簡単に言うと、
div要素で複数ブロックをラップ出来ます。

追加でclassが必要な場合、
グループブロックの
高度な設定 ⇒ 追加CSSクラス
で追加してやります。

しかし、
記事全体を囲みたい場合、
Oneグループにまとめるのも
なんだかなぁ・・・と思いますよね。

そうすると後は、
JavaScriptで要素に
classを追加する方法がよいかな?

記事を囲っている要素は、
例えば articleタグ (article要素)
とかでしょうか?

幸いにも、このワードプレスの
テーマは postと言う class を持った
div タグが記事を囲っています。

要素にclassを追加するには、
classList がよいようです。

articleタグに「hoge」classを
追加する場合。

let elements = document.getElementsByTagName('article');
elements[0].classList.add('hoge');

postと言う classで取得する場合。

let elements = document.getElementsByClassName('post');
elements[0].classList.add('hoge');

要素にclassを追加・削除する詳しくは
以下を参照の事。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ブロックエディタで記事をclass付きタグ(tag)で囲む