WordPressで文章中に画像を挿入するcssとショートコード

文章中に画像を挿入する方法をまとめました。

WordPressでは汎用的に使えるようにショートコード化することをお勧めします。

文章中に画像を上下中央に配置するショートコード

例1

このゲームはAボタン[imgtxt gc_a]とBボタン[imgtxt gc_b]で操作できます。

例2

このパスワードをイナズマイレブン3で入力してみよう!!
なんにもおきねぇから[imgtxt ba90]

設定方法

CSSの設定

ご利用されているWordpressの子テーマのstyle.cssに下記を追記してください。

img.sc_img{
    vertical-align: middle;
}

これは文章中に挿入される画像に適用するcssになります。

これが設定されていないと、文章に対して画像が上下中央に配置されません。

PHPの設定

ご利用されているWordpressの子テーマのfunctions.phpに下記を追記してください。

function shortcodeTextImgInline($query){
    $str = $query[0];
    $img = '';
    //以下は任意の画像を出す時に設定するキーワードを指定します。
    //Aボタンの画像を出したい場合は[imgtxt gc_a]を入力する設定となります。

    //Aボタン
    if($str == 'gc_a') $img = 'https://kinocolog.com/wp-content/uploads/2019/05/a.png';
    //Bボタン
    if($str == 'gc_b') $img = 'https://kinocolog.com/wp-content/uploads/2019/05/b.png';
    //BA-90画像
    if($str == 'ba90') $img = 'https://kinocolog.com/wp-content/uploads/2019/05/BA-90.png';
	
    if($img){
        return '<img class="sc_img" src="'.$img.'">';
    }else{
        return '';
    }
}
add_shortcode('imgtxt', 'shortcodeTextImgInline');

if($str == ”)には、特定の画像を出す時に設定するキーワードを指定します。（毎回URL打つのはしんどいですもんね）

画像のURLは、メディアに画像をアップロードした際に確認できる（下記画像）ので、コピーして貼り付けてください。

そして、返す画像には先ほど設定したclassのsc_imgを指定しておきます。

---

ここまで終えたら設定完了です。

各種設定が終われば、好きな画像を絵文字のように、文章中に挿入できるようになります。

文章表現の幅が広がりますので、ご活用頂ければ幸いです。

このショートコードをふんだんに活用した下記の記事「カービィのエアライドに学ぶ直感的な操作性」を是非あわせてご確認ください。

https://kinocolog.com/airride_con/

kinocolog.com

以上、WordPressで文章中に画像を挿入するcssとショートコード、でした。