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

Image

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

スポンサーリンク

そもそもこの画像は何?

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

Image

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

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

修正前は、

Image

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

はまりました。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に追加します。

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

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

$avatarHeight = 50;

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

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

Image

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

の数行下の

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

Image

文字の位置が調整されました。アバターのサイズを縦50ピクセルとした場合のあけ方ですので、アバターのサイズによって数値を調整してください。

twentyfourteenで著者アイコンを出すための修正するところのまとめ

色々書いてきましたが、結果的には

1.子テーマのfunctions.phpに twentyfourteen_posted_on を追記してアバターを表示する部分を追加する
2.子テーマのcontent.phpを修正して、投稿の時は若干paddingを空けるようにする

これだけで著者アイコンが表示できました。結果はというと

修正前は、

Image

だったのが、

Image

こんな感じに著者アイコンが表示されています!

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

フォローする

スポンサー広告
スポンサーリンク
スポンサーリンク
トップへ戻る