INFOPLATE 5 WPには、特典画像としてアイコン画像がたくさんついてきます。

矢印アイコンに、QAアイコン、ポイント１～６のアイコン、ランキングアイコン、星の評価アイコンなど…。これをテーマに組み込んでくれたらいいのに！と思うほどの充実っぷり。

だけど、「自分で適当に使ってね」という感じで、特にショートコードに組み込まれているわけじゃないんです。

マニュアルサイトにも「メディアから全ファイルをアップロードしてください」みたいな、テキトーな使い方が提示されています（笑）

せっかくいいアイコンなのにもったいない…と思って、ショートコード化してみました。

欠点は、画像によっては文字とズレているように見えること。アイコンの「見た目上の中心」と「実際の中心」がズレていると、ちょっと気になりますね。（ランキングのスタイル３アイコンなど）

ランキング評価つき見出し

[ranking shape="1" rank="1" star="5" text="商品１"]

ポイント

[point shape="1" order="1" color="r" text="ひとつめのポイント"]

好きなアイコンを呼び出して文章とくっつける

画像ファイル名（拡張子除く）を直接指定しているだけです。特典画像以外のアイコン素材にも使えます。

[icon icon="icon-finger1-r" text="このようになります"]

カスタマイズ方法

子テーマを作って、テーマフォルダ直下のfunctions.phpに以下のコードを入れる。

<?php
//functions.phpが空じゃなければ、ここに挿入

//共通処理
//ショートコードで挿入された不要な<p>や<br>を除去
function clean_shortcode_content( $content ) {
    $content = trim( wpautop( do_shortcode( $content ) ) );
    if ( substr( $content, 0, 4 ) == '</p>' ) $content = substr( $content, 4 );
    if ( substr( $content, -3, 3 ) == '<p>' ) $content = substr( $content, 0, -3 );
    $content = str_replace( array( '<p></p>' ), '', $content );
    return $content;
}

//==========================================================
//チェックリストショートコード
function s_code_checklist( $atts, $content = null ) {
        extract( shortcode_atts( array(
                'color' =>'red'
        ), $atts ) );

        $content = clean_shortcode_content( $content );
        return  '<div class="checkBox checkBox_'.$color.'">'.$content.
                        '</div>';

}
add_shortcode('checklist', 's_code_checklist');

//==========================================================
//ランキングショートコード
function s_code_rank( $atts, $content = null ){
        extract( shortcode_atts( array(
                'shape' =>'1',
                'rank' =>'1',
                'star' =>'5',
                'text' =>' '
        ), $atts ) );
        $content = clean_shortcode_content( $content );
	$img_path_rank=get_stylesheet_directory_uri().'/images/icon-ranking'.$shape.'-'.$rank.'.png';
	$img_path_star=get_stylesheet_directory_uri().'/images/icon-star5-'.$star.'.png';
	return '<span style="display:inline-block;vertical-align:middle;"><img src="'.$img_path_rank.
		'"></span><span style="display:inline-block;vertical-align:middle;">　<b>'.$text.'</b>　</span>'.
		'<span style="display:inline-block;vertical-align:middle;"><img src="'.$img_path_star.'"></span>';
		//'<img src="'.$img_path_star.'">';
}
add_shortcode('ranking', 's_code_rank');

//==========================================================
//ポイントショートコード
function s_code_point( $atts, $content = null ){
        extract( shortcode_atts( array(
                'shape' =>'1',
                'order' =>'1',
                'color' =>'r',
                'text' =>' '
        ), $atts ) );
        $content = clean_shortcode_content( $content );
	$img_path_point=get_stylesheet_directory_uri().'/images/icon-point'.$shape.'-'.$order.'-'.$color.'.png';
	$img_path_star=get_stylesheet_directory_uri().'/images/icon-star5-'.$star.'.png';
	return '<span style="display:inline-block;vertical-align:middle;"><img src="'.$img_path_point.
		'"></span><span style="display:inline-block;vertical-align:middle;">　<b>'.$text.'</b>　</span>';
}
add_shortcode('point', 's_code_point');

//==========================================================
//アイコンショートコード
function s_code_icon( $atts, $content = null ){
        extract( shortcode_atts( array(
                'icon' =>'con-finger1-r',
                'text' =>' '
        ), $atts ) );
        $content = clean_shortcode_content( $content );
	$img_path_icon=get_stylesheet_directory_uri().'/images/'.$icon.'.png';
	return '<span style="display:inline-block;vertical-align:middle;"><img src="'.$img_path_icon.
		'"></span><span style="display:inline-block;vertical-align:middle;">　<b>'.$text.'</b>　</span>';
}
add_shortcode('icon', 's_code_icon');
?>

この記事に興味を持った人が読んでいる記事:

「最近の投稿」にアイキャッチを！　New PostCatchプラグインをInfoplate5wpに カスタマイズ用に、infoplate5wpの子テーマを作る