サイタ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>
このレッスンノートを書いたコーチ

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

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

新着レッスンノート

引き続き、WORDPRESSを用いたホームページ作成を進めていきました。 投稿者の追加の方法と手順を再確認していきました。 必ず入力する必要があるのは「ユーザー名」と「メールアドレス」です。 ユーザー権限を「購読者」から「投稿者」へと変更する必要があります。 マニュアルにも追記...

引き続き、WORDPRESSを用いたホームページ作製を進めていきました。 最終更新日と投稿者名を消す カスタマイズーLightningデザイン設定 「投稿詳細ページで最終更新日を表示しない」 「投稿詳細ページで投稿者名を表示しない」 をチェックする。 サイト公開 ht...

引き続き、WORDPRESSで作成したホームページの作成・運営を進めていきました。 前回から ユーザー新規作成した パスワードを自己設定した とのことで、ちゃんとできているか確認していきました。 指定したのではなく自動設定されたパスワードになっているかもということでしたが、 ...

引き続き、WORDPRESSを用いたホームページ作成していきました。 歯科クリニックのホームページでサイトタイトルとグローバルメニューが重なっていたので位置調整を行いました CSSで配置や余白を調整 .pc .home.page #global_menu > ul{margin-...

他の方が登録投稿できるように WORDPRESSユーザー登録&投稿の仕方マニュアル作成をしました。 管理者による登録後、登録したアドレスにメールが届きます。 届いたメールを確認します。 メールの「パスワード設定するには以下のアドレスへ移動してください」の下のURLをクリッ...

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta