【SANGO】テーマファイルのカスタマイズまとめ

運営している別サイトでカスタマイズ関連の質問をいただくことが増えてきたので、ここを別サイトとして立ち上げました。このブログでは実装していないカスタマイズも紹介していますのでご注意ください。

この記事では SANGO のテーマファイル自体を弄るカスタマイズを紹介しています。
サイトデザインに関してはこちらの記事へどうぞ。

【SANGO】デザインカスタマイズまとめ

カテゴリー記事を出力するショートコードで記事の並び順を変更

SANGO の「指定したカテゴリーの記事を好きな数だけ出力するショートコード」で出力される記事の並び順を変更します。降順か昇順かを選べる機能を追加し、並び替えの基準も自分で選べるようにするカスタマイズです。
別サイトの方では、全記事一覧ページで記事を古い方から順に表示したり、用語集を50音順に並べるために使用しています。

最近更新された記事の一覧を作ったり、記事をコメントの多い順に並び替えたりと、他にも色々なことができるようになります。

【SANGO】カテゴリー記事を出力するショートコードで記事の並び順を変更する方法

PCとモバイルで別のGoogle Fontsを使用する

モバイルは英字のみ、PCでは日本語+英語のフォントを読み込ませています。(このブログでは英字フォントのみしか使用していません)

今現在行っている方法(IE等には未対応)

今行っている方法は、IEなど一部のブラウザには対応していません。
また、フォントファイルを自分のサーバーに置くので、サーバーのスペック次第では日本語フォントを複数ウェイト指定するなどは難しいかもしれないです。

デフォルトで指定されているQuicksandを解除

SANGOにはデフォルトでGoogle Fontsの Quicksand というフォントが指定されているので、これをまず解除します。

【SANGO】デフォルトで指定されているGoogle Fontsを変更・無効にする方法

フォントをダウンロードしてサーバーへアップする

フォントのバージョンアップによりGoogle Fontsのファイルパスが変わると困るので、ダウンロードしたフォント(WOFF2ファイル)を自分のサーバーにアップロードします。

PCとモバイルで別のGoogle Fontsを指定する

<head>内(サイトのcssが読み込まれる前)に、PCとモバイルで読み込むCSSを変えるためのPHPスクリプトを記述します。

preloadでフォントを先読みさせる

レンダリングブロック対策として、rel="preload"でフォントを先読みさせます。

【WordPress】PCとモバイルで別のGoogle Fontsを使用する

サーバー移転前まで行っていた方法

こちらはGoogleのCDNをそのまま利用しています。

デフォルトで指定されているQuicksandを解除

こちらもやはりデフォルトで指定されている Quicksand を解除します。

【SANGO】デフォルトで指定されているGoogle Fontsを変更・無効にする方法

フッターでPCとモバイル別々のフォントを読み込む

Web Font Loaderも試してみましたが思うような挙動にならなかったので、PCとモバイルで読み込むCSSを変えるためのPHPを</body>直前に記述していました。

当時はCSSを<head>以外で読み込ませるのは文法違反だったのですが、2017年12月に勧告されたHTML5.2で、<body>内にlink要素やstyle要素を置いてCSSを読み込ませてもOKになりました。

【WordPress】PCとモバイルで別のGoogle Fontsを使用する

日付のフォーマットが強制的にY/m/dになるのを変更

SANGOでは「WordPress管理画面>設定>一般設定」から日付のフォーマットを変更しても反映されないようになっています。

日付フォーマットの設定

記事の日付部分

変更方法

「外観>テーマの編集」の「子テーマ>parts>single>entry-header.php」で、フォーマットがY/m/dに指定されている部分を変更します。

テーマ編集

※画像クリックでフルサイズのものが見られます

「entry-header.php」10,12,15,17行目の日付フォーマットの部分を好みのものに変更すれば反映すると思います。
(PORIPUのバイラル風アイキャッチのテンプレートを使用されている方は、「entry-header-viral.php」の方も直す必要があります)