カスタム投稿設定方法

18.11.20

カスタム投稿を追加する方法

・「Custom Post Type UI」プラグインをインストール

・メニューの「CPT UI」→「投稿タイプの追加と編集」

・＜基本設定＞
「投稿タイプスラッグ」例：shop_name(フォルダ名を決める)
「複数形のラベル」と「単数家のラベル」例：店舗名

・＜メニュー名＞…（管理画面で使う項目名を決める）
「メニュー名」：店舗編集
「全ての項目」：店舗編集
「新規追加」：新規追加
「新規項目追加」：新規店舗追加
「項目を編集」：店舗の編集
「新規項目」：新規店舗
「項目を表示」：店舗を表示
「項目検索」：店舗を検索
「サポート」：カスタムフィールドにチェック追加

基本的にはデフォルトの状態でＯＫだが以下は好みに応じて変更。
•Has Archive（アーカイブあり）：カスタム投稿タイプのアーカイブを作成したいときは「True」にする
•Exclude From Search（検索から除外）：カスタム投稿タイプをページ検索の対象とするか否か

これでメニューに追加され編集ができる。

◆カスタム投稿ページの編集
既存の「single.php」をコピーし、「single-shop_name.php」に
名前を変更してFTPであげる。するとそれがカスタム投稿ページになって編集ができるようになる。

・店舗ページURL
http://sample01.uh-oh.jp/shop_name/専門店A

◆アーカイブページの編集
既存の「archive.php」をコピーし、「archive-shop_name.php」に
名前を変更してFTPであげる。するとそれがアーカイブページになって編集ができるようになる。

・アーカイブURL（一覧）
http://sample01.uh-oh.jp/shop_name/

◆投稿した記事の一覧表示方法

<ul>
<?php $args = array(
'numberposts' => 5, //表示する記事の数
'post_type' => 'shop_name' //投稿タイプ名
 // 条件を追加する場合はここに追記
);
$customPosts = get_posts($args);
 if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post );
 ?>
 <li><a href="<?php the_permalink(); ?>">
 <?php the_title(); ?> <!--タイトル-->
 <?php the_post_thumbnail(); ?><!--サムネイル-->
 <?php echo get_the_post_thumbnail( $id,'medium' ); ?><!--サムネイルサイズ medium thumbnail-->
 <?php the_content(); ?><!--文章-->
 
 
 </a></li>
 <?php endforeach; ?>
<?php else : //記事が無い場合 ?>
<p>Sorry, no posts matched your criteria.</p>
 <?php endif;
 wp_reset_postdata(); //クエリのリセット ?>
</ul>

<ul>

<?php $args = array(

'numberposts' => 5, //表示する記事の数

'post_type' => 'shop_name' //投稿タイプ名

// 条件を追加する場合はここに追記

);

$customPosts = get_posts($args);

if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post );

<?php the_title(); ?>

<?php the_post_thumbnail(); ?>

<?php echo get_the_post_thumbnail( $id,'medium' ); ?>

<?php the_content(); ?>

</a></li>

<?php endforeach; ?>

<?php else : //記事が無い場合 ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif;

wp_reset_postdata(); //クエリのリセット ?>

</ul>

カスタムフィールドを追加する方法

「Custom Field Template」プラグインをインストール

参考記事：http://kotori-blog.com/wordpress/customfieldtemplate/

設定→カスタムフィールドテンプレート

＜テンプレートタイトル＞
普通にタイトルを入力。日本語でもOK。

＜テンプレートコンテンツ＞
以下に例を挙げる

[kataban]
type = text
size = 35
label = 型番

[syurui]
type = checkbox
value = Mens # Ladies # Childs
default = Mens # Childs
label = 種類

[tantou]
type = radio
value = ことり # 田中 # 佐藤
default = ことり
label = 担当

[zaiko]
type = select
value = 10 # 20 # 30
default = 20
label = 在庫

[setsumei]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
label = 商品説明

[gazou]
type = file
mediaPicker = true
mediaRemove = true
label = 商品画像

◆上記の出力コード例◆

<?php if(have_posts()): while(have_posts()):the_post();
$kataban = post_custom('kataban');
$syurui = post_custom('syurui');
$tantou = post_custom('tantou');
$zaiko = post_custom('zaiko');
$setsumei = post_custom('setsumei');
$gazou = wp_get_attachment_image_src(post_custom('gazou'),'full' );
 ?>
<div><?php the_title(); ?></div>
<div>型番:<?php echo $kataban; ?></div>
<div>種類:<?php 
if (is_array($syurui)) {
foreach($syurui  as $val){
if ($val === end($syurui)) {
echo $val;
    }else{
echo $val.", ";
}
}
}else{
echo $syurui;   
}
 ?></div>
<div>担当:<?php echo $tantou; ?></div>
<div>在庫:<?php echo $zaiko; ?></div>
<div>商品説明:<?php echo wpautop($setsumei); ?></div>
<div>商品画像:<img src="<?php echo $gazou[0]; ?>" alt="<?php the_title(); ?>" /></div>
<?php endwhile; endif; ?>

<?php if(have_posts()): while(have_posts()):the_post();

$kataban = post_custom('kataban');

$syurui = post_custom('syurui');

$tantou = post_custom('tantou');

$zaiko = post_custom('zaiko');

$setsumei = post_custom('setsumei');

$gazou = wp_get_attachment_image_src(post_custom('gazou'),'full' );

<div>種類:<?php

if (is_array($syurui)) {

foreach($syurui as $val){

if ($val === end($syurui)) {

echo $val;

}else{

echo $val.", ";

}

}else{

echo $syurui;

}

?></div>

<?php endwhile; endif; ?>

◆テキストエリア改行方法◆

<?php echo wpautop($setsumei); ?>

1	<?php echo wpautop($setsumei); ?>

もしくはpタグは要らないけど改行だけ反映させたいって場合

<?php echo nl2br($setsumei); ?>

1	<?php echo nl2br($setsumei); ?>

◆画像のサイズ設定
上記は「full」になっているが、
「thumbnail」「medium」「large」「full」
で設定が可能

◆項目を増やす方法◆
項目を設定したら「オプションを更新する」をクリックすると自動的に次の登録ができる

« サーチコンソールとグーグルアナリティクスを同期させ検索パフォーマンスを上げる

wordpress そのページだけにcssを適用させる方法。 »

カスタム投稿設定方法

カスタム投稿を追加する方法

カスタムフィールドを追加する方法

関連記事