【WordPress】記事中に表示する画像を動的に選択する方法

WordPress

2019.07.24

　タイトルの通り、記事中に表示する画像を条件によって変更する方法を調べてみました。二通りしか載せていませんが、このほかにもやり方はあると思います。

ショートコードでPHPから画像パスを渡す
JavaScriptで画像を変更

ショートコードでPHPから画像パスを渡す

　ショートコードで画像のパスをhtml側に渡す方法です。PHPで処理ができるので何でもできますね。

<img src="[[getImgPath]]">
// ちなみに括弧記号[]をショートコードとして判別してほしくないときは
// "[[aaa]]"のように書きます。

// /tetorachaos.com/public_html/wp-content/themes/cocoon-child-master/functions.phpの最下部に下記を記述します。
function getImgPath() {
  ob_start();
  echo 'https://tetorachaos.com/sample-images/image1.jpg';
  // エックスサーバー中の「/tetorachaos.com/public_html/sample-images」
  //   にフォルダを作ってそこに画像をおいてあります。
  return ob_get_clean();
}

add_shortcode('getImgPath', 'getImgPath');

JavaScriptで画像を変更

画像の選択

ラジオボタンを選択してから「画像更新」ボタンを押してください

<div><script>
function answer(){
    var element1 = document.getElementById( "selects" ).select1.value;
    if (element1 === "1") {
        ans = "https://tetorachaos.com/sample-images/image1.jpg";
    }else if(element1 === "2"){
        ans = "https://tetorachaos.com/sample-images/image2.jpg";
    }else{
        ans = null;
    }
    document.getElementById("png1").src= ans;

}
</script></div>

<b>画像の選択</b>
<form id="selects">
    <input name="select1" type="radio" value="1"> 画像1
    <input name="select1" type="radio" value="2"> 画像2
</form>
<input type="button" value="画像更新" onclick="answer();">
<div id="msg">ラジオボタンを選択してから「画像更新」ボタンを押してください</div>
<img id="png1" src="null">