【WordPress】カスタム投稿タイプの設定と記事の一覧を1枚のページ上に表示させる具体的手順(最低限の設定をコピペだけでできる)

サッスー

管理人サッスー

 

先日サッスーは、ライブドアブログからWordpressに移行した。

 

データの移動、データベースの移行、その他諸々大変だったが、

その結果、エンジニアとしての技術をもっと磨いていこうという

モチベーションにつながったので結果的にはやってみて良かったと思う。

 

1.サッスーの場合

ちなみに、Wordpressを使ってブログやホームページを作っている人は多数いると思うが、
基本的なWordpressの構成は以下の2種類だと思う。

 

・日々の記事を表示させるトップページ
・情報を表示する固定ページ

 

※たとえば、お店なら

日々の記事 → お知らせ、プレスリリースなど

固定ページ → 商品、サービス紹介など

になるのかな。

 

 

サッスーの場合は、サイトを更新していくうちに
日々の「記事」を表示するトップページの他に、
日々の「日記」を表示させる別ページが欲しくなった。
且つ、「記事」と「日記」を混ぜたくなかった。

 

当初は別ブログを立てて、
そっちに日記を書けばいいかと思ったが、管理が面倒くさい(笑)
それに性格的に3日坊主だから
すぐに止めてしまうだろうことが安易に想像がついた。

 

そこでいろいろ調べていたら「カスタム投稿タイプ」という機能が
WordPressについていることが分かった。

 

 

で、サッスーがやりたいことは以下。

 

1.記事とは別に日記ページを作りたい
2.その日記は、ほぼ毎日更新する(まあ、毎日更新は無理だと思いますが・・・)
3.トップページと同じように、日記のトップページを作り、10個の日記を一覧表示する。
4.長い日記は続きを読むボタンをクリックすれば、個別の日記ページに移り、日記を全部読むことができる

この4つの要件だけ。
初心者である現時点では、それ以外は不要。
(今のところ、やったところでSEO効果とかゼロだと思うし)

逆に言うと、これだけやれればいい。

しかし、調べたらこの要件を満たす具体的な手順を教えてくれるページがない!

 

確かに検索するとたくさんのサイトが出てくるが、
タクソノミーとかプラグインとか、複雑なキーワードがたくさん出てきて(笑)、
エンジニアのサッスーもさっぱり分意味不明な状態(笑)
一応、仕事でちょっとプログラムを組んだり、
趣味でPHPの勉強しているけど、本当分からない(笑)

サッスー

あとは、断片的な情報しか載ってなくて
functions.php の書き方とか載っているけど、
たとえば、じゃあどうやって最新の日記を10個を
日記専用のページに表示させるの?とか。

 

ということで、サッスーが一念発起して、
WordPress初心者でも最低限、上の4つの要件を満たす、
カスタム投稿タイプの具体的な設定手順を作ってみることにした。

前置きが長くなったけど、サッスーと同じ境遇のWordpress初心者はたくさんいると思う。
※ちなみにサッスーはWordpress初心者であるとともに、HTML&CSSの初心者でもある。

※何も難しいことは考えずに、上から順番にやってください!

 

2.設計をする

サッスーの場合は、別途日記を書きたかっただけなので、

 

・日記を書くページ
・カスタム投稿タイプ用のカテゴリは不要
・日記を書くページのレイアウトは、記事を書くページと同じで構わない
・他の機能は不要
・トップのメニューに「サッスーの日記」のリンクを入れ、そのリンクをクリックすると
 トップページの記事と同じように日記が10個表示される。

 

これだけでOK。

 

 

3.functions.phpに追記する(最低限これだけでOK)

次に、WinSCPとかFFFTPとかのアプリを使って

functions.phpファイルを開き、
場所は上の方でも下の方でもどこでもいいので、

 

<?php


?>

 

の枠内に、以下を参考にしながら、ちょっと編集してfunctions.phpにコピペする。

 

 

//********* カスタム投稿タイプ ここから **************

