MENU
他にはない情報だと自負しています
お問い合わせ
お問い合わせ
  1. ホーム
  2. SWELL
  3. SWELL 固定ページ・TOPページにSNSシェアボタンを表示するカスタマイズ

SWELL 固定ページ・TOPページにSNSシェアボタンを表示するカスタマイズ

SWELL
カスタマイズ 子テーマ 有料級

SWELLの固定ページにもSNSシェアボタンが欲しいです

SWELLのフォーラムでも何度か要望として挙がっていてスルーされているものとして、『固定ページにSNSシェアボタンが欲しい』があります。

SWELLフォーラムの要望
トップページ・固定ページにもSNSシェアボタンが欲しいです < ご要望
固定ページの SNSシェアボタン < ご要望

本当に固定ページにSNSシェアが必要か？という議論はあると思いますが、何度か要望が上がってはいますので一定の需要はあるのだと思います。

ですが、これらの要望に対してテーマ開発側の反応は無いので、今後機能が追加される可能性はほぼ無い状況に見えます。

一方で、有料記事でSWELLの固定ページにSNSシェアボタンを追加する内容があるそうですので、ユーザーサイドのカスタマイズ（子テーマレベル）で対応できるのだろうと推測しました。

そこで、この記事では、固定ページ・TOPページにSNSシェアボタンを追加するというのは、ユーザーサイドのカスタマイズで対応できる内容なのか見ていきたいと思います。

結論から申し上げれば、子テーマが必要ですが、SWELLの固定ページ・TOPページにSNSシェアボタンを追加することは可能でした。

固定シェアボタンだけなら子テーマを使わなくても、SWELLの固定ページ・TOPページにSNSシェアボタンを追加できます。

最後に固定ページにSNSシェアボタンを表示するカスタマイズコードをご紹介します。

なぜSWELLのSNSシェアボタンは固定ページで表示できないか？

SNSシェアボタンを表示するには、最低でもボタンのHTMLとCSSが必要です。

SWELLの固定ページのテンプレートファイルpage.phpでは出力されるようになっていません。

一方で、投稿用のテンプレートファイルsingle.phpではSNSシェアボタンを出力するコードが組み込まれています。

その部分は次のようになっています。

省略
			
			// 記事上シェアボタン
			if ( $show_share_btns && $SETTING['show_share_btn_top'] ) {
				SWELL_Theme::get_parts( 'parts/single/share_btns', [ 'position' => '-top' ] );
			}

省略

            // 下部シェアボタン
			if ( $show_share_btns && $SETTING['show_share_btn_bottom'] ) {
				SWELL_Theme::get_parts( 'parts/single/share_btns', [ 'position' => '-bottom' ] );
			}

			// 固定シェアボタン
			if ( $show_share_btns && $SETTING['show_share_btn_fix'] ) {
				SWELL_Theme::get_parts( 'parts/single/share_btns', [ 'position' => '-fix' ] );
			}
省略

この記述が存在しないので、固定ページではSNSシェアボタンが表示されません。

固定ページのテンプレートにSNSシェアボタンのコードを組み込むとどうなるか？

SWELLの固定ページのテンプレートファイルpage.phpに先ほどのコードを追加したらどうなるでしょうか？

SNSシェアボタンのHTMLコードが出力されるようになります。

ですが、CSSが当たっていないので、見た目は全く違います。

SNSシェアボタンのCSSを出力するには？

ここが一番の問題になります。

SNSシェアボタンのベースとなるCSSはswell\build\css\modules\page\single.cssにあるのですが、投稿ページでしか出力されないようになっています。

			// ページ種別ごとのファイル
			if ( is_home() ) {
				self::add_module( 'page/home' );
			} elseif ( is_search() ) {
				self::add_module( 'page/search' );
			} elseif ( is_singular( 'lp' ) ) {
				self::add_module( 'page/lp' );
			} elseif ( is_single() ) {
				self::add_module( 'page/single' );//ここ
			} elseif ( is_page() ) {
				self::add_module( 'page/page' );
			} elseif ( SWELL::is_term() ) {
				self::add_module( 'page/term' );
			} elseif ( is_author() ) {
				self::add_module( 'page/author' );
			} elseif ( is_archive() ) {
				self::add_module( 'page/archive' );
			} elseif ( is_404() ) {
				self::add_module( 'page/404' );
			}

固定ページで無理やりSNSシェアボタンのHTMLを出力しても、デザインが崩れるのはこのCSSが不足しているためです。

