WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた① |

ワードプレス

WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作った方法を紹介したいと思います。

今回は、WordPressの公式テーマである「Twenty Sixteen」で作ってみました。

ちなみに、WordPressのバージョンは、4.8.1で説明します。

1.プラグインCustom Post Type UIをインストール

左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。

インストールの手順は省略します。

有効化すると下図のようにメニューに表示されます。

カスタム投稿

とりあえずこれでカスタム投稿が使えるように準備できました。

2.投稿タイプの追加

先ほどの左メニューにある「CPT UI」から投稿タイプの追加と編集をクリック

すると下図のような画面が出てくるので、まずは、基本設定の部分を入力していきます。

カスタム投稿

参考までに、投稿タイプスラッグは、【member】複数形のラベルは、【メンバー登録】にしました。

自分でわかりやすい文字にしてください。（同じでもいいです）

続いて、下図のように基本設定の下に出てくる「追加ラベル」っていう項目のところは何も入力しなくても大丈夫です。

カスタム投稿

次に出てくる「設定」の各項目について、下図で説明します。

プラグイン設定

基本的には、上図のように「True」や「False」でいいと思います。（デフォルトのまま）

変更する部分は、アーカイブありのところを「False」から「True」に変更

これによって、”メンバー一覧ページがありますよー”、言い方変えれば”メンバー一覧ページを作るので「True」にしますよー”ってこと

各項目の説明は、長くなって簡単に思えなくなるので省略します。

3.テーマの下準備を始めます

今回の説明で使用するテーマは、WordPress公式のテーマ「Twenty Sixteen」を使っています。

Twenty Sixteen

左メニューにある「外観」→「テーマ」→「Twenty Sixteen」を有効化してください。

※「Twenty Sixteen」がなければ「新規追加」のところで探してみてください。

次に、

少し面倒かもしれませんが、あえて「メンバー登録」で使用するページを他の投稿ページとデザインを変更可能にするため、

【content-single.php】というファイルをコピーして、【content-member.php】というファイルを作成します。

※他の投稿と同じデザインでよければ、ここは飛ばしてください。

作成方法について2通り挙げると、

A:①取得しているレンタルサーバーのサイトにログイン → ②FTPにログインします。 → ③ご自身が作成しているフォルダ名をクリック → ④その中にある「wp-content」フォルダをクリック → ⑤その中にある「themes」フォルダをクリック → ⑥その中にあるご自身のテーマ名のフォルダをクリック（今回の説明例だと「Twenty Sixteen」） → ⑦その中にある「template-parts」フォルダをクリック → ⑧その中にある「content-single.php」をクリックして中身を見る → ⑨中身をすべて選択してコピー → ⑩もう一度⑦のテーマフォルダに戻る → ⑪新規ファイル作成というのを見つけてクリック → ⑫コピーしたのを貼りつける → ⑬ファイル名を「content-member.php」にする → ⑭文字コードが「UTF-8」、ファイルの属性が「644」でいいと思いますので、確認したら保存してください。

B:①FTPソフトを開く → ②ご自身の作成するサイトのリモートサーバーに接続する → ③その中にある「wp-content」フォルダをクリック → ④その中にある「themes」フォルダをクリック → ⑤その中にあるご自身のテーマ名のフォルダをクリック（今回の説明例だと「Twenty Sixteen」） → ⑥その中にある「template-parts」フォルダをクリック → ⑦その中にある「content-single.php」を右クリックか編集タブのところで「コピー」をクリック → ⑧もう一度編集タブのところで「貼り付け」をクリック → ⑨作成されたコピーファイルの名前を「content-member.php」にする。

ちょっとややこしい話ですが、

「Twenty Sixteen」の構成は、個別投稿【single.php】の中に、【content-single.php】が入っていて、その部分を変えるとページの見え方も変わってきます。

下図のようなイメージで、左が「Twenty Sixteen」で、右がその他のテーマによくあるタイプで、single.php自体を分けるという感じかな？（間違っていたらスミマセン 😥 ）

投稿ページ