SANGO Ver1.8 アップデート内容と注意点

2019年3月にSANGO Ver1.8をリリースしました。このページではVer1.8の詳細とアップデートの注意点をまとめています。アップデート手順は下記リンク先をご覧ください。

その他のバージョンの情報はSANGOテーマアップデート情報をご覧ください。

1. 記事フッターの遅延読み込み機能の追加

関連記事や記事下ウィジェットなどの記事フッターをメインのコンテンツから遅らせて読み込むことで、表示速度を向上させることができます。

外観⇒カスタマイズ⇒詳細設定にて【高速化】投稿ページの記事下コンテンツを遅延読み込みにチェックを入れることで有効化されます。


子テーマにsingle.phpが入っている場合、この機能を使うためには書き換えが必要です。子テーマのsingle.phpを開き、
get_template_part('parts/single/entry-footer');

を以下のコードに置き換えてください。

if(get_option('use_async_entry_footer')) {
  echo '<div id="entry-footer-wrapper"></div>';
} else {
  get_template_part('parts/single/entry-footer');
}

遅延読み込みした部分をGoogleクローラーが読み取れない可能性があります。これまでに作者が実験した範囲ではSEOへのマイナスの影響は確認されませんでしたが、もうしばらく調査を続けようと思います。
なお、遅延読み込みされるのは下記の部分です。
  • シェアボタン
  • フォローボックス
  • カテゴリーとタグへのリンク(カテゴリーへのリンクは記事上部のパンくずリストで貼られています)
  • おすすめ記事
  • 関連記事広告(GoogleAdsenseの関連記事広告はいずれにせよ内部リンクとして読まれてはいません)
  • この記事を書いた人

記事コンテンツ後広告ウィジェットは遅延読み込みされません。

2. モバイルヘッダー検索ボタンの追加

モバイル(スマホ・タブレット)にて、ヘッダーに検索ボタンが表示されるようになりました。非表示にするには、外観⇒カスタマイズ⇒詳細設定⇒「モバイルのヘッダー検索ボタンを非表示にする」にチェックを入れます。

子テーマにheader.phpが入っている場合、新しく追加された検索機能を使うためには書き換えが必要です。子テーマのheader.phpを開き、
</<?php echo $title_tag; ?>>
すぐ次の行に下記コードを貼り付けてください。
<?php get_template_part('parts/header/search'); //header検索 ?>

3. モバイルフッター固定メニューに「検索」を設置できるように

モバイル用フッター固定メニューに検索アイコンを設置する手順は以下のようになります。

  • 外観⇒メニューを開く
  • モバイル用フッター固定メニュー」にチェックが入っているメニューを選択する
  • 下記表の設定のカスタムリンクを追加する
  • メニューを保存
URL#sng_search
ナビゲーションラベル<label for="header-search-input"><i class="fa fa-search"></i>検索</label>
子テーマにheader.phpが入っている場合、新しく追加された検索機能を使うためには書き換えが必要です。子テーマのheader.phpを開き、
</<?php echo $title_tag; ?>>
すぐ次の行に下記コードを貼り付けてください。
<?php get_template_part('parts/header/search'); //header検索 ?>

4. PCヘッダーメニューに「検索」を設置できるように

PCヘッダーメニューに検索アイコンを設置する手順は以下のようになります。子テーマにheader.phpが入っている場合はこちらをご覧ください。

  • 外観⇒メニューを開く
  • ヘッダーメニュー(PCでのみ表示)」にチェックが入っているメニューを選択する
  • 下記表の設定のカスタムリンクを追加する
  • メニューを保存
URL#sng_search
ナビゲーションラベル<label for="header-search-input"><i class="fa fa-search"></i></label>
子テーマにheader.phpが入っている場合、新しく追加された検索機能を使うためには書き換えが必要です。子テーマのheader.phpを開き、
</<?php echo $title_tag; ?>>
すぐ次の行に下記コードを貼り付けてください。
<?php get_template_part('parts/header/search'); //header検索 ?>

5. PVを計測しないオプションの追加

