同一ページ量産時、ページ毎にヘッダー画像などを変える方法

目次

同一ページの量産を行上で、各ページに違うヘッダー画像や画像を読み込ませたい場合などがあるかと思います。
その場合の設定方法をご紹介致します。

動画解説


現在準備中

1.ページ毎の画像を用意する

01
※クリックすると画像が大きくなります。

各ページで読み込ませるためには、注意点がいくつかあります。
投稿タイトルと画像のファイル名を同じにする。(そのため、投稿タイトル名は半角英字・数字をご利用下さい)
②作成した画像は、ワードプレスのインストールフォルダから「wp-content」→「themes」→「e_ver003」→「任意のフォルダ名(説明ではcar)」の中に入れる

 

2.編集時の読み込み設定

次に、編集画面で画像を読み込ませる為のタグを利用します。

02

※クリックすると画像が大きくなります。

「HTML」をモジュールエリアにドラック&ドロップします。

03

※クリックすると画像が大きくなります。

画像を入れたい場所の「編集ボタン」をクリックします。

04
※クリックすると画像が大きくなります。

以下のコードを挿入します。
<img src=”[tmp]/car/[title].png”>
※上記画面では<div>タグが入っていますが、画像をセンターに合わせる場合は入れて下さい。
※画像データがjpegの場合は、png→jpegなどに変更して下さい。

【タグの説明】
[tmp]‥テンプレートフォルダまでのパス「wp-content」→「themes」→「e_ver003」を表します。
[title]‥投稿タイトル名を表します。

【読み込まれる画像の説明】
投稿タイトルが「01」だった場合、「car」フォルダ内の01.pngという画像を読み込みます。
投稿タイトルが「20」だった場合、「car」フォルダ内の20.pngという画像を読み込みます。

というように、ページ毎に違う画像を読み込ませる設定を行う事が出来ます。

コメントを残す