親テーマで修正ができないので、swell\build\css\modules\page\single.cssの中からSNSシェアボタンに必要なCSSを抜き出して、自分で追加してあげれば良さそうです。

このCSSだけではSNSシェアボタンのCSSは完全にはなりません。

カスタマイザー設定依存のSNSシェアボタンのCSSも必要

SNSシェアボタンのベースとなるCSSはswell\build\css\modules\page\single.cssにあるのですが、それ以外にもカスタマイザーでシェアボタンのスタイルを選択したときに動的に追加されるCSSも必要になります。

そのCSSはshare_btn()関数でインラインCSSとして出力されます。

	/**
	 * シェアボタン
	 */
	public static function share_btn() {

		$share_btn_style = SWELL::get_setting( 'share_btn_style' );

		$btn_mr  = '';
		$btn_css = [];
		switch ( $share_btn_style ) {
			case 'btn':
			case 'btn-small':
				$btn_mr    = '8px';
				$btn_css[] = 'padding:6px 8px;border-radius:2px';
				break;
			case 'icon':
			case 'box':
				// 共通のスタイル
				style::add( '.c-shareBtns__btn:not(:hover)', 'background:none' );
				style::add( '.-fix .c-shareBtns__btn:not(:hover)', 'background:#fff' );
				style::add( '.c-shareBtns__btn:not(:hover) .c-shareBtns__icon', 'color:inherit' );

				$btn_mr    = '8px';
				$btn_css[] = 'padding:8px 0;transition:background-color .25s';

				// 個別のスタイル
				if ( 'icon' === $share_btn_style ) {
					$btn_css[] = 'box-shadow:none!important';
					style::add( '.c-shareBtns__list', [
						'padding: 8px 0',
						'border-top: solid 1px var(--color_border)',
						'border-bottom: solid 1px var(--color_border)',
					] );
				} else {
					$btn_css[] = 'border: solid 1px';
				}
				break;
			default:
				// block
				$btn_mr    = '4px';
				$btn_css[] = 'padding:8px 0';
				break;
		}
		style::add( '.c-shareBtns__item:not(:last-child)', 'margin-right:' . $btn_mr );
		style::add( '.c-shareBtns__btn', $btn_css );
	}

この部分を外部から呼び出せれば、投稿のSNSシェアボタンと同じ見た目になります。

SWELLで固定ページにSNSシェアボタンを表示するカスタマイズ①

まず、固定ページのテンプレートに、固定シェア、記事上部と下部のSNSシェアボタンを表示するコードをテンプレートに追加します。

専用のテンプレートをカスタムテンプレートファイルとして用意して、SNSシェアボタンを表示したい固定ページにのみ適用できるようにします。

あわせて読みたい
SWELL 固定ページにカスタムテンプレートを追加する手順 SWELLというよりもWordpressの機能になりますが、カスタムテンプレートという機能があります。 カスタムテンプレートとは？ 固定ページのテンプレートを投稿毎に切り替…

カスタムテンプレートファイルとは？

WordPressのテンプレートファイルの先頭に指定のフォーマットでコメントを追加することで、ページごとに選択できるテンプレートファイルとして登録できる。

先頭のコメントの書き方

<?php /* Template Name: Example Template */ ?>

投稿タイプを指定する場合

<?php
/*
Template Name: Full-width layout
Template Post Type: post, page, event
*/
// Page code here...
Page Templates – Theme Handbook | Developer.WordPress.org

固定ページでSNSシェアボタンを追加するテンプレート

<?php
/*
Template Name:固定ページSNS
*/
if ( ! defined( 'ABSPATH' ) ) exit;
get_header();
if ( is_front_page() ) :
	SWELL_Theme::get_parts( 'tmp/front' );
