Advanced custom field のコード記載例
Advanced custom field
シンプルにカスタムフィールドを表示する
|
1 |
<p><?php the_field('フィールド名'); ?></p> |
フィールドタイプ/画像
返り値の選択肢（画像オブジェクト・画像URL・画像 ID） で「画像URL」を選択した場合
|
1 |
<img src="<?php the_field('フィールド名'); ?>" alt="" /> |
条件つき（もし値が入力されていたら）
|
1 |
<?php if(get_field('フィールド名')) {echo get_field('フィールド名') ;}?> |
グーグルマップで地図を表示するのに一番簡単だった方法
デフォルトのカスタムフィールドに住所を入力する方法
wordpressにデフォルトでついているカスタムフィールドに住所を入力する方法 → カスタムフィールドに住所を入力 → グーグルマップで地図表示
これが一番簡単でした。下記のコードを表示したい場所に記入するだけ
<?php if ( post_custom(‘event_address’) ) : ?>
<?php
$addressformap = post_custom(‘event_address’);
$addressformapencode = urlencode(mb_convert_encoding($addressformap, “UTF-8″,”auto”));
?>
<iframe width=”90%” height=”350″ frameborder=”5″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.jp/maps?q=<?php echo $addressformapencode; ?>&z=18&output=embed”></iframe>
<?php else : ?>
<p>Sorry, No map.</p>
<?php endif; ?>
Advanced custom field のフィールドタイプ「Google map」を使う方法
公式のページ Creating a Google Map field に書いてあった下記のコード１と２を「single-ポストタイプ.php」にコピペ。３のCSSは「style.css」にコピペしたらやっと表示されたけど住所を入力しても反映されない。マーカーを自分で動かさなきゃいけなくて使えなかった
１ Render a single maker onto a map
|
1 2 3 4 5 6 7 8 9 10 |
<?php $location = get_field('フィールド名'); if( !<a href="http://www.php.net/empty">empty</a>($location) ): ?> <div> <div data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div> </div> <?php endif; ?> |
２
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<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.<a href="http://www.php.net/each">each</a>(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 $.<a href="http://www.php.net/each">each</a>( 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(){ $('.acf-map').<a href="http://www.php.net/each">each</a>(function(){ render_map( $(this) ); }); }); })(jQuery); </script> |
３ CSS
|
1 2 3 4 5 6 |
.acf-map { width: 100%; height: 400px; border: #ccc solid 1px; margin: 20px 0; } |