投稿テンプレートのカスタマイズ : 2016年11月18日

News -various

1 Single Post Template をプラグインに入れる。
2 Custom Field Template をプラグインに入れる。
3 設定からカスタムフィールドテンプレートに実装する。

[eventname]
type = text
size = 50
label = 【伝言タイトル】

[party]
type = text
size = 50
label = 【主催団体名】

[event_detail]
type = text
size = 50
label = 【イベント内容】

[bc_day]
type = text
size = 50
label = 【放送日】

[poster_url]
type = text
size = 50
label = 【画像URL】

[movie_filename]
type = text
size = 50
label = 【動画ファイル名】

[place]
type = text
size = 50
label = 【会場】

[event_day]
type = text
size = 50
label = 【開催日】

[event_time]
type = text
size = 50
label = 【開催時間】

[time_note]
type = text
size = 50
label = 【開催時間に関する備考】

[askfor]
type = text
size = 50
label = 【問い合わせ先】

[notice_url]
type = text
size = 50
label = 【関連ホームページ】

[studio_rec]
type = text
size = 35
label = 【スタジオ収録日】

[Map_iframe]
type = text
size = 200
label = 【会場地図】
4 シングルページテンプレートに実装する

<?php
/*
Single Post Template: カスタムテンプレート01
*/
?>
<?php 
/*
* single post template
*/
get_header(); 
?>

<div class="page-title">
  <div class="container">
    <div class="row">
      <div class="col-md-6  col-sm-6 "> <span class="foodrecipes-page-breadcrumbs">
        <?php if (function_exists('foodrecipes_custom_breadcrumbs')) foodrecipes_custom_breadcrumbs(); ?>
        </span> </div>
    </div>
  </div>
</div>
<div class="main-container ">
  <div class="foodrecipes-container-recipes container">
    <div class="row">
      <?php while ( have_posts() ) : the_post(); ?>
      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="col-md-8 main no-padding-left">
          <div class="foodrecipes-inner-blog-bg">
            <article class="post">
<hr>
<h100><?php echo get_the_title(); ?></h100>
<article class="con_movie">
<div class="con_video">
<p id="video">
<!-- [if !IE]-->
<video src="http://ch-mics.jp/data/movie/movie/<?php echo post_custom("movie_filename")?>.mp4" poster="<?php echo post_custom("poster_url")?>" preload="metadata" controls="controls"></video>
<!--[endif]--><!-- [if gte IE 9]>
<video src="http://ch-mics.jp/data/movie/movie/<?php echo post_custom("movie_filename")?>.mp4" controls preload="metadata"></video>
<![endif]--><!-- [if IE 8]>
<video src="http://ch-mics.jp/data/movie/movie/<?php echo post_custom("movie_filename")?>.mp4" controls preload="metadata"></video>
<![endif]-->
※このページの配信動画は本放送のフルHDとは異なり標準画質以下にダウンコンバートして配信いたしております。ご了承ください。</p>
</div>
</article>
<hr />
<table class="type02">
<?php if ( get_post_meta($post->ID,'eventname',TRUE) ): ?>
	<tr>
		<th scope="row">【伝言タイトル】</th>
		<td><?php echo post_custom("eventname")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'party',TRUE) ): ?>
	<tr>
		<th scope="row">【主催団体名】</th>
		<td><?php echo post_custom("party")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'event_detail',TRUE) ): ?>
	<tr>
		<th scope="row">【イベント内容】</th>
		<td><?php echo post_custom("event_detail")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'place',TRUE) ): ?>
	<tr>
		<th scope="row">【会場】</th>
		<td><?php echo post_custom("place")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'Map_iframe',TRUE) ): ?>
	<tr>
		<th scope="row">【会場地図】</th>
		<td><?php echo post_custom("Map_iframe")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'event_day',TRUE) ): ?>
	<tr>
		<th scope="row">【開催日】</th>
		<td><?php echo post_custom("event_day")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'event_time',TRUE) ): ?>
	<tr>
		<th scope="row">【開催時間】</th>
		<td><?php echo post_custom("event_time")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'time_note',TRUE) ): ?>
	<tr>
		<th scope="row">【備考】</th>
		<td><?php echo post_custom("time_note")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'askfor',TRUE) ): ?>
	<tr>
		<th scope="row">【問い合わせ先】</th>
		<td><?php echo post_custom("askfor")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'notice_url',TRUE) ): ?>
	<tr>
		<th scope="row"><a href="<?php echo post_custom("notice_url")?>" target="_blank">【関連ホームページ】</a></th>
		<td><a href="<?php echo post_custom("notice_url")?>" target="_blank"><?php echo post_custom("notice_url")?></a></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'studio_rec',TRUE) ): ?>
	<tr>
		<th scope="row">【スタジオ収録】</th>
		<td><?php echo post_custom("studio_rec")?></td>
	</tr>
