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

2020年2月29日

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

カスタム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を追加・削除する詳しくは
以下を参照の事。

【JavaScript】要素にclassを追加・削除する【classList】 ｜ Into the Program

JavaScriptでHTMLの要素にclassを追加・削除するclassListの使い方をご紹介します。 では解説していき ...

 https://into-the-program.com/classlist/