wpdb道場 (6) 〜UIを考えよう〜

いきなりですが、前回設定した子テーマには不備がありまして、親テーマのCSSを読み込むという処理が抜けていました。

早速、tweeterテーマのフォルダ内にfunctions.phpを作成し、中にこんなコードを記載してください。

/**
 * 親テーマのCSSを読み込む
 */
add_action('wp_enqueue_scripts', function(){
     wp_enqueue_style('twenty-fifteen', get_template_directory_uri().'/style.css', array(), '1.0');
});

これにより、少なくともHTMLむき出しみたいな状況は無くなります。

さて、前回でとりあえずデータベースは作ったわけなのですが、一つ考えなければいけないことがあります。それは、「ユーザーはどこでフォローしたりアンフォローしたりするねん」ということです。

どんなUIにしたらいいか、考えよう

WordPressを使い慣れている人は、「管理画面に入ってー、それから左のメニューをクリックしてー、ユーザー一覧に行ってー、気になる人のリストにある『フォロー』っていうボタンを押してー」とか悠長なことを考えがちなのですが、よく考えてください。「この人をフォローしたい！」という気持ちは、カチカチクリックしているうちに萎えていきませんか？

では、どうしたらいいのか。それは、先行者であるtwitterのUIをパクる参考にすればいいんですよ。

twitterでフォローしたりアンフォローしたりするとき、何か考えますか？　考えないですよね。「フォロー」というボタンを押すだけです。もしフォロー済みなら、そのボタンが「フォロー中」になり、マウスオーバーすると「解除」というラベルに変わります。要するに、一個のボタンに集約されるわけです。

フォローしたりアンフォローしたりというのは何かというと、「トグル」というアクションなのです。皆さんがお家に帰った後、電気をつける。そして、眠るときに電気を消す。フォローというのはそれと同じアクションなんですね。

ということは、ボタン一個があれば十分です。

どこにボタンを出したらいいの？

さて、WordPressは基本的にブログなので、twitterとは違い、コンテンツが中心です。多くのブログでは、その記事を書いた人が誰なのかということは意識されません。なぜなら、その記事を書いた人はブログ主に決まっているからです。

たとえば、この文章を読んでいるあなたは、この文章の書き手が誰なのかということを疑問に思ったことがありますか？　ないですよね。高橋文樹.comなんだから、高橋文樹が書いていると思うに決まってます。でも、このブログに僕以外の人が書く機能がないわけではないです。ただ、それが自然だから、僕だけが書くブログになっている、それだけのことです。

近年、共著型のWordPressが増えています。海外の有名どころではSMAHSING MAGAZINEとか、WordPress業界ではWP TAVERNとかがありますが、こういうところは記事下にその記事を書いた人のプロフィールが表示されていますね。これ、いいじゃないですか。パクリ参考にしましょうよ。

というわけで、とりえあず各記事の下にプロフィールを表示してみましょう。おもむろに、前回作ったtweeterというテーマの親テーマであるTwenty Fifteenのcontent.phpを開きましょう。すると、下の方にこんな記述があります。

<?php
     // Author bio.
     if ( is_single() && get_the_author_meta( 'description' ) ) :
          get_template_part( 'author-bio' );
     endif;
?>

これは何かと言うと、「もし投稿シングルページで、作者がプロフィールを記入していたら、author-bioというテンプレートを表示する」という記述ですね。

さて、日本語テーマユニットテストをインポートすると、先頭表示の投稿に「テンプレート: 先頭固定表示」という投稿があります。これを開いてみましょう。

すると、あれ、何も出ていませんね。これは、この記事の作者であるWP-Hangoutsがプロフィールを記入していないからいけないんです。じゃあ、記入してあげましょう。管理画面のユーザー一覧に移動し、この自己紹介もろくにできない輩のプロフィールを代わりに記入してあげてください。

そうすると、記事下にプロフィールが表示されるようになります。

それなら、ここにフォローボタンを追加すればいいんですよ。「この記事書いたやつおもしれーな」と思ったらすぐフォローできます。

このプロフィール欄をカスタマイズするには、まずTwenty Fifteenに入っているauthor-bio.phpをtweeterにコピーします。

で、関数を書きます。そうですね、フォローボタンなので、freundschaft_btnという関数を定義しましょう。これはfreundschaft.phpに書いてください。

/**
 * フォローボタンを出力する
 */
function freundschaft_btn(){
     echo '<a class="button" href="#">フォローする</a>';
}

で、今度は先ほどコピーしたautho-bio.phpをちょっとカスタマイズします。

<?php
/**
 * The template for displaying Author bios
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

<div class="author-info">
     <h2 class="author-heading"><?php esc_html_e( 'Published by', 'twentyfifteen' ); ?></h2>
     <div class="author-avatar">
          <?php
          /**
           * Filter the author bio avatar size.
           *
           * @since Twenty Fifteen 1.0
           *
           * @param int $size The avatar height and width size in pixels.
           */
          $author_bio_avatar_size = apply_filters( 'twentyfifteen_author_bio_avatar_size', 56 );

          echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );
          ?>
     </div><!-- .author-avatar -->

     <div class="author-description">
          <h3 class="author-title"><?php echo get_the_author(); ?> <?php if( function_exists('freundschaft_btn') ) freundschaft_btn()  ?></h3>

          <p class="author-bio">
               <?php the_author_meta( 'description' ); ?>
               <a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
                    <?php printf( __( 'View all posts by %s', 'twentyfifteen' ), get_the_author() ); ?>
               </a>
          </p><!-- .author-bio -->

     </div><!-- .author-description -->
</div><!-- .author-info -->

これにより、フォローするというボタンが表示されます。ボタンというか、いまはただのリンクですね。

あとは、これをどうするねんという話になるのですが、疲れたので次回に譲ります。次回はAjaxやらなんやらをバキバキ使って、このボタンをお利口なボタンにしてあげましょう。終わり。