「Advanced Custom Fields」でできること①

このサイトでも利用している、WordPressのカスタムフィールドの機能を飛躍的にアップするプラグイン「Advanced Custom Fields」で何ができるのかをいくつか紹介していきます。中には有料のアドオンを購入しなければ使えない機能もありますが、比較的安価(数千円ほど)なので取り入れやすいです。

最初に紹介するのはGoogleMapの表示です。

表示例は勉強会のイベントページで利用しているのでそちらをご覧ください。
コードは以下のようなものです。

<?php
//Googleマップ表示
$location = get_field('lesson_gmap');
if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>

以下は、複数の場所にマーカーを置く場合の解説です。

“「Advanced Custom Fields」でできること①” の続きを読む

『Web制作者のためのCSSの教科書』

IMG_4550

コンポーネントなどを厳密に考えて制作するのはちょっと大変だな、と思いましたが、1〜2章ぐらいまでの「こういう書き方をすべき」という点はのもすごくためになりました。

フロントエンドに関わり、CSSを独学で学んできたけど最近いろんな人との書き方の違いに悩んでいる方は是非一読を。
あと、WordPressで何故あんなにclass名がポコポコたくさんついてくるのか疑問に感じた人もぜひ読まれてみてはいかがでしょうか。

『Web制作者のためのCSSの教科書』
https://book.impress.co.jp/books/1113101128
価格:本体2,200円(税別) ISBN:9784844336358

余談ですが、アマゾンで購入!でもいいのですがぜひ、本はぜひお近くの書店でお取り寄せなりでご購入ください。リアルの本屋さんを応援する気持ちで利用してもらえたらと思います!是非!!

加筆!
より新しい別の著者の本でこちらもおすすめです。

『CSS設計完全ガイド ~詳細解説+実践的モジュール集」
https://gihyo.jp/book/2020/978-4-297-11173-1
価格:3,280円(税別) ISBN:978-4-297-11173-1

2023-07-14 URLを変更、一部加筆修正、書籍のリンク先を変更しました

補足1:勉強会内で紹介した情報

※2015年5月17日に行われた勉強会「WordPressでイベント紹介ページを作ろう」の補足情報です。

1.
カスタム投稿タイプの作り方。

function create_post_type() {

//カスタム投稿 勉強会情報
  register_post_type(
	  'lesson',
    array(
	    'labels' => array(
		    'name' => __( '勉強会一覧' ),
		    'singular_name' => __( '勉強会' )
	    ),
	    'public' => true,
		'hierarchical' => false,
	    	'menu_position' => 2,
		'supports' => array('title','editor'),
		'has_archive' => true,
		'rewrite' => array( 'with_front' =>false)
    )
  );
}
add_action( 'init', 'create_post_type' );

上記を functions.php ファイルに記述し、アップロードするとカスタム投稿を追加することができます。
register_post_type() について詳しくはcodexをごらんください。
http://wpdocs.osdn.jp/関数リファレンス/register_post_type

2.
カスタムフィールドのプラグイン「Advanced Custom Fields」

プラグインのサイト:http://www.advancedcustomfields.com
表示方法などの説明:http://www.advancedcustomfields.com/resources

入力した値は下記のように書いて表示することができます。

<?php the_field($field_name, $post_id); ?>

$field_name カスタムフィールドの管理画面で設定した「フィールド名」を記述します。
$post_id 投稿のIDを指定できます。デフォルトは現在の投稿ID。

<?php 

/*
*  現在の投稿にあるカスタムフィールドの値を表示
*/

the_field( "text_field" ); 

/*
*  別の投稿の値を表示
*/

the_field( "text_field", 123 ); 

/*
*  入力値があるときのみ、値を表示する
*/

if( get_field( "text_field" ) ): ?>
    <p><?php the_field( "text_field" ); ?></p>
<?php endif;

様々なことができます。また追い追い説明します。

3.
テンプレート階層

テーマを編集する際には、どのテンプレートがどのページを表示しているか、またそれらをどのように管理するかなどを考える必要が出てきます。
そのとき、テンプレート階層を理解しておくことが重要になります。

テンプレート階層 http://wpdocs.osdn.jp/テンプレート階層

4.
メディアリテラシーについて

インターネット上の情報は玉石混交とよく言われます。それは、自分が発する情報に対する「無関心」が招いているのかもしれない、と思うことがあります。

メディアリテラシーとは。(総務省のページ)
http://www.soumu.go.jp/main_sosiki/joho_tsusin/top/hoso/kyouzai.html

その情報は真実か、伝える価値があるか、相手にとってどんなタイミング文脈で差し出されることで最も有用なものになるか
内田樹 著『街場の大学論 ウチダ式教育再生 』3章「メディアリテラシーとは」

なるべくソースをひとつにしておき、修正の必要が発生した場合には対処できるようにあらかじめ考えておく。
例えば、公式ページがあり、URLのみを拡散すれば、内容に変更が生じた場合も、正しい情報を確認しやすくなるのではないか、など。

5.
ターゲットを具体的に想像して、適切な方法を考える

今回はウェブに関する勉強会なので、ホームページで告知し、SNSで拡散する、という方法をとりましたが、イベントの内容やターゲットによっては必ずしもウェブを使うことが答えではないかもしれません。

また、今回の場合でも「ホームページをわざわざ作らなくても、Facebookのグループとイベント情報だけでよいのでは?」と考える場合もあるかもしれません。

その通りで十分な場合もあると思いますが、私は個人的に、SNSは拡散のためにのみ利用、コンテンツは自分が管理できる場所(ホームページ)に置く、と考えています。SNSは、いつかサービスが終了するかもしれません。そのとき、そこにしかコンテンツがなかったら、何も残らなくなると思うからです。(考え方や適切な方法はその時々・様々、と思うので、あくまでひとつの意見です)