WordPressでイラスト・ギャラリー

2014年4月27日2016年1月23日WordPress,アニメ・コミック,パソコン・インターネット

イラスト集をWordPressで公開するにあたり、カスタムフィールドテンプレートを使いました。WordPressには、「カスタムフィールド」と言う追加情報を記載できる仕組みがあり、それを使いやすくするプラグインが、カスタムフィールドテンプレートです。

次のウェブページに、とてもわかりやすくまとめられています。ありがとうございます。

Custom Field Templateの使い方[WordPress]

しばらく前に、カスタムフィールドテンプレートを使った読書ノート(読書カード)の作り方を紹介しました。

WordPressで読書ノート(改訂版): プラスα空間 (2014年4月18日)

基本的には、この方法の応用です。今回は、画像を表示する方法が肝となります。

テンプレートは、次の形式にしました。

[cfm_mkg_title]
label = タイトル
type = text
size = 50

[cfm_mkg_date_release]
label = 初出
type = text
size = 25
date=true
dateFirstDayOfWeek = 0
dateFormat = yyyy年mm月dd日
startDate = '1900/01/01'

[cfm_mkg_session]
label = 制作時間
type = text
size = 50

[cfm_mkg_illust]
label = イラスト
type = file
mediaPicker = true
mediaRemove = true

[cfm_mkg_hardware]
label = ハードウェア
type = text
size = 50

[cfm_mkg_software]
label = ソフトウェア
type = text
size = 50

[cfm_mkg_comment]
label = コメント
type = textarea
rows = 10
cols = 150
tinyMCE = true
htmlEditor = true

cfm_mkg_illustと言うキーワードで、画像を組み込んでいます。これを表示するコード(HTML+PHP)は、次の通りです。

<table class="cft">
  <tbody>
    <tr>
      <td rowspan="4"><a href="<?php $image = wp_get_attachment_image_src(post_custom('cfm_mkg_illust'),'full' ); echo $image[0]; ?>" rel="prettyPhoto _RAclick" title="[cfm_mkg_title]"><?php $thumbnail = wp_get_attachment_image_src(post_custom('cfm_mkg_illust'),'thumbnail' ); echo '<img src="'.$thumbnail[0].'" width="'.$thumbnail[1].'" height="'.$thumbnail[2].'" alt="[cfm_mkg_title]" />'; ?></a></td>
      <th>タイトル</th><td colspan="3" class="cft-title">[cfm_mkg_title]</td>
    </tr>
    <tr>
      <th>初出(しょしゅつ)</th><td>[cfm_mkg_date_release]</td>
      <th>制作時間</th><td>[cfm_mkg_session]</td>
    </tr>
    <tr>
      <th>ハードウェア</th><td colspan="3">[cfm_mkg_hardware]</td>
    </tr>
    <tr>
      <th>ソフトウェア</th><td colspan="3">[cfm_mkg_software]</td>
    </tr>
    <tr>
      <th>コメント</th><td colspan="4">[cfm_mkg_comment]</td>
    </tr>
  </tbody>
</table>

PHPを使用するにチェックマークを入れておくのが鍵です。

画像表示の為には、次のウェブサイトを参考にさせていただきました。ありがとうございます。

アイキャッチ画像の「URL,横幅,高さ」を取得する[Wordpress]

実際に、画像を表示しているPHPの部分は、次のところです。

<td rowspan="4"><a href="<?php
  $image = wp_get_attachment_image_src(post_custom('cfm_mkg_illust'),'full' );
  echo $image[0];
?>" rel="prettyPhoto _RAclick" title="[cfm_mkg_title]"><?php
  $thumbnail = wp_get_attachment_image_src(post_custom('cfm_mkg_illust'),'thumbnail' );
  echo '<img src="'.$thumbnail[0].'" width="'.$thumbnail[1].'" height="'.$thumbnail[2].'" alt="[cfm_mkg_title]" />';
?></a></td>

$imageと言う配列変数に、拡大後の画像情報が格納されています。また、$thumbnailと言う配列変数に、サムネイルの画像情報が格納されています。配列引数の意味は、次の通りです。

戻り値

(配列)

配列は以下を含みます:

[0] => url

[1] => width

[2] => height

[3] => 真偽値: リサイズされいている場合は true、元のサイズの場合は false

画像でない場合は、 false を返します。

関数リファレンス/wp get attachment image src – WordPress Codex 日本語版より