ショートコードブロック

ブロック一覧へ戻る

ショートコードは WordPress 固有のコードで、ほとんど手間をかけずに様々な機能を使えるようになります。ショートコードによって、通常、複雑で面倒なコードを大量に必要とするファイルの埋め込みやオブジェクトの作成が、1行で可能になります。つまりショートコードはショートカットなのです。

ショートコードブロックを追加するには、ブロックを追加アイコンをクリックしてブロックライブラリを開き、ウィジェットセクションからショートコードブロックを選びます。

空のブロックへ /shortcode (または /ショートコード)と入力して Enter キーを押す方法でも、簡単に追加できます。

スラッシュコマンドでショートコードブロックを追加

ブロック追加の詳しい方法はこちらをご覧ください。

次の動画では、ショートコードブロックの使い方と、コンテンツの表示を変える設定のバリエーションをご覧いただけます。

ショートコードブロックの利用例


ショートコードを書く

表示されたボックスにショートコードを入力するか、利用可能なショートコードから貼り付けることができます。

ショートコードブロックのインターフェイス

ブロックツールバー

他の一般的なブロックと違って、ショートコードブロックはブロックツールバーやエディターのサイドバーに固有の設定がありません。

ショートコードブロックのエディターのサイドバー

標準で3個のボタンがあります。

  • 変換
  • 移動用ハンドル
  • 他のオプション

変換

ショートコードブロックグループブロックまたはカラムブロックへ変換できます。

移動用ハンドル

上下の矢印を使って、ドキュメント内でブロックを上下に移動できます。

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

他のオプション

追加設定を表示(非表示)

追加設定を表示(非表示)オプションを使うと、エディターのサイドバーにあるブロック設定パネルを表示する(または隠す)ことができます。

コピー

コピーを使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロックを複製できます。

前に挿入

新しいブロックを選択したブロックの前へ挿入します。

後に挿入

新しいブロックを選択したブロックの後へ挿入します。

移動

移動を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロックがそこへ移動します。

HTML として編集

HTML として編集を使うと、選択したブロックの HTML コードを変更できます。

再利用ブロックに追加

再利用ブロックに追加オプションを使うと、選択したブロックを再利用ブロックのリストへ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

グループ化

ブロックをまとめて一つの単位として扱いたい場合、グループ化オプションを選択します。例えば共通の背景色や他のブロックをグループへ追加できます。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロックをコンテンツから削除できます。

ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディターのサイドバーにあります。もしサイドバーが見当たらなければ、公開(更新)ボタンの隣にある「歯車」ボタンをクリックしてください。

ご覧のとおり、ショートコードブロックはブロック設定に固有の設定項目がありません。

グループブロックの利用

ショートコードブロックをグループへ変換すれば、ブロックにカスタム設定を行うことができます。

色の設定

テキスト色と背景色をブロックごとに指定し、重要なコンテンツに注目を集めることができます。

「カスタムカラー」リンクを使うと色を細かく選ぶことができます。

新しいエディターにはアクセシビリティパラメータが組み込まれており、読書障害のある人がテキストを判読できなくなりそうなときに警告を発します。

高度な設定

グループへ変換すると、サイドバーのブロック設定の高度な設定パネルには、HTML アンカー追加 CSS クラスのオプションがあります。

HTML アンカーは特定のグループブロックユニークな Web アドレスを作ることができます。その後、ページ内のグループブロックへ直接リンクできます。

追加 CSS クラスはブロックへ CSS クラスを追加できます。その後、カスタム CSS を書いてブロックに好みのスタイルを付けることができます。

変更履歴

  • 更新: 2020-09-07
    • WordPress 5.5のスクリーンショット
    • ブロック設定を追加
    • 変更履歴を追加
    • 「他のオプション」を追加
    • 「ブロック一覧へ戻る」を追加
  • 新規作成: 2019-03-07

原文

この記事は役に立ちましたか ? どうすればさらに改善できますか ?