!– wp:paragraph –ってなに⁉️Gutenbergブロックのコード

WordPress5、0にバージョンアップしてから
新しいエディター「Gutenberg(グーテンベルク) に変更されました。

戸惑いました。
エディタ編集画面のコードが変わってしまったんですもの!

!– wp:paragraph –とか!– wp:tadv/classic-paragraph /–など。


頭を整理することも含めてブロックとコードを紹介します。

!– wp:paragraph –ってなに⁉️Gutenbergブロックのコード

ブロックの編集をしている場合には、ブロックのステータスメニューが表示されます。

編集しているページの公開状態や公開時期などといった、コンテンツ自体のステータスを確認する場所も前と変わっています。
アイキャッチの挿入部、ほかパーマリンク、リビジョンの設定場所も探さないとわからなくなりました。

https://www.himetei.com/wp-content/uploads/2019/10/7UX7vMS1_400x400.jpg
秘 亭

困ったことが色々ありますが、Gutenberg を「まずは!知ること」が大事なので記事を書きながらお勉強始めていきます。

Gutenberg よく使うブロックとコード一覧

初めの一歩として
Gutenbergの主役である「ブロック」を一つ一つ読み解いていきたいと思います。

ブロックは次の5つのカテゴリーに分類されています。そのカテゴリーごとに見ていきましょう。

プラスをポチッとクリックして下さい。
ブロックの種類が表示されます。

https://www.himetei.com/wp-content/uploads/2019/10/7UX7vMS1_400x400.jpg
秘 亭

マウスを動かしてみてください。
ブロック(段落)の間 間に⊕が出てきますよ

  1. 一般ブロック
  2. フォーマット
  3. レイアウト要素
  4. ウィジェット
  5. 埋め込み

一般ブロック

https://www.himetei.com/wp-content/uploads/2019/10/7UX7vMS1_400x400.jpg

よく使うものがまとめられています

◾️ 一般ブロックには、10種類のブロックがあります。
     記事を書く上でよく使う基本となるブロックが多く含まれています。

◾️ 段落

コード:!– wp:paragraph —

タグ: p

これは、文章を入力するブロックです。

一番良く使うブロックです。
<p>タグで囲むマークアップが付きます。

(※マークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することです。)

ブロックの追加や削除は、ショートカットで覚えておくと楽です!

画像やリストなどもひとつのブロックとして扱いますが、段落(Paragraph)もひとつのブロックとして扱われます。

そのため、改行すると1つのブロックが生成されてしまいます。ここで問題は改行を繰り返していくことで生成される空ブロックの存在です。

以前は文章の終わりでエンターキーを2回押すと「改行+空行1行」となっていたのですが、今回同じ動作をすると「改行+空ブロック1つ」になってしまいますので

一番簡単な方法として私なら「Shift+エンタキーを複数回押して、空行を作る」かな。

スペサー /余白を作るポイント!

スペサーを使ってみましょう。

ブロック間のスペースをあけるだけのブロックです。青丸をドラッグするだけで簡単に高さを調整できます。

ブロックとブロックの間に余白を挿入できます。

余白は数値(px)で指定できます。

◾️見出し

コード:– wp:heading —

タグ: <h>

段落の次に利用頻度の高いのは見出しですね。

h1〜h6まで選べます。

h5〜は設定から選びます。

— wp:tadv/classic-paragraph –クラシックに変わっていたら、従来の通りのところから選択できます。

TinyMCEプラグインを有効化していると「段落ブロック」が「Classic Paragraph」というものに置き換えられてしまうのでプラグインを無効にすれば問題ありません。

(クラシックになった時の見え方 ↓前のエディタ)

◾️ 画像

!– wp:image {“id”:数字} —

タグ:<img>

画像を挿入できます。キャプション、画像サイズなど設定できます。
画像をアップロードするかメディアライブラリから選択して挿入します。

◾️ 動画

!– wp:video {“id”:数字} —

タグ:<figure>

動画の埋め込みができるブロックです。Youtubeなどの動画ではなく、自分のサーバーにアップロードした動画を埋め込みます。

「自動再生」「繰り返し再生」「ミュート」「プレイバックコントロール」の設定ができます。

ファイルが大きすぎるとエラーが出ますのでご注意下さい。

ビデオを圧縮していますが…
ダメでしたね。

◾️ ファイル

!– /wp:file —

タグ:<file >+<a>

ファイルをダウンロードするリンクを設置するブロックです。

メディアファイルをダウンロードするためのリンクを挿入できます。
別ウィンドウで開く設定や、ダウンロードボタンの設置の有無、ボタンの文言の変更など自由に設定可能です。

◾️ カバー

!– /wp:cover —

タグ:<div>

カバーブロックでは、背景画像を設定し、その上に文章を表示します。
背景画像設定がされた<div>で文字列を囲むマークアップが施されます。

疲れたら ちょっとさ そこに座って話そうか

「よく使うもの」のリストができるのも親切な仕組みですね。



埋め込み

たくさんあるので代表的なものだけ抜粋しました。

!– /wp:core-embed/youtube -(例)

タグ<figure>+<div>

💫YouTube埋め込み

フォーマット枠

フォーマットは書式や仕様といった意味を持ちますが、Gutenbergの投稿記事における「フォーマット」は「書き方の方法」といった方がわかりやすいでしょう。

フォーマットカテゴリーには、7種類のブロックがあります。

  • テーブル 
  • カスタムHTML
  • クラシック
  • ソースコード 
  • 整形済み
  • プルクオート

◾️ テーブル

コード:!– wp:table —

タグ:<table>

Gutenbergのブロックエディタではテーブル(表)も作成できるようになっています。行や列の追加も簡単です。気軽にテーブルを使えるようになりました。

テーブルのデザインが、デフォルトとボーダーの2種類用意されています。

◾️ カスタムHTML

コード:– wp:html —

タグ:自由

独自のHTMLコードを本文内で使いたい時にカスタムHTMLブロックを使います。HTMLのコード表示からプレビューに切替えて、すぐに表示を確認できるのも便利。グーグルマップの埋込みで利用しています。

◾️ クラシック

TinyMCEを使う以前のエディタで書けるブロックです。

「クラシックエディタ」がそのブロックで使えます。もし「使い勝手が悪いからクラシックエディタに戻す」という理由でしたら、このフォーマットを使うことでプラグインを利用することなく回避できます。

バージョン5.0以前のワードプレスからアップデータした場合には、以前書いた記事がクラシックブロックに変換されます。

◾️ ソースコード

!– wp:★★★★★–

タグ:<figure>+<blockquote>

HTMLなどのコードをそのまま記載できます。他のブロックに、タグを含む文字列を貼り付けると、タグとして認識されてしまいますが、ソースコードブロックでは、変換されずにそのまま表示されます。

<pre>タグ、<code>タグで囲まれるマークアップが施されます。

◾️ プルクオート

★!– wp:★★★

タグ:<figure>+<blockquote>

プルクオートは 文章全体の中から強調したい箇所を引用し、主なポイントやフレーズを強調する時に使う表現方法です。

<figure>タグ、<blockquote>タグで囲まれるマークアップが付きます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください