とりあえず、やってみる

Webに関連する、自分にとっての重要な情報、役に立つ情報を載せていきます。

PR

お知らせ・更新情報の投稿記事をつくる(後編)

PHP
スポンサーリンク

カスタム投稿タイプ(WordPressの標準関数のひとつ)の作り方
ブログの記事投稿の他に、独立した、お知らせ・更新情報の記事投稿を、追加したい場合の作成手順。
作成手順の備忘録。
テーマのfunction.phpに直接PHPコードを記述して実行。

実行環境
PHP 8.1.22
MariaDB 10.5
WordPress 6.5
選択テーマ:Cocoon

●導入例
以下の感じで導入してみた。
通常の記事投稿の他に、更新情報を表示できるように追加してみた。

例1:通常の記事投稿の他に、
ウィジェットを使いカスタム投稿タイプ追加

例2:固定ページにカスタム投稿タイプ追加

前回は、カスタム投稿タイプの記事の編集画面の追加までの手順を掲載。
今回は、カスタム投稿タイプの記事作成後にサイトに表示するまでの手順を掲載。

スポンサーリンク

設定画面を開きPHPコードを記述する

前編にも掲載したが、ここで再度おさらい。

以下の手順で、設定画面を開きPHPコードを記述する準備をする。

WordPressでつくったサイトの設定画面を開く。
設定画面のメニューの「外観」 → 「テーマファイルエディタ」を選択。

「テーマを編集」画面が開いた事を確認し、
テーマファイルから「Theme Functions(function.php)」を選択。

「function.php」の編集・保存

前編にも掲載したが、ここの項目も再度おさらい。

編集画面の一番下の行から、PHPコードを追加記述していく。
PHPコードを追加記述したら、最後に左下の「ファイルを更新」を押して、ファイルを保存する。

「ファイルを更新」を押して、無事成功した場合、以下のメッセージが表示される。

「ファイルを更新」を押して、失敗(エラー)した場合、以下のメッセージが表示される。
エラー表示した場合、エラーした行が示されるので、編集画面のPHPコードを修正する。
修正後「ファイルを更新」を再度押して、保存する。

※ごく稀に、PHPコードを修正してエラーが解消されたにもかかわらず、「ファイルを更新」を押して保存しようとしても、保存できずに、再度エラー表示される場合がある。
その場合は、追加記述したPHPコードを一旦コピーする。
そして、ブラウザー画面を更新(F5ボタンを押す)。
PHPコードの追加記述前の画面に戻ってしまうが、そこで、コピーしたPHPコードを再度貼り付ける。
その後、改めて「ファイルを更新」を押すと、無事保存する事ができる。

カスタム投稿タイプを表示するショートコード作成

カスタム投稿タイプを使って作成・登録した投稿記事を、サイトに表示するためのPHPコードを作成していく。
編集画面の一番下の行から、PHPコードを追加記述。
まず、任意の名前を付けた関数を作成し、中にカスタム投稿タイプを出力するショートコードを作成する。
以下、記述例。

ウィジェット貼り付け用のショートコード作成

ウィジェット貼り付け用のショートコード作成。
ループ開始~ループ終了の箇所は、そのまま利用できるが、任意の編集が必要。

<?php // ← 「function.php」の編集画面から追加記述する場合、必要なし
//
// カスタム投稿タイプの出力(ウィジェット表示用)
function custom_post_type_output_01(){ // 任意の関数名
$args = array(
'post_type' => 'update-post',// カスタム投稿タイプの名前(スラッグ名) ※作成時に付けた名前
'posts_per_page' => 1, // 1ページあたりの表示件数(1件のみ出力)
);
$the_query = new WP_Query( $args ); // 情報の取得
if ( $the_query->have_posts() ) : // カスタム投稿タイプの記事が登録されているか判定
?>
<!-- ▼ カスタム投稿タイプに記事が登録済の場合の表示 ▼ -->
<h2>更新情報</h2><!-- ← 任意の編集箇所 -->
<ul style='list-style:none;'><!-- ← 任意の編集箇所 -->
<?php while ( $the_query->have_posts() ) :
// $the_query->the_post();
?>
<!-- ▽ ループ開始 ▽ --><!-- ↓ 任意の編集箇所 ↓ -->
<li>
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt(); ?></p>
<p style="text-align:right;"><?php the_date('Y.m.d'); ?></p>
</li>
<!-- △ ループ終了 △ --><!-- ↑ 任意の編集箇所 ↑ -->
<?php endwhile; ?>
</ul><!-- ← 任意の編集箇所 -->
<!-- ▲ カスタム投稿タイプに記事が登録済の場合の表示 ▲ -->
<?php
else:
?>
<!-- ▼ カスタム投稿タイプに記事が未登録の場合の表示 ▼ -->
<p>更新情報はありません。</p><!-- ← 任意の編集箇所 -->
<!-- ▲ カスタム投稿タイプに記事が未登録の場合の表示 ▲ -->
<?php
endif;
wp_reset_postdata(); // ループをリセット
}
// カスタム投稿タイプの出力(ウィジェット表示用)のショートコードの登録
// ショートコード「post_type_output_01」
add_shortcode('post_type_output_01', 'custom_post_type_output_01');

固定ページ貼り付け用のショートコード作成

固定ページ貼り付け用のショートコード作成。
ループ開始~ループ終了の箇所は、そのまま利用できるが、任意の編集が必要。

