投稿や固定ページで、プラグインやテーマの機能を使って、見出しタグなどから目次を表示するサイトは数多くあると思います。

中にはSEOに効果的なのかも..というまことしやかな?情報を目にして目次の出力をされている方もいるかもしれませんが、本来は、閲覧した方が必要な情報を便利に見るため(アクセシビリティの向上)の機能として必要なのだと私は思います。

ただ、目次を出力することで、ページ冒頭付近から目的の部分へ移動できても、サイドバーなどへ目次を常時表示させることなどをしなければ、ページの上部へ戻るのは、訪問者が自身でスクロール、もしくは画面隅にあるボタンなどを使わなければなりません。

上部へ戻るボタンに気づけば事足りる話ではあるものの、自分が作る側ではなく、閲覧する側だった場合、ボタンの存在に気付かないことも多いのではないでしょうか?

そこで、長い本文では必ず使われる「H2」の見出しタグに反応して、自動でページトップへ戻るリンクを本文内へ表示したら、訪問者により親切ではないかと考え、自作した【HABONE】テーマへ機能として実装することとしました。

本ページは【HABONE】テーマへ実装した機能を、今お使いのテーマでも追加してもらえるよう、また、私自身の備忘録を兼ねて、コードと実装方法の紹介をするものです。

この機能の実装にあたっては、以下の環境およびスキルが必要です。

  • テーマ(子テーマ)のfunctions.phpへコードの追記ができる方
  • functions.phpへの追記でトラブルが発生した場合にご自身で修復できる方
  • 機能が問題なく動作しなかった場合に、自身のサイトに合わせてコードの修正ができる方
  • テーマ(子テーマ)のCSSや追加CSSへスタイルコードの追記ができる方
  • 自身のサイトに合わせてスタイルコードの調整ができる方

なお、このページは、【アドセンス収益向上】簡単!プラグインやショートコード不要でWordPress記事中に広告を挿入する方法を参考に、一部コードの修正をして応用したものを紹介しています。

お使いのテーマやテーマに追加している機能、併用しているプラグイン、サイトの環境等によっては正常に動作しない可能性があります。

最終的にはご自身でコードを解析・理解し、修正を行って実装するための参考情報としてご覧ください。

すべてのH2タグ上へ「ページ上部へ戻る」リンクを表示させる方法

子テーマのfunctions.phpへコードを追加する

以下のコードを子テーマのfunctions.phpへ追記します

親テーマへの追記は、テーマの更新によって上書きされ無効になってしまうので、子テーマでの使用をおすすめします

/***** 投稿のH2タグ上に共通コンテンツ *****/
function ha_add_back_to_top_content_before_all_h2_post($the_content) {
  if (is_single()) {
	$back_content_text = 'ページトップへ戻る';
    $back_content = '<p class="inline-back-to-top"><a href="#page-head">'.$back_content_text.'</a></p>';
    $back_h2 = '/<h2.*?>/i';//H2見出しのパターン
    if ( preg_match( $back_h2, $the_content, $back_h2s )) {//H2見出しが本文中にあるかどうか
      $the_content  = preg_replace($back_h2, $back_content.$back_h2s[0], $the_content);//H2を置換
    }
  }
  return $the_content;
}
add_filter('the_content','ha_add_back_to_top_content_before_all_h2_post',999);

functions.phpへ追記後、ご自身のテーマに合わせて以下の部分の修正を行ってください。

  • 「is_single()」で投稿のみに限定しています。以下のようにすることでカスタマイズ可能です
     ・固定ページのみ・・・「is_single()」を「is_page() && !is_front_page()」へ変更
     ・投稿と固定ページ・・・「is_single()」を「is_singular(array(‘post’,’page’)) && !is_front_page()」へ変更
      など...
  • 「#page-head」の部分は【HABONE】テーマにおけるページ上部を指定するidになりますので、ご自身のテーマに合わせて変更ください(単純に「#」にするとページ先頭になりますが、きちんと指定することをおすすめします)
  • 任意のリンク文字列にしたいときはコード中「ページトップへ戻る」を変更します
     翻訳対応にしたいときは、「__(‘>>Back To Top’,’テーマのテキストドメイン’)」にします

子テーマのstyle.cssまたはテーマカスタマイザーの追加CSSへ追記する

以下は、【HABONE】テーマでの例ですので、お使いのテーマに合わせて調整ください。

p.inline-back-to-top {
    text-align: right;
    margin-top: 2em;
    margin-bottom: 2em;
}

【HABONE】テーマでは、もともとあるページトップ移動ボタンのスムーススクロール機能を利用して滑らかに移動するようにしていますので、上記コードにはそうした記述は一切ありません(ざくっと移動します)。

以下のスタイルコードをさらに追記することで、CSSで簡単にスムーススクロールを実現することができます。

html {
  scroll-behavior: smooth;
}

ただし、このスタイルコードは、プラグインやテーマの機能と競合して主にテーマ・プラグイン側のスクロール機能がうまく動作しなくなることがありますから、サイトの状況に合わせて調整が必要です。