デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2016年06月14日 WordPressWEB技術

advanced custom fields特集その1!まずはACF本体の設定方法

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

今日から9回連続advanced custom fields大特集をします!

advanced custom fieldsというプラグインをご存知ですか?実は毎回私が利用しているプラグインなのですが、非常に便利です。これとcustom post type uiだけでかなり自由度が高いCMSを構築できます。

詳しい方からすれば今更感もあるかもしれませんが、今回から9回継続企画!制作者向けの記事になりますがadvanced custom fieldsの有料・無料アドオン(拡張機能)も含めて紹介したいと思います。

まずは、advanced custom fields自体の説明をしなければ始まらないので今回はadvanced custom fields本体の紹介をさせていただきます。

 

あなたはこの2枚の画像どちらの更新システムがわかりやすいですか?

before

acf10

どう考えても下の更新システムのほうがタブ分けされていていじっていい場所が非常にわかりやすいですよね?

実はここまで自由に管理画面っていじることができるんです。それがadvanced custom fieldsです。それでは、まずはインストールの仕方からいきましょう!

プラグインのインストール

WordPress管理画面の左メニュー「プラグイン」→「新規追加」で“advanced custom fields”と検索。

そして一番左上に表示されると思いますので、「今すぐインストール」をクリック。

その後インストール完了画面が表示されたら、「プラグインを有効化」をクリック。

これで、プラグインが使える状態になりました!

フィールドの設定

管理画面左メニューに「カスタムフィールド」という項目が追加されているかと思います。ここをクリックして、カスタムフィールドの設定画面へと進みます。

最初はなにもないため新規追加をクリックします。

すると以下のページヘと移動します。

acf2

このページに飛んだら、「フィールドを追加」をクリックします。

すると、フィールドの設定項目がアコーディオン形式で表示されます。

ここに設定をしていく流れとなります。具体的な設定方法は以下のとおりです。

※項目が非常に多いため設定方法がわからない時のカンペとして利用して頂ければと思います。

フィールドラベル

管理画面上に表示される見出しです。ここはわかりやすいラベル名にしましょう。

フィールド名

半角英数のみ。

フィールドタイプ

入力フォームの種類を変更できます。こちらについては長くなるため次の項目で説明させて頂きます。

必須か?

その名の通り入力必須項目にするかの設定です。

デフォルト値

初期値を設定できます。

Placeholder Text

未入力の場合に薄い文字を表示させることができます。ここで間違えた入力をしないように説明することで入力ミスを防ぐことができます。

Prepend

入力欄の前に表示させることができる文字です。

Append

こちらは入力欄の後ろに表示させる事ができる文字です。

フォーマット

Convert HTML into tags=フィールドにhtmlタグを使用することが可能です。

Convert new lines into <br />tags=改行をbrタグに変換します。(テキストエリアのみ)

No formatting=フィールドにhtmlタグを使用するとそのまま出力されてしまいます。

Character Limit

文字数の制限をすることができます。

Rows

テキストエリアの高さを決めることができます。

Minimux Value

最小値を設定できます。

Maximux Value

最大値を設定できます。

Step Size

指定した数値の倍数のみ入力できるようになります。

ツールバー

ツールバーの機能に関する設定。Fullであれば全て表示され、Basicであればシンプルになります。

メディアアップロードボタンを表示するか?

メディアからアップロードができるようにするかの設定

返り値

出力形式です。

オブジェクト=配列を全て返します。

URL=格納されているurlのみを出力します。ファイルの場合はこちらを基本的には設定します。

ID=IDを出力します。私は画像の場合IDばかり使っています。

プレビューサイズ

管理画面上で表示されるプレビューのサイズです。事前にfunctions.phpへサイズ指定をしておく必要があります。

ライブラリ

アップロード画像をライブラリから選択できるようにするかの設定です。

選択し

その名の通り選択肢を増やすことができます。なぜ“し”だけがひらがななのでしょう…?

無を許可するか?

許可すると、「-セレクトボックス-」という選択肢が追加され無として扱われます。

複数の値を選択できるか?

複数の値を選択できるようになります。

レイアウト

管理画面上で縦並びか横並びかを選択できます。

メッセージ(真/偽の場合)

チェックボックスのラベルの文字を設定できます。

メッセージ(メッセージの場合)

管理画面上にテキストやHTMLを入力することができます。

投稿タイプ

一覧から投稿タイプを選択できます。

タクソノミーでフィルタする

管理画面上の記事一覧をタクソノミーで絞ることができます。

