WordPress5.5とSANGO v2.0.6へのアップデートの注意点

日本時間の2020/08/12にWordPress 5.5がリリースされました。WordPressのバージョンを5.5へ上げた際は、テーマとプラグインのアップデートも行ってください。

  1. SANGO テーマ v2.0.6
  2. SANGO Gutenberg プラグイン 1.5.3
  • テーマ:ダッシュボードの[更新]ページの下部で自動更新ができます。
  • プラグイン:ダッシュボードの[プラグイン]ページで自動更新できます。

WordPressとSANGOどちらにも大きな変更があるため、このページで注意点をまとめておきます。

1. アップデート後にブラウザのキャッシュを削除

発生しうる問題
  • エディターが真っ白になり、何も表示されなくなった

→ WordPress、SANGOテーマ、Gutenbergプラグインのアップデートを行った後に、ブラウザのキャッシュを削除してください。

参考 ブラウザのキャッシュの削除方法

2. カスタマイズのjQueryの書き換え

発生しうる問題
  • カスタマイズで追加したjQueryが動かなくなった
  • 記事一覧タブが反応しなくなった
  • トップへ戻るボタンが反応しなくなった

WordPress5.5〜jQueryのバージョンが上がりました。SANGOでもこれに対応するための変更を行いました。

WordPress(WP)の5.4以前では、古いバージョンのjQueryが同梱されていました。そのため、SANGOではこれまでWP同梱のjQueryの代わりに、CDN経由で新しいバージョンのjQueryを読み込んでいました。
しかし、WordPress5.5から、最新のjQueryバージョンがWPに同梱されるようになったため、SANGO v2.0.6からはWP同梱のjQueryを読み込むことにしました。

問題が発生するポイント

WP同梱のjQueryでは、$(function() {}というような記法では正常に動作しません。jQuery(function() {}のように$の代わりにjQueryという文字列を使う必要があります。

参考 WordPressでjQueryが動かない原因と正しい使い方

カスタマイズで追加したスクリプトに$を用いた記法が使われている場合、今回のアップデートにより動作しなくなる可能性があります。

注意 1つjQueryのエラーがあるとその他の部分まで(例えば記事一覧タブなど)動かなくなることがあります。

対処法その1:カスタマイズで追加したスクリプトを書き換え

上記リンクで解説されているように$jQueryに書き換えます。

対処法その2:jQueryをCDNから読み込むように変更

下記のコードを子テーマのfunctions.phpに追加します。これまでと同様に$を用いた記法が使用可能です。

// jQueryをCDNから読み込む
function setup_cdn_jquery() {
  wp_deregister_script('jquery');
  wp_enqueue_script(
    'jquery',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', 
    array(),
    '',
    false
  );
}
add_action( 'wp_enqueue_scripts', 'setup_cdn_jquery', 100 );

↑ここではWordPress5.5〜提供されるjQuery と同バージョン(3.5.1)を読み込むような指定をしています。

3. 検索ボックスへのCSSやHTMLの変更

発生しうる問題
  • 検索ボックスのデザインが崩れた

SANGO v2.0.6で検索ボックスのclass名に対してCSSをあてるように変更しました。検索ボックスのデザインが崩れてしまった場合、子テーマ内でsearchform.phpが上書きされている可能性が高いです。

対処法は、子テーマのsearchform.phpを開き、それぞれのHTMLタグのクラス名(class="◯◯")が、親テーマのsearchform.phpのHTMLタグのクラス名と一致するように修正を加える必要があります。

4. プラグインも忘れずにアップデート

発生しうる問題
  • エディターでリスト(箇条書き)ブロックが左に寄ってしまった

WP5.5に更新した後は、SANGO Gutenbergの最新バージョンをご利用ください。でないとリストブロック等のデザインが崩れます…。

その他の問題

クラシックエディターを使用している場合も注意

SANGOとは直接関係はありませんが、WordPress5.5でクラシックエディターに問題が発生したというツイートや記事をよく見かけます。クラシックエディターを利用している場合は、WP5.5への更新を少し様子見したほうが良いかもしれません。

プラグインが動かなくなる可能性も

WordPressのjQueryバージョン変更により、一部の更新が行われていないプラグインが正常に動作しなくなる可能性があります。

16 COMMENTS

アバター
ケンさく 2021/01/14

お騒がせしました。解決しました。

大変申し訳ございません。 先ほどのエラーメッセージの件、 ワードプレスのバージョンを5.6にすると、エラーが消えサイトが表示されました。 バージョン古く、4.9を利用していました・・ お手数おかけしました。

回答を見る
アバター
ケンさく 2021/01/14

SANGO v2.0.8へのアップデート後の不具合

先程、SANGO v2.0.8へのアップデートしたところ、以下のようなエラーが発生してしまいました。Wordpressの管理画面にも入ることができないため、対応できない状況です。ご多忙の折、大変申し訳ございませんが、復旧方法をご教示いただければ幸いです。何卒、よろしくお願い申し上げます。 phpバージョン 7.4.13 WordPressはバージョン5.4より古いです。 エラーが発生したのは、テー…

回答を見る
アバター
MHK 2020/12/21

アップデート後のホームページ表示について(固定ページ)

いつもありがとうございます!愛用しております。 SAMGOのバージョン: 2.0.7にアップデートしたところ、ホームページ用に作っている固定ページが表示されなくなってしまいました。 過去のQAを拝見したのですが探しきれず…お手数ですが対応をお知らせいただけると幸いです。よろしくお願いいたします。

回答を見る
アバター
M.K 2020/08/31

今回のサンゴのアップデートについて

いつも便利に活用させていただいています。 今回のアップデートにおいて、2点、不具合が ありましたので解決方法を教えていただきたいです。 1つめは、パソコン版で、画面の横幅を一定以上小さくすると、グローバルメニューが、表示されなくなる点です。 以前のバージョンを使用した際には表示されていたので、サンゴの不具合?と思われます。 解決方法をお教え下さるか、ご対応お願いします。 2つ目は、投稿時の画質につ…

回答を見る
アバター
なかむら 2020/08/20

Gutenbergでブロックに追加 CSS クラスを設定すると表示が崩れる

Gutenbergエディタを利用しています。バージョンアップ後、ブロックに追加cssクラスの設定をすると、エディタ上の表示が左寄せになってしまいます(実際の記事ページ内での表示や新しいタブでのプレビューは正常に表示されています)。 ・ブロックに追加cssクラスを設定→崩れる ・追加cssクラスを設定したブロックを「再利用ブロックに変換」→崩れていたレイアウトが正常に戻る ・追加cssクラスを設定し…

回答を見る
アバター
Siegel 2020/08/12

SANGO v2.0.6へのアップデート後の不具合

いつも快適に使用させていただいております。実は、先程、SANGO v2.0.6へのアップデートしたところ、以下のようなエラーが発生してしまいました。色々調べたのですが、Wordpressの管理画面にも入ることができないため、対応できない状況です。ご多忙の折、大変申し訳ございませんが、復旧方法をご教示いただければ幸いです。何卒、よろしくお願い申し上げます。 Fatal error: Uncaught…

回答を見る

大家美穂子 へ返信する コメントをキャンセル

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。