MENU

    【SWELL】ページトップボタン（TOPに戻るボタン）を好きな画像に変更する

    WordPress SWELL
    ページトップボタンを好きな画像に変更する

    この記事にはプロモーションが含まれています

    SWELLは素晴らしいテーマなのでphpやcssをいじらなくてもある程度はおしゃれなサイトが作れますが、こだわりだしたら止まらない私のようなブロガーさん達はきっとデザインをいじりまくっていることでしょう。
    ちーも

    カスタマイズ　＞　執筆　になりつつある

    さて、サイトの右下に表示されるページトップに戻るためのボタンありますよね。次にどんなカスタマイズをしようかと色々とググっていたとき、素敵なサイトを発見しました。

「ミライのヘルスケア | サワイ健康推進課」様のサイトですが、ページトップボタンを見てください・・・。
    ミライのヘルスケア | サワイ健康推進課
    ミライのヘルスケア | サワイ健康推進課 「ミライのヘルスケア」では、近い未来に実現するかもしれない、今研究が進められているヘルスケアの最新情報をお届けします。 
    めっっっっっっっちゃかわいい！

ということで今回はこちらのサイト様をパク・・参考に
SWELLのページトップボタンをお好みの画像に変更する方法を書いていきたいと思います。
    今回はいじらなければいけないファイルが結構多めです。頑張ってください
    ＼　今回の作業難易度は　／
    難易度
    簡単
    大変
    ちーも

    ではスタート！

    もくじ

    ボタンのデザインやコードについて

    完成したボタンはこのサイトのものをご確認ください。私のサイトではクリックすると画像が変わるようにしていますが、この記事の解説では画像の変化のないボタンを作る内容に変更しています。

今回ボタンのコード、css、jsはこちらのサイトを参考にさせていただきました。
    動くWebデザインアイデア帳
    リンクボタンをクリックしたら形状が変化 | 動くWebデザインアイディア帳

    PHPでボタンを作る

    ボタンを表示するファイルを編集する

    まずはボタン本体のコードを変更します。SWELL本体のディレクトリからfix_btns.phpというファイルをコピーしてきます。これがページトップボタンの表示を行っているファイルです。

ファイルの場所は以下の通りです。
    Xサーバーの場合
    /home/ユーザ名/ドメイン/public_html/wp-content/themes/swell/parts/footer/fix_btns.php
    コピーしたファイルを子テーマの同じディレクトリに配置します。parts　からディレクトリが存在しないと思うので、ご自身で作成してください。

設置するとこんな感じです。
    Xサーバーの場合
    /home/ユーザ名/ドメイン/public_html/wp-content/themes/swell_child/parts/footer/fix_btns.php
    次にこのコピーしたファイルの中身を以下のように変更していきます。
    <?php
/**
 * 画面右下に固定表示するボタン
 *
 * @package swell
 */

$has_tocbtn_text  = ! ! SWELL_Theme::get_setting( 'tocbtn_label' );
$has_pagetop_text = ! ! SWELL_Theme::get_setting( 'pagetop_label' );
?>
<div class="p-fixBtnWrap">
	<?php if ( SWELL_Theme::is_show_index() && SWELL_Theme::get_setting( 'index_btn_style' ) !== 'none' ) : ?>
		<button id="fix_tocbtn" class="c-fixBtn c-plainBtn hov-bg-main" data-onclick="toggleIndex" aria-label="<?=esc_attr__( '目次ボタン', 'swell' )?>" data-has-text="<?=esc_html( $has_tocbtn_text )?>">
			<i class="icon-index c-fixBtn__icon" role="presentation"></i>
			<?php if ( $has_tocbtn_text ) : ?>
				<span class="c-fixBtn__label"><?=esc_html( SWELL_Theme::get_setting( 'tocbtn_label' ) )?></span>
			<?php endif; ?>
		</button>
	<?php endif; ?>

	<?php if ( SWELL_Theme::get_setting( 'pagetop_style' ) !== 'none' ) : ?>
		<p id="page-top"><a href="#"></a></p>
	<?php endif; ?>
</div>
    コードの下の方の<?php if ( SWELL_Theme::get_setting( 'pagetop_style' ) !== 'none' ) : ?>の中を変更しています。
画像だけでなく文字も入れたい場合は
    <p id="page-top"><a href="#"><span>ここに文字を入れる</span></a></p>
    このようにし、cssで調整してください。

    jsファイルを作成する

    次にボタンの表示に動きをつけるjsを別ファイルで作っていきます。
ファイルの場所は子テーマ直下にしてください。（お好みで変更しても大丈夫です。）
    Xサーバーの場合
    /home/ユーザ名/ドメイン/public_html/wp-content/themes/swell_child/script.js
    ファイルの中身はこんな感じです。
    function PageTopAnime() {
    var scroll = jQuery(window).scrollTop();
    if (scroll >= 100) {
        jQuery('#page-top').removeClass('DownMove');
        jQuery('#page-top').addClass('UpMove');
    } else {
        if(jQuery('#page-top').hasClass('UpMove')) {
            jQuery('#page-top').removeClass('UpMove');
            jQuery('#page-top').addClass('DownMove');
        }
    }
}

jQuery(window).scroll(function () {
    PageTopAnime();
});

jQuery(window).on('load', function () {
    PageTopAnime();
});
    参考サイト様のコードほぼそのままですが、jQueryの記述には注意が必要です。

    WordPressでのjQueryの書き方について

    この件を知らなかったので、結構な時間ハマりました；；

    一般的なjQuery

    $(function()　{
　''処理内容''
});

    WordPressでのjQuery

    jQuery(function()　{
　''処理内容''
});
    こんな感じで全ての「$」を「jQuery」と書く必要があります。
これはfunction前だけではなくコード中の全てです。

上のコードをコピーして使う場合は大丈夫ですが、自分でjQueryを書く場合はご注意ください。

    作成したjsを読み込む

    jsの読み込みにはfunctions.phpを編集する必要があります。
    Xサーバーの場合
    /home/ユーザ名/ドメイン/public_html/wp-content/themes/swell_child/functions.php
    functions.phpの下の方に
/* その他の読み込みファイルはこの下に記述 */
とあるので、その下にコードを追加します。
    <?php

/* 子テーマのfunctions.phpは、親テーマのfunctions.phpより先に読み込まれることに注意してください。 */


/**
 * 親テーマのfunctions.phpのあとで読み込みたいコードはこの中に。
 */
// add_filter('after_setup_theme', function(){
// }, 11);


/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {
	
	$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
	wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

	/* その他の読み込みファイルはこの下に記述 */
	wp_enqueue_script( 'child_script', get_stylesheet_directory_uri() . '/script.js', '', '', true );
}, 11);

    これで作成したjsファイルを読み込ませることができました！

    CSSで見た目を整える

    今のままだとボタンの場所が空っぽでなにも表示されないと思うので、cssで見た目を整えていきます。

子テーマ直下にstyle.cssというファイルがあるので、こちらを編集します。
    Xサーバーの場合
    /home/ユーザ名/ドメイン/public_html/wp-content/themes/swell_child/style.css
    body #page-top {
  position: fixed;
  right: -30px;
  bottom: -20px;
  z-index: 2;
}
body #page-top a {
  display: block;
  width: 80px;
  height: 100px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6rem;
  background: url("画像のパス") no-repeat center;
  background-size: contain;
}
    "画像のパス"はあらかじめWordPressのメディアライブラリにアップした画像のURLを入力します。

    画像パスの確認

    画像パスはこちらから確認＆コピーが可能です。

    メディアライブラリで画像を選択

    完成！

    これで完成です！問題なくボタンが表示されましたか？

cssだけでなくphpまでいじるのは少し大変なので（というかめんどくさい笑）気合が必要でしたが、イメージ通りのページトップボタンを作ることができて満足です。

今後もSWELLのカスタマイズテクニックを投稿していく予定ですのでよろしくお願いいたします！

    そもそもSWELLもってないよ！という方へ

    SWELLはブロックデザインが豊富で、おしゃれなサイトや記事を簡単に作ることができます。
もしまだ使ったことがない方がいましたら、ぜひご購入をご検討ください！
    WordPress SWELL
    SWELL
    この記事が気に入ったらシェアしてね
    • URLをコピーしました！

    もくじ