MENU
楽天セール開催中！ポイント最大11倍！ セール会場へ

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

広告
SWELLカスタマイズ

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

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

以下の画像は2023年11月の旧版の表示・設定例です。

ウィジェットとカスタマイザーの設定によりサイドバーに表示されるプロフィールウィジェットカード。

記事ごとに著者の情報を表示するため、この例ではユーザープロフィールを参照する独自カードを作ります。

SWELL標準のプロフィールウィジェットの入力内容を切り替える処理ではなく、ショートコードから別のカードを出力します。

記事の著者の情報をもとに動的に構築されたプロフィールカードの表示例。

実際のサンプル

この位置には、当サイトで運用していた旧版のショートコードを設置していました。

旧サンプルは記事の著者とカードの著者が一致しない状態を確認したため、表示を停止しました。

下記の修正版を使い、異なる著者の記事で切り替わるか確認してください。

更新履歴

2024.7.8 ユーザーのサイトURLを取得し、リンクアイコンを表示する処理を追加しました。

目次

著者

motokiのアバター motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

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

MOTOKI合同会社
カスタマイズの依頼・相談

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

著者ごとのプロフィール情報、カードを出力するPHP、表示を整えるCSSを用意します。

共通サイドバーに置く場合は、後述のキャッシュ対策も確認してください。

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

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

各ユーザー（著者）ごとに情報を入力する必要があります。このコードの役職・肩書き、SNS、カスタムアバターはSWELLが追加するユーザーメタを参照します。WordPress標準項目だけの環境では、それらの入力欄がない場合があります。

以下の管理画面とウィジェット画面の画像は2023年11月に撮影したもので、現在の画面とは項目の並びが異なる場合があります。

各ユーザーの情報を入力するための管理画面のプロフィール設定画面。

functions.php

続いてfunctions.phpです。

子テーマのfunctions.php、またはCode Snippetsのどちらか一方に追加します。

functions.phpでは既存のPHP開始タグの内側へ貼り付けます。

作業前にバックアップを取り、旧版の同名関数があれば差し替えてください。

※アバター画像は、ユーザーメタ「custom_avatar」に画像IDが保存されていればその画像を、なければWordPress標準のアバター画像を使います（1つのコードで両方に対応しています）。

お問い合わせページのパスは、コード内のhome_url( '/contact/' )で変更します。

ページがない場合は$contact_url = '';として、お問い合わせリンクを出力しないようにします。

RSSはサイト全体のフィード、お問い合わせはコードで指定したサイト共通のURLを使い、記事の著者ごとには切り替わりません。

