サイタWeb・デザインスクールホームページ作成講座 東京 自分で作る夢のマイホームページ作り講座 レッスンノート WORDPRESS:トップページにカスタム投稿タイプの記事リストとカスタムフィールドのデータを表示

WORDPRESS:トップページにカスタム投稿タイプの記事リストとカスタムフィールドのデータを表示

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

お客様の声のタイトルと抜粋をトップページに一覧リストとして独自に表示できるようにする作業を行いました。

ダッシュボードー外観ーテーマの編集でfront-page.phpを開きます。
表示したい箇所に以下のコードを挿入していきます。

$wp_query = new WP_Query();
$param = array(
'posts_per_page' => '3', //表示件数。-1なら全件表示
'post_type' => 'voice', //カスタム投稿タイプの名称を入れる
'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
'orderby' => 'ID', //ID順に並び替え
'order' => 'DESC'
);
$wp_query->query($param);

上記のように書くことで、お客様の声という投稿タイプを3つ読み込みます。

if(have_posts()): while(have_posts()):the_post();
$date = post_custom('date');
$name = post_custom('name');
$age = post_custom('age');
$kansou = mb_strimwidth(post_custom('kansou'), 0, 45, '…', 'UTF-8');
$manzoku = post_custom('manzoku');

上記のように書くことで記事の数だけその中の処理を繰り返し行うことになります。
ここでは、変数にカスタムフィールドに入力されている日付ー名前ー年代ー感想ー満足度評価のデータを読み込んでいます。

次に以下のようにHTMLフォーマットの中にPHPで自動で画像や名前などのデータを挿入するように書いていきます。

<div id="voicelist">

<p><?php echo $name; ?> さん (<?php echo $age; ?>)</p>
<p><?php echo $date; ?> <?php echo $kansou; ?></p>
</div>
<?php endwhile; endif; ?>

最後にもっと見るをクリックすることでお客様の声アーカイブトップページにリンクを貼って飛ばすように設定します。

<p class="moreread"><a href="http://lavictoire.jp/archives/voice/">もっと見る</a>  </p>
</div>
このレッスンノートを書いたコーチ

自身の作品がグッドデザイン賞を受賞!実務・講師経験ともに豊富なので安心

目的・種類別にホームページ作成・作り方講座を探す

新着レッスンノート

契約しているサーバーおよびドメインの整理作業をすすめていきました。 あるドメインが複数のサーバーで設定されている状態が確認できました ロリポップにも載っている hetemlにも載っている ドメインをどちらで使っているかはドメイン側の設定を確認する必要があります ドメインを...

引き続き、WORDPRESSを用いたホームページ作成をすすめていきました。 ホームページで写真を使用するために、タブレットからメールでPCへ写真を送りたいけれど送れないという問題を確認していきました。 yahooログインできない タブレットからはメールが送れない タブレット...

まず、こちらのサーバーで動いている、あるドメインを切り替えるための確認と準備をしていきました。 サーバーはどこを使っているのか ドメインはどちらが管理か ネームサーバー切り替えが必要となります。 ムームードメイン ***.com ホームページ 動かしているサーバー **...

引き続き、WORDPRESSを用いたホームページ作成更新を進めていきました。 QRコードの生成 「QRコード 作成」で検索 出てきたページ 例 QRのススメ https://qr.quel.jp URLをコピー ペースト カラーとサイズなどを選択 作成をクリック...

引き続き、WORDPRESSで作成したホームページの作成および修正作業を行っていきました。 ミュージシャンのページ テーマ更新 でレイアウトなどが初期化されてしまったので再度CSSを設定 カスタマイズからの追加CSSが保存できなかったので、直接style.cssに追記してい...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta