WordPress5.5とSANGO v2.0.6アップデートで起きる不具合対処法

Word Press5.5の更新に合わせて、SANGOのバージョンがv2.0.6に更新されました。
当サイトでも発生した、各アップデートに伴う不具合の解消法について記録します。

公式のSANGOカスタマイズガイドによると

WordPress5.5とSANGO v2.0.6へのアップデートの注意点
https://saruwakakun.com/sango/wordpress55-sango-v206
として、

・エディターの画面が真っ白になる
・jQueryが動作しなくなる
・検索ボックスのデザイン崩れ

など、いくつか発生しうる問題が記されています。

現在、sango公認の子テーマ「poripu tears for sango」「sangoサポーター」を使用する当サイトでも、

問題1「モバイルヘッダーの縮小追尾」「上部固定h1見出しラベル」の不具合

問題2「検索ボックスのデザイン」の崩れ

が発生したので、それを修正しました。

SANGO公式の説明に従って、

a.jQueryをCDNから読み込むように変更(→問題1の対処法)

b.子テーマのsearchform.phpの書き換え(→問題2の対処法)

を行いました。

問題1については、公式でも案内されているWordPress5.5〜提供されるjQuery と同バージョン(3.5.1)を読み込むよう指定された下記コードを追加することで、解消されました。

子テーマの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 );

問題2の対処法bですが、公式の説明によると

SANGO v2.0.6で検索ボックスのclass名に対してCSSをあてるように変更しました。検索ボックスのデザインが崩れてしまった場合、子テーマ内でsearchform.phpが上書きされている可能性が高いです。 対処法は、子テーマのsearchform.phpを開き、それぞれのHTMLタグのクラス名(class=”◯◯”)が、親テーマのsearchform.phpのHTMLタグのクラス名と一致するように修正を加える必要があります。 「WordPress5.5とSANGO v2.0.6へのアップデートの注意点」より

とのことでしたが、「HTMLタグのクラス名と一致するように修正を加える」が、プログラミングど素人の自分にはすっとイメージで入ってこなかったので、とりあえず一致させなければならない親テーマと子テーマのsearchform.phpの差分とをそれぞれ見比べました。

コードを睨めっこして、HTMLタグのクラス名を一致させるとは、子テーマのsearchform.phpにinput typeにはclass=”searchform__input”、button typeにはclass=”searchform__submit”を追記することと理解し、下記のように変更したことで問題b「検索ボックスのデザイン崩れ」は解消されました。

変更する前のsearchform.php
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <input type="search" placeholder="サイト内検索" id="s" name="s" value="" />
        <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i>
        </button>
    </div>
</form>
変更した後のsearchform.php
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <input type="search" placeholder="サイト内検索" id="s" class="searchform__input" name="s" value="" />
        <button type="submit" id="searchsubmit" class="searchform__submit"><i class="fa fa-search"></i>
        </button>
    </div>
</form>
注意
間違って親テーマを変更しないように注意が必要です。コードのコピペや使用は自由ですが、当方では使用する結果に対していかなる責任をおいません。自己責任でお願いします。