アイコンのSVGファイルを内部サーバーにアップして読み込み短縮を図ってみた

前回の記事でグローバルナビゲーションに使っているアイコンが原因で、モバイルの読み込みも大幅に遅延していると記載しました。

外部からGoogle fontsにあるMaterial Symbolsを読み込んでいましたが、Cocoonの親テーマを調べていると、Font Awesomeを内部サーバーから読み込ませていることに気づきました。

「これならMaterial Symbolsも内部サーバーから読みこませる方が、Pagespeed Insightsのスコアも安定するのでは？」と考え、実行しました。

たけぞー

この方法が自分にとっては最適解だった！

この記事を読むとわかること
アイコン（SVGファイル）のダウンロードからワードプレスサイトへ適用するまでの手順

こんな人に読んで欲しい

フォントを内部サーバーから読み込みたい方
ブログ初心者の方

Google FontsのSVGファイルをDLして使うことに権利面で問題ないか？
Google FontsからSVGファイルをダウンロードしてリネーム
cPanelのファイルマネージャーを使ってサーバーへアップロード
子テーマのfunction.phpを使ってナビゲーションにアイコンを付与
修正後のPagespeed Insightsスコア
ここからさらに表示スピードを上げることができるか？
おわりに

Google FontsのSVGファイルをDLして使うことに権利面で問題ないか？

まずやりたいことが権利関係をクリアできているか？というところから調べました。

結論、問題はありませんでした。

Google Fontsの多くはオープンソースで提供されており、商用利用を含めて誰でも自由に利用することができます。

Google FontsからSVGファイルをダウンロードしてリネーム

Google Fontsから使いたいアイコンのファイルをダウンロードしました。

Google FontsからMaterial symbolsをsvgファイルでダウンロード。

SVGかPNGを選択できます。

ここではSVGファイルを選択しました。

SVG（Scalable Vector Graphics）ファイルとは？

ベクター形式（主に数学的な計算によって形状や線、色などを定義するファイルを指す）の画像ファイル。

*対義語: ラスターファイル（ピクセルによって構成されるJPEGやPNGなどのファイル）

ピクセルではなく、数式や座標を使って画像を描画するため、解像度に依存せず、どれだけ拡大・縮小しても画質が劣化しないのが特徴。

SVGはXML形式で記述されているため、テキストエディタで編集可能であり、主にWeb上でアイコンやイラストを表示するために使用される。

また、CSSやJavaScriptで簡単に操作やアニメーションを加えることも可能。

出典: W3C

調べたところ、アイコンとして使うにはPNGよりもSVGファイル形式の方が良さそうだったので、こちらを選択。

たけぞー

まだ見ぬ拡張子の世界が・・・。

一通りDLした後は、自分が判別しやすいファイル名に変更しました。

cPanelのファイルマネージャーを使ってサーバーへアップロード

子テーマにアップロードしたかったので、下記パスにフォルダを作成。

新しいフォルダ名に分かりやすい名前をつけました。

フォルダ作成後にスクリーンショットをとったため、既にiconsというフォルダはできていますw。

DLしたMaterial Symbolsをこちらへアップロードしました。

子テーマのfunction.phpを使ってナビゲーションにアイコンを付与

ファイル操作前に子テーマのCSS、head-insert.php、メニューのナビゲーションラベル等から、前回まで使っていたコードをいったん削除しました。

SVGファイルが上手く使えなかった時のために、念のためコードを保存。

最初はCSSだけ使ってアイコンを適用させようとしたところ、他の記述と重なってしまった部分があるようで、モバイルフッターメニューの表示が崩れました。

そこで、CSSには手を加えずに子テーマのfunction.phpのみ変更するよう作戦変更。

実際に使ったコードはこちら。

//-------------------------------------------------------
//グローバルナビゲーションにアイコン表示
//-------------------------------------------------------

function add_menu_icons($items, $args) {
    // 投資アイコンを追加
    $items = str_replace('>投資<', '><img src="/wp-content/themes/cocoon-child-master/icons/icon_investment.svg" style="width:24px;height:24px;vertical-align:middle;margin-right:2px;position:relative;top:-2px;">投資<', $items);

    // 海外生活アイコンを追加
    $items = str_replace('>海外生活<', '><img src="/wp-content/themes/cocoon-child-master/icons/icon_livingabroad.svg" style="width:24px;height:24px;vertical-align:middle;margin-right:2px;position:relative;top:-2px;">海外生活<', $items);

    // 自己紹介アイコンを追加
    $items = str_replace('>自己紹介<', '><img src="/wp-content/themes/cocoon-child-master/icons/icon_selfintroduction.svg" style="width:24px;height:24px;vertical-align:middle;margin-right:2px;position:relative;top:-2px;">自己紹介<', $items);

    // サイトマップアイコンを追加
    $items = str_replace('>サイトマップ<', '><img src="/wp-content/themes/cocoon-child-master/icons/icon_sitemap.svg" style="width:24px;height:24px;vertical-align:middle;margin-right:2px;position:relative;top:-2px;">サイトマップ<', $items);

    // 仕事アイコンを追加
    $items = str_replace('>仕事<', '><img src="/wp-content/themes/cocoon-child-master/icons/icon_work.svg" style="width:24px;height:24px;vertical-align:middle;margin-right:2px;position:relative;top:-2px;">仕事<', $items);

    return $items;
}
add_filter('wp_nav_menu_items', 'add_menu_icons', 10, 2);

メニュー名とアイコンの高さが合っていなかったので「position:relative;top:-2px」を加え、平行に見えるよう調整しました。