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

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

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

カスタマイズ前

カスタマイズ後

カスタマイズ 1

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

カスタマイズ 2

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

[ad]

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

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

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

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

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

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

https://ja.gravatar.com/

2. single.php を編集

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

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

<?php }

relation_keni();

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

<?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();

↓ コード編集後

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

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

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

<?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 echo get_avatar( get_the_author_meta( 'user_email' ), 75 ); ?>

3. CSSでスタイリング

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

下のCSSコードを、base.css や子テーマの style.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;
}

↓ 編集後の個別ページ

↓ 著者のアーカイブページ

ちなみに画像に写っているサイトは、ウェブ上に公開していないデモ用のサイトなので admin というユーザー名を使用していますが、このユーザー名でウェブ上に公開するのはとても危険です。

サイトの規模とは関係なく、セキュリティの弱そうなところを優先的に攻撃することも少なくないらしいので、ユーザー名は推測されにくい文字列にするのがオススメです。

↓ 著者のスラッグを変更して、ユーザーIDを分かりにくくするプラグイン
Edit Author Slug