サイドバーに閲覧履歴を表示させたい

例えばどのような閲覧履歴ですか？
そのページのタイトルとリンクとかですかね？

あ、ついでに、

また表示する箇所はどこで、どのような表示で、何件ぐらいかとか細かな仕様・設定はありますか？

よろしくお願いします

表示する箇所：サイドバー
どのような表示：アイキャッチとページのタイトル＆リンク
何件ぐらい：５件くらい

イメージは
このサイトの「新着記事」（Popular Posts）
です

ひとまずの進捗状況

指定したアイテム数だけ、
記事のアドレス、タイトル、サムネイル(アイキャッチをサムネイルのサイズで)、更新日がある場合は更新日、ない場合は投稿日を取得。

で、これらをローカルストレージにjsonで保存する所まではしました。

あとはそれを拾って、必要な場所に挿入するだけですが、必要な項目はこれだけですか？
ちなみに、投稿日やらを取得したのは、仮に新着のような表示にする場合に、サムネイルの大きさがあって、そこにタイトルだけだとちょっとスタイルがアレかなと思ったので、せめて投稿日ぐらいあっても良いかという感じです。

またサイドバーに入れたいということでしたが、ウィジェットなどではないので(スクリプトの関数呼び出しをテキストウィジェットに書いたらイケるかも知れませんが、これは後々の予定ということで)、ひとまずは手動的に任意の場所に入れたいと思ってます。
予定の分は並行してやるかも知れませんけれども。

で、その挿入する箇所をどこにするかが問題です。どこでもできますが、サイドバーの1つ目のウィジェットの下辺りでよいですか？

上手く行けば、勝手に場所を判断して表示できるような感じにしようかなぁとは思ってます。
また、書き出すhtmlですが、ulのリストでやろうと思います。

今の所、次のようにしてみました。

テキストウィジェットに

<div id="b-history"></div>

だけ入れる。これでどこでもウィジェットなら入れられます。

表示件数は、スクリプトの方で関数に渡す際に数字を入れると、その数字分データが保管される仕組みになってます。

見た目は、今の所 こんな感じ です。これはまた色々やるかもしれません。

トップページの場合は、タイトルに「トップページ(ホーム)」と入り、一番最初の.post-metaの投稿日が入るようにしました。ダッシュボードでは、おそらく子テーマのjavascript.jsを読まないと思いますが、カスタマイザーではややこしいことになるのと、何故か条件ではじけないため、どうしようか少し悩みましたが、どうせ本人にしか見えてないのでまぁいいかと思っています。

今回のは、localStorageというのを利用しています。ローカルストレージはブラウザの情報が全て初期化されない限りブラウザのデータとして残ります。もちろん任意で消すことは可能ですが、テキストウィジェットに入れるタグ(そのID)が見つからない場合は処理しないので、ウィジェットを外せばよいだけになります。

ローカルストレージは各々のブラウザでデータを保管します。jsonで保管しているので、別途読み出す事は可能ですが、それを流用する意味があまり見つからないのと、個人の閲覧履歴なので公開する必要はないかと思います。
Googleのsearch consoleや、アナリティクス等があるので、サイト全体の閲覧状態はそちらで見てもらう感じになります。

後は、この前のレスの、他に必要なものはないか等の意見を聞いてからテストして、スクリプト自体はウチのブログで公開します。

動作は正常にしているみたいですが、何かしらないかを見なおしていたりしますので。

おおおおお

すごいーー

結構
需要あるのでは
ないですかねー

ちなみに表示項目(タイトル、サムネ、日付等)とかは、これぐらいでよいですか？
と、言っても他に拾うような情報はあまり無いかと思うんですけども(笑)

ウチのサイトに出来上がったものを仕込んでみました。

本来はlocalstorageでやる予定ですが、いちいち消すのが面倒くさいのでテストの間はsessionStorageにしてあります。
これにより、ブラウザを閉じればデータは消えますので色々テストできます。

で、カテゴリ、アーカイブ(日付)、タグ(タグクラウド等)を選択時の動作は確認・修正しましたが、その他ページ内の不要なデータを拾う要素があるかも知れませんので、もし見つけたら報告してもらえると助かります。

jquery(javascript)に何かしらエラーが出た場合は、記録されません(当たり前ですが)。

Simplicity2をデフォルトで利用しているために、もしかすると、それらをつぶしていないので、どこかでエラーが出る可能性もあります。その場合はご了承下さい。
これらによって、何か問題が出るわけではありません。単純にスクリプトが動作しないだけです。

拝見しました

個人的な意見としては
履歴は投稿記事だけでもいいかな
もしくはトップページ除外
閲覧者によっては履歴がトップだけになりそうでｗ

技術的なことは何も分からず
勝手に申し上げました
お許し下さい

トップページ除外は実装しました。

firefoxでは、syncが効いている場合、前回の状態を復元するためブラウザを閉じてもデータは表示されますが、タブを閉じればデータは消えます。
ただし、ブラウザのキャッシュが残っている場合は最初のリロードまでおそらくトップページが履歴一覧の中に表示されることがあります。
※ プライベートウィンドウで確認済み

トップページを除外する以外は、そのままになってます。

他に何かあれば、できる事は実装します。

△ syncが効いている場合
◯ sync等が効いている場合

ＧＪ！

記事書きました。

もし実装してエラー等があれば、報告おねがいします。
うちではエラーは無いようにしてますが、環境によってはエラー等あるかも知れません。古いブラウザの利用とか。そもそも古いブラウザで、ローカルストレージ等が動くかどうかは定かではありませんけれども(笑)

