WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた①
投稿日:2017年9月8日 更新日:
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」がなければ「新規追加」のところで探してみてください。
次に、
少し面倒かもしれませんが、あえて「メンバー登録」で使用するページを他の投稿ページとデザインを変更可能にするため、
【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自体を分けるという感じかな?(間違っていたらスミマセン 😥 )
ちょっと細かく説明しすぎたかもしれませんが、ご自身のサーバーやFTPソフトによって若干やり方が違うかもしれませんが、参考までに書きました。 😮
次に、
2.投稿タイプの追加のところで、アーカイブありのところを「False」から「True」に変更したので、
上記と同じく、少し面倒かもしれませんが、あえて「メンバー登録」で使用する一覧ページを他の投稿ページの一覧ページとデザインを変更可能にするため、
【content.php】というファイルをコピーして、【content-memberlist.php】というファイルを作成します。
※他の投稿ページの一覧と同じデザインでよければ、ここは飛ばしてください。
作成方法は、上記と同じようにして作ります。
おなじく下図のようなイメージで、左が「Twenty Sixteen」で、右がその他のテーマによくあるタイプで、archive.php自体を分けるという感じかな?(間違っていたらスミマセン 😥 )
これで、サイトに表示される「メンバー登録」専用のテンプレートファイルができました。
中身を少し変更しないと表示されなかったり、意図した感じにならないので、次は変更部分を説明します。
ひとりごと:せっかく見てくれている方もいるので、説明の省略は避けていきます。 😛
関連記事
-
-
WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …