CSS note

子テーマの作成

この部分は、省略します。子テーマ - 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)"属性をすべてのパスに追加します。

<path class="path1" fill="var(--icon-color)" 

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

:root{
 --icon-color:green;
}
svg.icon:hover{
 
 --icon-color:red;
}

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

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

<?php
echo my_get_svg( array( 'icon'=> 'line' ) ); 
?>

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

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

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

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

jQuery(function ($) {
 "use strict";
 /**
 * Add lnline SVG
 * Example Code
 * <span class="svg" data-svg="symbol id"></span>
 */
 $('.svg').each(function (index) {
 var val= $(this).data('svg');
 $(this).prepend('<svg class="icon"><use xlink:href="#' + val + '" /></svg>');

 });
});

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

<span class="svg" data-svg="icon-medium"></span>

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

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をテキストエディタで開きます。

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

svg {
 transition: fill .15s ease-in-out;
}
svg:hover path{
 fill: red;
}

いや、いや、使いまわすという場合は、コピーしたものを、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を作成します。

</div><!-- #page -->
<?php wp_footer(); ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="display:none;">
<defs>
<symbol id="icon-line" viewBox="0 0 448 512">
<path d="M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1.5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9.3 1.6.9 2.2.6.5 1.3.9 2.2.9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8.1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z"/>
</symbol>
</defs>
</svg>
<!--
Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)-->
</body>
</html>

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

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

 echo my_get_svg( array( 'icon'=> 'line' ) ); 

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

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

<svg class="icon icon-line" aria-hidden="true" role="img"> <use href="#icon-line" xlink:href="#icon-line"></use> </svg>

インライン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要素を書き出しています。

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

<svg>
<defs>
<symbol id="icon-behance" viewBox="0 0 37 32">
<path class="path1" d="..."></path>
</symbol>
...
</defs>
</svg>

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

<svg class="icon icon-behance" aria-hidden="true" role="img">
 <use href="#icon-behance" xlink:href="#icon-behance"></use>
</svg>

ブラウザ

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

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

新着記事