SlideShare a Scribd company logo
カスタムフィールドを使って
ハッピーになろう!!!
2015年6月24日
松戸WordPress部
写真素材ぱくたそ
https://www.pakutaso.com
名前 三柴 誠一郎
出身 愛媛県
拠点 千葉県松戸市
趣味 カメラ、 旅、 料理、 滝めぐり、宅飲み
特徴 絶望的に方向音痴
自己紹介 高知城(鷹城)
彦根城(金亀城)
タコスパーティー
焼き鳥パーティー
経歴
 1996年にIT会社へ入社。業務システムの企画・構築・運用等の
 経験を経て2014年からフリーランスとして活動中。
活動
 松戸でWordPressに関するセミナーを運営
  【Facebook】 https://www.facebook.com/groups/wordpress.banana.cluster/
  【Doorkeeper】 https://wpmatsudo.doorkeeper.jp/
経歴・活動
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
WordPressの入力画面
入力項目は「タイトル」と「本文」
とってもシンプル
でもだいたいのサイトって
決まった項目・形式で入力する
ページがあるはず
不動産サイト

物件ページ・・・外観イメージ、広さ、価格

飲食店サイト

 メニューページ・・・食品イメージ、料理名、価格、カロリー
美容院サイト

 スタッフページ・・・スタッフ写真、名前、趣味
などなど。。。
たとえば・・・
テキストエディタやHTMLタグで
繰り返し書いて行くのは
結構手間じゃないですか?
そんな時は
カスタムフィールドを使うと
ハッピー!
写真素材ぱくたそ
https://www.pakutaso.com
カスタムフィールドは
WordPress の
基本機能にある
固定(投稿)ページの
入力画面に表示される
カスタムフィールドを使ってハッピーになろう
・・・よく解らない
そんな時は
プラグインを使うと
ハッピー!!
写真素材ぱくたそ
https://www.pakutaso.com
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
よく使われているだろう
プラグイン3選!
Advanced Custom Fields
Smart Custom Fields
Custom Field Suite
基本情報
Advanced Custom Fields
(ACF)
Smart Custom Fields
(SCF)
Custom Field Suite
(CFS)
最新バージョン 4.4.2 1.4.0 2.4.3
最新更新日 2015-5-20 2015-4-29 2015-5-13
要件 3.5.0 以降 3.9 以降 3.8 以降
ダウンロード数 3,537,173 3,331 135,410
インストール数 900,000+ 1,000+ 20,000+
作者 elliotcondon さん Takashi Kitajima さん Matt Gibbs さん
MW WP Form の作者さん
※2015年6月24日調べ
スクリーンショット
フィールド部
Advanced Custom Fields
フィールド部
入力フォームで表示される
ラベルやタイプ(テキストと
かイメージとか)を設定。
Advanced Custom Fields オプション部
表示するページタイプ(固定とか
投稿とか)や表示位置を設定。
Smart Custom Fields フィールド部
Smart Custom Fields オプション部
Custom Field Suite フィールド部
Custom Field Suite オプション部
フィールドタイプ
Advanced Custom Fields
(ACF)
Smart Custom Fields
(SCF)
Custom Field Suite
(CFS)
フィールドタイプ
基本
テキスト
テキストエリア
数値
メール
パスワード
Content
Wysiwygエディタ
画像
ファイル
選択肢
セレクトボックス
チェックボックス
ラジオボタン
真偽
Relational
ページリンク
投稿オブジェクト
関連
タクソノミー
ユーザー
Jquery
Google Map
デイトピッカー
カラーピッカー
レイアウト
メッセージ
タブ
(繰り返し)
基本フィールド
真偽値
テキスト
テキストエリア
選択フィールド
チェックボックス
ラジオボタン
セレクトボックス
コンテンツフィールド
ファイル
画像
WYSIWYG
その他フィールド
カラーピッカー
日付ピッカー
リレーション
単一行テキスト
テキストエリア
リッチエディタ
ハイパーリンク
日付フォーマット
カラーピッカー
真/偽
セレクトボックス
関連ポスト
ユーザー
ファイルのアップロード
ループ
タブ
Advanced Custom Fields
フィールド部
基本
テキスト
テキストエリア
数値
メール
パスワード
Advanced Custom Fields
フィールド部
Content
Wysiwygエディタ
画像
ファイル
Advanced Custom Fields
フィールド部
選択肢
セレクトボックス
チェックボックス
ラジオボタン
真偽
Advanced Custom Fields
フィールド部
Relational
ページリンク
投稿オブジェクト
関連
タクソノミー
ユーザー
Advanced Custom Fields
フィールド部
Jquery
Google Map
デイトピッカー
カラーピッカー
Advanced Custom Fields
フィールド部
レイアウト
メッセージ
タブ
Smart Custom Fields
基本フィールド
真偽値
テキスト
テキストエリア
選択フィールド
チェックボックス
ラジオボタン
セレクトボックス
Smart Custom Fields
コンテンツフィールド
ファイル
画像
WYSIWYG
その他フィールド
カラーピッカー
日付ピッカー
リレーション
Smart Custom Fields
繰り返し
Custom Field Suite
単一行テキスト
テキストエリア
リッチエディタ
Custom Field Suite
ハイパーリンク
日付フォーマット
カラーピッカー
真/偽
セレクトボックス
Custom Field Suite
関連ポスト選択
ユーザー
ファイルのアップロード
Custom Field Suite
ループ
タブ
どれが簡単?
どれが便利?
写真素材ぱくたそ
https://www.pakutaso.com
① カスタムフィールドを作成する
② テンプレートファイルを編集する

 ※カスタムフィールドが表示されるようにする
