当サイトでも発生した、各アップデートに伴う不具合の解消法について記録します。
公式のSANGOカスタマイズガイドによると
として、
・エディターの画面が真っ白になる
・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）を読み込むよう指定された下記コードを追加することで、解消されました。
// 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「検索ボックスのデザイン崩れ」は解消されました。
<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>
<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>
間違って親テーマを変更しないように注意が必要です。コードのコピペや使用は自由ですが、当方では使用する結果に対していかなる責任をおいません。自己責任でお願いします。
