ワードプレス（stinger pro）の「トップに戻る」ボタンをオリジナル画像にしたい

Question

前提・実現したいこと

利用しているテーマ「
以下の内容を参考に、phpを編集して「ページトップに戻る」のボタンをオリジナル画像に変更したい。
https://www.pasona-sp.com/8157.html

発生している問題・エラーメッセージ

掲載したいイメージをメディアにアップし、
phpの該当箇所と思われる部分を編集したが、元のfontawsomeの表示のままで変わらない。

該当のソースコード

-掲載したイメージのURL
/ドメイン名/public_html/wp-content/themes/stingerpro-child/images/top.php

-編集したPHP(親テーマから子テーマにコピーしたsingle-amp.php）
※参考にしたソースには、footer.phpを編集するとありましたが、
footer.php内では、編集対象の以下のコードが見つからず、single-amp.phpで見つかったので
こちらを編集しています。

<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>

<!-- ページトップへ戻る -->
<?php if ( false ): ?>
<?php if ( trim( $GLOBALS['stdata109'] ) === '' ): ?>
<div id="page-top"><a href="#wrapper"><img src="/ドメイン名/public_html/wp-content/themes/stingerpro-child/images/top.php"/></a></div>
<?php endif; ?>
<?php endif; ?>
<!-- ページトップへ戻る　終わり -->

なぜPHPを修正しても指定の画像を表示できないどころか、
元のfontawsomeの表示のままなのかなどわからず、
可能性のある問題点がおわかりになる方がいらっしゃれば、教えていただけないでしょうか。
よろしくお願いします。

Answer 1

1. if ( false ): の中のコードは必ず実行されない
2. 画像のパスがおかしい

top.php が画像のファイル名だとすれば、変わった方法で画像を扱う組み方をされているのでしょうか。

/ドメイン名/public_html/ はサーバ上のパスであって、URLになっていないのでは？
テーマフォルダに入れているのであれば、一般的にget_stylesheet_directory_uri()を使用します。

【WordPress » URL・ディレクトリの取得まとめ | MORILOG】
http://morilog.com/wordpress/template/url_and_directory_functions/

Comments

[NN77]

kei344様
前回に引き続きありがとうございます！
いただいた内容を理解するのに少し勉強が必要そうですので、勉強の後ご返信差し上げますm_ _m

[NN77]

追加のリンクもありがとうございます。
週末超えるかもしれませんがいただいた内容確認し、再トライしてみます。

[NN77]

こちら、ご返信が遅くなってしまいすみません。
いただいた内容を実施してみました。
1.のご指摘の「if ( false ): の中のコードは必ず実行されない」
の意味合いが正しく理解できていないかもしれませんが、
if ( false ):とそれに呼応する<?php endif; ?>を削除し、
2.画像のパスがおかしいについて、
書き方をいただいたサイトなども参考にし、以下のようにコードを修正してみたのですが、
もともとのトップに戻るに設定されていた画像のままで、
pagetop.pngの画像に変わりませんでした、もし理解が間違っていたらご指摘いただけると幸いです。

<!-- ページトップへ戻る -->
<?php if ( trim( $GLOBALS['stdata109'] ) === '' ): ?>
<div id="page-top"><a href="#wrapper"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/pagetop.png" /></a></div>
<?php endif; ?>
<!-- ページトップへ戻る　終わり -->

元の画像が表示されたままということは、
編集しているphpが間違っているかもしれませんね。。
参考サイトにあるようにfooter.phpに該当するコードがなかったので
親テーマのsingle-amp.phpを子テーマにアップロードして修正したのですが、
他に思い当たる修正先はございますでしょうか？

もしご回答可能でしたら、何卒よろしくお願いいたします。

[kei344]

パスの状況から、有料テーマをお使いでしょうか。それであれば、サポート等に問い合わせるなどされたほうが良いと思います。

参考にされたURLに書かれているテーマは無料で配布されている「STINGER8」のカスタマイズなので、同じ書き方では出来ないのだと思います。（テーマが違えば構造も違うため）

[NN77]

keiさま

ありがとうございます。
ご指摘の通り有料テーマを利用しています。
一度サポートに問い合わせてみます。今回も誠にありがとうございました。

Answer 2

カスタムメニューを追加でボタン作成はどうでしょう？

設置したいページのphpファイルの
設置したい場所に下記を記入してください

  <div class="gotop">
    <?php wp_nav_menu(array(
      'theme_location' => 'gotop'
    )); ?>

functions.phpに追記してください

  // カスタムメニュー
  register_nav_menus(array(
    'navimenu' => 'ナビメニュー', // あるならば、現在作っているカスタムメニュー
    'gotop' => 'メインページへ'  //
  ));

.gotop li {
  display: block;
  width: 90px;  // 画像の幅に合わせてください
  margin: 0px auto;
}

.gotop a {
  display: block;
  background: url(../images/icon01.png);
  height: 90px;  // 画像の高さに合わせてください
　/* 以下の３行でaタグのテキストが消えます */ 
  text-indent: 100%; 　 /* 文字の初めに空白をあけます */
  white-space: nowrap;　/* 折り返さず横へ続きます */
  overflow: hidden;　　 /* はみ出た範囲を非表示にします */
}

jQueryでaタグのテキストを消すことも可能です

設置したいページのphpファイルに追記の場合

  <script>
　　↓　ここは「$」ではなく「jQuery」と記入してください
  jQuery('.gomain a').text('');
  </script>

あとは管理画面でメニュを編集すれば完了です
追記

全てのページに設置したい場合は全てのphpファイルに記入してください
・footerの最上部ならば<footer>の下です
・mainの中の特定のdiv要素の下ならばその</div>の下です

例

<?php get_header(); ?>

<h2></h2>
<div>
<p></p>
</div>

<div class="gotop">
  <?php wp_nav_menu(array(
    'theme_location' => 'gotop'
  )); ?>
  
<?php get_footer(); ?>

footer.phpのテンプレートファイルを用意して

<?php get_footer(); ?>で呼び出しているならば

footer.php１つに記入すると楽です
もし全てのページにfooterがある場合、必然的に全てのphpファイルに記入したことになります

各ページでボタンの位置が違うのならば1つ1つ記入することになります
追記

勘違いしてました
本当すみません。

		jQuery('要素').on('click',function() {
			jQuery("html,body").animate({scrollTop:0}, 2000); // 2000ミリ秒の速さ
		});

Comments

[NN77]

こちらご回答いただきありがとうございます。
カスタムメニューを使うという方法もあるのですね。
恐れ入りますが、ワードプレス内のphpの編集経験がまだ少なく、以下について質問させてくださいませm_ _m

>>
設置したいページのphpファイルの
設置したい場所に下記を記入してください
>>

今回、特定のページの特定の場所ではなく、
どのページをみていても追従してくるボタンで、
それをクリックするとそのページの先頭に戻る、という機能なのですが、
その場合はphpのどこに記述するのが適切と考えれば良いのでしょうか。
こちら可能でしたら教えてください。
よろしくお願いいたします。

[NN77]

akihiro3さま
追記にてアドバイスいただきありがとうございます。
カスタムメニューの追加まで自分で実施でき、だいぶ進歩いたしました。
本当にご丁寧にご説明いただき感謝いたします。

ただ途中で気づいたのですが、
今回実施したいのが、
・閲覧中のページ内で一気にスクロールアップする意味の「トップにもどる」なのですが、
いただいているのはひょっとすると、
・閲覧中のページから別ページである「トップページにもどる」機能でしょうか？
だとすると今回やりたいことに対しては少し遠回りになりそうでしたので、（トップページではなくh1タグなどを設定すればいける気がしたのですが、私のスキルですと情けないのですがまだ少し難しそうです。また、質問の仕方が曖昧で失礼いたしました。。）
今回編集するphpファイルを確認するためstingerに問い合わせる対応をとろうかと思います。

[akihiro3]

ごめんなさい。。。。
その通りです。別ページにリンクする「トップページに戻る」でした
余計な時間を使わせてしまいました。

問題に関係ないですが、簡単なトップへ戻るコードを追記しておきます
本当すみません。

[NN77]

とんでもないです。私の質問の仕方ももう少し明瞭である必要がありました。
コードも丁寧に記載いただき、新しい知識がついて勉強になりました。
今後ともどうぞよろしくお願いしますm_ _m