③ ページを作成する(カスタムフィールドに値を入力)
④ ページを表示して確認する
基本的な使い方は同じ
ここでの書き方がプラグイン
によって少し違ってくる
サイト内容にあったもの?
でも実際に使ってみて
まずは自分の好みを
見つけてみよう
そうすれば
ハッピー!!
写真素材ぱくたそ
https://www.pakutaso.com
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
ハンズオンの流れ
① プラグインを導入する
② カスタムフィールドを作成する
③ ページを作成する
④ テンプレートファイルを編集する
⑤ ページを表示する
① プラグイン⇒新規追加
② プラグインの検索に Custom Field Suite を入力
③
プラグインを導入する
クリック
カスタムフィールドを作成する
名前ラベル フィールドタイプ
ドラッグして
ループ内に移動
配置ルールの投稿タイプでpageを指定
ページを作成する(例)
項目 値
ショップ情報 新松戸バナナ肉店
商品リスト (ループ行)
商品名 バナナハンバーグ
販売開始日 2015-06-25
商品イメージ -
商品名 バナナ肉
販売開始日 2015-07-01
商品イメージ -
フィールドの値を取得する

 <?php echo CFS()->get('フィールド名'); ?>
ループフィールドの値を取得する

 <?php

  $loops = CFS()->get('ループフィールド名');

  foreach ( $loops as $loop ) {

   echo $loop['フィールド名'];

  }

 ?>
カスタムフィールドの値を取得する
Custom Fields Suits の場合
テンプレートファイルを編集する(例)
<dl>
<dt>店舗名:<?php echo CFS()->get('shop'); ?></dt>
 <?php
 $loops = CFS()->get('goods-loop');
 foreach ( $loops as $loop ) {
 echo '<dd>' . wp_get_attachment_image( $loop['image'] ) . '</dd>';
 echo '<dd>商品名:' . $loop['goods'] . '</dd>';
 echo '<dd>販売開始日:' . $loop['date'] . '</dd>';
  }
?>
</dl>
表示させたい箇所に以下を記入 Twenty Fifteen の場合
content-page.php の22行目
<?php the_content(); ?> の下あたり
ページを表示する
ループフィールド内の
画像やテキストが表示されている
フィールドのテキストが表示されている
フィールドの値を取得する

 <?php the_field('フィールド名'); ?>
カスタムフィールドの値を取得する
Advanced Custom Fields の場合
Smart Custom Fields の場合
フィールドの値を取得する

 <?php echo esc_html( SCF::get( 'フィールド名' ) ); ?>
時間に余裕のある方は、他のプラグインでも試してみてください。
ご清聴ありがとうございました
おわり!!

More Related Content

PDF
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
PDF
はじめてのカスタマイズ
PDF
データベースと仲良くなろう
PDF
WordBench Osaka vol.22 WordPressのセキュリティ対策
PDF
どうしてこうなったWordPress
PDF
Jawsug北九州第4回勉強会
PDF
コミュニティ立ち上げのときに本当にあった恐い話
PDF
WordCamp Tokyo2016-WooCommerceのすすめ
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
はじめてのカスタマイズ
データベースと仲良くなろう
WordBench Osaka vol.22 WordPressのセキュリティ対策
どうしてこうなったWordPress
Jawsug北九州第4回勉強会
コミュニティ立ち上げのときに本当にあった恐い話
WordCamp Tokyo2016-WooCommerceのすすめ

What's hot (20)

