WordPressでオリジナルWEBサイトを作ろう!vol.4

WordPressでオリジナルWEBサイトを作ろう!vol.4

こんにちは、システム開発部のmiwaです。
最近はWEB制作の前行程、ディレクションも担当するようになってきました。
デザイン〜WEB〜システム・・・・
幅広い知識を求められる職種。
先日、技術書が揃っている本屋に行って、ひえ〜〜!となっていました。
私が知っている範囲、たったのこれだけか・・・
まだまだ知らないことの多いWEBの世界の扉がたくさんあることを、日々実感しています。

そしてWEBの世界だけではない、ディレクションするには依頼内容の世界も理解しなければいけません。
ENJOYWORKSは、不動産・建築・飲食・宿泊・施設運営・まちづくり・・・最近はスクールなんかも。
本当に世界の幅が広いのなんの・・!

あ〜んど全体統括。
ここはやらないと進まないし、迷子になってしまうので、常に先読みしながら調整、調整。
知識も理解も統括も、なくても出来てしまうものかもしれない、けれどやらないと良いモノづくりには繋がらないと思っています。そこにちゃんとコミットできるよう、みんなの「やりたい」を実現できるように、日々邁進しています!

そんな中でもWEBの技術・知識の向上は、劣らないようにしていきたいですよね。
・・・ということで、
WordPressでオリジナルWEBサイトを作ろう!vol.4。
今回はカスタム投稿の設定を行なっていきますよ。

以前の記事はこちら!
>WordPressでオリジナルWEBサイトを作ろう!vol.1「ローカル環境構築編」
>WordPressでオリジナルWEBサイトを作ろう!vol.2「テーマ設定編」
>WordPressでオリジナルWEBサイトを作ろう!vol.3「下層ページ設定編」

ーーーーーーーーーーーーーーーーーーーーーーーーー
●WordPressのカスタム投稿を設定する3ステップ!
1.プラグインをダウンロード
2.フィールドを設定
3.phpファイルを設定
ーーーーーーーーーーーーーーーーーーーーーーーーー

前回は下層ページを表示できるように設定しました。今回は、カスタム投稿ページを動的に制御できるように設定をかけていきます。

1.プラグインをダウンロード
カスタム投稿ページを通常の投稿ページのように、独自フィールドを作成して、動的に処理できるようにしていきます。

「Advanced Custom Fields」
このプラグインは、WordPressの編集画面に必要に応じてフィールドを簡単に追加することができ、phpファイルにカスタムフィールド値を読み込んで表示することができます。https://ja.wordpress.org/plugins/advanced-custom-fields/

左メニューのプラグインから、「Advanced Custom Fields」を検索。今すぐインストールをして、有効化します。左メニューに「カスタムフィールド」という項目が追加されました!

2.フィールドを設定
左メニューに追加された「カスタムフィールド」から新規追加をクリック。
①フィールドグループ名を設定
例:SCHEDULE
今回はSCHEDULEページに必要な項目追加なので、わかりやすいようにこの名前にしました。

②タイトルとフィールドを設定します。
タイトルは項目名、フィールドは読み込むための設定名です。
例:
タイトル名を「タイトル」とした場合、
フィールド名を「title」とする(※読み込みデータなので英字です)

③フィールドタイプを選択
フィールドタイプはたくさん選択肢があります。
例:
今回はテキストを読み込みたいので「テキスト」を選択。
画像の場合は「画像」
投稿のようなエディタを呼び込みたい場合は「Wyswygエディタ」を選択肢ます。

④必須項目を設定
必須か必須じゃないか設定することが可能です。
必須にチェックをすると、入力がされていない場合は公開できない設定になります。

⑤位置を設定
各フィールドを追加していったら、最後に表示するページを設定します。
例:
投稿タイプ>等しい>ページを選択(今回はSCHEDULE)

全て完了したら、右上の「公開」ボタンを押します。
左メニューにあるカスタム投稿ページ「SCHEDULE」から新規追加を見てみましょう。
投稿フィールドが追加されました!
この投稿フィールドに、情報を入力しておきます。

3.phpファイルを設定
single-schedule.phpを開きます。

①表示する場所に先ほど設定したラベルを反映させて行きます。
<?php echo get_field(‘ラベル名’); ?>
を表示したい箇所に入れて行きます。

②画像は以下のように設定します。
<?php if( get_field(‘eyecatch’) ) { ?>
<img src=”<?php echo get_field(‘eyecatch’); ?>” />
<?php } ?>

③スケジュールの記事を見てみましょう。

スタイルが適用された状態で、表示できました!
これで、簡単に投稿することができますね。
更新頻度の高いページは、このようにカスタムフィールドを活用して行きましょう。

次回は、いよいよ終盤に入っていきます!
トップページのループ設定を行って行きます。
ではまた。

鎌倉に紅葉とお茶をしに行こう@樹ガーデン

一覧へ戻る

最新記事