SWELLでヘッダーロゴにSVG画像を使う方法

SWELLでヘッダーロゴにSVG画像を使う方法
記事上のウィジェットエリア

ヘッダーに表示するロゴ画像は、カスタマイザーから簡単に設定できるようになっています。

しかし、WordPressの「メディア」にはSVG画像を入れることが基本的にはできないので、ロゴ画像にもSVG画像が使用できません。

こだわって作ったロゴなんだから、SVG画像で綺麗に見せたい!

という人も多いのではないかと思います。

そこで、ver. 1.2.8より、ロゴ画像をフィルターフックで書き換えることができるようにしておきました!

このページでは、そのフィルターフックを使って、ヘッダーロゴにSVG画像を使用する方法を解説していきます。

SVGをアップロードできるようにするプラグインもあるようです。

目次前広告表示エリア
目次

手順1:SVGのロゴ画像を子テーマのどこかにアップロードする

「メディア」にはSVGをアプロードできないので、FTPソフトなどを使ってロゴ画像をサーバー上にアップしておきましょう。

例えば、子テーマのディレクトリswell_childimgというディレクトリを作成し、その中にlogo.svgを配置したとします。

例:SVGロゴ画像の配置

swell_child/
  L img/
    L logo.svg

手順2:フィルターフックでロゴ画像を書き換える

あとは、子テーマのfunctions.phpにてちょろっとコードを追記するだけです。

SWELLのロゴ画像の書き換えには、'swell_head_logo'というフックがかかっていますので、これを利用します。

例:svgロゴ画像をimgフォルダ内に入れている場合

add_filter('swell_head_logo', function($logo) {
    return S_DIRE_URI . '/img/logo.svg';  //ここは書き換えてね
});

これだけです!

S_DIRE_URIという定数はSWELL親テーマ側で定義しているもので、子テーマディレクトリまでのパスを返してくれます。(get_stylesheet_directory_uri()の返り値を定数化したものです。)

'/img/logo.svg'の部分を、ご自身でアップロードしたSVGロゴ画像までのパスに合わせて書き換えてご利用ください。

TOPページのヘッダー透過時のロゴは'swell_head_logo_top'というフックで同様にSVG画像を利用できます。

キャッシュ機能ご利用時の注意点

SWELLのキャッシュ機能を有効化している場合、ヘッダー部分はキャッシュされているので子テーマのfunctions.phpを編集してもヘッダーのロゴは切り替わりません。

キャッシュクリア機能を使うか、カスタマイザーの設定を適当にいじってから戻したりしてもヘッダー部分のキャッシュはクリアされます。(カスタマイザーの設定保存時にキャッシュクリアされます。)

もしくは、クリアキャッシュ機能をオフにしてから編集するように注意してください。

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次