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

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

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

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

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

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


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

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

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

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

カービィのエアライドに学ぶ直感的な操作性
今年のゴールデンウイークに実家に帰省し、いつも会う友達と遊びました。 やがて昔のようにパーティゲームをプレイするのですが、その中でいつも選ばれるのは「カービィのエアライド」。 カービィのエアライドは2003年に発売された...
以上、WordPressで文章中に画像を挿入するcssとショートコード、でした。

コメント

タイトルとURLをコピーしました