初級編:WordPressでカスタム投稿を使って新着情報を作る
: Posted on
動画でも解説してます！13分ほどの短い動画ですのでわかりやすい！
WordPress構築に欠かせないカスタムポスト。
今回は通常サイトなどでよく見られる”新着情報”をWordpressのブログ機能を使わずにカスタムポストで構築したいと思います。
(ブログではない記事はブログ機能を使用しないようにしましょう)
要件
一般的な企業サイトの要件です
- フロントページに表示
- 新着情報アーカイブページ(新着情報一覧ページ)がある
- [リンク先変更機能] リンク先を詳細ページか、別URLに設定できる
リンク先変更機能は結構需要があり、よく実装しています。例えば「XXをリリースしました！」という新着情報は詳細ページのリンクではない違うリンク先を設定したいはずです。
下準備
まずはプラグインのインストールです。`functions.php`にゴリゴリと書いても良いのですが、Wordpressの最大の特徴はプラグインの豊富さです。
入れすぎには注意が必要ですが今からご紹介するプラグインは、ほぼ必須のプラグインですので是非導入しましょう
プラグイン
Custom Post Type UI(以下CPT)
納品時に消したい場合はCPTからPHPをジェネレートし、そのPHPをfunctions.phpに書き込めばCPTを消してもOKです。
Advanced Custom Fields(以下ACF)
なんならPRO版の[Developer(1万円ぐらい)]を買ってもいいです。
これを持ってるか持ってないかで管理画面の使い勝手は全然変わります。
カスタムポスト(カスタム投稿)を作成
WordPress管理画面のメニュー
[CPT UI / 投稿タイプの追加と編集]
カスタムポスト(投稿タイプ)を作成しましょう
基本設定
基本設定を下記のように設定しましょう
- 投稿タイプスラッグ: news
- 複数形のラベル: 新着情報
- 単数形のラベル: 新着情報
追加ラベル
特に設定は必要ないと思います。
設定
アーカイブ設定
新着情報には一覧ページが必要ですのでアーカイブをTrueに変更
メニューアイコン
大事な項目です、これを設定するとお客様は喜んでくれます
とりあえず”dashicons-megaphone”に設定
アイキャッチの削除
新着情報にアイキャッチは特に必要ないと思いますので、チェックを外します。
投稿タイプを追加
全ての設定が完了したら画面下の[投稿タイプを追加]をクリックして完了しましょう
管理画面に下記のように新着情報が表示されればCPTの設定は完了です。
作成されたカスタムポストのPHP
https://gist.github.com/wadadanet/a18a225bf3e7a8a43f21f04aa0590720
↑をfunctions.phpに直接書けば、CPTをアンインストールしてもOKですが、開発途中ならアンインストールはまだ待ちましょう。
カスタムフィールドの設定
リンク先を設定できるようにカスタムフィールドを設定しましょう。
設定
タイトル
ここのタイトルは”投稿画面に表示される“タイトルですので”新着情報”とかではなく、”リンクの設定“など機能のタイトルにしましょう
新着情報の編集画面に”新着情報”というタイトル項目があるのは不自然ですので、それより”リンクの設定”と書いてあったほうが自然でわかりやすいと思います。
フィールドを追加
2つ追加します。
一つは有効・無効のボタン、もう一つは有効の場合のURLです。
フィールド[ リンク先 ]
- フィールドラベル: リンク先
- フィールド名: link-active
- フィールドタイプ: 真 / 偽
- スタイリッシュUI: はい
- On Text: 指定URL
- Off Text: 詳細ページ
*On/Offテキストの長さが違うと表示が変になります。
フィールド[ URL ]
- フィールドラベル: URL
- フィールド名: url
- フィールドタイプ: URL
- 条件判定: はい
[リンク先] [Value is equal to] [Checked]
位置(ルール)
表示されるのは新着情報だけに絞りましょう
ルール: [投稿タイプ] [等しい] [新着情報]
ここまで完了すれば、あとは[公開]をクリックして保存しましょう
PHP出力するとこんな感じです
https://gist.github.com/wadadanet/34554308b94e3ecbe4286adfd1521ea8
新着情報を書く
テスト用の新着情報を２つぐらい書きましょう
“リンク先なし”の新着情報
- タイトルを”リンク先なし”
- こちらは詳細ページに飛びますので、本文もしっかり書きましょう
“リンク先あり”の新着情報
- タイトルを”リンク先あり”
- 画面下[リンクの設定 / リンク先]を「指定URL」にクリックして切り替えてください
- URL項目が表示されるのでリンクしたいURLを入力して完了です。
- 本文は必要ないのですが、Googleなどに詳細ページが拾われる可能性があるので、リンク先のURLは貼っておきましょう
表示してみましょう!
実際に表示しましょう。
コツ
- 表示部分はフロントページと一覧ページで使うのでtemplate-partsフォルダに’item-news.php’ファイルを作る
- WP_Query, have_posts(), the_post()の流れは頻繁に使用するのでご使用のエディタのスニペット登録すると楽
- 今どきは'<?php echo ~’記述はやめて'<?=’を使いましょう
- item-news.phpの中にliタグを入れてますが、ちゃんとするなら外の方が良い
終わりに
文章にするとかなり長いですが、慣れると30分もあれば実装できるようになります。
特にカスタムポスト～カスタムフィールドの流れはアホほどします。慣れましょう
