wordpress

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」を有効化してください。

「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 テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②

-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スクロールボタン

スクロールボタン コピペでできる

    WordPressでスクロールボタンを設置   php部分 <div class="scroll" href="#first- …

トグルメニュー

WordPressのメニューをおもしろくしてみた

    トグルメニュー(アコーディオンメニュー)の準備   WordPressのテーマに子テーマを作って、 そこで変更や追加をした方が安心安全なので以下の作業は子テーマを …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …