SWELL│記事の著者に合わせてプロフィール情報を変更するカスタマイズ

SWELLのサイドバーに表示するプロフィールウィジェットカード

こちらの情報はウィジェット内の入力とカスタマイザーのSNS情報を入力して表示するカードになります。

しかし記事ごとのライターに合わせて、動的にプロフィール情報を変更したいということはないでしょうか?

本記事では記事の著者のユーザー情報の情報を取得して、プロフィールカードを構築する方法を紹介します。

目次

著者

WEB制作をしながらカナダ留学をしているデジタルノマド
技術的なことが好きでWordPressのカスタマイズもいろいろ自作しています。

WordPressのカスタマイズに困ったらご相談ください!

SWELLで記事の著者に合わせてサイドバーのプロフィールを変更するカスタマイズ

カスタマイズ方法はさほど難しくはありません。

順番を追って説明いたします。

ユーザープロフィールに情報を入力

管理画面から、ユーザー>プロフィール画面を開き、情報を入力しましょう。

各ユーザー(著者)ごとに情報を入力する必要があります。

functions.php

続いてfunctions.phpです。Code Snippetsなどのプラグインを入れて、下記のコードを挿入します。

※アバター画像はWordPressのものと、自前で用意するものと2種類あるので、どちらかのコードを選びます。

※お問い合わせページは手入力