Return Format

戻り値をオブジェクト型にするか記事IDにするかを選択できます。

フィルター

管理画面上での記事の探し方の設定です。キーワードで探すか投稿タイプで絞るかの2択になります。

Elements

選択された要素が管理画面上に表示されます。

最大投稿数

関連記事の最大投稿数を設定できます。

タクソノミー

ここで選択したタクソノミーが表示されます。

フィールドタイプ(タクソノミー項目内)

こちらのフィールドタイプはタクソノミーの選択をするための投稿タイプです。ラジオボタンやチェックボックスが選択肢にあります。

タームの読み込み/保存

カスタムタクソノミーのタームとカスタムフィールドの値を連携させるかの選択です。チェックをつけると、カスタムタクソノミーの値がカスタムフィールドの値に連動します。

ロールでフィルタする

ユーザーの選択をする時に、権限ごとに絞ることができます。

Center

googleMapの初期値。設定をしないと何故かメルボルンになってしまいます。

Zoom

googleMapのズームレベルの設定です。

Height

googleMapの高さを設定できます。

フォーマットを保存する

「yy/mm/dd」等のように日付のフォーマットを設定できます。

表示フォーマット

管理画面上での日付の表示のフォーマットです。

週の開始

1週間の開始曜日を決めることができます。

条件判定

とある条件でのみ管理画面にカスタムフィールドを出現させたい場合に有効です。(例:チェックボックスの値Aにチェックがついた時のみ表示させる)

フィールドタイプの説明

こちらについても項目が非常に多いため設定方法がわからない時のカンペとして利用して頂ければと思います。

テキスト

そのままです。文字を入力できるフィールドタイプです。

テキストエリア

テキストと違い改行ができるテキストフィールドタイプです。

数値

テキストでも当然数値は打てますが、より数値の設定を詳細にできるフィールドタイプです。

メール

メールアドレスの形式になっていなかったら警告がされるフィールドタイプです。

パスワード

入力した文字が●●●で表示されるフィールドタイプです。

Wysiwygエディタ

ツールバー付きのエディタが表示されます。

画像

画像のアップロードができます。

ファイル

ファイルのアップロードができます。

セレクトボックス/チェックボックス/ラジオボタン

この3つは説明するまでもなくそのままです。

真/偽

チェックボックスにチェックを入っていると1、チェックが入っていないと0を返します。

ページリンク

公開済みの投稿や固定ページをセレクトボックスで選ぶことができ、記事のパーマリンク(URL)が返されます。

投稿オブジェクト

こちらは、ページリンクと基本的には同じですが、オブジェクト全体の情報を返されます。ページタイトルなどURL以外の情報を出力したい場合はこちらを利用しましょう。

関連

関連記事の設定をできます。キーワードでの選別ができるため実は様々な場面で活用ができ、コアなユーザーにはたまらない機能です。

タクソノミー

指定したタクソノミーのタームを選択することができます。

ユーザー

登録されているユーザーを選択することができます。

Google Map

googlemap上で位置を指定するだけで指定位置のマップを表示させることができます。

デイトピッカー

カレンダーをクリックすることで日時を指定できます。

カラーピッカー

色をカラーピッカーから直感的に指定できます。

メッセージ

テキストやHTMLを表示させることができます。

タブ

タブで整理することができます。

表示させるページの設定

フィールドの項目の下に「位置」という項目があるかと思います。この項目が実際にそのカスタムフィールドを表示させたい場所の設定になります。

なので、例えば投稿にのみ表示させたい内容であれば、「投稿タイプ」「等しい」「post」という風に設定をすれば投稿のみに設定したカスタムフィールドは表示されます。当然複数指定もできます。

その他オプション設定

「位置」の下に「オプション」という項目があると思います。ここでその他の設定をできます。

順序番号

フィールドの表示順です。フィールドグループが複数ある場合数値が小さい方から上に並んでいきます。

位置

カスタムフィールドの配置位置を指定できます。

High(after title)=タイトルのすぐ下に表示されます。
Normal(after content)=本文入力フィールドのすぐ下に表示されます。
Side=右サイドバーの下に表示されます。

style

カスタムフィールドのデザインを変更できます。

画面に表示しない

編集画面に表示させない項目を設定できます。

設定はこれで完了

OJS_syuukatunitukaretadansei

位置の項目で設定したページに移動して実際にカスタムフィールドが存在していることを確認します。

問題がなければ、次に出力方法の説明をさせて頂きます。