else :
	while ( have_posts() ) :
		the_post();
		$the_id = get_the_ID();
		
		
	$SETTING = SWELL_Theme::get_setting();
	$the_id  = get_the_ID();

	// シェアボタンを隠すかどうか
	$show_share_btns = get_post_meta( $the_id, 'swell_meta_hide_sharebtn', true ) !== '1';
		

		// 固定ページではサイズ指定を無視して「大」を表示
		$show_pr_notation = SWELL_Theme::get_pr_notation_size( $the_id, 'show_pr_notation_page' );
	?>
		<main id="main_content" class="l-mainContent l-article">
			<div class="l-mainContent__inner" data-clarity-region="article">
				<?php SWELL_Theme::get_parts( 'parts/page_head' ); ?>
				<?php if ( $show_pr_notation ) : ?>
					<?php SWELL_Theme::pluggable_parts( 'pr_notation' ); ?>
				<?php endif; ?>
				<?php
				// 記事上シェアボタン
				if ( $show_share_btns && $SETTING['show_share_btn_top'] ) {
					SWELL_Theme::get_parts( 'parts/single/share_btns', [ 'position' => '-top' ] );
				}
					?>
				<div class="<?=esc_attr( apply_filters( 'swell_post_content_class', 'post_content' ) )?>">
					<?php the_content(); ?>
				</div>
				<?php
					// 改ページナビゲーション
					$defaults = [
						'before'           => '<div class="c-pagination -post">',
						'after'            => '</div>',
						'next_or_number'   => 'number',
						// 'pagelink'      => '<span>%</span>',
					];
					wp_link_pages( $defaults );

					// ページ下部ウィジェット
					SWELL_Theme::outuput_content_widget( 'page', 'bottom' );
					
					// 下部シェアボタン
					if ( $show_share_btns && $SETTING['show_share_btn_bottom'] ) {
						SWELL_Theme::get_parts( 'parts/single/share_btns', [ 'position' => '-bottom' ] );
					}

					// 固定シェアボタン
					if ( $show_share_btns && $SETTING['show_share_btn_fix'] ) {
						SWELL_Theme::get_parts( 'parts/single/share_btns', [ 'position' => '-fix' ] );
					}
				?>
			</div>
			<?php if ( SWELL_Theme::is_show_comments( $the_id ) ) comments_template(); ?>
		</main>
	<?php
	endwhile; // End loop
endif;
get_footer();

固定ページとTOPページにSNSシェアボタンのCSSを出力する

swell\build\css\modules\page\single.cssの中からSNSシェアボタンに必要なCSSを抜き出したCSSとカスタマイザーのデザインに依存して変化するCSSをheadに出力します。

自分で確認した限りでは、single.cssをそのまま読み込んでも動くようです（余計なCSSは適用先が無い？）ので、2つバージョンを用意しました。

もし、single.cssをそのまま読み込んで他に影響があった場合は、抜き出したバージョンを使ってください。

  • single.cssをそのまま読み込むバージョン
  • single.cssからシェアボタンのCSSだけ抜き出して読み込むバージョン

single.cssをそのまま読み込むバージョン

add_action('wp_head',function(){

	if(is_front_page()||is_page()):
		\SWELL_Theme\Style\Page::share_btn();
		$css  = \SWELL_Theme\Style::generate_css();

		echo '<style>';
		echo $css;
		echo '</style>';
	
		echo '<style>';
	\SWELL_Theme\Style::add_module( 'page/single' );
	echo \SWELL_Theme\Style::load_modules( 1 );
		echo '</style>';



	endif;
});

single.cssからシェアボタンのCSSだけ抜き出して読み込むバージョン

add_action('wp_head',function(){

	if(is_front_page()||is_page()):
		\SWELL_Theme\Style\Page::share_btn();
		$css  = \SWELL_Theme\Style::generate_css();

		echo '<style>';
		echo $css;
		echo '</style>';
	
		echo '<style>';
?>
.c-shareBtns__message {
  padding: .25em 0 .75em;
  text-align: center;
  width: 100%
}

.c-shareBtns__message .__text {
  display: inline-block;
  line-height: 1.5;
  padding: 0 1.5em;
  position: relative
}

.c-shareBtns__message .__text:after,
.c-shareBtns__message .__text:before {
  background-color: currentcolor;
  bottom: 0;
  content: "";
  display: block;
  height: 1.5em;
  position: absolute;
  width: 1px
}

.c-shareBtns__message .__text:before {
  left: 0;
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg)
}

.c-shareBtns__message .__text:after {
  right: 0;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg)
}

.c-shareBtns__list {
  display: flex;
  justify-content: center
}

.c-shareBtns__item.-facebook {
  color: #3b5998
}

.c-shareBtns__item.-twitter {
  color: #1da1f2
}

.c-shareBtns__item.-twitter-x {
  color: #000
}

.c-shareBtns__item.-hatebu {
  color: #00a4de
}

.c-shareBtns__item.-pocket {
  color: #ef3f56
}

.c-shareBtns__item.-pinterest {
  color: #bb0f23
}

.c-shareBtns__item.-line {
  color: #00c300
}

.c-shareBtns__item.-copy {
  color: #717475;
  position: relative
}

.c-shareBtns:not(.-style-btn-small) .c-shareBtns__item {
  flex: 1
}

.c-shareBtns__btn {
  align-items: center;
  background-color: currentcolor;
  border-radius: var(--swl-radius--2, 0);
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-align: center;
  text-decoration: none
}

