WordPress 7.1 で使えるようになったアイコンブロック。
ブロックを追加してアイコンを選ぶだけで簡単にSVG画像の挿入ができて便利なのですが、現在、文章の中にインラインで挿入したり、テーブルブロックのセルの中に挿入することはできません。
ただ、アイコンを挿入したいケースの多くはこうした場所であることが多く、ちょっと使いづらい部分があります。
そこで今回は、これらのSVGアイコンをショートコードで挿入するためのコードを紹介します。
将来的にWordPressのコア機能でインライン挿入できるようになるかも知れませんが、今困っている方の参考になれば幸いです。
SVG表示ショートコードのプログラム
以下のコードを有効化しているテーマのfunctions.phpへ追加することで機能するようになります。
function pwcn_svg_icon_sc( $atts ) {
$atts = shortcode_atts(
array(
'slug' => '',
'size' => '24', //パラメーターが存在しない場合は24ピクセル
'class' => '', //パラメーターが存在しなければ出力なし
'label' => '', //パラメーターが存在しなければ「aria-hidden="true" と focusable="false"」が付与される
'space' => 'core', //パラメーターが存在しなければWordPressコアSVGアイコンを指定
),
$atts,
'ha-default-svg-icon-sc' // 第3引数にショートコード名を入れると安全です
);
//これらはパラメーターが空なら出力されないのでフォールバックはなし
$icon_name = $atts['slug']; //空の場合はアイコンそのものが出力されない
$class = $atts['class']; //空の場合は付与されない
$label = $atts['label']; //空の場合は「aria-hidden="true" と focusable="false"」が付与される
//ショートコード内のパラメーターが空の場合のフォールバック
//サイズ
if(!empty($atts['size'])){
$size = $atts['size'];
}else{
$size = '24'; //空の場合は24ピクセル
}
//名前空間（他のSVGアイコンセットにも対応させるため）
if(!empty($atts['space'])){
$space = $atts['space'];
}else{
$space = 'core'; //空の場合はWordPressコアSVGアイコン
}
$content = wp_get_icon(
$space.'/' . $icon_name ,
array(
'size' => $size,
'label' => $label,
'class' => $class,
),
);
return $content;
}
add_shortcode( 'pwcn-svg-icon-sc', 'pwcn_svg_icon_sc' );SVG表示ショートコードの使い方
以下のショートコードをアイコンを表示させたい場所へ挿入し、パラメーターの設定を行ってください。
[pwcn-svg-icon-sc space="" slug="" class="" size="" label=""]| パラメーター | 役割 | デフォルト （未指定または省略時） |
|---|---|---|
| space | SVGアイコンのグループ wp_register_icon_collection()の第一引数で指定した文字列 | core (WordPress標準のSVG) |
| slug | アイコンのスラグ（コアはこちらで調べられます） wp_register_icon()の第一引数で指定した文字列 | |
| class | 追加するCSSクラス | |
| size | アイコンの大きさ | 24 (ピクセル単位の数字のみ) |
| label | スクリーンリーダーで読み上げる際の文字列 （未指定の場合「aria-hidden=”true” と focusable=”false”」が付与されます） |
以下の方法などで独自のSVGアイコンを追加した際にも使えるように「space」パラメーターを設けていますので、独自アイコンもこのショートコードで表示させることが可能です。
コメントを残す