TwentySeventeen の SVG iconの仕組みと、チャイルドテーマでのカスタマイズ。

TwentySeventeenテーマでは、SVGアイコンが使われています。それ以前は、Iconfontが使われていました。fontawesome等でも、SVGアイコンが使われだしています。

世の中のどれぐらいのWEBサイトが、SVGでアイコンを実装しているのかは判りませんが、気にはなります。

TwentySeventeenでは、SVGアイコンを、スティッキー投稿のタイトル前に表示したり、カテゴリリンクの先頭にアイコンを表示するなどしていますが、それは主に装飾的なものとして存在しているようです。

TwentySeventeenの子テーマで、もう少し機能性の高いSVGアイコンの表示を行ってみたいと思います。

目標は、アイコンのデフォルトカラーが設定できて、hover時にアイコンの色を変更することができるように、つまり、リンク画像なんかに求められる最低限度の機能をSVGアイコンに持たせてやりたいと思います。

子テーマの作成

この部分は、省略します。子テーマ - WordPress Codex 日本語版等を一読して、子テーマを作成します。

子テーマのfunctions.php

twentyseventeen/inc/icon-functions.php を開いて、twentyseventeen_get_svg()をコピー

子テーマのfunctions.phpに貼り付けたら、関数名を、my_get_svg などにリネーム。

twentyseventeen/asset/svg-icons.svg を開いて、fill="var(--icon-color)"属性をすべてのパスに追加します。

チャイルドテーマの、style.css

以上で、アイコンのデフォルトカラーがグリーンhover時に赤で表示できるようになります。

チャイルドテーマのテンプレートファイルに

と記述していただくと、アイコンが表示されます。

事前のカスタマイズを、いろいろ行うのは大変だし、テンプレートに直接記述するんじゃなくて、もっと簡単に、投稿からもアイコンが記述できる方法があると便利なんだけどそういう方法はないのでしょうか?

テンプレートを一切改造しなくて、チャイルドテーマでもアイコンを表示する方法の一つは、javascriptで行うことができます。
ごくベーシックなサンプルは以下です。

twentyseventeen_get_svg()で行っていることを、javascriptに置き換えるだけです。

twentyseventeen / js / global.js に以下のようにスクリプトを追加します。

投稿本文から記述する場合は、テキストモードで、以下の用にhtmlを記述します。

これで、とりあえず、親テーマでも、子テーマでもアイコンを表示することはできます。

DEMO

Note:

このサンプルは、親テーマに直接書く例なので、テーマがアップデートすると使えません。実用にするには、チャイルドテーマで、jsファイルを追加する必要があります。

AMPを使っている場合などでは、javascriptは読み込まれないのでアイコンは表示されません。

CSSなどで、上記の要素のフォールバックスタイルをAMPCSSに追加しておくなど、工夫が必要になります。

ここでは、具体的には触れませんが、投稿本部からアイコンを表示するということに限定すれば、WordPressフィルターを使って処理するとAMPで非表示になるという点は解消できるかもしれません。

しかし、これだと親テーマのアイコン以外は、使えないんだけどチャイルドテーマで、独自のアイコンが必要な場合は、どうすればいいのか


では、それを行ってみたいと思います。

Font Awesomeより、fontawesome-free-5.2.0-web.zipをダウンロードします。

Font Awesomeでなくても、Icon Font & SVG Icon Sets ❍ IcoMoon等でも、同じ要領でできます。

svgs/brandsホルダーで、line.svgをテキストエディタで開きます。

めったに使わないアイコンなら、コピーして投稿本文にペースト

この場合は、hover時のアイコン色変更は、filter等で行うといいかも

このsvgの場合は、

どっか間違っている感じがありますが、前出のinlineSVG用のhoverスタイルとは、微妙に異なるスタイルが必要みたいです。宿題

いや、いや、使いまわすという場合は、コピーしたものを、inline SVG で読み込めるように修正してから、フッタなどに貼り付けます。

修正部分は、以下です。

  1. defs要素、symbol要素を追加します。
  2. symbol要素には、アイコンを呼び出すためのid="icon-line" 追加
  3. svg要素には、style="display:none" などとして非表示にします。
  4. svg要素の、viewBox="0 0 448 512"属性を、symbol要素の属性としてペースト

次に、親テーマの、footer.php をコピーして、チャイルドテーマに、footer.phpを作成します。

手作業でやると、結構面倒そうですが、変更する内容は、単純です。

テンプレートでアイコンを表示させるには、

という形で、記述します。

投稿本文から記述する場合は、関数は使えないので

インラインsvg要素を直接記述するか、フィルターなどで工夫をしてください。

また、Draw Freely | Inkscapeや、イラストレーター等が出力するSVGは、メタ情報などが多く含まれるので、

SVGOMG - SVGO's Missing GUI等で、必要な部分を取り出すと便利です。


Tweinty Seventeen の インラインSVGは、どのようにして動作しているのか

使用されるファイル
  • twentyseventeen/asset/svg-icons.svg : SVGファイル
  • twentyseventeen/inc/icon-functions.php : SVG 関連の関数
処理の流れ
  • SVGファイルを、フッターに配置:twentyseventeen_include_svg_icons()

    別に場所は、フッターでなくても、テンプレートで参照できる範囲なら、どこでもいい。参照できれば、また、symbolを含むsvgは、一つでなくても構いません。

  • テンプレートで、svgを書き出すための関数:twentyseventeen_get_svg()を使って、svg要素を書き出しています。

フッターに配置されるsvgの構造

テンプレートでの呼び出し

ブラウザ

svgは、use要素の内側にShadow DOMを使って表示されます。(chrome)


note:なぜ、hrefと、xlink:hrefが両方記載されているのかのヒントになりそうな事

以上、TwentySeventeenで行われているアイコンの表示を、ざっくりとみてました。思った以上にSVGは柔軟に使用することができそうですし、単なる装飾アイコン以上のポテンシャルも持っていそうなことが、少しづつ見えてきました。

他方、フッターに数百のアイコンを埋め込むことはどうなのとか、外部ファイルでuse使ったらどうなのとか、現実にSVGを使ううえで考えていくべきこともありそうです。

pointer events ,外部SVGを使ったbefore background , imgでの表示等々 - CSS note

svgスプライトの作成と表示 - CSS note


新着記事

コメントは受け付けていません