みんなが大好きなSWELLでは、この記事を書いた人、いわゆる著者プロフィールは記事の最後に表示されます。
表示するしないは選べますが、どこに表示するかは選べません。
また、ウィジェットとしても用意されていないので、ウィジェットエリアに配置することもかないません。
著者プロフィール、この記事を書いた人というのは実は記事の先頭にあった方がよいのではないか?と思っています。
この記事では、SWELLの著者プロフィールをショートコード化して好きな場所に表示するカスタマイズをご紹介します。
SWELLの著者プロフィールをショートコード化して好きな場所に表示するカスタマイズ
ショートコードのソース
コピペできるソースコード
add_shortcode('post_author','func_post_author');
function func_post_author(){
$the_id = get_the_ID();
$post_data = get_post( $the_id );
ob_start();
// 著者情報
$show_meta = get_post_meta( $the_id, 'swell_meta_show_author', true );
if ( 'hide' !== $show_meta && ( 'show' === $show_meta || 1 ) ) :
//SWELL_Theme::get_parts( 'parts/single/post_author', $post_data->post_author );
out_post_author($post_data->post_author );
endif;
return ob_get_clean();
}
function out_post_author($variable){
$author_id = $variable ?: '';
// データ取得
$author_data = SWELL_Theme::get_author_data( $author_id );
$author_name = $author_data['name'] ?? '';
$author_description = $author_data['description'] ?? '';
$author_position = $author_data['position'] ?? '';
$author_sns_list = $author_data['sns_list'] ?? [];
$author_url = get_author_posts_url( $author_id );
?>
<section class="l-articleBottom__section -author">
<div class="l-articleBottom__title c-secTitle">
<?php echo wp_kses( SWELL_Theme::get_setting( 'post_author_title' ), SWELL_Theme::$allowed_text_html ); ?>
</div>
<div class="p-authorBox">
<div class="p-authorBox__l">
<?php echo get_avatar( $author_id, 100, '', sprintf( __( '%sのアバター', 'swell' ), $author_name ) ); ?>
<a href="<?=esc_url( $author_url )?>" class="p-authorBox__name hov-col-main u-fz-m">
<?=esc_html( $author_name )?>
</a>
<?php if ( $author_position ) : ?>
<span class="p-authorBox__position u-fz-s u-thin">
<?=esc_html( $author_position )?>
</span>
<?php endif; ?>
</div>
<div class="p-authorBox__r">
<?php if ( $author_description ) : ?>
<p class="p-authorBox__desc u-thin">
<?=wp_kses( nl2br( $author_description ), SWELL_Theme::$allowed_text_html )?>
</p>
<?php endif; ?>
<?php
// SNS情報があればアイコン表示
if ( ! empty( $author_sns_list ) ) :
$list_data = [
'list_data' => $author_sns_list,
'ul_class' => 'is-style-circle p-authorBox__iconList',
'hov_class' => 'hov-flash-up',
];
SWELL_Theme::get_parts( 'parts/icon_list', $list_data );
endif;
?>
<?php if ( SWELL_Theme::get_setting( 'show_author_link' ) ) : ?>
<div class="p-authorBox__more">
<a href="<?=esc_url( $author_url )?>" class="p-authorBox__moreLink hov-bg-main u-fz-s">
<?=esc_html__( 'この著者の記事一覧へ', 'swell' )?>
</a>
</div>
<?php endif; ?>
</div>
</div>
</section>
<?php
}
スタイルの調整
ul.c-iconList.is-style-circle.p-authorBox__iconList{
padding-left:0;
list-style:none;
}
使い方
functions.php
にコピペするとpost_author
ショートコードが有効になります。
好きなウィジェットエリアにHTMLウィジェットを配置して、[post_author]
と入力して保存してください。
記事先頭のウィジェットエリアに入れるとちょうどいい感じだと思います。
オリジナルの著者プロフィールはh2タグになっていたので、divに変えてあります。
ブログパーツを使ったカスタマイズ
SWELLのカスタマイズは、ブログパーツを使ったものが多いです。
記事内にプロフィールを入れるカスタマイズもブログパーツを使って行えるようで、SWELLのフォーラムにそのような記事がありました。
ブログパーツというのは、再利用ブロックとブロックパータンをSWELLのローカルルールでそう呼んでいるだけのものです。
そのブログパーツを作るのが面倒だと思ったので、私はテーマで使われてるコードをそのまま使いました。
ブログパーツが作れたとして、再利用ブロックとして使うのであれば、結局ショートコードで呼び出すのと同じでしょう。
ブロックパターンとして展開すれば記事ごとに内容を変更できる利点はありますが、ショートコードでは呼び出せなくなりますから、都度挿入する必要がありますし、後から変更する場合に大変です。
Useful Blockを使う方法もある
目次直前にウィジェットエリアを追加して著者情報を表示するには?
今回のカスタマイズを目次直前に表示する場合、ウィジェットエリアを目次直前に追加する必要があります。
そのカスタマイズについては、以下の記事で紹介しています。

まとめ
SWELLのカスタマイズは楽しいですね。テーマの完成度が高いためテーマで使われている機能を流用すると色々なことができます。