WordPressとテーマSydneyでサイト構築05・Sydneyのカスタム投稿タイプを使う(Employees)

テーマSydneyの推奨プラグイン・Sydney Toolboxをインストール&有効化すると5つのカスタム投稿タイプが定義されます。それらを使わずに一ヶ月半経ちましたが、管理画面をみるたびに気になるんですよね、使っていないカスタム投稿タイプが左側に並んでいるのが。そこでどうにか使う策はないか考えてみました。

WordPress管理画面テーマSydneyのカスタム投稿

1.Sydneyのカスタム投稿タイプを自分たちの活動に当てはめてみた

カスタム投稿内容自分たちの活動要/不要
Services事業内容ウェブ制作、写真、コミケ…△(今後検討予定)
Employees従業員2名
Testimonialsお客様の声??不要
Clients取引先??不要
Projectsプロジェクトコミケで発表したもの

 

EmployeesとProjectsは使えそうなので、サイトに加えてみます。なお、Employeesについては以下では「メンバー」と呼び換えます。

加えて、ねこまんが on Tumblrも投稿とは別の投稿タイプにして、こちらに置きたいのですが、また別な機会に。

2.カスタム投稿の表示箇所を検討

これまでのサイトマップは以下の黒字部分。追加したいのは青字部分。

  • トップページ → プロジェクトのサムネイルを追加
    • 各プロジェクトの詳細ページへリンク
  • プロフィール → メンバーのサムネイルを追加
    • 各メンバーの詳細ページへリンク
  • お問い合わせ
  • 投稿

プロジェクトについては、Sydneyデモサイト同様に、トップの後方にサムネイル表示を追加し、サムネイルクリックで各プロジェクトの詳細ページへリンクするようにします(別記事に書きます)。

メンバーについては、元々プロフィールページを設けているので、そこにメンバーのサムネイル表示を追加し、サムネイルクリックで各メンバーの詳細ページへリンクするようにします(以下にまとめます)。

3.メンバー表示のために行ったこと

3-1.Employeesにメンバーを新規追加
  • Sydneyデモデータのemployeesを全て削除しました
  • メンバーを新規追加します
    テーマSydneyのEmployees一覧
  • 各メンバーに対して以下のように編集します
    • アイキャッチ画像を追加
    • 編集ページ下の方のINFOを設定
      テーマSydneyのEmployees詳細設定
    • メンバー詳細ページの内容を記載(3-2参照)
3-2.メンバー詳細はページビルダーで作成

各メンバーとも同じレイアウトになっていた方がよいかと思い、ページビルダーを使うことにしました(1メンバーでレイアウトを構築し、それを他のメンバーで読み込みたいので。既存ページと同じ部品を読み込むやり方は「ページビルダーの使い方」の2番目を参照)。今の状態では、固定ページと投稿のみページビルダーを使用する設定になっているため、設定>ページビルダーを選択し、EmployeesとProjectsでも使用できるようにします。

ページビルダーの設定

Employees詳細内容は、今は1行のみです(左にメンバーサムネイル、右に紹介文)。

  • 列をひとつ追加し、そこにウィジェットよりレイアウトビルダーを指定
    テーマSydneyのEmployeesのページ作成
  • レイアウトビルダーの中は、プロフィールという見出しの次に、左側に画像、右側にテキスト
    テーマSydneyのEmployeesページ設定例プレビューするとこんな感じ(中味はまだ書いていません…)。→このレイアウトを他のメンバーにも適用していきます。
    テーマSydneyのEmployeesページ例
3-3.固定ページのプロフィールページを変更

Sydneyデモサイトの場合は、トップページに以下のメンバー紹介(OUR TEAM)がありますが、このサイトの場合は、プロフィールページに設定します。

テーマSydneyのEmployeesデフォルト状態

固定ページ(プロフィール)を開き、最後に列を追加し、そこにウィジェットから「シドニーフロントページ:メンバー」を追加します。

aboutページにEmployeesを入れた状態

メンバーウィジェットを編集して、タイトルなどを設定します。

Employeesウィジェットの設定画面

①メンバー欄のタイトル
②表示するメンバー数:除外する人はいないので、-1
③メンバー欄の下にリンクボタンを入れたいときに指定
④メンバーをカテゴリー分けしてないので空欄
⑤メンバーが2名なので中央揃えにしたいのでチェックする

プロフィールページの最後にこんな風に表示されます。名前クリックでメンバー詳細にリンクします。

Employeesウィジェットで設定した状態

4.補足

4-1.メンバー全員を1ページに表示したい時は?

Sydneyのフォーラムに4人を1行に表示する方法というのがあります。紹介されている以下のCSSだと、4人表示できるようです。

.roll-team .owl-wrapper{
  width: 100% !important;
}

.roll-team .owl-item{
  width: 100% !important;
}

@media only screen and (min-width:981px){
  .roll-team .owl-item{
    width: 25% !important;
  }
}

昨日からメンバー欄を表示する対応をしていましたが、昨日は〈メンバーが少ない時に中央揃えにする〉をチェックしたにも関わらず、うまく行きませんでした。いろいろ探して、上述のフォーラムを見つけて、このコードをアレンジして25%を50%にして、2人を中央揃えで表示させていました、昨日は。記事を書くにあたり、CSSを削除して、チェックをして再度試したら中央揃えになったのでよしとしますが、設定が漏れていたのか?謎です。

4-2.Employeesのスラッグを変更

このままでもよいのですが、厳密に言うと「従業員」ではなく、「メンバー」なので、管理画面上はemployeesでもいいのですが、メンバー詳細ページのURLにemployeesが含まれているのが気になります。

SydneyのCode Snippetsに「Change CPTs slugs(カスタム投稿タイプのスラッグを変更)」というのがあったので、この方法を採用します。

function sydney_change_clients_slug() {
    return 'yournewslug';
}
add_filter('sydney_clients_rewrite_slug', 'sydney_change_clients_slug');
4-2-1.子テーマのfunctions.phpに以下を追加

employeesを変更したいので以下のように変更します。
また、employeesのスラッグをmembersに変更したいので、2行目の「yournewslug」を、membersにします。

function sydney_change_employees_slug() {
    return 'members';
}
add_filter('sydney_employees_rewrite_slug', 'sydney_change_employees_slug');

 

上記のコードを子テーマのfunctions.phpに追加することで、Employeesの各々の編集画面で表示されるURLのemployeesがmembersに変更されました。

スラッグをemployeesではなくmemberにした状態

また、編集画面最後のEmployee Linkもmembersにしておきます。

スラッグをemployeesではなくmemberにする

4-2-2.設定>パーマリンク設定で「変更を保存」ボタンを押す

パーマリンクを変更するわけではありませんが、設定>パーマリンク設定の画面から一番下の「変更を保存」ボタンを押して、リライトルールを保存します(以下の記事を参考にしました)。

カスタム投稿タイプのスラッグ設定は、WordPress 内部ではリライト ルールの新規追加になります。一度、管理画面の[設定]-[パーマリンク設定]を開かないと有効にならないため注意が必要です。
出典:WordPress カスタム投稿タイプを使うときの注意点