<?php // ← 「function.php」の編集画面から追加記述する場合、必要なし
//
// カスタム投稿タイプの出力(固定ページ表示用)
function custom_post_type_output_02(){ // 任意の関数名
$args = array(
'post_type' => 'update-post',// カスタム投稿タイプの名前(スラッグ名) ※作成時に付けた名前
'posts_per_page' => -1, // 1ページあたりの表示件数(全件出力)
);
$the_query = new WP_Query( $args ); // 情報の取得
if ( $the_query->have_posts() ) : // カスタム投稿タイプの記事が登録されているか判定
?>
<!-- ▼ カスタム投稿タイプに記事が登録済の場合の表示 ▼ -->
<ul style='list-style:none;'><!-- ← 任意の編集箇所 -->
<?php while ( $the_query->have_posts() ) :
// $the_query->the_post();
?>
<!-- ▽ ループ開始 ▽ --><!-- ↓ 任意の編集箇所 ↓ -->
<li>
<a href='<?php the_permalink(); ?>'>
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
<p style="text-align:right;"><?php the_date('Y.m.d'); ?></p>
</a>
</li>
<!-- △ ループ終了 △ --><!-- ↑ 任意の編集箇所 ↑ -->
<?php endwhile; ?>
</ul><!-- ← 任意の編集箇所 -->
<!-- ▲ カスタム投稿タイプに記事が登録済の場合の表示 ▲ -->
<?php
else:
?>
<!-- ▼ カスタム投稿タイプに記事が未登録の場合の表示 ▼ -->
<p>更新情報はありません。</p><!-- ← 任意の編集箇所 -->
<!-- ▲ カスタム投稿タイプに記事が未登録の場合の表示 ▲ -->
<?php
endif;
wp_reset_postdata(); // ループをリセット
}
// カスタム投稿タイプの出力(固定ページ表示用)のショートコードの登録
// ショートコード「post_type_output_02」
add_shortcode('post_type_output_02', 'custom_post_type_output_02');

ショートコードをウィジェットまたは固定ページに貼り付け

ショートコードをウィジェットに貼り付け

ウィジェットの設定画面を開く。
設定画面のメニューの「外観」 → 「ウィジェット」を選択。

次にショートコード貼り付け用のウィジェットを設定する。
まずブロックを、ドラッグ&ドロップする。

ブロックをドラッグ&ドロップ後、ブロックの右側をクリック。

ブロックの編集画面にショートコードの
[ post_type_output_01 ]を記述。
そして「保存」ボタンをクリックし、情報を保存。

ショートコードを固定ページに貼り付け

固定ページの設定画面を開く。
設定画面のメニューの「固定ページ」 → 「新規固定ページを追加」を選択。

新規固定ページを作成。
固定ページのタイトル、パーマリンク(固定URL)、固定ページの編集画面にショートコードの
[ post_type_output_02 ]を記述。
そして「公開」ボタンをクリックし、サイト上にページを追加・情報を保存。

作成した固定ページにすぐアクセスできるよう、メニューに追加する。
設定画面のメニューの「外観」 → 「メニュー」を選択。

次に、作成した固定ページ「更新情報一覧」にチェックを入れる。
「メニューに追加」ボタンをクリック、そして「メニューを保存」ボタンをクリックして登録する。

これで、サイト上に、カスタム投稿タイプの記事を表示するための外枠部分が完成した。
次にコンテンツ(投稿記事)を作成して、実際にサイト上に表示できるように準備する。

カスタム投稿タイプの編集画面から投稿記事を追加

カスタム投稿タイプの設定画面を開く。
設定画面のメニューの「更新情報」 → 「新規追加」を選択。

更新情報の編集画面から投稿記事を作成。
更新情報のタイトル、パーマリンク(固定URL)、更新情報の編集画面に情報を記述。
そして「公開」ボタンをクリックし、サイト上にページを追加・情報を保存。

表示確認用に、更新情報の記事をもうひとつ分、追加作成。
更新情報の編集画面から投稿記事を作成。
更新情報のタイトル、パーマリンク(固定URL)、更新情報の編集画面に情報を記述。
そして「公開」ボタンをクリックし、サイト上にページを追加・情報を保存。

設定画面のメニューの「更新情報」をクリックし、更新情報の記事が複数登録されている事を確認。

カスタム投稿タイプの投稿記事が表示されたか確認

ウィジェット設定分の表示確認

サイトのホーム画面を表示。
ウィジェット部分にカスタム投稿タイプの投稿記事が表示されている事を確認。
投稿記事を複数登録しているが、最新の記事のみ表示している事を確認。

固定ページ設定分の表示確認

次に、固定ページ「更新情報一覧」を表示。
設定したパーマリンク経由(固定URL入力)、またはメニューからアクセスして表示する。
固定ページにカスタム投稿タイプの投稿記事が表示されている事を確認。
投稿記事を複数登録しているが、すべての記事が表示されている事を確認。

個別の投稿記事の表示確認

固定ページに表示されている投稿記事をクリックした場合、個別の投稿記事のページが表示されるか確認する。

固定ページ「更新情報一覧」の「更新情報01」の投稿記事をクリックした場合、以下の個別の投稿記事のページが表示される事を確認。

固定ページ「更新情報一覧」の「更新情報02」の投稿記事をクリックした場合、以下の個別の投稿記事のページが表示される事を確認。

カスタム投稿タイプを使った機能の追加、記事作成・出力までの流れを記載する事ができた。
これで、ブログの記事投稿の他に、独立した、お知らせ・更新情報の投稿記事を表示できるようになった。

以上

コメント

タイトルとURLをコピーしました