PDF
WordPressの使えるプラグイン2013
PDF
2015年のWebを考える
PDF
20190917 bydstudy#1 teraoka
PDF
WordPressでサイト作るときに始めにやっておきたいこと~パーマリンク編~
PDF
第10回ゼロからはじめるWordPress勉強会(初心者向け)
PDF
WordPress 初心者からの脱出 #tohokuitfes
PDF
WordPressの紹介@CMS Fun Nagoya 2015.2.21
PDF
ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】
PDF
[修正版]大学生によるWordPress活用事例紹介 -1-大学生にこそ普及してほしいWordPress
PDF
Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法
PDF
DigitalCubeのリモートワーク
PDF
【ブロガーズフェスティバル】20151018 今のノマド的節約術に至るまでのストーリー
PPTX
フリーランサーの2014年振り返り
PDF
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
PDF
Launch a Web Service in 3 Days Using WordPress
PPTX
WordPressサイトをiPhoneアプリにしてみた
PDF
WordPressカスタム投稿とカスタム分類を使ってみよう
PPTX
はじめてのWordPress
PDF
Word pressの可能性とplugin拡張
PDF
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressの使えるプラグイン2013
2015年のWebを考える
20190917 bydstudy#1 teraoka
WordPressでサイト作るときに始めにやっておきたいこと~パーマリンク編~
第10回ゼロからはじめるWordPress勉強会(初心者向け)
WordPress 初心者からの脱出 #tohokuitfes
WordPressの紹介@CMS Fun Nagoya 2015.2.21
ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】
[修正版]大学生によるWordPress活用事例紹介 -1-大学生にこそ普及してほしいWordPress
Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法
DigitalCubeのリモートワーク
【ブロガーズフェスティバル】20151018 今のノマド的節約術に至るまでのストーリー
フリーランサーの2014年振り返り
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
Launch a Web Service in 3 Days Using WordPress
WordPressサイトをiPhoneアプリにしてみた
WordPressカスタム投稿とカスタム分類を使ってみよう
はじめてのWordPress
Word pressの可能性とplugin拡張
WordPressでウェブサービスを作ろう! #wbNagoya
Ad

Similar to カスタムフィールドを使ってハッピーになろう (13)

PDF
カスタムフィールドで親切な管理画面を作ろう ~初級編~
PDF
Movable Type カスタムフィールドのまとめ
PDF
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
PDF
Advanced Custom Fields が重すぎると感じるあなたへ
PDF
WordBeach @kurudrive
PDF
Types紹介
PDF
激熱プラグインCustom Field SuiteとWordPress Front-end Editorをさわってみよう!
PDF
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
PDF
カスタムフィールドの光と闇。 または、愛について。
PPTX
カスタムフィールドをもっと使い易く!
PDF
カスタムフィールドでクライアントさんの モチベーションをアップ!!
KEY
ブログの枠を超える?ためのWordPressカスタマイズ入門
PDF
【Wordpress】LightBox風jQueryを使ってポップアップ上でカスタムフィールドを出力。
カスタムフィールドで親切な管理画面を作ろう ~初級編~
Movable Type カスタムフィールドのまとめ
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
Advanced Custom Fields が重すぎると感じるあなたへ
WordBeach @kurudrive
Types紹介
激熱プラグインCustom Field SuiteとWordPress Front-end Editorをさわってみよう!
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドをもっと使い易く!
カスタムフィールドでクライアントさんの モチベーションをアップ!!
ブログの枠を超える?ためのWordPressカスタマイズ入門
【Wordpress】LightBox風jQueryを使ってポップアップ上でカスタムフィールドを出力。
Ad

More from Seiichiro Mishiba (11)

PDF
絶望的に方向音痴な僕が神社サイトを作ってみた
PDF
Word press をはじめたら覚えておきたい7つの事
PDF
初心者でもすぐできる Wordpress バックアップのススメ
PDF
CSS の歩き方
PDF
はじめてのGit
PDF
もっとはじめてのオリジナルテーマ制作
PDF
ゆるゆるカフェに行ってきました
PDF
FoundationのSassを使いはじめた人と使いたいと考えている人へ
PDF
はじめてのオリジナルテーマ制作
PPTX
松戸WP部バックアップとリストア
PDF
とあるぼっち開発者の憂鬱とGit
絶望的に方向音痴な僕が神社サイトを作ってみた
Word press をはじめたら覚えておきたい7つの事
初心者でもすぐできる Wordpress バックアップのススメ
CSS の歩き方
はじめてのGit
もっとはじめてのオリジナルテーマ制作
ゆるゆるカフェに行ってきました
FoundationのSassを使いはじめた人と使いたいと考えている人へ
はじめてのオリジナルテーマ制作
松戸WP部バックアップとリストア
とあるぼっち開発者の憂鬱とGit

カスタムフィールドを使ってハッピーになろう