DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

Custom Field Suite を使ってフォトギャラリー(前編)

先日「フォトギャラリー」というカスタム投稿タイプを作ってと言われて
何の工夫もせず(単に投稿タイプを増やしただけ)にしたら
社長から「こんなの、普通のブログやん、写真が並んでるだけで何の芸もない」とのコメントが・・・

どうやら ↓現在                             ↓このような感じにしたかったようです。
wp-photo-gallery00.gif


そんなわけで、画像の大きさをそろえて並べるために
写真のアップロードはカスタムフィールドを使おうと思いました。
それで、当初、Custom Field Template(カスタムフィールドテンプレート)を使おうと
思いましたが、いや待てよ
あのお客さんはきっと、並べ変えたいと言いそう・・・
と思いました。

それで
☆フィールドを増やせる
☆フィールドの並べ替えに対応している
☆無料
を条件に探したところ、ありました!!

Custom Field Suite(カスタムフィールドスイート)
WordPressって、なんてステキ

さっそく入れてみます。
wp-photo-gallery01.jpg

wp-photo-gallery02.jpg

wp-photo-gallery03.jpg

wp-photo-gallery04.jpg

今回ローカルで試しているので出ませんでしたが、
↓通常ならこのような画面が出ます↓
201304-wpver351_link07.jpg
「要求されたアクションを実行するには、WordPressがWebサーバーにアクセスする必要があります。
 次に進むにはFTPの接続情報を入力してください。
 接続情報が思い出せない場合は、ホスティング担当者に問い合わせてください。」
→接続情報(FTPの情報)を入れます


wp-photo-gallery05.jpg

wp-photo-gallery06.jpg

・・・と、これ、英語版なんです。それで日本語に対応するために、探してみたら
夢猫工房 様の
【WordPressプラグイン日本語化】Custom Field Suite日本語ファイル
を見つけました。
wp-photo-gallery07.jpg
Custom Field Suite 1.8.9 日本語ファイル(ファイルサイズ:6.8KB) をダウンロードします。
wp-photo-gallery08.jpg
解凍したら、中のファイルを Custom Field Suite → languagesフォルダにコピペします
wp-photo-gallery09.jpg

日本語になりました! さっそくカスタムフィールドを登録してみます。
フィールドグループ に行きます。
wp-photo-gallery10.jpg

新規追加
wp-photo-gallery11.jpg

フィールドグループの 1.名前を入れて 2.投稿タイプを選んで 3.新規フォールドを追加します。
wp-photo-gallery12.jpg

カラのフィールドが現れます。このフィールドの設定をしていきます。
wp-photo-gallery13.jpg

このあたりはお好みで・・・
wp-photo-gallery14.jpg

フィールドの設定ができたら「公開」
フィールドを追加したい時は「新規フィールドを追加」
wp-photo-gallery15.jpg

参考・・・今回はこのような設定にしました。
画像(ファイルのアップロード)と、キャプション(単一行テキスト)
wp-photo-gallery16.jpg

この「画像」と「キャプション」を1セットにして、増やしていけるようにしたいので
ループのフィールドを追加したいと思います。
wp-photo-gallery17.jpg

ループフィールドの設定をします。
wp-photo-gallery18.jpg

ループフィールドの中に、「画像」と「キャプション」を入れたいと思いますが
その前に一度「更新」します。
wp-photo-gallery19.jpg

ループフィールドの中に入れたいフィールドをドラック&ドロップします。
wp-photo-gallery20.jpg

更新します。
wp-photo-gallery21.jpg

入りました! (個人的にはループフィールドの中に入れるのが慣れるまで難しかったです)
wp-photo-gallery22.jpg

・・・長くなったので、後編に続きます・・・
関連記事

コメント

とてもわかりやすかった

画像も説明も すごく参考になり わかりやすく 感謝でいっぱいです。
有料プラグインを買わずに済みました@
ありがとうございました!!

