【WordPress】プラグインの作成手順について　Part3【カスタム投稿】

WordPressにてテーマを作成する記事のPart3です。Part2はこちら

関連記事

【WordPress】プラグインの作成手順について　Part2【カスタム投稿】

WordPressにてテーマを作成する記事のPart2です。Part1はこちら [sitecard subtitle=関連記事 url=https://freemas.stepupkaraoke.com/making/wordpres[…]

前回はカスタムフィールドの不動産画像と不動産情報をデータベースに登録するところまで行いました。
今回は最後として、登録したデータをwebページに表示していきましょう。

【WordPress】プラグインの作成手順について　Part3

wordpressページでの完成イメージ

前回までで不動産画像と情報はデータベースに登録されているので、今回は表示です。
イメージとしては以下のような形となります。

これは不動産サイトの例なのですが、登録した写真と文言が出るようになっています。

上の例では「所在地」や「交通」は固定文言です。
「大阪府東大阪市～」といった文言が入力した文字ですね。
どのページでもこれらの情報が表示されているようになっています。

それでは実際に作成していきましょう。

カスタム投稿表示用のページを作ろう

カスタム投稿を作ると対応するファイルを作るだけでページを表示させることができます。
もともとWordPressは記事の一覧ページと詳細ページに分かれています。
これらを表示しているファイルは、「\wp-content\themes\」の使っているテーマフォルダの中にあります。

対応は以下の通りです。

• 記事の一覧ページ：archive.php
• 記事の詳細ページ：single.php

テーマによってはarchive.phpがない場合があります。
その場合はindex.phpやfront.phpのようなTOPページのような名前が該当します。

これらはWordpressの「投稿」を表示しているファイルです。
カスタム投稿はこれをちょっと変えることで表示させることができます。
やり方は簡単で、

ことで、カスタム投稿のファイルとなります。
カスタム投稿名はPart1で作成したプラグインのregister_post_typeの中に指定されています。
不動産サイトでは「realestate」としているので、それぞれ

• カスタム投稿の一覧ページ：archive-realestate.php
• カスタム投稿の詳細ページ：single-realestate.php

となります。「-」で繋げてください。簡単ですね。
ファイルに関してはもともとあるarchive.phpやsingle.phpをコピーして作りましょう。
これでファイルは作成できました。次はカスタムフィールドの情報を出力しましょう。

カスタムフィールドの内容を出力しよう！

カスタム投稿の一覧ページはそのままでOKですが、詳細ページは変更する必要があります。
登録したデータを表示するには、「single-カスタム投稿名.php」に次のように記載しましょう。

以下に詳細を記載しておきます。（折りたたんでいます）

出力ファイルの詳細について

まず「<?php if(have_posts()):while(have_posts()):the_post(); ?>」は基本的な構文です。
どのテーマを使っていても見ると思います。
意味は簡単で、投稿があれば投稿の全てを表示する、といった形です。

さて、コードは画像を出すエリアと、文言を出すエリアに分かれています。
「img-area」が画像のエリアで、「real-estate」が文言のエリアですね。
まずは画像エリアから見ていきましょう

for( $i=0; $i < 10; $i++){

画像のエリアではfor文で一気に表示しています。
for文はこの場合ですと10回繰り返します。

$realestate_image[] = get_post_meta(get_the_ID(),’realestate-image_’.$i,true);

get_post_metaで画像のデータを取得し、配列に格納しています。
画像は全部で10枚あるので、10個すべて配列に格納しています。

ちなみにrealestate-image_は後ろに数字を設定しています。
カスタムフィールドの名前ですね。基本的にカスタムフィールドの情報は名前を指定して取り出します。
これはPart2で行っているので、分からない場合は戻って確認してみてください。

$realestate_thumb = wp_get_attachment_image_src ( $realestate_image[$i], ‘thumbnail’ );

画像のサイズを指定して取り出しています。
後ろの「thumbnail」はサムネイルサイズで取り出すということです。
他にもフルサイズでの取り出しなどができます。

 <img src=”<?php echo $realestate_thumb[0] ?>” width=”<?php echo $realestate_thumb[1]; ?>” height=”<?php echo $realestate_thumb[2]; ?>”

取得したデータはURL、横幅、縦幅の順に格納されています。
それらを指定して、画像のHTMLを完成させています。
画像の出力は以上で終了です。あとはCSSなどで調節してください。

続いては文言の出力です。
こちらは画像とは違って簡単です。

<tr><th>所在地</th><td><?php echo get_post_meta( get_the_ID(), ‘info_address’, true ) ?></td></tr>

たったこれだけです。get_post_metaでデータを取得します。
第2引数の「info_address」を変えることで、カスタムフィールドのどのデータも取り出し可能です。
こちらは出力がとても楽ですね。

無事にカスタムフィールドの表示ができました。
今回はあくまでも例として実装しましたが、作成したいプラグインに関しては人それぞれだと思います。

あなたが不便だと思うことを解決してくれるプラグインを作成する際に、記事の内容が参考になれば幸いです。

また、これまで作成した不動産管理プラグインの完成形は以下のGitHubに格納しています。
WordPressテーマのsingle-realestateなども格納しています。
上記以外にもクリックで次に向かうなどの機能も実装しているので興味があれば覗いてみてください。

https://github.com/Lotusxx/WordPress-/tree/main/Part3