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

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

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

文章中に画像を上下中央に配置するショートコード
1. 例1
2. 例2
設定方法
1. CSSの設定
2. PHPの設定

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

例1

サンプルコード

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

実行結果

このゲームはAボタン

とBボタン

で操作できます。

例2

サンプルコード

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

実行結果

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

設定方法

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