twentyfourteenで投稿者の写真を表示する方法–Gravatar編

2014年5月26日2015年6月26日

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

twentyfourteenの子テーマを作ってこのblogを運営しています。先日、投稿者写真が出ないのはわかりにくい！という要望を聞きましたので、表示されるように修正してみました。

記事をざっと見る

そもそもこの画像は何？

ログインすると画像が表示されています。

プロフィールの編集でアップした記憶がないんですが、とよく考えるとこれはGravatarの画像のようです。

登録したメールアドレスがGravatarに存在していると表示されるという事になってるみたいです。とりあえずこの画像でいいので投稿記事に表示してみようと思います。

修正前は、

このように表示されているあたりに画像を表示しようと思います。

はまりました。incの中にあるphpファイルのカスタマイズ

該当部分のテンプレートのphpは　twentyfourteen/inc/template-tags.php にあるようです。

子テーマを使って色々修正しているのですが、子テーマに　inc/template-tags.php　を作ってカスタマイズしても元のファイルを読み込んでしまい、修正が反映されません(>_<)

で、色々調査したところ、functions.phpで

require get_template_directory() . ‘/inc/template-tags.php’;

このように読み込んでいるからのようなのです。
参照：WordPress 子テーマがカレントのときのテンプレートディレクトリの取得

子テーマを使っていてもこの書き方だと親の　inc　から参照されてしまうと言うことでした。

もとのテーマは修正したくないので、該当部分を子テーマのfunctions.phpに追記することでなんとかなりました(^^)/。

この方法が有効だったのは該当functionが未定義の時だけ記述する形だったので先に定義してしまえば定義されないというコーディングだったおかげです。

いよいよテンプレート修正

元のfunctionを子テーマのfunctions.phpにコピーします。

twentyfourteen\inc\template-tags.php　の　twentyfourteen_posted_on　です。前後のif文は必要ないのでこの部分を、子テーマのfunctions.phpに追加します。

function twentyfourteen_posted_on() {
    if ( is_sticky() && is_home() && ! is_paged() ) {
        echo '<span class="featured-post">' . __( 'Sticky', 'twentyfourteen' ) . '</span>';
    }

    // Set up and print post meta information.
    printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span> <span class="byline"><span class="author vcard"><a class="url fn n" href="%4$s" rel="author">%5$s</a></span></span>',
        esc_url( get_permalink() ),
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
        get_the_author()
    );
}

上記追加したものを以下の様に修正します。

function twentyfourteen_posted_on() {
    // 開始　gravatarアバターを表示する 追加
    // アバターの縦サイズを指定
    $avatarHeight = 50;
    echo '<div style="float:left;margin-bottom:5px;margin-right:5px;">'.get_avatar( get_the_author_meta('email'), $avatarHeight )."</div>"; 
    // 終了　gravatarアバターを表示する 追加
    
    if ( is_sticky() && is_home() && ! is_paged() ) {
        echo '<span class="featured-post">' . __( 'Sticky', 'twentyfourteen' ) . '</span>';
    }
    // Set up and print post meta information.
    printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span> <span class="byline"><span class="author vcard"><a class="url fn n" href="%4$s" rel="author">%5$s</a></span></span>',
        esc_url( get_permalink() ),
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
        get_the_author()
    );
}

// 開始　gravatarアバターを表示する追加　から　// 終了　gravatarアバターを表示する追加　までを追加しました。実際のコードはたったの2行です。また、

$avatarHeight = 50;

で高さを指定していますのでこの数字でお好きな大きさに調整してください。

これで表示は出来るのですが、最初に画像を使っていないコンテンツの場合、本文が変なところに出てしまいました。

ので、content.phpに手を加えました。子テーマのcontent.php（なければtwentyfourteenからコピー）の

    <div class="entry-summary">

の数行下の

<div class="entry-content">

を

    <?php // singleページでgravatarを使っている場合、content位置調整 ?>
    <?php if (is_single()) : ?>
    <div class="entry-content" style="padding: 25px 10px 0;">
    <?php else : ?>
    <div class="entry-content">
    <?php endif; ?>

と書き換えました。投稿ページだったらstyleを指定します。これで、