SANGO3.0のグーテンベルク:ブロックエディタに慣れるための記事-1

どうも、枕屋です。

そんな難しく、凝った記事は全然書けていないですが、SANGO ver3.0にして、初めてグーテンベルク(ブロックエディタ)挑戦してみました。

この記事は、ブロックエディタに慣れるためにいろいろ試してみる記事です。

ショートコードの練習

まずはショートコードの練習です。

メモ

メモのショートコードの練習です。

ほほう、なるほどね。

ショートコードのブロックを追加して、その中に従来通りのソースコードを記入すればOKな感じかな。

中身のソースの画像を貼りました(↓)。こんな感じでOKな様子。

プレビュー操作

プレビューが2クリックで「新しいタブでプレビュー」ができるようになったのが分かり易くて助かる。

操作説明の画像↓

ブロックについて

「ブロック」という区切りことにソースが分かれることにより、「ブロック」単位で「ブロック」の順番(=記載順序)の入れ替えや、「ブロック」毎にテンプレ化して保存することもできるというわけか。

テンプレが使いやすいね。

HTMLコードの入力について

やってみた

WEBサイトのリンクをかっこよく貼り付ける「+Embed」は、HTMLコードを直接貼り付ける必要がある。クラシックエディタの時は、「テキスト」編集にして、そこへHTMLコードを貼り付ければ機能したが、グーテンベルクでのやり方はどうか。

↓あれこれいじりながらも一応できた。

【SANGO】クラシックエディター終了も怖くない!Gutenberg移行時に役立つプラグインや注意点など【WordPress】

設定手順

まず、ブロックの種類の中からカスタムHTML」を選択する。

「カスタムHTML」を選択すると、編集エリアが出現するので、そこへHTMLコードを貼り付ける。それでおしまい。

さらに[HTML / プレビュー]となっている個所を、「プレビュー」側を選択したら、実際にWEBページで見るのと同じ状態が編集画面に表示されるので、非常にわかりやすい。ちゃんとHTMLが機能しているかどうか、ページ全体のプレビューを表示しなくてもその場で確認ができる。

You Tubeの埋め込み

YouTubeの埋め込みもブロックを使えばめちゃ簡単。これが「ショートコード不要」というやつか!

「ブロック:埋め込み:YouTube」を使えば、YouTubeのアドレスを枠に入力するだけでOK.

RINKERの埋め込み

RINKERの商品リンクもこのとおり。

このように、ブロックの一覧の中に「RINKER」があります。検索窓に入力すればすぐに出てきます。これを選択したら↓のような状態になるため、「商品リンクを追加」をクリックします。あとは事前に準備した商品リンクを選択するだけです。とても簡単でした。

コメントを残す

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

CAPTCHA


error: Content is protected !!