カテゴリ:
wordpress
ウェブ制作
前回に続いて、「Advanced Custom Field」での便利な更新機能付Wordpressサイトの作り方の紹介をしたいと思います。

前回は更新機能の投稿画面の作成までやりました。
今回は「Advanced Custom Field」でのサイトの表示部分の作成の方法を紹介したいと思います。

まず商品紹介ページを管理画面の固定ページより新規追加します。
そして、そこに商品を表示させるテンプレートファイルを読み込ませるという方法を使います。

まずはテーマファイルの中に商品紹介を表示させる「page-products.php」というテンプレートファイル作成します。
そしてこのファイルを下記のように記述します。
[php]
<?php
/*
Template Name: products
*/
?>
<?php get_header(); ?>

<article id="content" role="main" <?php post_class(); ?>>

<header>
<?php if ( get_the_title() ): ?>
<h1><?php the_title(); ?></h1>
<?php endif; ?>
</header>

<div class="content">
<?php $my_posts = get_posts( 'post_type=products' ); ?>
<?php if ( $my_posts ): ?>
<?php foreach ( $my_posts as $post ): setup_postdata( $post ); ?>
<section>
<div class="product">
<div class="alignleftt">
<?php the_field ('商品画像' ); ?>
</div>
<div class="alignright">
<h1><?php the_title(); ?></h1>
<p><?php the_field('説明文'); ?></p>
<p class="price"><?php the_field('値段'); ?>円</p>
<dl>
<dt>横幅</td>
<dd><?php the_field('横幅'); ?>cm</dd>
<dt>高さ</td>
<dd><?php the_field('高さ'); ?>cm</dd>
<dt>奥行き</td>
<dd><?php the_field('奥行き'); ?>cm</dd>
</dl>
</div>
</section>
<?php endforeach; ?>
<?php endif; ?>
<?php wp_reset_postdata();?>
</div>

</article>
<!-- #content -->


<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]
このプログラムの解説をします。

[php]
<?php $my_posts = get_posts( 'post_type=products' ); ?>
<?php if ( $my_posts ): ?>
[/php]
の部分でカスタム投稿タイプ（商品）の投稿を呼び出し投稿があるのかを判定し、
あれば表示させるというふうに書いてあります。

[php]
<?php foreach ( $my_posts as $post ): setup_postdata( $post ); ?>
/*
省略
*/
<?php endforeach; ?>
[/php]
そしてここの部分で値がある数だけ繰り返し値を取り出す処理をし、

[php]
<?php the_field ('商品画像' );
[/php]
この部分でフィールド名で実際に値を取り出し、表示させるように書いてあります。
他の部分も同じようにフィールド名を指定し値を表示させます。

そしてテンプレートファイルができたら、サーバーにアップロードし、
先ほど作成した商品の固定ページの編集画面へと戻ります。

編集画面の右のボックスのページ属性より、先ほど作った「page-products.php」のテンプレート名
「products」を選択してあげればサイト上で表示できるようになります。

あとはページのデザインをCSSで編集すれば完了です。