Wordpress

初級編:WordPressでカスタム投稿を使って新着情報を作る

動画でも解説してます!13分ほどの短い動画ですのでわかりやすい!

https://youtu.be/3w6xzNXDOgo

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万円ぐらい)]を買ってもいいです。
これを持ってるか持ってないかで管理画面の使い勝手は全然変わります。

PRO版: https://www.advancedcustomfields.com/pro/

カスタムポスト(カスタム投稿)を作成

cpt 設定
管理画面[CPT UI]->[投稿タイプの追加と編集]
WordPress管理画面のメニュー

[CPT UI / 投稿タイプの追加と編集]

カスタムポスト(投稿タイプ)を作成しましょう

基本設定

cpt設定

基本設定を下記のように設定しましょう

  • 投稿タイプスラッグ: news
  • 複数形のラベル: 新着情報
  • 単数形のラベル: 新着情報

追加ラベル

特に設定は必要ないと思います。

設定

アーカイブ設定
CPT 設定
Trueに変更

新着情報には一覧ページが必要ですのでアーカイブをTrueに変更

メニューアイコン
アイコン設定

大事な項目です、これを設定するとお客様は喜んでくれます

とりあえず”dashicons-megaphone”に設定

アイキャッチの削除
サポートの設定
チェックを取る

新着情報にアイキャッチは特に必要ないと思いますので、チェックを外します。

投稿タイプを追加
新着情報管理画面

全ての設定が完了したら画面下の[投稿タイプを追加]をクリックして完了しましょう

管理画面に下記のように新着情報が表示されればCPTの設定は完了です。

作成されたカスタムポストのPHP

https://gist.github.com/wadadanet/a18a225bf3e7a8a43f21f04aa0590720

↑をfunctions.phpに直接書けば、CPTをアンインストールしてもOKですが、開発途中ならアンインストールはまだ待ちましょう。

カスタムフィールドの設定

AFC画面
[カスタムフィールド / 新規追加]

リンク先を設定できるようにカスタムフィールドを設定しましょう。

設定

タイトル

ここのタイトルは”投稿画面に表示される“タイトルですので”新着情報”とかではなく、”リンクの設定“など機能のタイトルにしましょう

新着情報の編集画面に”新着情報”というタイトル項目があるのは不自然ですので、それより”リンクの設定”と書いてあったほうが自然でわかりやすいと思います。

フィールドを追加

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

新着情報を書く

新着情報の追加
[新着情報] -> [新規追加]

テスト用の新着情報を2つぐらい書きましょう

“リンク先なし”の新着情報

  • タイトルを”リンク先なし”
  • こちらは詳細ページに飛びますので、本文もしっかり書きましょう

“リンク先あり”の新着情報

  • タイトルを”リンク先あり”
  • 画面下[リンクの設定 / リンク先]を「指定URL」にクリックして切り替えてください
  • URL項目が表示されるのでリンクしたいURLを入力して完了です。
  • 本文は必要ないのですが、Googleなどに詳細ページが拾われる可能性があるので、リンク先のURLは貼っておきましょう
設定画面

表示してみましょう!

実際に表示しましょう。

コツ

  • 表示部分はフロントページ一覧ページで使うのでtemplate-partsフォルダに’item-news.php’ファイルを作る
  • WP_Query, have_posts(), the_post()の流れは頻繁に使用するのでご使用のエディタのスニペット登録すると楽
  • 今どきは'<?php echo ~’記述はやめて'<?=’を使いましょう
  • item-news.phpの中にliタグを入れてますが、ちゃんとするなら外の方が良い

終わりに

文章にするとかなり長いですが、慣れると30分もあれば実装できるようになります。

特にカスタムポスト~カスタムフィールドの流れはアホほどします。慣れましょう

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