wpdb (6)

この投稿は2年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2014 年 12 月 13 日 836日前)
4,587文字 (読了時間11分)

SPONSORED LINK

いきなりですが、前回設定した子テーマには不備がありまして、親テーマの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でフォローしたりアンフォローしたりするとき、何か考えますか? 考えないですよね。「フォロー」というボタンを押すだけです。もしフォロー済みなら、そのボタンが「フォロー中」になり、マウスオーバーすると「解除」というラベルに変わります。要するに、一個のボタンに集約されるわけです。

twitterのフォローボタン
twitterのフォローボタン

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

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

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

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

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

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

SMAHING MAGAZINEの著者プロフィール
SMAHING MAGAZINEの著者プロフィール

というわけで、とりえあず各記事の下にプロフィールを表示してみましょう。おもむろに、前回作った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やらなんやらをバキバキ使って、このボタンをお利口なボタンにしてあげましょう。終わり。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス [書籍]

著者Douglas Crockford

クリエーター水野 貴明

出版社オライリージャパン

出版日2008 年 12 月 22 日

商品カテゴリー大型本

ページ数198

ISBN4873113911

Supported by amazon Product Advertising API

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2014 年 12 月 13 日にプログラミングの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

既存の社会制度の中で生き、それを享受してきた人間にとって、そのシステムに期待するものが何もなかった者たちが、格別恐れもせずにその破壊を試みる可能性を想像することはおそらく不可能なのだ。

— ミシェル・ウエルベック

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。