WordPress 5.3のアップデート内容を解説します【ブロックエディタが使いやすくなりました】

[PR]、記事内リンクはAmazonで商品検索を行います。

11月13日、WordPressの最新バージョン5.3のリリースが行われました。早速5.3にしてみたんですが、主に「ブロックエディター」の変更が行われています。

WordPress5.0でブロックエディター「Gutenberg(グーテンベルグ)」が導入され、個人的には記事作成がしやすくなったと思っています。

今回のバージョンアップでも、ブロックエディターの増強が行われていました。

そのほかにも、いろいろな変更点があったので簡単に紹介していきたいと思います。

WordPress 5.3のアップデート内容

WordPress 5.3でなにが変わったのか?

・ブロックエディターの改善
・デザイン柔軟性の拡張
・Twenty Twenty が公開
・サイトヘルスチェック&管理者メールアドレスの検証
・日付/時間コンポーネントの修正(開発者向け)
・PHP 7.4(開発者向け)

・ブロックエディターの改善

ブロックエディターに様々な変更が行われています。僕もまだすべては確認できていないんですが、「機能がパワーアップした」イメージですね。

例えば画像を投稿する際には上のような画面でしたが、5.3では下のような画面になっています。画像編集機能も追加され、エディターだけで完結するようになっています。

・デザイン柔軟性の拡張

ページをカラフルなセクションに分類できる

ページの一部に色を付けることで複数のセクションに分けることができるようになりました。

その中に文字も入力できます。でもこれどうやって使ったらいいんでしょうか…

カラムブロックの自由度がアップ

レイアウトオプションのうち、カラムブロックが1種類→5種類に増えました。

画像+文章のブログをやられている方なら、サイトデザインのレパートリーが増えるかもしれませんね。

見出しの色を変更できるようになった

これまで見出しの色は黒だけでしたが、変更できるようになりました。

メニューに用意されている色をクリックするだけで変更することができます。

ボタンの角が調整できるようになった

「ボタン」ですが、これまでは楕円か四角形かの選択でしたが、曲がり具合を調整できるようになりました。

見出しの見分けが付きにくくなった

これははっきり改悪だと思うんですが、見出しの見分けが付きにくくなりました。

以前はタグを変更するとデザインが変わったんですが、変わらなくなりました。

上からH2、H3、H4ですが、差が分かりにくくなっています。(H4が小さいかな?程度)記事を公開した後に確認しているからいいんですが、間違えることが増えそうです。

・Twenty Twenty が公開

毎年、年号に合わせて公開されている「Twenty ○○」シリーズから「Twenty Twenty」が公開されました。

超シンプルなデザインが多いシリーズの中ではカラフルなテーマに仕上がっている印象ですね。

・サイトヘルスチェック&管理者メールアドレスの検証

5.3では、「Site Health」の画面が変更されています。

また、管理者としてログインすると、管理者のメールアドレスが最新であるか定期的に確認を求められるとのことです。

これは、メールアドレス変更によりサイトからロックアウトしてしまう可能性を軽減するために行われるとのこと。半年ごとらしいのですが、忘れたころにやってきそうなので覚えておきたいです。

開発者向けの変更点

以下は開発者向けの変更点です

日付/時間コンポーネントの修正

PHP 7.4

「WordPress5.3は、PHP7.4を完全にサポートすることを目指しています」と書いてあるように、PHP7.4対応となります。

WordPress5.3からブロックエディターを使うのもあり

WordPress5.0からブロックエディター「Gutenberg(グーテンベルグ)」が導入され「使いにくい!」と思われた方も多いと思います。

ですが、ブロックエディターも開発が進み、どんどん進歩してきました。僕も最初は戸惑いましたが、いまでは「慣れればこっちのほうが使いやすいじゃん!」と思っています。

とくに5.3ではデザインやカラフルさ、使い勝手が良くなっているので、クラシックエディターからブロックエディターへと変更することをおすすめします。

