初級編:WordPressでカスタム投稿を使って新着情報を作る
: Posted on
動画でも解説してます！13分ほどの短い動画ですのでわかりやすい！
WordPress構築に欠かせないカスタムポスト。今回は通常サイトなどでよく見かける”新着情報“をWordpressのブログ機能を使わずに構築したいと思います。
(ブログではないサイトはブログ機能を使用しないようにしましょう)
要件
- フロントページに表示
- 新着情報アーカイブページ(新着情報一覧ページ)がある
- [リンク先変更機能] リンク先を詳細ページか、別URLに設定できる
リンク先変更機能は結構需要があり、よく実装しています。
例えば「XXをリリースしました！」という新着情報に詳細ページは必要なく、リンク先はXXのページに設定したいはずです。
下準備
まずはプラグインのインストールです。functions.phpにゴリゴリと書いても良いのですが、Wordpressの最大の特徴はプラグインの豊富さです。入れすぎには注意が必要ですが今からご紹介するプラグインは開発にあたりほぼ必須のプラグインですので是非導入しましょう
プラグイン[Custom Post Type UI(以下CPT)]をインストールする
Custom Post Type UI
functions.phpの中にカスタムポスト宣言をしても良いのですが、CPTを使ったほうが楽です。
納品時に消したい場合はCPTからPHPをジェネレートし、そのPHPをfunctions.phpに書き込めばCPTを消してもOKです。
プラグイン[Advanced Custom Fields(以下ACF)]をインストールする
Advanced Custom Fields
なんならPRO版の[Developer(1万円ぐらい)]を買ってもいいです。
これを持ってるか持ってないかで管理画面の使い勝手は全然変わります。
PRO版: https://www.advancedcustomfields.com/pro/
カスタムポストを作成
WordPress管理画面のメニューから[CPT UI]->[[投稿タイプの追加と編集]をクリックしてカスタムポスト(投稿タイプ)を作成しましょう
基本設定
基本設定を下記のように設定しましょう
- 投稿タイプスラッグ: news
- 複数形のラベル: 新着情報
- 単数形のラベル: 新着情報
追加ラベル
特に設定は必要ないと思います。
設定
アーカイブ設定
新着情報には一覧ページが必要ですのでアーカイブをTrueに変更
メニューアイコン
大事な項目です、これを設定するとお客様は喜んでくれます
とりあえず”dashicons-megaphone”に設定
アイキャッチの削除
新着情報にアイキャッチは特に必要ないと思いますので、チェックを外します。
投稿タイプを追加
全ての設定が完了したら画面下の[投稿タイプを追加]をクリックして完了しましょう
管理画面に下記のように新着情報が表示されればCPTの設定は完了です。
作成されたカスタムポストのPHP
https://gist.github.com/wadadanet/a18a225bf3e7a8a43f21f04aa0590720
↑をfunctions.phpに直接書いたら実はCPT UIをインストールする必要はなかったりします–;
カスタムフィールドの設定
リンク先を設定できるようにカスタムフィールドを設定しましょう。
設定
タイトル
タイトルは”新着情報”とかではなく、”リンクの設定“など機能のタイトルにしましょう
理由としては、ここのタイトルは”投稿画面に表示される“からです。
新着情報の編集画面の項目に”新着情報”という項目があったら変で、それより”リンクの設定”と書いてあったほうが自然でわかりやすいと思います。
フィールドを追加
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分もあれば実装できるようになります。
特にカスタムポスト～カスタムフィールドの流れはアホほどします。慣れましょう
