「SANGO」のカスタマイズ | コピペでWordPressカスタマイズ（備忘録）

ヘッダー

モバイルで検索ボタンを非表示

「カスタマイズ」→「詳細設定」→「モバイルのヘッダー」で「検索ボタンを非表示にする」にチェック

ハンバーガーメニューが表示されないとき

※デフォルトでは表示されない

「ウィジェット」→「スマホ用ナビドロワー（ハンバーガーメニュー）」を設定

右上に電話番号を表示

①ロゴを中央寄せに設定
「大画面表示時にもロゴを中央寄せ」にチェック

②子テーマのheader.phpに以下を追記
子テーマにheader.phpを複製して、</header>のすぐ上に以下を追記

<a class="sng-tel dfont" href="tel:000000000"><i class="fa fa-phone"></i> <span>000-0000-0000</span></a>

③CSSに以下を追記

/*ヘッダーに電話番号*/
.sng-tel {
    position: absolute;
    right: 8px;
    top: 11px;
    color: #FFF;/*文字色*/
    letter-spacing: .5px;
    font-size: 24px;
}
.sng-tel span {
   display: none;
}
@media only screen and (min-width: 768px) {
  .sng-tel { 
   top: 6px;
   right: 15px;
  }
  .sng-tel:hover {
  text-decoration: none;
   opacity: .5;
  }
  .sng-tel span {
   display: inline;
   vertical-align: middle;
   font-size: 20px;
  }
  .sng-tel .fa {
   vertical-align: middle;
  }
}
/*ヘッダーに電話番号*/

ヘッダーアイキャッチの高さを実寸に

「カスタマイズ」→「ヘッダーアイキャッチ」から、「文字やボタンを表示しない（画像のみ表示）」にチェック

全般

＼SHARE／を非表示

.sns-btn__title {
	display:none;
}

ページの幅を狭くする

#main {
	width: 80% !important;
	margin: 0 auto;
}

投稿

アイキャッチ非表示

.entry-header .post-thumbnail {
  display: none!important;
}

特定の記事のみの場合は「カスタムHTML」ブロックを挿入して以下を記入

<style>
.entry-header .post-thumbnail {
  display: none!important;
}
</style>

フッター

モバイルのフッター固定メニュー

メニューを新規で作成後、「モバイル用フッター固定メニュー」にチェック

（例１）「フロントページ」の場合

ナビゲーションラベルに以下を追記

<i class="fas fa-home"></i>HOME

（例２）固定ページの場合

ナビゲーションラベルに以下を追記

<i class="fas fa-solid fa-envelope"></i>お問い合わせ

（例３）カスタムリンクに場合

URLに以下

#sng_menu

ナビゲーションラベルに以下

<label for="drawer__input"><i class="fa fa-list-ul"></i>メニュー</label>

参考サイト

SANGO公式サイトを参考にさせていただきました。
https://saruwakakun.com/sango/