他のCMS同様、WordPressには「続きを読む」ボタンがある。トップページやカテゴリページなどでは記事の途中までを表示し、残りはリンク先で掲載する機能だ。複数記事の一覧性を向上させ、見出しだけではわからない記事概要などを伝えるのに便利で個人的に結構多用している。

WordPressの場合、記事の途中に<span id=”more-12345″></span>みたいな特殊タグを挿入し、トップページやカテゴリページではhttp://example.com/blog#more-12345みたいなリンクを掲載することで、記事を続きから表示させる事が多い。既に見た部分をスキップできる分そのユーザーにとって利便性が高いが、「冒頭をスキップするリンク」がSNSでシェアされたり他のサイトからリンクされないかと少し不安になる。個別記事に直接飛んできた人には、ちゃんと冒頭から見てほしいからね。

そういうわけで、「続きを読む」リンクから飛んできた人にのみ”続き”から表示させる方法を考えてみた。

ハッシュを変更する方法

最初に思いついたのが、location.hashを変更する方法。ブラウザのアドレス欄にハッシュがあるのがマズイわけだから、windowのloadイベントあたりでハッシュを変えちゃえばハッシュ付のURLでリンクされることは無い気がする。

window.onload = function(){
  if(location.hash){
    location.hash = '';
  }
};

試してみたらとりあえず機能したっぽい。ただ、「続きを読む」リンクのURLをコピーしちゃうと意味ない。根本的な問題は何も変わってないね。意味のない#がURLにつくし。もっとスマートにならなければ。

moreタグを非表示にしちゃう方法

初めて知ったのだが、ジャンプ先の要素が非表示だとハッシュにidが指定されていてもスクロールしないらしい。つまり、内部リンクで個別記事に来た人にはmoreタグを表示し、それ以外ではdisplay:none;にしちゃえばいいわけだ。ページのセッション中ならbodyにでもクラスを追加するだけで簡単にmoreタグへのジャンプを制御できる。

span[id^='more-']{
  display:inline;
}

.session span[id^='more-']{
  display:none;
}

セッション中かどうかの判断はcookieでもいいが、手軽なのがsessionStorage。簡単なデモを用意した。このページで実際に試せる。

何もせずに「新しいウィンドウ」へのリンクを開くと「これがコンテンツの続き！」までスクロールされるが、「セッションストレージ追加」をクリックした後に「新しいウィンドウ」リンクを開くとページ先頭のままで表示される。これで「続きを読む」タグを心置きなく使えるようになったわけだ。イェーイ！