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

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

関連記事

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …

div横並び

DIV横並びで回り込みも

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい! そんなことを思ったことがあると思います。(きっと 😛 ) いろんな方法がありますが、簡単にできる方法をご紹 …

ワードプレスにアメブロ

ワードプレスにアメブロ

  ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …

スマートスライダー

Smart Sliderのプラグインで画像に網掛け

  スライダー画像に網掛けをする   簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思い …