WordPressカスタムHTMLブロックの使用方法

カスタムHTMLブロックを使用すると、ページを表示したりHTMLとして投稿したりしなくても、HTMLコンテンツを追加して編集できます。 HTMLを埋め込んだり、それを使用してテキストをマークアップしたり、必要に応じてスタイル付きテキストを含む段落ブロックに変換したりすることもできます。 このブロックは、HTMLでの作業を好む人に最適であり、Googleマップなどの特定の種類のコードを埋め込むための最良の方法の1つです。

この記事では、カスタムHTMLブロックについて詳しく見ていきます。 投稿やページに追加する方法、設定とオプション、使用方法のヒント、よくある質問を確認します。

私たちのYoutubeチャンネルを購読する

投稿またはページにカスタムHTMLブロックを追加する方法

カスタムHTMLブロックをコンテンツに追加するには、ブロックを表示する場所にカーソルを置き、インサーターツールを選択します。 検索ボックスが開き、検索語を入力したり、オプションをスクロールしたりできます。 HTMLを検索し、結果に表示されたらブロックを選択します。

または、ブロックを表示する場所に/ htmlと入力して、Enterキーを押すか、ブロック領域の上のオプションから選択します。

これで、コンテンツ内にHTMLを追加できるカスタムHTMLブロックができました。 設定を進めていくと、コード付きの例がいくつか表示されます。

カスタムHTMLブロックの設定とオプション

ほとんどのブロックとは異なり、カスタムHTMLブロックにはエディターのサイドバーにオプションが含まれていません。 必要なすべてのオプションがツールバーにあります。

カスタムHTMLブロックツールバー

ブロック内の任意の場所をクリックして、そのツールを表示します。 すべてが表示されない場合は、新しい領域のブロックの下をクリックすると、ブロックを再度選択したときに残りのツールが表示されます。

各ブロックには、ブロックのオプションを選択できる独自の特定のコントロールがあります。 ツールバーの上にある小さなブロックオプションのセットを使用すると、ブロックタイプを変更したり、ブロックに変換したり、オプションを開いたりすることができます。

それぞれの設定を詳しく見ていきましょう。

カスタムHTML変更ブロックまたはスタイル

オプションでHTMLを選択すると、ブロックを他のタイプのブロックに変換できるドロップダウンボックスが開きます。 オプションには、コード、列、またはグループが含まれます。

コード–カスタムHTMLブロックをコードブロックに変換して、さまざまなタイプのコードを表示できるようにします。

列–ブロックを列内に配置します。

グループ–ブロックをグループに追加して、単一のブロックとして調整できるようにします。

カスタムHTMLブロックドラッグツール

ドラッグツールには、マウスでつかんで移動できる6つのドットが含まれています。

次に、ブロックをコンテンツ内の任意の場所にドラッグしてドロップします。 ブロックをドラッグすると、ブロックがドロップされる場所を示す青い線が表示されます。

ブロックが必要な場所に青い線が表示されたら、マウスボタンを離すと、ブロックが新しい場所に配置されます。

カスタムHTMLブロック移動

上下の矢印は、クリックするたびにブロックを1つのコンテンツセクションに移動します。 ブロックが自動的に新しい場所に移動すると、画面がスクロールします。 これは、ブロックを1〜2セクション移動する簡単な方法です。

カスタムHTMLブロックHTMLとプレビュー

[HTML]ボタンと[プレビュー]ボタンを使用すると、エディターでブロックがHTMLでどのように機能するかを選択できます。 デフォルトでは、HTMLボタンが選択されています。 これは、HTMLを実行するのではなく、コード形式で表示します。 この例は、GoogleマップのHTMLを示しています。

[プレビュー]を選択すると、ブラウザ内で実行されたときにHTMLがフロントエンドでどのように表示されるかが表示されます。 ビューを切り替えてHTMLを編集し、エンドユーザーにどのように表示されるかを確認するのは簡単です。 これは、編集を行って結果をすばやく表示するための優れた方法です。 この例は、コンテンツ内に表示されるように埋め込まれたGoogleマップを示しています。

別の例として、テキスト行にスタイルを追加するためのHTMLを次に示します。 これは、HTMLを作成および編集できるHTMLビューです。

これが、フロントエンドでどのように表示されるかを示すプレビューモードです。

カスタムHTMLブロックオプション

ツールバーの右端には、垂直スタックの3つのドットがあります。 これらの3つのドットは、設定の非表示、ブロックへの変換、コピー、複製、前後の挿入、移動、再利用可能なブロックへの追加、グループ化、またはブロックの削除を可能にする10個のオプションのセットを3つの区分で開きます。

