WordPressカスタム投稿機能でメンバー紹介のフォーマットを作る方法

wordpress-custom-post-type

WordPressの投稿機能だけだと紹介ページなどを作るのも一手間かかります。そこでデフォルトでもカスタム投稿タイプという機能があるのですが、そのまま使おうとするとphpを直接書き換える作業が多いので妥協しがちです。

今回はCPT UIとAdvanced Custom Fieldの2つのプラグインを使って楽に設定できるように進めていきます。

必要なプラグインをインストール、設定する

CPT UIとAdvanced Custom Fieldの2つのプラグインをインストール、有効化したらWordPress管理画面の左側にカスタムフィールドCPT UIというメニューが出てきます。こちらから準備を進めていきます。

CPT UI

CPT UIでつくるのはカスタム投稿タイプといって、カスタマイズされて投稿ページを作ります。WordPressデフォルトの投稿、固定ページの以下の特徴を踏まえているのですが

投稿機能→アーカイブ機能、カテゴリ、トップページと連動している機能
固定ページ→連動しない独自のページ、お問い合わせページなど

カスタム投稿タイプはこちらの2つを併せ持つ特徴があります。主にアーカイブ機能と独自のページを組み合わせて使いたいときにカスタム投稿タイプは使われることが多いですね。例えば店舗の登録などテンプレートがあった方が追加がしやすいケースなど好まれますのでクライアント業務でも多用されます。

使い方ですが、追加、編集をクリックして新しいカスタム投稿を作成していきますが主に触るのは3箇所です。

1.基本設定

  • 投稿タイプスラッグ:single-〇〇.phpの部分になります。英数字で書くようにします。
  • 複数形 単数形のラベル:管理画面で表示される名前です。

2.アーカイブをtrue

3.階層をtrue

続いてAdvanced Custom Fieldの設定をしていきます。

Advanced Custom FieldACF

Advanced Custom Field(以降ACF)とは投稿フォーマットに追加フォーマットを作れるプラグインです。テキスト、画像はもちろん、Google mapや関連記事なども設定できます。

設定方法は新規作成、追加したい内容を選んでいきます。

フィールドを追加して項目を増やしていく

最初は何も設定されていないので +フィールドを追加からフォーマットを追加していきます。

ひとつあたりの項目で設定できる部分です。

通常はフィールドタイプ、フィールド名、フィールドタイプだけ使えば問題ありません。

デフォルトの投稿フォーマットの表示、非表示を選ぶ

位置を変更するとコンテンツ部分のテキストエリア(本文を書くところ)を後ろに回すこともできます。店舗やメンバー紹介などのケースではコンテンツエディタ自体を非表示で良いかもしれません。そのかわり、一覧表示をトップ画面に持っていくときなどは本文の抜粋部分も非表示になってしまいますので気をつけます。

どの投稿タイプに紐づけるかを決める

カスタムフィールド最後の設定はルールです。どの投稿タイプに紐づけるかをきめていくのですが、CPT UIで設定しておいたカスタム投稿タイプのスラッグを選択します。これで管理画面上での紐づけは完了になります。

親テーマから該当phpファイルを子テーマに移植する

ここからはWordPress環境をアップロードしているサーバーでの作業になります。各種レンタルサーバーにログインしていただいてFTPからsingle.phpをダウンロードします。

レンタルサーバーでの作業

/wordpress/wp-content/themes/テーマ名/single.php

だいたいこのような構造になっていますのでダウンロードしていきます。そして名前をsingle-カスタム投稿タイプ名.phpと変更しておきアップしていきます。これで個別記事を読みにいったときにsingle.phpより優先してカスタム投稿タイプのsingle-カスタム投稿タイプ名.phpを読みにいくようになりました。

そしてWordPress子テーマのフォルダに移していきます。

子テーマの考え方は→子テーマを作ってWordPressの既存テーマをカスタマイズする方法を参考にしてみてください。

レンタルサーバーでの作業がよくわからない場合はサーバーにつなぐツールはcyberduckやFilezillaなどがMacですとつかいやすいかもしれません

cyberduckをエックスサーバーで設定する場合

*エックスサーバーの特徴はマルチドメイン、サブドメイン メールアドレス、FTPアカウント、全て無制限!です。そして2018年秋からはじまるGoogleアップデートでサイトの表示速度もユーザー体験に影響が出るかどうかの基準で評価対象となります。エックスサーバーは割高ですが表示速度の優秀さで取り戻してくれるようなコスパの高さです。

phpファイルにACFコードを書き込む

子テーマに無事single-カスタム投稿タイプ名.phpをアップロードできたら、single-カスタム投稿タイプ名.phpの表示させたい場所にACFコードを添付していきます。テキスト、画像やウィジェットなど用途に応じてコードも変わりますので参考サイトをみながら進めてみてください。基本はテキスト、テキストエリアと画像のコードをおさえておけば問題ないかと思います。

参考サイト:Advanced Custom Fieldsの出力

ACFの専用コードを該当phpに貼り付ける

*慣れないうちはclassを以下のような目印をつけておけば、表示エラーがでたときにもclass名だけは出力されます。

<div class=“”><?php the_field(‘フィールド名’,$post->ID); ?></div>

表示されたのを確認したらcss装飾で全体バランスを作って出来上がりです。

*【&lt;】 【&gt;】は特殊文字なので、それぞれ【三角かっこ】に置き換えて使用してください。