function add_mytype() {
register_post_type(‘diary’, array( //日記なので『diary』にした
‘label’ => ‘サッスーの日記’, //投稿ページの名前
‘menu_position’ => 10, //メニューの位置。メディアの下に『サッスーの日記』を表示したい
‘public’ => true,
‘supports’ => array(
‘title’,
‘editor’,
‘thumbnail’), //アイキャッチ画像を表示
‘has_archive’ => true,
‘rewrite’ => true
));
}
add_action(‘init’, ‘add_mytype’); //カスタム投稿タイプを表示させる。

 

//********* カスタム投稿タイプ ここまで **************

 

 

こんな感じで

wordpress

※上に関する詳細な解説

・register_post_type 

カスタム投稿タイプを登録する関数

第一引数(register_post_type(‘diary’, array)の’diary’のこと)に、

カスタム投稿タイプ名を指定する。
サッスーの場合は日記なので、単純に「diary」にした。
たとえば、商品紹介ページとかなら「products」とかになるのかな?

 

 

 

・label

カスタム投稿タイプの名前を指定する。
ここで指定した名前が、ウィンドウ左端に表示される。
たとえば、サッスーの場合は、『サッスーの日記』というメニューが表示される。

 

wordpress_01

 

・menu_position

カスタム投稿タイプのメニューを表示する場所を指定する。
ちなみに、
5 → 投稿の下に表示される
10 → メディアの下に表示される           

 

wordpress_01

 

・public

管理画面からコンテンツ(記事・日記)を入力する場合は「true」にする。
例えば、アプリ経由でコンテンツを自動投稿するだけなら「false」でも不便はない。

 

 

・supports

カスタム投稿タイプの編集/新規作成ページに表示する入力欄を指定する。

例えば、
title → タイトル入力欄が表示される
editor → コンテンツ(記事・日記など)入力欄が表示される。
thumbnail → アイキャッチ画像登録欄が表示される。

 

wordpress_02

・has_archive

これを「true」にするとアーカイブページを持つことができる。
例えば、サッスーの場合は、

 

http://seiko.go-journey.net/archives/diary

 

がアーカイブページになる。

 

※なぜ、http://seiko.go-journey.net/diaryではなく、途中に「archives」が入っているのか?

理由は、サッスーのサイトはライブドアブログからWordpressに引っ越した。
その時に、ライブドアブログのURL形式を引き継いだので、
パーマリンクをカスタム構造にして、間に「archives」のディレクトリを入れている。
だから、

http://seiko.go-journey.net/archives/diary

になっている。

ちなみに、ライブドアブログのURLは、http://xxx.com/archives/xxxxという構成である。

 

 

・rewrite

上記の「has_archive」でほとんど説明してしまったが、
ここを「true」にすると、パーマリンク設定で指定したようにまとめてくれる。

サッスーのサイトの場合は、
カスタム投稿タイプ名は「diary」なので

 

http://seiko.go-journey.net/archives/diary

 

になる。

理由は上で述べた通り。

 

 

 

4.パーマリンク設定の「変更を保存」をクリック

 

上記のカスタム投稿タイプの関数を functions.php に貼り付けて保存したら、
メニューより「パーマリンク設定」をクリックして
そのまま「変更を保存」ボタンをクリックする。

※理由は、この「変更を保存」ボタンをクリックしないと、
上記で設定した「rewrite」の設定が反映されないからである。

 

 

5.メニューに登録

最後にサイトの上にあるメニューから「サッスーの日記」をクリックしたら

 

http://seiko.go-journey.net/archives/diary

にアクセスできるようにメニューに登録する。

 

具体的には、ダッシュボードのメニューより「外観」-「メニュー」をクリック。

「カスタムリンク」をクリックして、

 

URL:http://seiko.go-journey.net/archives/diary

リンク文字列:サッスーの日記

 

を登録して、メニューに追加して「メニューを保存」をクリックする。

これでサイトの上のメニューに反映される。

 

※以上が手順ですが、もし手順通りに実行してうまく行かなかったらコメントをください。

 

6.ほかにもやりたいこと

ちなみに、他にもやりたいこと
・スマホ用のメニュー
・コメント欄をちゃんとする
・相互リンク・相互RSSをもっと増やす

コメントを残す

メールアドレスが公開されることはありません。