.c-shareBtns__icon {
  --the-icon-size: 4.5vw;
  color: #fff;
  display: block;
  font-size: var(--the-icon-size);
  height: 1em;
  line-height: 1;
  margin: auto;
  width: 1em
}

.c-shareBtns__icon:before {
  color: inherit;
  display: block
}

.-fix.c-shareBtns {
  border: none !important;
  left: 8px;
  margin: 0;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 30px;
  z-index: 99
}

.-fix.c-shareBtns .c-shareBtns__list {
  border: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: 100%
}

.-fix.c-shareBtns .c-shareBtns__item {
  flex-basis: 100%;
  margin: 4px 0;
  max-width: 100%;
  padding: 0;
  width: 100%
}

.-fix.c-shareBtns .c-shareBtns__btn {
  height: 30px;
  padding: 0
}

.-fix.c-shareBtns .c-shareBtns__icon {
  font-size: 16px
}

.c-urlcopy {
  display: block;
  position: relative;
  width: 100%
}

.c-urlcopy .-copied {
  opacity: 0;
  position: absolute;
  top: 8px
}

.c-urlcopy .-to-copy {
  opacity: 1;
  top: 0
}

.c-urlcopy.-done .-to-copy {
  opacity: 0;
  top: 8px;
  transition-duration: 0s
}

.c-urlcopy.-done .-copied {
  opacity: 1;
  top: 0;
  transition-duration: .25s
}

.c-urlcopy.-done+.c-copyedPoppup {
  opacity: 1;
  visibility: visible
}

.c-urlcopy .c-shareBtns__icon {
  transition: opacity .25s, top .25s
}

.c-urlcopy__text {
  display: block
}

.c-urlcopy__content {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%
}

.c-copyedPoppup {
  bottom: calc(100% + 2px);
  color: grey;
  font-size: 10px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  transition: opacity .25s, visibility .25s;
  visibility: hidden;
  white-space: nowrap
}

.-fix.c-shareBtns .c-copyedPoppup {
  bottom: 50%;
  left: 100%;
  right: auto;
  -webkit-transform: translateX(8px) translateY(50%);
  transform: translateX(8px) translateY(50%)
}

.c-big-urlcopy {
  margin: 1em 0
}

.c-big-urlcopy .c-shareBtns__icon {
  align-items: center;
  display: flex;
  justify-content: center;
  width: auto
}

.c-big-urlcopy .c-urlcopy__text {
  font-size: .8em;
  margin-left: .75em;
  padding-top: 1px
}

.c-shareBtns.-style-btn-small.has-big-copybtn {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.c-shareBtns.-style-btn-small .c-big-urlcopy {
  margin: 8px;
  max-width: 100%;
  width: 16em
}


@media (min-width:600px) {

  .c-shareBtns__icon {
    --the-icon-size: 18px
  }

  .c-copyedPoppup {
    font-size: 11px;
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%)
  }


}

@media not all and (min-width:960px) {
  .-fix.c-shareBtns {
    display: none !important
  }
}
<?php
	echo '</style>';

	endif;
});

SWELLで固定ページにSNSシェアボタンを表示するカスタマイズ②

SNS 固定シェアのみTOPと固定ページに表示するカスタマイズ

TOPページと固定ページで固定シェアボタンを表示するコードを追加します。

positon fixedなのでどこで出力しても問題なさそうですが、body内部じゃないとURLコピーボタンのJSがうまく動きませんでした。

add_action('wp_body_open',function(){

	if(is_front_page()||is_page()):
		$SETTING = SWELL_Theme::get_setting();
				// 固定シェアボタン
			if ( $SETTING['show_share_btn_fix'] ) {
				SWELL_Theme::get_parts( 'parts/single/share_btns', [ 'position' => '-fix' ] );
			}
	endif;
});

固定ページとTOPページにSNSシェアボタンのCSSを出力する

①と同じです。

もともとSWELLの固定シェアはスマホでは表示されない仕様です。

まとめ

必要かどうかはかなり謎だと思いますが、TOPページや固定ページでSNSシェアボタンを表示するカスタマイズをご紹介しました。

適用は自己責任でお願いします。

SWELLのSNSシェアボタンは固定シェアボタンがスマホの時に使えない方が問題だと思っています。

TOPへ戻るや目次のようにボタンを固定で表示してモーダルでシェアボタンが開くような実装が欲しいですね。

SWELL
カスタマイズ 子テーマ 有料級
他の人にもシェアしてね
コメントを閉じる

コメント

コメントする

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

クリックできる目次