Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
カカンンタタンン投稿システム投稿システム
カスタムフィールドで作る
クライアントワークに活躍する投稿システムを作ってみよう!
WordPressでの記事の投稿方法WordPressでの記事の投稿方法
html や CSS のわからない
お客さんには、主にビジュ
アルエディターを使用して、
記事を作成してもらうと思
いますが…
ビジュアルエディター
ビジュアルエディターで
凝ったレイアウトを作るのは
かなり高度なので、お客さんには難しい…
ビジュアルエディターで
凝ったレイアウトを作るのは
かなり高度なので、お客さんには難しい…
WordPress にも Jimdo や
a-blog cms のようなウィジェットを選んで
記事を作れる機能があったらいいのにな…
WordPress にも Jimdo や
a-blog cms のようなウィジェットを選んで
記事を作れる機能...
プラグインを使えば似た投稿システムが、
WordPressでも実現できます!
プラグインを使えば似た投稿システムが、
WordPressでも実現できます!
でも!でも!
実現するためのプラグイン実現するためのプラグイン
Advanced Custom Fields(無料)
Advanced Custom Fields の拡張プラグイン Repeater Field(有料)
Advanced Custom Fie...
プラグインの購入方法&ダウンロードプラグインの購入方法&ダウンロード
Advanced Custom Fields プラグインの
公式サイトへ行き、Repeater Field と
Flexible Content Field を購入します。
...
プラグインのインストールプラグインのインストール
zip ファイルを解凍すると、以下のファイルができます
・acf-flexible-content
・acf-repeater  
上記のフォルダを、「⃝⃝⃝/wp-content/plugins...
サンプルデータダウンロード先サンプルデータダウンロード先
http://bit.ly/1cVEpfG
サンプルレイアウトのパーツについてサンプルレイアウトのパーツについて
文章
見出し大
見出し中
見出し小
1 カラム写真
2 カラム写真
2 カラム
テキスト
3 カラム写真
3 カラムテキスト
表
リスト
写真(右)回り込み
テキスト
写真(...
サンプルデータについてサンプルデータについて
index.php
customlayout.php(今回のサンプルレイアウトを記述したもの)
functions.php(画像のサイズ定義など)
style.css(パーツごとのレイアウト設定)
...
記述の仕方記述の仕方
<?php while(the_flexible_field(" フィールド名 ")): ?>
<?php if(get_row_layout() == " パーツごとのフィールド名 "): ?>
<?php the_sub_...
ご注意ご注意
今回使用したプラグインのバージョンは、最新のものです。
以前古いバージョンでこちらのシステムを導入したら、うまく
動作しなかったので、最新バージョンのものでお試しください。
パーツはいくつでも追加できますが、ボタンを追加しすぎると...
Upcoming SlideShare
Loading in …5
×

カスタムフィールドで作るカンタン投稿システム

4,582 views

Published on

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

Published in: Technology

カスタムフィールドで作るカンタン投稿システム

  1. 1. カカンンタタンン投稿システム投稿システム カスタムフィールドで作る クライアントワークに活躍する投稿システムを作ってみよう!
  2. 2. WordPressでの記事の投稿方法WordPressでの記事の投稿方法 html や CSS のわからない お客さんには、主にビジュ アルエディターを使用して、 記事を作成してもらうと思 いますが… ビジュアルエディター
  3. 3. ビジュアルエディターで 凝ったレイアウトを作るのは かなり高度なので、お客さんには難しい… ビジュアルエディターで 凝ったレイアウトを作るのは かなり高度なので、お客さんには難しい…
  4. 4. WordPress にも Jimdo や a-blog cms のようなウィジェットを選んで 記事を作れる機能があったらいいのにな… WordPress にも Jimdo や a-blog cms のようなウィジェットを選んで 記事を作れる機能があったらいいのにな…
  5. 5. プラグインを使えば似た投稿システムが、 WordPressでも実現できます! プラグインを使えば似た投稿システムが、 WordPressでも実現できます! でも!でも!
  6. 6. 実現するためのプラグイン実現するためのプラグイン Advanced Custom Fields(無料) Advanced Custom Fields の拡張プラグイン Repeater Field(有料) Advanced Custom Fields の拡張プラグイン Flexible Content Field(有料) TinyMCE Buttons Arrangement(無料・任意)
  7. 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. 8. プラグインのインストールプラグインのインストール zip ファイルを解凍すると、以下のファイルができます ・acf-flexible-content ・acf-repeater   上記のフォルダを、「⃝⃝⃝/wp-content/plugins/」 のディレクトリにアップロードしてください アップロードすると管理画面上で 以下のように表示されていると思 いますので、プラグインを有効に します。 1 2 3
  9. 9. サンプルデータダウンロード先サンプルデータダウンロード先 http://bit.ly/1cVEpfG
  10. 10. サンプルレイアウトのパーツについてサンプルレイアウトのパーツについて 文章 見出し大 見出し中 見出し小 1 カラム写真 2 カラム写真 2 カラム テキスト 3 カラム写真 3 カラムテキスト 表 リスト 写真(右)回り込み テキスト 写真(左)回り込み テキスト 囲み ボタン
  11. 11. サンプルデータについてサンプルデータについて index.php customlayout.php(今回のサンプルレイアウトを記述したもの) functions.php(画像のサイズ定義など) style.css(パーツごとのレイアウト設定) editor-style.css(リセット用やスタート用の css の記述) customlayout.xml(今回ご紹介したレイアウトの設定)
  12. 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. 13. ご注意ご注意 今回使用したプラグインのバージョンは、最新のものです。 以前古いバージョンでこちらのシステムを導入したら、うまく 動作しなかったので、最新バージョンのものでお試しください。 パーツはいくつでも追加できますが、ボタンを追加しすぎると画面上 からはみ出てしまいますので、レイアウトのパーツは出来るだけ少な めがおすすめです。 ! !

×