カスタムHTMLブロック は、コンテンツを柔軟にコントロールしたいユーザーに最適です。テーマファイルを変更することなく、投稿やページに直接HTMLコードを追加することができます。
また、Googleマップ、ソーシャルメディア埋め込み、分析ツールなどの外部プラットフォームからカスタムウィジェット、フォーム、スクリプトを追加することもできます。また、公開前にコードをプレビューすることもできます。
今日は、WordPressのカスタムHTMLブロックの使い方を簡単なステップでご紹介します。最後までお付き合いください。
WordPressカスタムHTMLブロックとは?
WordPressカスタムHTMLブロックとは?
カスタムHTMLブロック は、投稿やページにカスタムHTMLコードを表示できるコアブロックです。ユニークなデザイン要素を追加したり、外部スクリプトを埋め込んだりするのに便利なツールです。
生のHTML入力をサポートしている。そのため、ウェブサイトのフロントエンドの出力を完全にコントロールすることができます。
カスタムHTMLブロックの主な機能とは?
- プレビュー・オプション:HTMLコードがフロントエンドでどのように表示されるかを、エディタを離れることなく確認できます。
- 柔軟性:スクリプト、インラインスタイル、カスタム埋め込みを追加できます。
- 応答性:カスタムHTMLの出力が、コード構造に応じて異なるデバイスに調整されることを保証します。
カスタムHTMブロックのツールバー機能とは??
- に変える: このブロックをColumns、Code、Details、Groupブロックに変換することができます。
- 動くハンドル: エディターでブロックを上下に動かして、コンテンツを整理することができます。
- ドラッグだ: 専用ブロックをドラッグ&ドロップで好きな場所に配置できる。
- HTMLこのボタンで を見て、HTMLコードをブロックに挿入する。
- プレビュー プレビューは、エディタから出力を変更できるように、エディタにHTMLコードのプレビューを表示することができます。
- オプション 複製、コピー、グループ化など、ブロックのセクションに関連するオプションを提供する。

美しいテーブルを作る
ブロックエディター付き

WordPressでカスタムHTMLブロックを使うには?
コーディングのスキルがなくても、誰でも簡単にカスタムHTMLブロックを使うことができます。必要なのは以下のステップだけです。
ステップ1:WordPressカスタムHTMLブロックを挿入する
カスタムHTMLブロックを追加したい投稿またはページに移動します。その後 ブロック追加 ("+") アイコン (1)タイプ "Custom HTML「検索ボックス内の (2)をクリックする。Custom HTML" (3).

ステップ2:カスタムHTMLコードを挿入する
カスタムコードブロック内にコードを貼り付けます。

また、プレビューボタンを選択すれば、エディター上でコードの出力を直接確認することもできる。

これがカスタムHTMLブロックの使い方です。ブロックを追加したら、必ず記事を公開するか保存してください。
カスタムHTMLは、ブロック設定の他のカスタマイズを保持しません。今のところ、すべてのカスタマイズはツールバーにあります。
最終的な感想
カスタムHTMLブロックは、WordPressのデフォルト機能をカスタムコードでサポートします。直感的なインターフェイスとプレビューオプションにより、完璧なHTMLブロックとなっています。
この小さなチュートリアルが、ブロックとその使い方についてもっと知っていただく助けになれば幸いです。もし上記のステップでわからないことがあれば教えてください。
続きを読む