お問い合わせ

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

みんなが大好きなSWELLでは、この記事を書いた人、いわゆる著者プロフィールは記事の最後に表示されます。

表示するしないは選べますが、どこに表示するかは選べません。

また、ウィジェットとしても用意されていないので、ウィジェットエリアに配置することもかないません。

著者プロフィール、この記事を書いた人というのは実は記事の先頭にあった方がよいのではないか?と思っています。

この記事を書いた人

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富。SWELLやCocoon、Snowmonkey、Arkheなどテーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。
第二種情報処理技術者試験(合格率:15.5%)、Google アナリティクス上級者向けコースGoogle タグ マネージャーの基礎コース上級ウェブ解析士HTML5プロフェッショナル認定 レベル2

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

役に立ったら他の人にもシェア!
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

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

この記事の内容