外観⇒カスタマイズ⇒詳細設定に「【高速化】PVを計測しない」というオプションを追加しました。人気記事ウィジェットを使わない場合、PVの計測をオフにすることでパフォーマンス向上が期待できます。

6. トップページのヘッダーバーのアニメーションを廃止

トップページにおいて、ヘッダーバーが上から降りてくるようなエフェクトを廃止しました。継続して使用したい場合は、以下のCSSを子テーマのstyle.cssもしくは外観⇒カスタマイズ⇒追加CSSに貼り付けてください。

.home .header {
   animation: slideDown 1.5s ease 0s 1 normal;
 }

7. header.phpを整理

header.phpのコードが大きくなってきたため、内容の一部を他のファイルに切り出し、そちらから読み込むようにしました。header.phpで使われるファイルはparts/headerフォルダ内に入っています。

カスタマイズの注意点

例えば、モバイルメニュー(ナビドロワー)のコードは、parts/header/nav-drawer.phpに書かれています。今後ナビドロワーを子テーマでカスタマイズする場合には、子テーマにparts/headerフォルダーを作り、その中にnav-drawer.phpを複製して編集することになります。

すでに子テーマでheader.phpをカスタマイズしている場合、ナビドロワーのコードはこれまで通りheader.phpに残ります。parts/header/nav-drawer.phpは読み込まれず、header.phpに書かれているコードのみが読み込まれます。つまりナビドロワーのカスタマイズ時にはこれまでと同じようにheader.phpを編集してください。

その他の変更点

  • 文字を載せるヘッダーアイキャッチ画像の最低高を150pxに
  • Font Awesomeファイルを5.8.1にアップデート
  • その他リファクタリング(カスタマイズに影響のない範囲でコードを整理)

アップデート時の注意点

  • ヘッダー右上に電話番号を表示する」のカスタマイズを行っている場合、外観⇒カスタマイズ⇒詳細設定⇒「モバイルのヘッダー検索ボタンを非表示にする」にチェックを入れるようにしてください(ヘッダー検索ボタンと併用できません)。
  • 上述の通り、子テーマにsingle.phpが入っている場合、記事フッターの遅延読み込みを行うためにはファイルの修正が必要です。
  • 上述の通り、子テーマにheader.phpが入っている場合、Ver 1.8で追加された検索機能を使うためにはファイルの修正が必要です。
  • Ver 1.6以上のSANGOをお使いの場合にはテーマの自動アップデートができますが、それより小さいバージョンをお使いの場合には手動アップデートが必要です。
  • キャッシュプラグインを入れている場合、アップデート後にプラグイン設定からキャッシュの削除を行ってください。

15 COMMENTS

アバター
コナン 2020/05/04

モバイルヘッダー「検索ボタン」を消したい

お世話になります。 モバイルヘッダー「検索ボタン」を消したいです。 このページではモバイルヘッダー「検索ボタン」の追加方法が記載されておりますが、私の場合はもともと「検索ボタン」が表示されておりました。 子テーマはPORIPUを使用しております。 以上、よろしくお願い致します。

回答を見る
アバター
とも 2019/07/02

モバイルヘッダーの検索アイコンの下に文字を入れたい

お世話になります。 モバイルのヘッダー右に表示される検索アイコンの下に「検索」などの文字を入れたいのですが、その場合のコードを教えていただけないでしょうか。 よろしくお願いいたします。

回答を見る
アバター
むぎ 2019/03/29

タグが全て消えた

いつもお世話になっております。 先程Ver.1.8にアップデートを行ったところ、投稿記事全てのタグが消えてしまいました。アップデート後に何か触ってはいけないところをいじってしまったのかもしれませんが、何か解決策はありますでしょうか? 教えて頂けると助かります。

回答を見る
アバター
おすぎ 2019/03/28

検索ボタン「キーワードで検索」を変更

今回新設された検索ボタンを押したときに表示される「キーワードで検索」の文字を変更したいのですが、可能でしょうか?

回答を見る

むぎ へ返信する コメントをキャンセル

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

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