WordPress

Custom Post Type UIを導入、カスタム投稿タイプで「お知らせ」を作成し一覧を表示させる方法

2016/09/17

WordPressで「Custom Post Type UI」を導入し、企業サイトなどでよく見かける「お知らせ」を作成しました。
投稿したお知らせの日付やタイトルを一覧化し、トップページに表示させる方法を備忘録としてポストします。

カスタム投稿タイプ(カスタムポストタイプ)とは

端的に言えば、自分で「投稿タイプ」をカスタマイズする機能。

もともと、Wordpressには「投稿(post)」と「固定ページ(page)」という投稿タイプが用意されています。それと同様に「ニュース」や「商品情報」専用のポストタイプを自分の手で作成できるという素敵機能です。

出来上がった「投稿タイプ」はpost、page同様WordPressのダッシュボードから登録・編集できるようになり、通常のブログ記事のように動的にテキスト・画像等が追加可能です。

Custom Post Type UIの導入

インストール

「Custom Post Type UI」で検索。

cpt_01

↑ 今すぐインストール → 有効化でインストール完了。

cpt_02

↑ インストールされると、左のメニューに 「CPT UI」メニューが追加されます。

日本語化

英語のままでも良いのですが、ひとまず日本語化します。

上記サイト様で公開されているファイルをダウンロード。

cpt_05b

↑ 圧縮ファイルを展開後、WordPressの wp-content/languages/plugins フォルダへアップロードします。

cpt_10

↑ 結果。ありがたや~。

「Custom Post Type UI」設定続き

cpt_03

「投稿タイプを追加」から、今回のネタの「ニュース」を作成します。
「基本設定」の以下3箇所が必須です。

投稿タイプスラッグ:半角英数字で指定。「news」
複数形のラベル:日本語可能。複数形とありますが、単数形のラベルと同じで構いません。「ニュース」
単数形のラベル:日本語可能。「ニュース」

toogieは基本的にここのみを設定して使っています。

cpt_04

↑ 左のメニューに、先ほど設定した「ニュース」が表示されればOK。

お知らせ(ニュース)の投稿

左メニューの「ニュース」から新規投稿画面に移動。
普通の固定画面作成画面とさほど変わりません。

cpt_06

↑ タイトル、本文を入力すると、URL(スラッグ)が「タイトル」と同じ日本語になっています。
これはなんだか気持ち悪い。

ということで対策します。

スラッグが日本語になるので、対策する

functions.php の一番下に以下内容を追記し、アップロード。

cpt_07

↑ アップロード後に再度ニュースを作成すると news/news-*** という形となります。
いい感じ。

お知らせ一覧をトップページ(ウィジェット)に表示する

作成したお知らせを、企業サイトの様にトップページに表示したいと思います。
今回はトップページにウイジェットを配置し表示させます。

PHP Code Widgetの導入

「PHP Code Widget」はその名の通り、ウィジェットにphpコードを書けるという代物。

ウィジェットではなく、投稿や固定ページにphpコードを書きたいって場合は「php code for post」というプラグインもあるので、そちらを使ってみても良いかもしれません。(←未確認)

cpt_08

「PHP Code Widget」で検索。今すぐインストール → 有効化でインストール完了。

cpt_09

トップページにウィジェットを配置します。

トップページにウィジェットを置けない場合の対策などは今回は省略。
なお、ビジネス向けのテーマですと、大概はトップページにウイジェットが配置できるようになっていると思われます。

日付,タイトル

日付とタイトルを表示する場合は上記内容を「PHP Code」へペースト。
cssなどは適宜編集してください。

cpt_11

↑ 結果。トップページにありがちな配置です。

タイトル, 本文

タイトルと内容を表示する場合は上記内容を「PHP Code」へペースト。
cssなどは適宜編集してください。

cpt_12

↑ 結果。見た目は微妙ですが、欲しい情報が表示されました。

企業サイトをWordPressで作成する際など、割りと使える機能ではないでしょうか。

小説 君の名は。 (角川文庫)

小説 君の名は。 (角川文庫)

新海 誠

価格 : 600円

     

-WordPress
-, , , , , , ,