東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【wordpress】Advanced Custom Fieldsの使いかた

今回はカスタムフィールド。functions.phpにコード記述すれば実装できるが標題のプラグインでお手軽可能。

手順

プラグイン「Advanced Custom Fields」をインストール

②フィールドグループを作る

  • フィールドグループ名
  • 位置
  • オプション


③フィールド(項目)を作っていく

④フィールドの値を出したいページ(テンプレ)作成し出力コード記入

プラグイン「Advanced Custom Fields」をインストール

まずはここから。管理画面にてインストールして有効化に。

②フィールドグループを作る

インストールすると管理画面右側のメニューで「カスタムフィールド」が出るのでクリックしてその後新規追加をクリック。以下3つの設定をする。

  • フィールドグループ名

まあこれはタイトルみたいなもんで任意で入力

  • 位置

これは要するに投稿メニュー、固定ページメニューなどどこでカスタムフィールドを機能させるのかを設定できる。投稿メニューの指定のカテゴリーであったり、固定ページの指定のテンプレートであったり様々な設定が可能。すごい。

  • オプション

ここは4つほど項目があるが重要なのは「画面に表示しない」という項目。ここでカスタムフィールドを機能させたときに必要のない、元々投稿画面にある項目を削除させることができる。

例えば私の直近での案件では、建築事務所のクライアントだったのだが実績を載せるために投稿でメイン画像1枚サブ画像10枚とその解説を入れたいとのことだったのでこれからその仕様でカスタムフィールドを作っていく。


③フィールド(項目)を作っていく

②の設定が完了したら「フィールドを追加」という青いボタンをクリックするとフィールドの設定の項目が羅列されるのでここでフィールドを作っていく。ここでは私が設定した項目のみ記す。

  • フィールドラベル

ここで管理画面でのフィールド名を設定。

  • フィールド名

ここでコード内でのフィールド名?を設定。ここで設定した単一語をコード内に記述してフィールドを出力する。

  • フィールドタイプ

ここでテキスト、画像、チェックボックス等、どの種類の項目を出力するのか設定。google mapもあり汎用性バツグン。

  • フィールド記入のヒント

管理画面での編集時に見えるフィールドの説明が表示される。作成者向けヒント。

  • 必須か?

必須項目か設定

  • 返り値

ここぶっちゃけよーわからんw フィールドタイプを画像んいした時に出るようで私は「画像ID」にしている。

  • プレビューサイズ

ここで表示させる画像のサイズを設定できる。functions.phpにadd_image_sizeを記述すればここで自分の設定した
サイズも設定できる。

  • フォーマット

フィールドの値にHTMLを含ませるかどうか設定。



設定したい項目がすべて完了したら「フィールドを閉じる」ボタンをクリック。
そうして新しいフィールドを同じように作っていき、一つのフィールドグループを完成させていく。

完成させたら、「更新」ボタンをクリックしてカスタムフィールドの設定完了。


④フィールドの値を出したいページ(テンプレ)作成し出力コード記入

②の位置の設定をしたが、そのテンプレを作る。今回はsingle.phpを複製。ループ内にフィールドの値を取得する出力コードを記入していく。



◎テキスト、テキストエリア等

<?php the_field("フィールド名", $post->ID); ?>

◎画像

フィールド設定の時に返り値を画像IDに設定する!!そんで下記記入。imgタグのところはこのコードコピペでOK。

<?php
    $attachment_id = get_field('フィールド名');
    $size = "サイズ名"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('フィールド名') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
 
<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" />


ここのサイズ名はfunction.phpに下記を記入して任意のサイズを設定する。

	
add_image_size('size1',400,300,true);


もしこのカスタムフィールドの画像にライトボックスなどで写真拡大させるなら下記のようにaタグ設定。

    <a href="<?php echo wp_get_attachment_url( get_field( 'sub4(フィールド名)',$post->ID) ); ?>" class="swipebox">
<?php
 $attachment_id = get_field('sub4');
 $size = "works_sub";
 $image = wp_get_attachment_image_src( $attachment_id, $size );
 $attachment = get_post( get_field('sub4') );
 $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
 $image_title = $attachment->post_title;
?>

<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>">


</a>

以下のやつが最新!!!!!!!!!!!!!!!!!!!!!!!!!拡大用もトリミング!!!

        <?php
        $attachment_id = get_field('main_image1');
        $size = "detail_main_image";
        $size2 = "lightbox_image"; // 拡大用のトリミングサイズ
        $image = wp_get_attachment_image_src( $attachment_id, $size );
        $image2 = wp_get_attachment_image_src( $attachment_id, $size2 );  // 拡大用のトリミングサイズ
        $attachment = get_post( get_field('main_image1') );
        $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
        $image_title = $attachment->post_title;
        ?>


        <a href="<?php echo $image2[0]; ?>" data-imagelightbox="e">  // hrefに$image2を入れる。data-imagelightboxはjqueryのimagelightboxのトリガーのコード


<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>">


</a>

google map

「map1」がフィールド名。

    <!-- ●googlemap start● -->
    
<?php
if( get_field('map1') ) { 
	$googlemap = get_field('map1'); ?>
<script src="//maps.google.com/maps/api/js"></script>
<div id="googlemaps" style="width:100%; 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 } ?>

    <!-- ●googlemap end● -->

このコードならフッターに別で会社のgooglemapがあってもばぐったりしない。

【参考URL】
http://on-ze.com/archives/4961



【2017年追記】
googlemapのapiを取得しないとマップが機能しないので。そのやり方。

①まず以下をfunctions.phpに入れる。

function my_acf_google_map_api( $api ){
  $api['key'] = 'XXXXXX';
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

②以下のサイトにアクセス
https://developers.google.com/maps/web/
画面右上の「キーの取得」をクリックするとライトボックスでウィンドウが表示されるのでAPIprojectを選択して「enable api」をクリック。するとapiのコードがでるので、①のXXXXXのところにペースト
【参考URL】
http://vox.nevnum.com/googlemap-api-acf/




◎値がないときにフィールドを消すコード
この処理をやっておかないと値がないフィールドのときに変なスペースができるので必要。

●テキストの場合

<?php if(post_custom('フィールド名')): ?>
<?php the_field("フィールド名", $post->ID); ?>
<?php endif; ?>


●画像の場合

<?php if(get_post_meta($post->ID, 'フィールド名', true)): ?>
<?php
    $attachment_id = get_field('フィールド名');
    $size = "プレビューサイズ";
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('フィールド名') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>">
<?php endif; ?>

【参考URL】
http://tontotakumi.com/web-seisaku/wordpress/advanced-custom-fields/
http://webdesignerwork.jp/wordpress/customfieldtemplate/
http://kyo-no-design.info/web/wordpress/250/

http://www.mao-engineer.jp/blog/wordpress/1288


このカスタムフィールドのときの画像トリミング
http://www.fumufumu.info/other/973/