2014年04月13日 04:58 from myouURL Edit

myou 様

コメントありがとうございました(*^^*)
お役に立てて良かったです☆

2014年04月13日 13:13 from こはるURL

質問があるのですが、よかったら教えてください。

このページを参考にさせていただいてやってます!
でもちょっと困っていて
質問があるのですが、よかったら教えてください。

出力コードで 
<?php echo get_post_meta($post->ID,'フィールフォ名', true);?>
を使ってます。

フィールドタイプ:テキストのものはちゃんと表示されますが
フィールドタイプ:セレクト(ドロップダウンリスト)のは表示されません
出力のコードが違うのでしょうか??

どうぞよろしくお願いします。


2014年04月13日 23:19 from myouURL Edit

myou 様

コメントありがとうございます(^^)

もしかしたら1つの項目に複数の値が入っている、いわゆる
配列になっているからうまくいかないのかもしれません。
「Array」と画面に出て、なんでかなー・・・と、
あーだこーだした思い出があります。

カスタムフィールド チェックボックスの値を個別に取り出したい
http://memo352.blog119.fc2.com/blog-entry-255.html


・・・とはいえ、私もよく分からないので
今回あらためてググってみました。


↓以下の記事が分かりやすい気がしました。

カスタムフィールド(meta_value)に配列を格納できるって知ってました?
http://yahss.net/wordpress/1226-array_in_custom_fields/


WordPressの便利機能 カスタムフィールドを使ってみよう!-基本編
http://infinityforest.net/home/archives/2542

参考になると良いのですが・・・

2014年04月14日 00:04 from こはるURL

No title

早速ありがとうございます(;▼;)
今からさらに調べてみます。

2014年04月14日 01:03 from myouURL Edit

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018年05月12日 20:06 from -

Re: 登録した画像のリンク設定について

eco様 コメントありがとうございます。


<a href="';の後・・・の件ですが
まず
「 ” 」は「"」
「 < 」は「<」です
(全角にしています)

<a href=”の後・・・ということですね。
その後は、固定ページのリンクということで


投稿、固定ページ、カテゴリーへのリンク - WordPress Codex 日本語版
↓URLは以下
http://wpdocs.osdn.jp/%E6%8A%95%E7%A8%BF%E3%80%81%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%80%81%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF

を見てみると
固定ページへのリンクの仕方は、以下のようにあります↓
---------------------------------------------------------
> 固定ページ ID は「固定ページ」画面内で
> 対象となる固定ページのタイトルの上にマウスを移動すると
> ブラウザのステータスバーに表示される URL 内の一部として
> 「...?post=15」の形式で表示されます。
> 次のリンク内の「42」の位置に、この固定ページ ID を挿入してください。

<a href=”/index.php?page_id=42”>固定ページのタイトル</a>
---------------------------------------------------------
リンクしたい固定ページのURL(id)を入れてみてはいかがでしょうか?

・・・と、言いつつ、↓ググってみたところ

【初心者のwordpless】固定ページへのリンクはhome_urlだ
↓URLは以下
https://awe-some.net/2017/01/better_pagelink_home_url/

の中では
---------------------------------------------------------
スラッグ名testという固定ページへのリンクは、
<?php echo home_url('/test'); ?>
---------------------------------------------------------
とありました。

こちらもよさそうですよ?

どうしたらeco様の思うようになるのか、外れているかも
しれませんが、一度ためしてみてはどうでしょうか。

2018年05月13日 19:19 from こはるURL

非公開コメント

※宣伝目的のようなコメントが時々あることから、コメントを承認方式に変更しました。
アダルトサイト・販売目的のサイトに誘導するもの、宣伝目的のもの、
わいせつもしくは公序良俗に反するもの、
また誤解を招くようなコメントは、削除させていただきます。

トラックバック

http://memo352.blog119.fc2.com/tb.php/354-a40f796d