カスタムHTMLブロックオプションでできることは次のとおりです。

その他の設定を非表示–これにより、右側のサイドバーが非表示になり、ワークスペースが拡張されます。

ブロックに変換–これはコンテンツを他の適切なブロックに変換します。 テキストは段落ブロックに、画像は画像ブロックなどに変換されます。この例で使用したGoogleマップコードなどの埋め込みコードは、カスタムHTMLブロックのままになります。 ブロック内の他のHTMLを変換できる場合は、別のブロックに配置されたときにブロックから削除されます。

コピー–これにより、ブロックがクリップボードにコピーされるため、エディター内の任意の場所に貼り付けることができます。

複製–これにより、ブロックの複製が元のブロックの下に配置されます。

前に挿入–これにより、カスタムHTMLブロックの前にブロック領域が追加されるため、別のブロックを配置できます。

後に挿入–これにより、ブロックの後に別のブロックを配置できる領域が追加されます。

移動先–これにより、矢印キーを使用してブロックを上下に移動できます。 青い線を移動します。 目的の場所に到達したら、Enterキーを押すと、ブロックが即座に移動します。

再利用可能なブロックに追加–カスタムHTMLブロックを再利用可能なブロックに追加して、任意のページまたは投稿で再び使用できるようにします。

グループ–これにより、ブロックがグループに追加されるため、ブロックを1つのユニットとして調整できます。

ブロックの削除–これによりブロックが削除されます。

カスタムHTMLブロックを効果的に使用するためのヒントとベストプラクティス

このブロックを使用してテキストのスタイルを設定し、最初にHTMLを編集してから、[ブロックに変換]ツールを使用して段落やその他の種類のコンテンツを作成します。 これにより、コンテンツをより細かく制御でき、HTMLバージョンを保持する必要がない場合に特に役立ちます。 あなたが行くようにあなたはプレビューを見ることができます。 これにより、サイドバーのWordPress設定でビジュアルエディターとコードエディターを切り替える必要がなくなります。

このブロックは、埋め込みマップ、広告、ビデオなどに使用します。これにより、コードエディタービューに変更して、段落ブロックなどの他のタイプのブロックにコードを追加する必要がなくなります。

ページと投稿のコードエディタバージョンではなくこのブロックを使用すると、ページと投稿のタグを操作する必要がなくなります。 これにより、より使いやすいクリーンな作業環境が作成されます。

独自のHTMLを追加する場合でも、別のソースからコードを埋め込む場合でも、プレビュー機能を頻繁に使用して、HTMLが意図したとおりに実行されるようにします。

ブロック内でscriptタグを使用しないでください。 削除されると、コードが機能しなくなる可能性があります。

カスタムHTMLブロックに関するよくある質問

カスタムHTMLブロックは何をしますか？

HTMLをフィールドに入力できるので、ビジュアルエディターでページを保持したり投稿したりしながらHTMLを操作できます。

カスタムHTMLブロックはどのように使用できますか？

サポートされているタグを持つ任意のHTMLを追加できます。 このブロックは、広告、地図、動画、iframe、テーブルなどのあらゆるものに使用できます。また、テキストをマークアップして段落ブロックに変換する簡単な方法でもあります。

マークアップを色分けしますか？

いいえ、ブロック内のマークアップは他のテキストエディタと同じように見えます。

カスタムHTMLブロックはHTMLを実行しますか？

フロントエンドで通常どおりHTMLを実行します。 エディターでは、HTMLを実行したり、コードを表示したりできます。 表示するのはあなた次第であり、ボタンを1回クリックするだけで、いつでも2つのオプションから選択できます。

すべてのHTMLタグがサポートされていますか？

いいえ。WordPressのサポートされているコードページでサポートされているHTMLタグのリストを確認できます。

結論

これがカスタムHTMLブロックの外観です。 このブロックは開発者だけのものではありません。 このブロックを使用する主な利点は、HTMLを操作するためにビジュアルエディターとコードエディターを切り替える必要がないことです。 これは、残りのコンテンツを通常どおりに表示して作業できることを意味します。 その後、ブロック内のHTMLを操作して、いつでもプレビューできます。 カスタムHTMLブロックは、ブロックエディタでHTMLを操作する簡単な方法を提供します。

我々はあなたから聞きたい。 カスタムHTMLブロックを使用していますか？ コメントであなたの経験について教えてください。

enterlinedesign /shutterstock.com経由の注目の画像