<?php endif;?> 
</table>
<div class="foodrecipes-inner-blog-text">
                <?php $foodrecipes_feature_img_url = wp_get_attachment_url(get_post_thumbnail_id(get_the_id())); ?>
                <div class="foodrecipes-inner-blog-text" >
                  <!--//<?php if($foodrecipes_feature_img_url != "") { ?>
                  <div><img src="<?php echo esc_url($foodrecipes_feature_img_url); ?>"></div>
                  <?php } ?>//-->                
                  <p>
                    <?php the_content();
                        wp_link_pages( array(
                                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'foodrecipes' ) . '</span>',
                                'after'       => '</div>',
                                'link_before' => '<span>',
                                'link_after'  => '</span>',
                            ) );
                     ?>
                  </p>
                </div>
                <?php if ( get_comments_number() > 0 ) : ?>
                <div class="foodrecipes-inner-blog-text" >
                  <h6>
                    <?php comments_number( __('NO COMMENT','foodrecipes'), __('1 COMMENT','foodrecipes'),__('%s COMMENTS','foodrecipes')  ); ?>
                  </h6>
                </div>
                <?php  endif; ?>
                <div class="foodrecipes-comment-form">
                  <?php comments_template( '', true ); ?>
                </div>
              </div>
                  <h6> <?php echo get_the_date("Y年F月j日"); ?>現在の情報です。変更その他詳細については主催者へお問い合わせください。</h6>
<div class="box_text">みんなおいでん!市民伝言板|<?php echo post_custom("bc_day")?> 18:15~より初回放送</div>
<?php foodrecipes_entry_meta(); ?><?php the_tags(); ?>
            </article>
          </div>
          <div class="clearfix"></div>
          <nav class="col-md-12 foodrecipes-box-paging clearfix foodrecipes-main-pagination foodrecipes-single-pagination"> <span class="foodrecipes-nav-previous">
            <?php previous_post_link(); ?>
            </span> <span class="foodrecipes-nav-next">
            <?php next_post_link(); ?>
            </span> </nav>
        </div>
        <?php endwhile; ?>
        
        <!-- side-menu -->
          <?php get_sidebar(); ?>
        <!-- side-menu --> 
      </div>
    </div>
  </div>
</div>
<?php get_footer(); ?>

5 記述を整えるテーブルの例。

<table class="type02">
<?php if ( get_post_meta($post->ID,'eventname',TRUE) ): ?>
	<tr>
		<th scope="row">【伝言タイトル】</th>
		<td><?php echo post_custom("eventname")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'party',TRUE) ): ?>
	<tr>
		<th scope="row">【主催団体名】</th>
		<td><?php echo post_custom("party")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'event_detail',TRUE) ): ?>
	<tr>
		<th scope="row">【イベント内容】</th>
		<td><?php echo post_custom("event_detail")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'place',TRUE) ): ?>
	<tr>
		<th scope="row">【会場】</th>
		<td><?php echo post_custom("place")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'Map_iframe',TRUE) ): ?>
	<tr>
		<th scope="row">【会場地図】</th>
		<td><?php echo post_custom("Map_iframe")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'event_day',TRUE) ): ?>
	<tr>
		<th scope="row">【開催日】</th>
		<td><?php echo post_custom("event_day")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'event_time',TRUE) ): ?>
	<tr>
		<th scope="row">【開催時間】</th>
		<td><?php echo post_custom("event_time")?></td>
	</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'time_note',TRUE) ): ?>
	<tr>
		<th scope="row">【備考】</th>
		<td><?php echo post_custom("time_note")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'askfor',TRUE) ): ?>
	<tr>
		<th scope="row">【問い合わせ先】</th>
		<td><?php echo post_custom("askfor")?></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'notice_url',TRUE) ): ?>
	<tr>
		<th scope="row"><a href="<?php echo post_custom("notice_url")?>" target="_blank">【関連ホームページ】</a></th>
		<td><a href="<?php echo post_custom("notice_url")?>" target="_blank"><?php echo post_custom("notice_url")?></a></td>
	</tr>
<?php endif;?> 
<?php if ( get_post_meta($post->ID,'studio_rec',TRUE) ): ?>
	<tr>
		<th scope="row">【スタジオ収録】</th>
		<td><?php echo post_custom("studio_rec")?></td>
	</tr>
<?php endif;?> 
</table>

6 CSSで整える。

table.type02 {
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.type02 th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	background: #eee;
}
table.type02 td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
LINE