賢威7の個別ページに著者情報＋アーカイブへのリンクを表示させる方法

今回はWordPressテーマ：賢威7の個別記事に著者情報とアーカイブページヘのリンクを表示させる方法について書いてみたいと思います。

著者情報を作っておくと固定ファン獲得のペースが早まると思いますし、サイトを見てくれる人にとっても安心できるサイトになると思うので、ぜひオススメしたいカスタマイズです。
よかったらお試し下さい！

1 カスタマイズ前
2 カスタマイズ後
3 1. 表示させる著者情報を用意
4 2. single.php を編集
- 4.1 2-1. 著者のアーカイブページを表示させたくない場合は？
5 3. CSSでスタイリング

カスタマイズ前

single-author-info-before

カスタマイズ後

カスタマイズ 1

↓ 著者情報とアーカイブページヘのリンクを追加

single-author-info-after

カスタマイズ 2

↓ 個別記事からのリンク先

author-archive

今回はPHPファイルを編集するので、バックアップを取ってから作業するようにして下さい（一応）。
画面が真っ白になることもあるので、小さいものでもPHPコードのミスには要注意です。

1. 表示させる著者情報を用意

今回はWordPressに登録した著者の情報を表示させるので、まずは個別記事に表示させたい情報を入力していきます。

WordPressの管理画面から「ユーザー」を選択し、表示させたいプロフィール情報を入力します。

single-author-info-admin-setting

もしユーザーのプロフィール画像が表示されない場合には、下のサイト（WordPress公式サイト）から、Gravatar というアバターを登録しておきます。

（WordPress以外のサービスにも連携しているので、一度の登録で他のサービスへの使い回しもできて意外と便利です）

https://ja.gravatar.com/

2. single.php を編集

次に single.php を編集して著者情報を表示させましょう。

single.php の 59 行目から 61 行目付近に、

PHP

コピーする

<?php }
relation_keni();

というコードがあるので、これを以下のコードで置き換えます。
（<?php } と relation_keni() の間に以下のコードを追加）

PHP

コピーする

<?php } ?>
<div class="author-info cf">
    <h2 class="author-heading">この記事の著者： <span class="author-title"><?php echo get_the_author(); ?></span></h2>              
    <div class="author-avatar">
        <?php echo get_avatar( get_the_author_meta( 'user_email' ), 90 ); ?>
    </div>
    <div class="author-description">
        <p><?php the_author_meta( 'description' ); ?></p>
        <a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
            <?php printf( '%s の記事をもっと見る >', get_the_author() ); ?>
        </a>
    </div>
</div>
<?php
relation_keni();

↓ コード編集後
keni-single-php-after

これで個別記事に著者の情報が表示されるようになりました。

single-author-info-after-php-2

2-1. 著者のアーカイブページを表示させたくない場合は？

先ほどのPHPコードには著者のアーカイブページヘのリンクも追加しましたが、逆に表示させたくない、という場合には、先ほどのコードではなく、以下のコードをsingle.php に追加します。
（single.php の59行目から61行目付近のコードを下のコードで置き換えます）

PHP

コピーする

<?php } ?>
<div class="author-info cf">
    <h2 class="author-heading">この記事の著者： <span class="author-title"><?php echo get_the_author(); ?></span></h2>              
    <div class="author-avatar">
        <?php echo get_avatar( get_the_author_meta( 'user_email' ), 90 ); ?>
    </div>
    <div class="author-description">
        <p><?php the_author_meta( 'description' ); ?></p>
    </div>
</div>
<?php
relation_keni();

ここでは著者のサムネイルサイズを90pxにしていますが、取得するサムネイルサイズを決めているのは上のコードの90という箇所なので、もし90px以外のサイズを使いたい、という場合には、下のように数字のみを入れ替えればお好みのサムネイルサイズに変更することができます。

↓ サムネイルを75pxで表示

PHP

コピーする

<?php echo get_avatar( get_the_author_meta( 'user_email' ), 75 ); ?>

3. CSSでスタイリング

ここまでのカスタマイズで著者情報を表示させることができたので、CSSファイルを編集して見た目を整えていきましょう。

下のCSSコードを、base.css や子テーマの style.css など、お好みのCSSファイルに追加すれば完成です。

CSS

コピーする

.author-info {
    margin-bottom: 30px;
}
.author-avatar {
    display: inline-block;
    float: left;
    width: 90px;
}
.author-avatar img {
    border-radius: 50%;
}
.author-description {
    margin-left: 105px;
}
/* ↓ アーカイブへのリンクを表示させる場合のみ ↓ */
.author-link {
    text-align: right;
    display: block;
}