カスタムフィールドテンプレートでレスポンシブのレシピ工程表を作る

カスタムフィールドテンプレートでレスポンシブのレシピ工程表を作るには。

カスタムフィールドテンプレートオプション
TEMPLATE
 
[title]
type = text
size = 26
output = true
label =【レシピ表】②<br />② [cft format="18" ]追記で４工程を表示<br />② [cft format="19" ]追記で８工程を表示<br /><br />②【タイトル】13文字以下<br />

[zairyou]
type = textarea
tinyMCE = true
htmlEditor = true
rows = 5
cols = 80
output = true
label = 【材料】②＝レシピ表の中に表示<br /><br /> ②メイン材料<br />例：小麦粉＜br /＞砂糖＜br /＞オリーブオイル<br />

[zairyou2]
type = textarea
tinyMCE = true
htmlEditor = true
rows = 5
cols = 80
output = true
label = ②その他の材料<br /> 　例：バナナ＜br /＞チョコチップ＜br /＞


[ryouri-1]
type = file
mediaButton = true
mediaLibrary = true
output = true
label = 【工程】①＝レシピ表の中に表示<br /><br />①画像１<br />

[koutei-1]
type = text
size = 200
output = true
label = ①文章１<br />

[ryouri-2]
type = file
mediaLibrary = true
output = true
label = ①画像２<br />

[koutei-2]
type = text
size = 200
output = true
label = ②文章２<br />

[ryouri-3]
type = file
mediaLibrary = true
output = true
label = ①画像３<br />

[koutei-3]
type = text
size = 200
output = true
label = ①文章３<br />

[ryouri-4]
type = file
mediaLibrary = true
output = true
label = ①画像４<br />


[koutei-4]
type = text
size = 200
output = true
label = ①文章４<br />１～４までなら [cft format="18" ]追記で文中に表示

[ryouri-5]
type = file
mediaLibrary = true
output = true
label = ①画像５<br />

[koutei-5]
type = text
size = 200
output = true
label = ①文章５<br />


[ryouri-6]
type = file
mediaLibrary = true
output = true
label =① 画像６<br />

[koutei-6]
type = text
size = 200
output = true
label = ②文章６<br />

[ryouri-7]
type = file
mediaLibrary = true
output = true
label =①画像７<br />

[koutei-7]
type = text
size = 200
output = true
label = ①文章７<br />

[ryouri-8]
type = file
mediaLibrary = true
output = true
label = ①画像８<br />

[koutei-8]
type = text
size = 200
output = true
label = ①文章８<br />文中に [cft format="19" ]追記で５～６表を表示

[kiiwaado]
type = text
size = 100
label =② メタタグ・キーワード<br />


[cft] and [cftsearch] Shortcode Format
FORMAT
 
<?php if ( wp_is_mobile() ) : ?>
//モバイル用レシピ欄ここから
<div class="shortcode">
<caption style="text-align: left;"><span style="font-size: 1.1em;"><span style="color: #636363;"><strong><span style="color: #74b748;">[title]</span></strong></span></span></caption>
<table width="460" cellspacing="0" cellpadding="4">
<tbody>
<tr>
<td colspan="3" align="center" bgcolor="#74b748" height="30"><span style="font-size: small;"><span style="color: #ffffff;"><strong>材料</strong></span></span></td>
</tr>
<tr>
<td colspan="3" align="left"><span style="color: #666666;">[zairyou]</br>[zairyou2]</span></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#9acd32" height="30"><span style="font-size: small;"><span style="color: #ffffff;"><strong>作り方</strong></span></span></td>
</tr>
<tr align="left" valign="top">
<th width="25" height="100"><span style="color: #74b748;"><strong>１.</strong></span></th>
<td><span style="color: #666666;">[koutei-1]</span></td>
<td width="160" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(160, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-1'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
</tr>
<tr align="left" valign="top">
<th width="25" height="100"><span style="color: #74b748;"><strong>２.</strong></span></th>
<td><span style="color: #666666;" valign="top">[koutei-2]</span></td>
<td width="160" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(160, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-2'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
</tr>
<tr align="left" valign="top">
<th width="25" height="100"><span style="color: #74b748;"><strong>３.</strong></span></th>
<td><span style="color: #666666;" valign="top">[koutei-3]</span></td>
<td width="160" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(160, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-3'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
</tr>
<tr align="left" valign="top">
<th width="25" height="100"><span style="color: #74b748;"><strong>４.</strong></span></th>
<td><span style="color: #666666;" valign="top">[koutei-4]</span></td>
<td width="160" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(160, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-4'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
</tr>
</tbody>
</table>
</div><!-- .shortcode -->
//モバイル用レシピ欄ここまで
<?php else: ?>
//PC用レシピ欄ここから
<div class="shortcode">
<p class="table">
<table ><caption style="text-align: left;"><span style="font-size: 20px;"><span style="color: #636363;"><strong><span style="color: #74b748;">[title]</span></strong></span></span></caption>
<tbody>
<tr align="center" valign="middle">
<td colspan="2" bgcolor="#74b748" height="30"><span style="font-size: small;"><span style="color: #ffffff;"><strong>メイン材料</strong></span></span></td>
<td colspan="2" bgcolor="#74b748" height="30"><span style="font-size: small;"><span style="color: #ffffff;"><strong>その他材料</strong></span></span></td>
</tr>
<tr valign="top">
<td colspan="2" height="140"><span style="color: #636363;">[zairyou]</span></td>
<td colspan="2" height="140"><span style="color: #636363;">[zairyou2]</span></td>
</tr>
<tr align="center" valign="middle">
<td colspan="4" bgcolor="#9acd32" width="540" height="30"><span style="font-size: small;"><span style="color: #ffffff;"><strong>作り方</strong></span></span></td>
</tr>
<tr valign="top">

<td width="133" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(120, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-1'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
<td width="133" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(120, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-2'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
<td width="133" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(120, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-3'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
<td width="133" <?php
//altとtitleを変更する
$args = array(
    'alt' => wp_kses($post->post_title, array()),
    'title' => false,
);
//サイズの定義
$size = array(120, 120);
//画像をHTMLで取得する
$postImg = wp_get_attachment_image(post_custom('ryouri-4'), $size, false, $args);

if($postImg) { ?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<p><?php echo $postImgSrc[0]; ?></p>
<?php } ?>
</td>
</tr>
<tr valign="top">
<td width="133"><span style="color: #74b748;"><strong>１、</strong></span></td>
<td width="133"><span style="color: #74b748;"><strong>２、</strong></span></td>
<td width="133"><span style="color: #74b748;"><strong>３、</strong></span></td>
<td width="133"><span style="color: #74b748;"><strong>４、</strong></span></td>
</tr>
<tr valign="top">
<td width="133"><span style="color: #636363;">[koutei-1]</span></td>
<td width="133"><span style="color: #636363;">[koutei-2]</span></td>
<td width="133"><span style="color: #636363;">[koutei-3]</span></td>
<td width="133"><span style="color: #636363;">[koutei-4]</span></td>
</tr>
</tbody>
</table>
</p>
</div><!-- .shortcode -->
//PC用レシピ欄ここまで
<?php endif; ?>