お問い合わせ

SWELLカスタマイズ|著者プロフィールを記事の先頭に表示する

みんなが大好きな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のカスタマイズは楽しいですね。テーマの完成度が高いためテーマで使われている機能を流用すると色々なことができます。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次