雑記
タイトルとURLをコピーしました
[ 'amazon' => ['label' => 'Amazon', 'color' => '#232f3e', 'base_url' => 'https://www.amazon.co.jp/s?k='], 'rakuten' => ['label' => '楽天市場', 'color' => '#bf0000', 'base_url' => 'https://search.rakuten.co.jp/search/mall/'], 'yahoo' => ['label' => 'Yahoo!', 'color' => '#ff0033', 'base_url' => 'https://shopping.yahoo.co.jp/search?p='], 'seven' => ['label' => 'セブンネット', 'color' => '#18943c', 'base_url' => 'https://7net.omni7.jp/search/?keyword='], ], 'ebook' => [ 'kindle' => ['label' => 'Kindle', 'color' => '#ff9900', 'base_url' => 'https://www.amazon.co.jp/s?k='], 'kobo' => ['label' => '楽天Kobo', 'color' => '#cc0066', 'base_url' => 'https://search.rakuten.co.jp/search/mall/'], 'bookwalker' => ['label' => 'BookWalker', 'color' => '#0054a6', 'base_url' => 'https://bookwalker.jp/search/?word='], 'renta' => ['label' => 'Renta!', 'color' => '#e8bd16', 'base_url' => 'https://renta.papy.co.jp/renta/sc/frm/search?word='], 'booklive' => ['label' => 'BookLive', 'color' => '#ff6600', 'base_url' => 'https://booklive.jp/search/keyword?keyword='], 'ebookjapan' => ['label' => 'eBookJapan', 'color' => '#e60012', 'base_url' => 'https://ebookjapan.yahoo.co.jp/search/?keyword='], 'cmoa' => ['label' => 'コミックシーモア', 'color' => '#ff911b', 'base_url' => 'https://www.cmoa.jp/search/result/?word='], ] ]; } // --- 2. 管理画面の設定ページ作成 --- add_action( 'admin_menu', 'mal_add_admin_menu' ); function mal_add_admin_menu() { add_options_page( 'アフィリエイトID設定', 'アフィリエイトID設定', 'manage_options', 'mal_settings', 'mal_settings_page' ); } function mal_settings_page() { ?>

アフィリエイトID & LinkSwitch設定

1. LinkSwitch設定 (重要)

LinkSwitch JSタグ

バリューコマース管理画面から取得した <script> タグをそのままここに貼り付けてください。

2. 各種アフィリエイトID (Amazon/楽天など)

Amazon アソシエイトID
楽天 アフィリエイトID
に出力する機能 --- add_action( 'wp_head', 'mal_output_linkswitch_tag', 1 ); function mal_output_linkswitch_tag() { $tag = get_option('mal_linkswitch_tag'); if ( ! empty( $tag ) ) { echo "\n\n"; echo $tag; // ここで設定画面のタグが出力されます echo "\n\n"; } } // --- 4. ショートコード [shop_links id="商品ID"] --- add_action( 'wp_head', 'mal_custom_css' ); // CSSの出力 function mal_custom_css() { ?> '' ), $atts ); if ( empty( $atts['id'] ) ) return ''; $item_id = $atts['id']; $services = mal_get_services(); $amz_id = get_option('mal_id_amazon'); $rak_id = get_option('mal_id_rakuten'); $output = '
'; foreach ( $services as $group_key => $group_data ) { $label = ($group_key === 'physical') ? '【紙の本・総合通販】' : '【電子書籍】'; $output .= '
'.$label.'
'; foreach ( $group_data as $key => $data ) { $url = $data['base_url'] . urlencode($item_id); // Amazon/楽天だけは個別IDを付与(LinkSwitch対象外のため) if (($key === 'amazon' || $key === 'kindle') && $amz_id) $url .= "&tag=" . $amz_id; if (($key === 'rakuten' || $key === 'kobo') && $rak_id) $url = "https://hb.afl.rakuten.co.jp/hgc/{$rak_id}/?pc=" . urlencode($url); $output .= sprintf( '%s', esc_url($url), $data['color'], $data['label'] ); } $output .= '
'; } $output .= '
'; return $output; }