3箇所入れ替えましたが
ローカルストレージで動きません･･

「ウチのサイト」では
切替えないのでしょうか？

今、必要な箇所のコメントアウトを書き換えて、ウチのサイトに実装しましたが動作しています。
確かめてみて下さい。データを削除する時は、「clear localStorage Data」でデータを削除し、リロードはしないで下さい。リロードするとデータが新たに作られます。※ホーム画面は除く。

gitHubのソースから、何行目をどのように書き換えられたかを書いてみてください。

cssの不具合を少しだけ書き換えました。
再度、cssのページにアクセスしてからコピって下さい。

「ウチのサイト」みても

閲覧履歴
現在localstorageで稼働中です。

しか表示されません
ＰＣ、タブレット、スマホでも

あぁ、わかった(汗)
3つ目のifの中がsessionStorageになっていると思いますが、ここをlocalStorageに変更して下さい。

わざわざifから抜粋していたのに、書き換えるのを忘れてました。
ブログの方とgitHubはコメント入れ替えだけで良いように更新しておきました。

ありがとうございます
おこがましいんですが、一つだけお願いがあります

好みの問題なんですが
かなり目立つのでシンプルに
「New-old」「◯分前にREC」「Clear LonalStorage Data」「記事投稿日」
それぞれを表示しない方法を
表示件数を変更するのと同様にブログ記事に加筆して頂ければ
幸いです

更に、データありきでテストしていたので、データが返ってこない場合の処理も追加しました。
アドレスは同じですが、最新のスクリプトはこちら

また、ウチのサイトにもう少しするとjQuery3.0.0が当たると思います。
現在は2.2.4のキャッシュで稼働中。
3.0.0になった時に、既存のスクリプト(Simplicityデフォルト)でエラーが出る可能性がありますので、予め報告しておきます。

時間部分が不要なら、スクリプトを変更すると何かしらあるかも知れないので、簡単なのは、cssで

#b-history .times {
  display: none;
}

をcssの最後に追加すれば良いかと思います。

new、oldについては

#b-history ul li:first-child::after {
  display: none;
}

#b-history ul li:last-child::after {
  display: none;
}

これらセレクタにdisplay: noneを追加して下さい。

書いてあることは同じですが、ブログの方にも書きました。

＜報告＞
アイキャッチが「NO IMAGE(no-image.png)」になります

同じ記事の履歴は最新ものだけ
履歴表示した方が良いかも

> アイキャッチが「NO IMAGE(no-image.png)」になります

サムネイルは、.eye-catchタグに囲まれた中の画像アドレスを拾ってます。.eye-catchがない場合は強制的にno-image表示です。なのでここらがどうなっているかをまず確認してみて下さい。

> 同じ記事の履歴は最新ものだけ
> 履歴表示した方が良いかも

これはまた追々考えます。
そんなに難しいことではないんですが、またテストをしないといけないので、追々と言う感じで。

> 同じ記事の履歴は最新ものだけ
> 履歴表示した方が良いかも

は実装しましたが、ちょっとテストをするので、テストが済んだらgitHubにpushします。

２つ続けて並ばなくはなりましたが
５履歴の中には表示されます･･
５件別の記事がよくない？

それにしても
なんでアイキャッチが表示できないのだろー
追々考えます

続けて並ぶというのは同じページでリロードした場合ですから、履歴とするとどういう経路で見たかだと思うんでこういうもんだと思うんですけどね。
ブラウザの履歴とかも経路を全部記録してますよね？

目的がどういうものかで実装方法も変わるかと思います(ここが最重要)。

持っているデータから一致するものがなければ追加ということで5件重複なしというのはできると思いますが、どういうページをたどったかが履歴で、どのページを見たかという記録なら5件共に別のデータの方が良いかと思います。

プラグインを探したけれども見つからなかったというのは、結局これらはほぼブラウザの履歴で見れるから需要が少ないってことなんだろうと思いますけど、これを作るメリット(目的)ってなんですかね？(笑)

僕が想像するに、「この記事は後でまた見るかも知れないからとっておきたい」と言うような考えではなかろうかと思うんですが、違いますかね？
簡単に言うと、本に栞を挟むような、あるいは付箋をつけておくみたいな感じというか。
新規投稿で、該当の記事がページをまたいでしまっても、サックリとそのページにアクセスしたいと言うそういうことではなかろうかと思うんですが、どうでしょう？

もしそうならアクセスしたデータを全部を記録する必要もなく、何かしらのボタンを記事のタイトル付近につけて、クリックしたらデータに残すということで実現できます。
またデータを拾った段階ですでに記録しているかどうかのチェックができますから、追記できないように記憶するボタン(あるいはスイッチやリンク)を無効化すればよいだけの話で重複は防げます。

つまり、そうなると履歴とは関係なくなるって話ですね(笑)
履歴(ヒストリー)ではなく、記録(レコード)です。

そこらをどのように考えておられるかで作り方が変わると思います。

閲覧の履歴を正確に知りたい
と言う訳でなく

過去に見た記事の直近５件程度が分かれば
いいかなーと

記憶が新しければ
記事を探す手間が減るかなーと

思ったんです

ひとまず、言われているような機能をつけたものをウチのサイトに実装してみました。
プライベートウィンドウ、あるいはシークレットウィンドウあたりで確かめてみて下さい。

ウチのサイト

閲覧記録として、重複なしの5件を残せるバージョンをgithubにpushしました。

おそらく正しく動作しているだろうと思います。
説明とリンクはこちらから。