出力方法

テキスト

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

テキストエリア

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

数値

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

メール

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

パスワード

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

Wysiwygエディタ

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

画像(返り値がIDの場合)

<?php if( get_field('フィールド名') ) {
	$idimage = get_field('フィールド名');
		$image = wp_get_attachment_image_src( $idimage , '画像サイズ' ); ?>
	<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php the_title_attribute(); ?>">
<?php } ?>

画像(返り値がURLの場合)

<?php if( get_field('フィールド名') ) { ?>
	<img src="<?php the_field('フィールド名'); ?>">
<?php } ?>

ファイル(返り値がURLの場合)

<?php if( get_field('フィールド名') ) { ?>
	<a href="<?php the_field('フィールド名'); ?>">ダウンロードはこちら</a>
<?php } ?>

セレクトボックス

<?php if( get_field('フィールド名') ) { ?>
	<p>セレクトボックス:<?php the_field('フィールド名'); ?></p>
<?php } ?>

チェックボックス

<?php if( get_field('フィールド名') ) {
	$checkbox = get_field('フィールド名');
		foreach ( (array)$checkbox as $value ) { ?>
		<?php echo $value; ?>
	<?php }
} ?>

ラジオボタン

<?php if( get_field('フィールド名') ) { ?>
	<p>ラジオボタン:<?php the_field('フィールド名'); ?></p>
<?php } ?>

真/偽

<?php if( get_field('フィールド名') ) {
	echo "チェック入れた場合";
} else {
	echo "チェック入れなかった場合";
} ?>

ページリンク

<?php if( get_field('フィールド名') ) {
$pagelink = get_field('フィールド名');
	foreach( (array)$pagelink as $value) { ?>
		<p><a href="<?php echo $value; ?>">ページヘリンク</a></p>
	<?php }
} ?>

投稿オブジェクト

<?php if( get_field('フィールド名') ) {
		$postobject = get_field('フィールド名');
		foreach ( $postobject as $value ) { ?>
		<p><a href="<?php echo $value->guid; ?>"><?php echo $value->post_title; ?></a></p>
	<?php }
} ?>

タクソノミー(返り値がTerm Objectの場合)

<?php if( get_field('フィールド名') ) {
	$term = get_field('フィールド名'); ?>
	<p>タクソノミー<?php 
	foreach((array)$term as $value) { ?>
		<a href="<?php echo get_bloginfo('url') . '/archives/category/' . $value->slug; ?>"><?php echo $value->name; ?></a>
		<?php if(next($term)!==FALSE){ echo ", ";}
 } ?>
	</p>
<?php } ?>

ユーザー

<?php
if( get_field('フィールド名') ) { 
	$user = get_field('フィールド名'); ?>
	<p><a href="<?php echo get_bloginfo('url') . '/archives/author/' . $user['user_nicename']; ?>"><?php echo $user['nickname']; ?></a></p>
<?php } ?>

GoogleMap

<?php
if( get_field('フィールド名') ) { 
	$googlemap = get_field('フィールド名'); ?>
<script src="//maps.google.com/maps/api/js"></script>
<div id="googlemaps" style="width:600px; height:400px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window,"load",function(){
	var mapdiv=document.getElementById("googlemaps");
	var myOptions = {
		zoom:17,
		center:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		mapTypeId:google.maps.MapTypeId.ROADMAP,
		scaleControl:true
	};
	var map=new google.maps.Map(mapdiv,myOptions);
	var marker=[];
	var infowindow=[];
	marker[0]=new google.maps.Marker({
		position:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		map:map,
		title:"<?php echo $googlemap['address']; ?>"
	});
});
</script>
<?php } ?>

デイトピッカー

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

カラーピッカー

<?php if( get_field('フィールド名') ) { ?>
	<p>カラーコード=<?php the_field('フィールド名'); ?></p>
<?php } ?>

 

まとめ

かなりの長い記事になってしまいましたが、Wordpressをお客様が簡単に更新できるようなシステムにするためには必須のプラグインです。

次回からはAdvanced Custom Fieldsの無料・有料アドオンを紹介していきたいと思います。


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月10日コレで完結!Bootstrapの使い方3
2017年12月07日まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2
2017年12月01日スマホサイト構築に便利!Bootstrapの使い方まとめ その1
2017年01月01日CSSで四則計算!CSS calcの使い方
2016年06月19日advanced custom fields特集その9!Table Fieldの使い方
  • Facebookページ
  • 公式twitterアカウント