function motoki_author_card() {
    global $post;

    // 著者の情報を取得
    $author_id = $post->post_author;
    $author_name = get_the_author_meta('display_name', $author_id);
    $author_position = get_the_author_meta('position', $author_id);
    $author_description = get_the_author_meta('description', $author_id);

    //通常のユーザープロフィール画像
    //$author_avatar_url = get_avatar_url($author_id); 

    //カスタムアバターの画像
    $custom_avatar_id = get_the_author_meta('custom_avatar', $author_id);
    $author_avatar_url = $custom_avatar_id ? wp_get_attachment_url($custom_avatar_id) : '';

    // ソーシャルメディアリンク等のURLの取得
    $author_profile_url = get_author_posts_url($author_id);
    $facebook_url = get_the_author_meta('facebook_url', $author_id); 
    $twitter_url = get_the_author_meta('twitter_url', $author_id);
    $instagram_url = get_the_author_meta('instagram_url', $author_id);
    $tiktok_url = get_the_author_meta('tiktok_url', $author_id);
    $room_url = get_the_author_meta('room_url', $author_id);
    $pinterest_url = get_the_author_meta('pinterest_url', $author_id);
    $github_url = get_the_author_meta('github_url', $author_id);
    $youtube_url = get_the_author_meta('youtube_url', $author_id);
    $amazon_url = get_the_author_meta('amazon_url', $author_id);

    $site_url = get_home_url();
    $rss_url = $site_url . '/feed/';

    // お問い合わせページ
    $contact_url = $site_url . '/contact/';


    // HTMLを生成
    $output = "<div id='swell_prof_widget-1' class='c-widget widget_swell_prof_widget'>";
    $output .= "<div class='p-profileBox '>";
    $output .= "<figure class='p-profileBox__icon'><img width='120' height='120' src='" . esc_url($author_avatar_url) . "' alt='' class='p-profileBox__iconImg'></figure>";
    $output .= "<div class='p-profileBox__name u-fz-m'>" . esc_html($author_name) . "</div>";
    $output .= "<div class='p-profileBox__job u-thin'>" . esc_html($author_position) . "</div>";
    $output .= "<div class='p-profileBox__text'>" . esc_html($author_description);
    $output .= "<div class='p-profileBox__btn is-style-btn_normal'><a href='" . esc_url($author_profile_url) . "' style='background:#b18e37' class='p-profileBox__btnLink'>詳しく見る</a></div></div>";
    $output .= "<ul class='c-iconList p-profileBox__iconList is-style-circle'>";

    // ソーシャルメディアリンク
    if ($facebook_url) {
        $output .= "<li class='c-iconList__item -facebook'><a href='" . esc_url($facebook_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='facebook'><i class='c-iconList__icon icon-facebook' role='presentation'></i></a></li>";
    }
    if ($twitter_url) {
        $output .= "<li class='c-iconList__item -twitter'><a href='" . esc_url($twitter_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='twitter'><i class='c-iconList__icon icon-twitter' role='presentation'></i></a></li>";
    }
    $output .= "<li class='c-iconList__item -rss'><a href='" . esc_url($rss_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='rss'><i class='c-iconList__icon icon-rss' role='presentation'></i></a></li>";

    if ($contact_url) {
        $output .= "<li class='c-iconList__item -contact'><a href='" . esc_url($contact_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='contact'><i class='c-iconList__icon icon-contact' role='presentation'></i></a></li>";
    }
    if ($instagram_url) {
        $output .= "<li class='c-iconList__item -instagram'><a href='" . esc_url($instagram_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='instagram'><i class='c-iconList__icon icon-instagram' role='presentation'></i></a></li>";
    }
    if ($tiktok_url) {
        $output .= "<li class='c-iconList__item -tiktok'><a href='" . esc_url($tiktok_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='tiktok'><i class='c-iconList__icon icon-tiktok' role='presentation'></i></a></li>";
    }
    if ($room_url) {
        $output .= "<li class='c-iconList__item -line'><a href='" . esc_url($room_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='line'><i class='c-iconList__icon icon-line' role='presentation'></i></a></li>";
    }
    if ($pinterest_url) {
        $output .= "<li class='c-iconList__item -pinterest'><a href='" . esc_url($pinterest_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='pinterest'><i class='c-iconList__icon icon-pinterest' role='presentation'></i></a></li>";
    }
    if ($github_url) {
        $output .= "<li class='c-iconList__item -github'><a href='" . esc_url($github_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='github'><i class='c-iconList__icon icon-github' role='presentation'></i></a></li>";
    }
    if ($youtube_url) {
        $output .= "<li class='c-iconList__item -youtube'><a href='" . esc_url($youtube_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='youtube'><i class='c-iconList__icon icon-youtube' role='presentation'></i></a></li>";
    }
    if ($amazon_url) {
        $output .= "<li class='c-iconList__item -amazon'><a href='" . esc_url($amazon_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='amazon'><i class='c-iconList__icon icon-amazon' role='presentation'></i></a></li>";
    }
    $output .= "</ul></div></div>";

    return $output;
}
add_shortcode('motoki_author_card', 'motoki_author_card');

ちなみにユーザー情報がない時は、最初のユーザーが表示されてしまいます。

もし指定のユーザーを表示したいときは下記のように指定しましょう。

    $author_id = $post->post_author;    
    // 著者情報がない場合は、user_idを5に設定
    if (empty($author_id)) {
        $author_id = 5;
    }

CSS

プロフィールウィジェットを入れないとCSSが読み込まれないので、手動でCSSを読み込みます。

Style.cssなどで読み込みましょう。

.p-profileBox {
    border: 1px solid var(--color_border);
    border-radius: var(--swl-radius--4,0);
    padding: 4px
}

.p-profileBox__bg {
    background: #ccc;
    border-radius: var(--swl-radius--2,0);
    height: 160px;
    margin: 0;
    overflow: hidden;
    width: 100%
}

.p-profileBox__bgImg {
    display: block;
    height: 160px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.p-profileBox__icon {
    margin: 1em 0 0;
    text-align: center
}

.p-profileBox__iconImg {
    background: #fdfdfd;
    border: 4px solid #fdfdfd;
    border-radius: 50%;
    height: 120px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 120px
}

.p-profileBox__bg+.p-profileBox__icon {
    margin-top: -60px
}

.p-profileBox__name {
    padding-top: .5em;
    text-align: center
}

.p-profileBox__job {
    font-size: 3.2vw;
    padding: 0 1em;
    text-align: center
}

.p-profileBox__text {
    font-size: 3.4vw;
    padding: 1em
}

.p-profileBox .p-profileBox__btn {
    margin: 1.5em auto .5em
}

.p-profileBox__btn .p-profileBox__btnLink {
    color: #fff
}

.p-profileBox__iconList {
    padding: .5em 0 1em
}

@media (min-width: 600px) {
    .p-profileBox__job {
        font-size:12px
    }

    .p-profileBox__text {
        font-size: 14px
    }
}

ショートコードを挿入

ウィジェットに下記のショートコードを設置します。

[motoki_author_card]

以上です。

最後に確認しましょう。

サイドバーをキャッシュしている場合は、キャッシュをクリアしないと情報が反映されないことがありますので注意しましょう。

当サイトのサイドバー上のプロフィールウィジェットは本カスタマイズになります。

まとめ

記事ごとにプロフィール情報を読み取って、動的に表示するということは、自作の著者カードも簡単に作成できるということになります。

気になった方はぜひ応用してみてください。

目次