WordPress ランダムイメージプラグイン - Hot Random Image

WordPressでサイドバーやページ/ポスト本文または本文内の特定の位置に画像をランダムに表示したい場合があります。 この状況では WordPress ランダムプラグインのホットランダムイメージを使用できます。

WordPress ランダムイメージプラグイン - Hot Random Image

Hot Random Imageプラグインを使用すると、基本的にサイドバーなどのウィジェット領域に画像をランダムに表示できます。

WordPress 投稿やページにランダム画像を表示したい場合は、ショートコードを使用できます。 すべてのページ/記事、カテゴリページなど、特定の場所に画像をランダムに表示したい場合は、Ad Inserterを使用してショートコードを入力できます。

サイドバーにランダム画像を表示する

このプラグはデフォルトでサイドバーやフッターなどのウィジェット領域にランダム画像を表示できます。 WordPress 管理者ページ » ルックス » ウィジェットに移動して、目的のウィジェット領域（たとえば、Right Sidebar）に ホットランダムイメージブロックを挿入できます。

Hot Random Imageブロックを追加すると、上記の画面が表示されます。

• Title: タイトル
• Path to images: イメージパス
• Width: イメージ幅
• Height:高さ。 通常 オート（自動）にしておきます。
• Alt text：代替テキスト。 画像SEO用に指定できます。
• Image link: イメージリンク

上で重要なのはイメージパス（Path to images）です。

Enter path relative to your WordPress インストール。
In example "wp-content/uploads/2014/12"

イメージパス WordPressがインストールされているディレクトリの相対パスとして入力します。 例えば、 WP-コンテンツ/アップロード/ 2014 / 12のように入力できます。 または、 WordPressがインストールされているパスの下にimages / randomフォルダを作成して画像を配置することもできます。 この場合、イメージパスは images/randomになります。

画像リンクにURLを指定すると、ランダムに表示される画像へのリンクとして指定されます。 すべての画像に同じリンクが割り当てられ、個別にリンクを指定することはできません。 個別にリンクを指定したい場合は、JavaScriptを使用してリンクを変更できます。

예：

<script>
// select all <a> tags containing <img> tags
var anchors = document.querySelectorAll('a img');

// iterate over each <a> tag
for (var i = 0; i < anchors.length; i++) {
  // if the <img> tag's src matches the desired URL
  if (anchors[i].src === "https://example.com/images/random/2.jpg") {
    // change the href of the parent <a> tag
    anchors[i].parentNode.href = "https://naver.com/";
  }
}
</script>

上記のJavaScriptコードを使用すると、 images/radom フォルダ内の 2.jpgが読み込まれると、ターゲットリンクが https://naver.comに設定されます。

複数のファイルに異なるリンクを必要とする場合は、次のようなコードで試すことができます。

<script>
// create a map of image sources to URLs
var urlMap = {
  "https://example.com/images/random/2.jpg": "https://naver.com/",
  "https://example.com/images/random/3.jpg": "https://google.co.kr"
  // add more mappings as necessary
};

// select all <a> tags containing <img> tags
var anchors = document.querySelectorAll('a img');

// iterate over each <a> tag
for (var i = 0; i < anchors.length; i++) {
  // if the <img> tag's src is in the urlMap
  if (urlMap.hasOwnProperty(anchors[i].src)) {
    // change the href of the parent <a> tag to the corresponding URL
    anchors[i].parentNode.href = urlMap[anchors[i].src];
  }
}
</script>

画像の数に応じて、画像URLとターゲットリンクURLを追加できます。

ショートコードでランダム画像を表示する

Hot Random Imageプラグインはショートコードをサポートします。 次のショートコードを好きな場所に貼り付けることができます。

[randomimage path="images/random" width="100%" height="auto" alt="Random image" link="https://google.com/"]

path はイメージパス、alt は代替テキストです。 リンクには、画像をクリックしたときに移動するURLを入力します。 Width では、画像幅を 300px、100%、auto などの形式で指定できます。

同様に、すべての画像に同じリンクが割り当てられているため、画像ごとに異なるリンクを指定したい場合は、上記のJavaScriptを活用できます。

広告サーターを使用すると、特定の場所（ポスト内の最初の段落の下、または最初の段落の上）に一括してランダム画像を表示できます。

プラグインを使用せずにランダム画像を表示する

プラグインを使用せずにランダムに画像を表示したい場合は、JavaScriptを利用できます。

例：

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Array of image URLs and corresponding link URLs
  var imagesAndLinks = [
    {
      imageUrl: "https://example.com/images/random/1.jpg",
      linkUrl: "https://google.com"
    },
    {
      imageUrl: "https://example.com/images/random/2.jpg",
      linkUrl: "https://naver.com"
    },
    {
      imageUrl: "https://example.com/images/random/3.jpg.jpg",
      linkUrl: "https://google.co.kr"
    }
  ];
  
  // Get a random index
  var randomIndex = Math.floor(Math.random() * imagesAndLinks.length);
  
  // Get the image URL and link URL from the array
  var imageUrl = imagesAndLinks[randomIndex].imageUrl;
  var linkUrl = imagesAndLinks[randomIndex].linkUrl;

  // Generate the HTML img tag with a CSS class
  var img = document.createElement('img');
  img.src = imageUrl;
  img.className = "random-img";
  img.alt = "Some alt text";

  // Generate the HTML a tag and wrap it around the img tag
  var a = document.createElement('a');
  a.href = linkUrl;
  a.appendChild(img);

  // Find the placeholder element and replace it with the a tag
  var placeholder = document.getElementById('image-placeholder');
  placeholder.parentNode.replaceChild(a, placeholder);
});


</script>

ランダム画像を表示したい場所には、次のHTMLコードを追加します。

<div id="image-placeholder"></div>

ブロックエディタ（Gutenberg）を使用している場合は、「カスタムHTML」ブロックとして上記のコードを配置できます。 エレメンページビルダーは HTMLウィジェットを使用することができます。

JavaScriptを読み込む

JavaScriptは次の記事を参照して読み込むことができます。

• WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

上記の方法が複雑または面倒な場合（それほど望ましくありませんが）、WPCodeなどのプラグインを使用してフッタ領域に追加できます。

• WordPress ヘッダーとフッターに簡単にコードを挿入する：WPCode Insert Headers and Footersプラグイン

GeneratePress テーマを使用している場合は、フックとしてジャスコードを追加できます。

• GeneratePress テーマフックを使用する

参照

• WordPress GeneratePress テーマ：モバイルの使いやすさの問題
• クラウドウェイへ WordPress はじめにとドメインを接続する