WordBench Nagoya 6月の勉強会でお話させていただいた内容のスライドです。WordPressのカスタムフィールドのプラグインを使った投稿システムを紹介しました。

1. カカンンタタンン投稿システム投稿システム
カスタムフィールドで作る
クライアントワークに活躍する投稿システムを作ってみよう！

2. WordPressでの記事の投稿方法WordPressでの記事の投稿方法
html や CSS のわからない
お客さんには、主にビジュ
アルエディターを使用して、
記事を作成してもらうと思
いますが…
ビジュアルエディター

3. ビジュアルエディターで
凝ったレイアウトを作るのは
かなり高度なので、お客さんには難しい…
ビジュアルエディターで
凝ったレイアウトを作るのは
かなり高度なので、お客さんには難しい…

4. WordPress にも Jimdo や
a-blog cms のようなウィジェットを選んで
記事を作れる機能があったらいいのにな…
WordPress にも Jimdo や
a-blog cms のようなウィジェットを選んで
記事を作れる機能があったらいいのにな…

5. プラグインを使えば似た投稿システムが、
WordPressでも実現できます！
プラグインを使えば似た投稿システムが、
WordPressでも実現できます！
でも！でも！

6. 実現するためのプラグイン実現するためのプラグイン
Advanced Custom Fields（無料）
Advanced Custom Fields の拡張プラグイン Repeater Field（有料）
Advanced Custom Fields の拡張プラグイン Flexible Content Field（有料）
TinyMCE Buttons Arrangement（無料・任意）

7. プラグインの購入方法＆ダウンロードプラグインの購入方法＆ダウンロード
Advanced Custom Fields プラグインの
公式サイトへ行き、Repeater Field と
Flexible Content Field を購入します。
（購入時にアカウント登録します）
http://www.advancedcustomfields.com/
購入ができたら、登録したアカウントでログインし、マイページの
購入履歴ページから、有料プラグインのファイルがダウロードできます。
ダウンロードすると、以下の zip ファイルができます。
・acf-flexible-content.zip
・acf-repeater.zip
1
2
3

8. プラグインのインストールプラグインのインストール
zip ファイルを解凍すると、以下のファイルができます
・acf-flexible-content
・acf-repeater
上記のフォルダを、「⃝⃝⃝/wp-content/plugins/」
のディレクトリにアップロードしてください
アップロードすると管理画面上で
以下のように表示されていると思
いますので、プラグインを有効に
します。
1
2
3

9. サンプルデータダウンロード先サンプルデータダウンロード先
http://bit.ly/1cVEpfG

10. サンプルレイアウトのパーツについてサンプルレイアウトのパーツについて
文章
見出し大
見出し中
見出し小
1 カラム写真
2 カラム写真
2 カラム
テキスト
3 カラム写真
3 カラムテキスト
表
リスト
写真（右）回り込み
テキスト
写真（左）回り込み
テキスト
囲み
ボタン

11. サンプルデータについてサンプルデータについて
index.php
customlayout.php（今回のサンプルレイアウトを記述したもの）
functions.php（画像のサイズ定義など）
style.css（パーツごとのレイアウト設定）
editor-style.css（リセット用やスタート用の css の記述）
customlayout.xml（今回ご紹介したレイアウトの設定）

12. 記述の仕方記述の仕方
<?php while(the_flexible_field(" フィールド名 ")): ?>
<?php if(get_row_layout() == " パーツごとのフィールド名 "): ?>
<?php the_sub_field(" パーツごとのサブフィールド名 "); ?>
<?php elseif(get_row_layout() == " パーツごとのフィールド名 "): ?>
<?php the_sub_field(" パーツごとのサブフィールド名 "); ?>
<?php the_sub_field(" パーツごとのサブフィールド名 "); ?>
<?php elseif(get_row_layout() == " パーツごとのフィールド名 "): ?>
<?php the_sub_field(" パーツごとのサブフィールド名 "); ?>
1 パーツ
1 パーツ
1 パーツ
<?php endif; ?>
<?php endwhile; ?>
・
・
・
・

13. ご注意ご注意
今回使用したプラグインのバージョンは、最新のものです。
以前古いバージョンでこちらのシステムを導入したら、うまく
動作しなかったので、最新バージョンのものでお試しください。
パーツはいくつでも追加できますが、ボタンを追加しすぎると画面上
からはみ出てしまいますので、レイアウトのパーツは出来るだけ少な
めがおすすめです。
!
!