読者です 読者をやめる 読者になる 読者になる

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

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

【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>

google map

<style type="text/css">
  
.aaa {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}
  
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
(function($) {
  
/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/
  
function render_map( $el ) {
  
    // var
    var $markers = $el.find('.marker');
  
    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
  
    // create map               
    var map = new google.maps.Map( $el[0], args);
  
    // add a markers reference
    map.markers = [];
  
    // add markers
    $markers.each(function(){
  
        add_marker( $(this), map );
  
    });
  
    // center map
    center_map( map );
  
}
  
/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/
  
function add_marker( $marker, map ) {
  
    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
  
    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map
    });
  
    // add to array
    map.markers.push( marker );
  
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });
  
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {
  
            infowindow.open( map, marker );
  
        });
    }
  
}
  
/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/
  
function center_map( map ) {
  
    // vars
    var bounds = new google.maps.LatLngBounds();
  
    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){
  
        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
  
        bounds.extend( latlng );
  
    });
  
    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }
  
}
  
/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/
  
$(document).ready(function(){
  
    $('.aaa').each(function(){
  
        render_map( $(this) );
  
    });
  
});
  
})(jQuery);
</script>

このコードの後、google mapを出力するコード下記記述。

<?php 
  
$location = get_field('フィールド名');
  
if( !empty($location) ):
?>
<div class="aaa">
    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>


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

●テキストの場合

<?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/