これから Nishiki Pro または Nishiki
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る

Gutenberg のブロックエディターと旧エディターとの大きな違いの 1 つは、投稿や固定ページに「ブロック」を追加してページを作成していくスタイルになる、ということかなぁと思います。

目次

「ブロックの使い分け」を意識しよう

例えば、ブロックエディターを使って文字や画像などを追加する場合は、それぞれ「段落」や「画像」ブロックを使う必要があります。

しかし、「段落」ブロック内に画像を入れることはできませんし、「画像」ブロック内には決められたエリアにのみキャプションとして文字を追加することしかできません(本記事公開時点での情報です)。

つまり、ブロックエディターでは旧エディターではあまり意識する必要がなかった「ブロックの使い分け」が必要になってきます。

JavaScript のコードを入れたいんだけど?

僕が Gutenberg のブロックエディターを使い始めたばかり頃に、こんなことを思いました。

あれっ、JavaScript のコードってどうやって追加するんだろ?

・・・特定の投稿や固定ページ内に JavaScript のコードを入れたい場面って結構あります。例えば、文章の区切りのいいところでツイートボタンを入れたり、広告を入れたり、ブログパーツなどを入れたり。

というわけで、JavaScript のコードを追加する場合は「カスタム HTML 」ブロックを使えば OK です。解説動画を作りましたのでご参考ください(動画作成に慣れていないので、今回もまた声が裏返っています)。

動画内では YouTube チャンネル登録ボタンを入れる方法を例に挙げて解説しています。「カスタム HTML」ブロックはプレビュー機能もついているので、正しく動いているかどうかも確認することができます。

ブロック単位で管理しやすくなるメリットもある

これまで旧エディターで JavaScript のコードを追加するには、テキストエディターに切り替えてコードを直接書いていた方もいると思いますが、ブロックエディターでは「JavaScript のコードが入ったブロック単位で管理ができる」ので、操作に慣れさえすれば視認性も良くなるのではないかと思います。パッと見で「ああ、これは JavaScript のコードが追加されている箇所だな」とわかることは大事なことだと思います。

Gutenberg のブロックエディターを使い始めたばかりの方は「ブロックが多くて何を使っていいかわからない」なんてこともあると思います。

「Gutenberg のブロックエディターに JavaScript のコードが追加できない!どうやればいいんだ・・・」という方にとってご参考となりましたら幸いです。

このページをシェアする

サポトピア
ユーザーコミュニティ
ユーザーコミュニティ
サポトピア会員であればどなたでも参加できるユーザーコミュニティを作りました。「WordPress テーマ Nishiki の基本的操作などをちょっと聞いてみたい」という時など、日々のウェブサイト運営にご活用ください。マニュアル・機能追加の要望やフィードバックなども受け付けています。まだ開始して間もないサービスなので、少しずつ利用いただける方が増えるといいな〜と思います。ご参加お待ちしております。

参加する

※サポトピアにログインしてください

著者

bouya Imamura

東京都北区十条にあるウェブサイト(ホームページ)制作会社 AnimaGate(アニマゲート) という会社をやっています。サポトピアでは自社製品・サービスの全般的な開発・管理などを行っています。これまで数多くのウェブサイトの新規作成・リニューアル・運営などを経験し、WordPress(ワードプレス)公式テーマ・公式プラグインなど、ウェブサイト運営に役立つ様々なツールを開発・公開しています。サポートの一環として YouTube のライブ配信などオンラインサポートを試験運用しています。ぜひチャンネル登録いただけると大変嬉しいです。→ブログはこちら

WordPress(ワードプレス)の使い方
マニュアル

マニュアルTOPへ戻る