function motoki_author_card() {
    if ( ! is_singular() ) { return ''; }
    $post = get_post( get_queried_object_id() );
    if ( ! $post instanceof WP_Post ) { return ''; }

    // 著者の情報を取得
    $author_id = (int) $post->post_author;
    if ( ! get_userdata( $author_id ) ) { return ''; }
    $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_site_url = esc_url( get_the_author_meta('url', $author_id), array( 'http', 'https' ) ); 

    // カスタムアバターの画像(なければ通常のアバター画像を使用)
    $custom_avatar_id = get_the_author_meta('custom_avatar', $author_id);
    $author_avatar_url = ( $custom_avatar_id ? wp_get_attachment_image_url( (int) $custom_avatar_id, 'thumbnail' ) : false ) ?: get_avatar_url($author_id);

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

    $rss_url = get_feed_link();

    // お問い合わせページ
    $contact_url = home_url( '/contact/' );


    // HTMLを生成
    $output = "<div class='waza-author-card 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'>" . wp_kses_post($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 ($author_site_url) {
        $output .= "<li class='c-iconList__item -link'><a href='" . esc_url($author_site_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='link'><i class='c-iconList__icon icon-link' role='presentation'></i></a></li>";
    }

    // ソーシャルメディアリンク
    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 -room'><a href='" . esc_url($room_url) . "' target='_blank' rel='noopener' class='c-iconList__link u-fz-14 hov-flash-up' aria-label='楽天ROOM'><i class='c-iconList__icon icon-room' 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');

このコードは表示中の個別ページの著者を取得します。

固定フロントページでは、その固定ページの著者が対象になります。

ホームを「最新の投稿」の一覧にしている場合や、カテゴリー・著者などのアーカイブページでは出力しません。

SNSとサイトのURLには、HTTP・HTTPSを許可したesc_url()を使います。プロフィールにはhttps://から始まる完全なURLを入力してください。

未入力や許可していないスキームのURLは出力しません。ただしesc_url()の公式仕様では相対パス等も通るため、すべての入力ミスを除外する検証ではありません。リンク先の存在や本人のアカウントかどうかは別に確認してください。

関連記事など別の投稿ループ内から呼び出しても、そのループの記事ではなく、表示中の個別ページの著者を参照します。

関連記事ごとに別の著者カードを並べる用途には、そのまま使えません。

著者が見つからない場合は空文字を返し、特定のユーザーIDへ切り替えません。

検証では、WordPressとSWELLを読み込んだ環境で、投稿・固定ページの著者の取得、アーカイブでの非表示、著者不存在、不正URLの除外、無効な画像IDでの標準アバターへの切り替え、紹介文のHTML制限、複数設置時のID重複がないことを確認しました。

従来のテキストウィジェットへの保存と著者の切り替えは、後述の隔離環境で確認しました。

SWELL 2.19.0の共通サイドバーでは、サイドバーキャッシュを有効にすると別記事の著者カードが残ることをPHPの実出力で確認しました。

共通サイドバーへ設置する場合は、下の追加処理も入れてください。

修正後のスマホ表示とページキャッシュ製品との併用は未検証です。

CSS

既存のプロフィールウィジェットへ影響を広げないよう、この例のラッパークラス.waza-author-card内に限定したCSSを追加します。

子テーマのstyle.css、または外観＞カスタマイズ＞追加CSSに記述しましょう。

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

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

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

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

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

.waza-author-card .p-profileBox__bg+.p-profileBox__icon {
    margin-top: -60px;
}

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

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

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

.waza-author-card .p-profileBox .p-profileBox__btn {
    margin: 1.5em auto .5em;
}

.waza-author-card .p-profileBox__btn .p-profileBox__btnLink {
    color: #fff;
}

.waza-author-card .p-profileBox__iconList {
    padding: .5em 0 1em;
    list-style: none;
}

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

    .waza-author-card .p-profileBox__text {
        font-size: 14px;
    }
}

ショートコードを挿入

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

サイドバーのウィジェットにショートコードを設置する設定画面。
[motoki_author_card]

以上です。

最後に確認しましょう。

著者別のカードを共通サイドバーに置く場合は、下の「著者カードがキャッシュで入れ替わらない場合」の追加処理を使います。

異なる著者の2記事を続けて開き、名前・紹介文・著者ページへのリンクを照合してください。

表示後は、別の著者の2記事で名前・紹介文・リンクが切り替わるか確認します。

元に戻す場合は追加したPHPとCSSを取り除き、ウィジェットのショートコードも外します。

投稿の著者とカードを照合する

まず一人の著者が書いた投稿に、実行用ショートコードを一つ置いて確認してください。

下の実画面では、検証用著者の名前・役職・紹介文が表示され、「詳しく見る」がその著者の一覧へ移動しました。

カスタムアバターの添付IDが存在しない条件でも通常アバターへ戻り、画像が表示されました。

未入力のSNSや、許可していないスキームを使うリンクは出力しません。入力したURLの到達先が正しいことまでは、このコードで保証しません。

本文に置いたカードのPC・スマホ表示とTab移動は以前の確認結果です。

共通サイドバーの保存操作も確認済みですが、今回追加したキャッシュ対策後のPC・スマホ表示とキーボード操作は別途確認が必要です。

サイドバーへ移す際は、著者が違う二つの投稿を開き、名前と「詳しく見る」のURLを照合してください。

ブログパーツやウィジェットのHTMLキャッシュを共有すると、別の投稿の著者が残る場合があります。

投稿の著者名・代替アバター・著者リンクを表示したスマホ幅のカード
2026年10月2日、隔離WordPressで撮影した実画面です。

ウィジェットに保存して別の著者の記事を開く

従来のウィジェット画面を使う場合は、共通サイドバーに「テキスト」ウィジェットを追加します。

「テキスト」または「コード」の入力欄に[motoki_author_card]を入れ、保存してください。

カスタムHTMLウィジェットなど、ショートコードが実行されない入力欄とは区別します。

同じウィジェットを保存したまま、著者が異なる2つの投稿を開いて名前・肩書き・紹介文を照合します。

投稿側の著者を変更したときも、カードがその著者のプロフィールを表示するか確認してください。

隔離したWordPress 7.1.2 / SWELL 2.19.0の従来のウィジェット画面で保存し、著者Aと著者Bの投稿に移動して、共通サイドバーの名前・肩書き・紹介文が切り替わることを確認しました。

今回の確認ではサイドバーキャッシュを無効にしています。

有効にして使う場合は、著者Aの記事の後に著者Bの記事を開くなど、表示順を変えて確認してください。

ブロックウィジェット画面とWP Rocketを有効にした状態は今回の検証対象に含みません。

保存済みの共通サイドバーに著者Bのプロフィールカードを表示した画面
保存済みの共通サイドバーに著者Bのプロフィールカードを表示した画面。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0で撮影。

著者カードがキャッシュで入れ替わらない場合

スクロールできます
確認条件SWELLのサイドバー出力
著者Aをキャッシュ有効で開いた後、著者Bを開くBの記事にもAの名前・職業・紹介文が残ることを再現
Bの記事でサイドバーキャッシュを無効にするBの情報へ切り替わる
下の追加処理を入れてB、Aの順に開く既存のAのキャッシュがあっても各投稿の著者へ切り替わる
一覧ページ、または著者カードのショートコード未登録時追加処理はサイドバーキャッシュ設定を変更しない

SWELL 2.19.0では、個別記事のサイドバーHTMLを保存するキーに著者IDが含まれていません。

検証環境で、実際のテキストウィジェットとサイドバーテンプレートを使い、2人の著者の投稿を続けて処理して確認しました。

共通サイドバーでこの著者カードを使うサイトに限り、次の処理を元のPHPと同じ貼付先へ追加します。

子テーマのfunctions.phpへ追加するときは既存のPHPタグ内へ入れます。

Code Snippetsで管理している場合もPHPのスニペットとして一箇所に登録し、重複させないでください。

この処理は、ショートコードが登録されているサイトの個別ページでSWELLのサイドバーキャッシュを使わないようにします。

カードの有無をウィジェットごとに判定する処理ではないため、個別ページ全体のサイドバー生成回数が増えます。

WordPressに保存されたSWELL設定値は変更しません。

WP RocketなどのページキャッシュやCDNが返すHTMLは、この処理の対象外です。

それらを使う場合は、著者が異なる2記事をキャッシュ有効で開き、カードの名前とリンクが一致するか別に確認します。

追加処理だけを戻すには、次の関数とadd_actionの行を取り除きます。

元の著者カードのPHP・CSS・ショートコードは残せます。

著者別カードを共通サイドバーに残す間は、サイドバーキャッシュを有効に戻すと再び情報が混在する可能性があります。

この追加処理はSWELLテーマ内部のメソッドを呼び出します。SWELLを更新したあとは、著者が異なる2記事でカードが切り替わるかを再確認してください。

// 著者カードを共通サイドバーへ置くサイトで使う。
function waza_author_card_sidebar_cache() {
    if ( is_singular() && class_exists( 'SWELL_Theme' )
        && shortcode_exists( 'motoki_author_card' ) ) {
        // DBの設定値は変更せず、この個別ページのPHP処理でだけ無効にする。
        SWELL_Theme::set_setting( 'cache_sidebar', false );
    }
}
add_action( 'wp', 'waza_author_card_sidebar_cache', 20 );

まとめ

この独自カードは、個別ページの著者情報をショートコードの設置先に表示します。

設置後は異なる著者の記事で表示内容とリンク先を照合し、導入先のキャッシュ構成でも切り替わることを確認してください。

GitHubに保存している旧コードは今回の修正と同期していません。

追加・差し替えには本記事の掲載コードを使ってください。

よくある質問：SWELLで記事の著者に合わせてプロフィール情報を変更するとき

このカスタマイズは、SWELL標準のプロフィールウィジェットを切り替えるものですか？

いいえ。記事では、SWELL標準のプロフィールウィジェットの入力内容を切り替える処理ではなく、ユーザープロフィールを参照する独自カードをショートコードから出力します。

著者の情報は、どこに入力しますか？

記事では、管理画面のユーザー＞プロフィール画面を開いて入力します。各ユーザー（著者）ごとに情報を入力する必要があります。記事の管理画面の画像は2023年11月に撮影したもので、現在の画面とは項目の並びが異なる場合があります。

必要なものは何ですか？

記事では、著者ごとのプロフィール情報、カードを出力するPHP、表示を整えるCSSを用意します。CSSは、子テーマのstyle.css、または外観＞カスタマイズ＞追加CSSに記述します。ウィジェットにショートコードを設置します。

どのページで著者カードが表示されますか？

記事では、このコードは表示中の個別ページの著者を取得します。固定フロントページでは、その固定ページの著者が対象です。ホームを「最新の投稿」の一覧にしている場合や、カテゴリー・著者などのアーカイブページでは出力しません。

関連記事ごとに、別々の著者カードを並べられますか？

そのまま使えません。記事では、関連記事など別の投稿ループ内から呼び出しても、そのループの記事ではなく、表示中の個別ページの著者を参照するため、関連記事ごとに別の著者カードを並べる用途には使えません。

ウィジェットには、どう保存しますか？

記事では、従来のウィジェット画面を使う場合、共通サイドバーに「テキスト」ウィジェットを追加し、「テキスト」または「コード」の入力欄にショートコードを入れて保存します。カスタムHTMLウィジェットなど、ショートコードが実行されない入力欄とは区別します。

別の記事を開いても、前の著者のカードが残るのはなぜですか？

記事では、SWELL 2.19.0では、個別記事のサイドバーHTMLを保存するキーに著者IDが含まれていないため、共通サイドバーでサイドバーキャッシュを有効にすると、別記事の著者カードが残ることをPHPの実出力で確認したと説明しています。共通サイドバーへ設置する場合は、記事の追加処理も入れます。

どこまで検証されていますか？

記事では、隔離したWordPress 7.1.2 / SWELL 2.19.0の従来のウィジェット画面で保存し、著者Aと著者Bの投稿で共通サイドバーの名前・肩書き・紹介文が切り替わることを確認しています。一方、ブロックウィジェット画面、WP Rocketを有効にした状態、修正後のスマホ表示、ページキャッシュ製品との併用は未検証です。元に戻す場合は、追加したPHPとCSSを取り除き、ウィジェットのショートコードも外します。

SWELLカスタマイズ
  • URLをコピーしました！

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜（税込）。テーマ更新に強い書き方で納品します。

カスタマイズ代行の詳細を見る
無料で相談する

WAZAの有料記事のサブスクリプションも開始しました。

あわせて読みたい
アフィリエイト付き！有料記事のサブスクリプションについて WAZAでは特に有益な記事は有料記事とさせていただいてます。 本記事では有料記事をリストでまとめました。 有料記事の購読プランと、対象コンテンツを紹介できるアフィ...

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

詳細を見る
全サービス一覧

関連記事

目次