カスタム投稿を簡単に追加できるCustom Post Type UIを使って、ログインしている会員限定で表示する「お知らせ」専用の投稿ページを作成する方法です。
カスタム投稿タイプとは？
カスタム投稿タイプは、通常の投稿や固定ページ両方の性質を持つ投稿タイプです。
「投稿」は、動的なページで、ブログのように定期的に追加するページです。
「固定ページ」は、静的なページで、ホームページのように中身の更新はしても、ブログのように定期的に追加しないページです。
動的な性質と静的な性質を両方兼ね備えたものが、カスタム投稿タイプといえます。
例えば「お知らせ」や「Q&A」、会員制の投稿サイトならば会員のみに表示する「使い方マニュアル」などにも活用できます。
お知らせ・Q&A・マニュアル・用語集・商品紹介・etc... カスタム投稿タイプを追加するには、function.phpにコードを追加する方法もあるのですが、ソース編集に慣れていない人には難しい...
そんな方にピッタリのプラグインが、Custom Post Type UIです。
今回は、そんな便利なプラグインを使って、ログインしている会員だけに表示される「お知らせ」専用のカスタム投稿タイプの作成方法をご紹介しましょう。
注意事項
環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。
▼この記事の環境
- WordPress 4.5.1-ja
- STINGER 5
- Google Chrom
Custom Post Type UIのインストール
［プラグイン］→［新規追加］で、検索フィールドにCustom Post Type UIと入力して検索。
Custom Post Type UIの［今すぐインストール］をクリック。
インストールが完了したら［有効化する］をクリック。 サイドメニューにCPT UIが追加されていれば完了です。
Custom Post Type UIの設定
サイドメニューの［CPT UI］をクリックするとManage Post Typesが表示されます。
投稿タイプ名とラベルの入力
Add New Post Typeに必要事項を入力します。
※インストール直後は、まだカスタム投稿タイプがありませんのでAdd New Post Typeタブしか表示されません。
| Post Type Slug | 投稿タイプ名を入力 |
| Plural Lagel | ラベル名を入力 |
投稿タイプ名は、URLやソースに使用する名前です。
半角英数字で20文字以内、大文字やスペースは禁止で、WordPressのシステムがすでに使用している「post, page, attachment, revision, nav_menu_item」などと被らないようにしてください。
ラベル名は、サイドメニューに表示される名前です。
日本語でも問題ありません。わかりやすい名前をつけましょう。
単数形のラベルと説明は空欄でも問題ありません。（単数形のラベルは、英語の複数形と単数形を区別するためのラベルです。）
ここでは「お知らせ」のカスタム投稿を作るので、投稿タイプ名を「news」、ラベルを「お知らせ」というような感じで入力します。
Labelsは、各項目の表記を変えたい場合に入力します。空欄でも問題ありませんが気になる方はお好みで。
Settingsの設定
カスタム投稿タイプのスラッグ「news」ラベル「お知らせ」で、アーカイブ（一覧表）をブログのように表示させる設定は下記になります。
| Has Archive | False |
| カスタムリライトスラッグ | activity/news |
サポートとビルトイン分類はお好みで、他はデフォルトです。
設定が完了したら［Add Post Type］をクリック。
ちなみに、設定項目には下記の機能があります。
| 一般公開 | 一般ユーザー（訪問者）にカスタム投稿タイプのアーカイブを見られたくない場合はFalse。デフォルトはTrue。 |
| UIを表示 | 管理画面にカスタム投稿タイプを表示させたくない場合はFalse。デフォルトはTrue。 |
| Has Archive | アーカイブを表示したくない場合はFalse。デフォルトはTrue。 |
| Exclude From Search | ページ内検索から除外したい場合はTrue。デフォルトはFalse。 |
| 利用タイプ | 読み書き・削除権限を構成する設定。デフォルトはpost。 |
| 階層 | 固定ページのように親を設定して階層をもたせたい場合はTrue。デフォルトはFalse。 |
| リライト | パーマリンクのリライト設定。デフォルトはTrue。 |
| カスタムリライトスラッグ | カスタム投稿タイプのアーカイブページのURLは、通常「http://hogehoge.com/投稿タイプ名/」で、このフィールドに半角英数字で変更したい文字を入力すると「http://hogehoge.com/入力した文字/投稿タイプ名/」となります。 |
| With Front | WordPressの管理画面の設定のパーマリンク設定を利用する設定。デフォルトはTrue。 |
| クエリバージョン | 用途不明。デフォルトはTrue。 |
| メニューの位置 | 管理画面のサイドメニューの表示位置。5〜100で入力。「1」にするとダッシュボードの上に表示。デフォルト（空欄）は、サイドバーメニュー「外観」の上に追加される。 |
| Show in Menu | 管理画面のメニュー項目として表示したい場合に入力。Trueのままフィールドにリンク先ファイル名を入力。例）投稿メニュー内に表示したい場合「deit.php」。デフォルトはTrue。 |
| Menu Icon | アイコンを設定する場合にアイコンの絶対パスを入力。 |
| サポート | チェックを入れると投稿画面に表示される。 |
| Custom “Supports” | サポート項目をカスタマイズするための設定。コンマで区切った値を登録する。 |
| ビルトイン分類 | チェックを入れると投稿画面に表示されカスタム投稿タイプでも使えるようになる。 |
カスタム投稿タイプ用のファイル作成
ここで解説しているテーマは、STINGERです。
専用ファイルを作成しなくてもうまく表示されるらしいのですが、わたしの環境では思うように表示されませんでしたので、専用ファイルを作成しました。
必要なカスタム投稿タイプ用ファイルは、下記になります。
- archive-news.php
- itiran-news.php
- single-news.php
「news」の部分は、投稿タイプ名です。
FTPソフトで、テーマフォルダーの中に空のファイルを新規に作成します。
- /wp-content/themes/stinger5/archive-news.php
- /wp-content/themes/stinger5/itiran-news.php
- /wp-content/themes/stinger5/single-news.php
WordPressの管理画面で ［外観］→［テーマの編集］の順にクリック。
テンプレートメニューに３種類のファイルが表示されていればOKです。
テンプレートメニューの［アーカイブ（archive.php）］をクリック。
ソースを全選択してコピーします。
先ほど作成した テンプレートメニューの［archive-news.php］をクリック。
ソース枠内に先ほどコピーしたソースを貼り付けます。
ソースの「」 一覧 </h2>」の前に「お知らせ」と入力。
」 一覧 </h2>
↓
お知らせ」 一覧 </h2>
ソースの「<?php get_template_part('itiran');?>」の「itiran」を「itiran-news」に修正して［ファイルを更新］をクリック。
<?php get_template_part('itiran');?>
↓
<?php get_template_part('itiran-news');?>
テンプレートメニューの［itiran.php］をクリック。
ソースを全選択してコピーします。
先ほど作成した テンプレートメニューの［itiran-news.php］をクリック。
ソース枠内に先ほどコピーしたソースを貼り付けて［ファイルを更新］をクリック。
テンプレートメニューの［単一記事の投稿（single.php）］をクリック。
ソースを全選択してコピーします。
先ほど作成した テンプレートメニューの［single-news.php］をクリック。
ソース枠内に先ほどコピーしたソースを貼り付けます。
ぱんくずがうまく表示できるように、
<!--ぱんくず -->〜<!--ぱんくず -->までを選択して、下記のコードを貼り付けて［ファイルを更新］をクリック。
<!--ぱんくず -->
<div id="breadcrumb"><a href="<?php echo home_url(); ?>">ホーム</a> > <a href="/1/activity/news/">お知らせ</a> >
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>"> <?php echo get_page($parid)->post_title; ?></a> >
<?php } ?>
</div>
<!--/ ぱんくず -->
これで専用ファイルが完成しました。 投稿してみましょう。 サイドメニューの ［お知らせ］→［新規追加］で、投稿画面が開きます。
タイトルと本文を入力して［プレビュー］してみましょう。
ぱんくずの［お知らせ］をクリックして、こんな感じの一覧が表示されればOKです。
それぞれのアドレスは下記のようになります。
- ページのURL：http://ドメイン/activity/news/投稿タイトル
- アーカイブのURL：http://ドメイン/activity/news/
ただ、この状態では、メニューに表示しなくてもログインしていない人でもURLを知っている、もしくは検索エンジンから訪問した場合に表示されてしまいます。
そこで、会員限定でログインしている人だけが見えれるようにソースを追加します。
会員限定でログインしている人だけに表示する設定
アーカイブと投稿ページのソースに下記のソースを追加します。
- archive-news.php
- single-news.php
<?php if (is_user_logged_in()) : ?> 〜省略〜 <?php else : ?> このページは会員専用です。 ログインすると表示されます。 <?php endif; ?>
省略より上の１行は、ソース上部の「<main>」下に改行して追加。
省略より下の３行は、ソース下部の「</main>」の上に改行して追加。
「ログインすると表示されます。」の部分は、ログインしていない人に表示される文章です。
お好みで編集してください。
ソースを追加したら［ファイルを更新］をクリックして保存してください。
これで、ログインしている会員限定で表示されるカスタム投稿タイプの完成です。
めでたしめでたし。