Simplicity 1 「某スレッド掲示板風」にレスアンカー機能を付けたい

実装まではちょっといろいろとあってここでは書けませんが、方法としては、各投稿されたコメントに対して固有となるclassなり、それこそアンカーを入れる機能が必要です。

例えば、投稿された記事が

<div id="comment-area">
  <div class="comment id001">
    <p class="post001">なにかしらのコメント</p>
    <p class="res res001">何かしらのレスポンス</p>
    <p class="res res001-1">res001への何かしらのレスポンス</p>
    <p class="res res002">何かしらのレスポンス
     <a href="id001" title="001">>>001</a>
　　</p>
  </div>
</div>

このようになっていれば、ページ内のそれぞれのコメントをマウスオーバーで表示することは可能です。別ページのコメントなどは、それこそ何かしらの識別番号をそれぞれに埋め込んで、ajax等でphpにアクセスして、そのphpからデータベースにアクセスして返ってきたレスポンスでリンクを作ります。

何かしらの識別番号を記事に埋め込むことが可能かどうか、あるいはwordpressデフォルトで何かしら識別番号がついているかどうかを調べる必要があります。

極簡単なサンプル: リンクにマウスオーバーした時にその付近に該当するclassなりidの内容を入れたboxを表示 | jsFiddle

原理的なものしか書いてないですけど、これらを応用したらそれっぽいことはできるかと思います。マウスオーバーで内容を表示するだけなら、リンク先に飛ばないように(と言っても識別番号なので行き先がないんですが)、リンクを無効にする必要があります。
ただし、リンクをクリックしてそこまで表示をスクロールするなどが必要な場合はそれ用の処理を書く必要があります。

Hidekichiさん、早速のご返信ありがとうございます。

なにぶん素人なもので、ajaxとか全く分かりません(汗)
Simplicityのphpも、どの種類のシートを変更すれば良いかで
四苦八苦してるくらいなので。

マウスオーバーは諦めます。

>>5

単純に、コメント番号に対してレスアンカー機能だけを付ける場合、

どのシートにどう変更を加えたら良いのか
ズブの素人にも分かるよう、手順をご教授ねがえませんでしょうか？

某掲示板風スレッド表示での投稿ナンバーは、おそらくそう表示されているだけで記事に対して何かしらアンカーが打ってあるわけではなかったように思います。

つまりマウスオーバーさせるにも、アンカーを打つにも、そのリンク先となる投稿にアンカーが入ってないとダメなのです。

つまり、
<p class="post001">なにかしらのコメント</p>
ここで言う、classのような識別できる固有の何かしら。これが入っていないと、アンカーを打つことはできません。つまり参照先が必須で、それらを表示する機能は参照できる何かしらがあってはじめて機能するのです。

仮に、>>5 と書いた記事を投稿するとします。これを自動的にリンクにすることは可能ですが、その5ってどこだよ？って話なわけですね。よってこれら機能を実装したい場合は、wordpress自体のコメントクラスを継承・オーバーロードして新たに新しいコメントシステムを作り、そこに参照元がわかるIDなりの機能をつける必要があります。

これは実装的には子テーマfunctions.phpでできるのかも知れませんが、結構PHP上級者でないと難しいかと思います。

他の方法として、jQueryにて、各投稿に参照元となる何かしらのID等を挿入して、それを参照するということはできなくもないと思いますが、同一ページでのみ機能と言う感じかと思います。
これを実装するには、現在その某掲示板風スレッド表示がどのようなhtmlの構成になっていて、どこに識別idを入れて参照するかを調べないといけませんので、ひとまず、実際に動作しているサイトのアドレスを公開して頂いて、

・投稿を何件か
・また何かしらのレスも所々に入れて

等のテストページを作ってもらう必要があります。

数件のコメントがつくと、wordpressはコメントのページングをすると思います。そのページが単純に折りたたまれているものであれば過去記事は参照できますが、2ページ目、3ページ目等のリンクをクリックしてページが遷移するようなものの場合は、ajaxによってデータベースを参照する必要があります。
今日は2ページ目にあっても、コメントが増えれば3ページ目とか4ページ目に移動することもあり、それをjQueryだけでは参照できません。

ここらから、単純に、はいどうぞでは実装できない感じかと思われます。

Hidekichiさん、有難うございます。
素人にも分かり易く書いて頂き感謝の言葉もございません。

参照する投稿にアンカーが入っていないとダメなんですね。

◆ボクは単純に、ガールズちゃんねるのような掲示板サイトを運営してみたくて
二日前からワードプレスで作業しておりました。

ＣＧＩによる掲示板を組み込む…という方法もあるようなのですが
技術系の知識がないボクにはハードルが高く
ワードプレスとプラグインで全て作り上げられないかと考えておった次第です。
未だ初級者ですが、ワードプレスは1年以上触って慣れているもので。

ボーイズちゃんねる
http://boys-channel.com/

これがボクのサイトです。
まだ検索エンジンにはインデックスさせていません。

最終的にはレスアンカー機能なしでも運営をスタートさせるつもりですが
作業を進める過程で色々とググってみたところ恐らく、世の中にはボクのように
ワードプレスのみで掲示板サイトをやってみたい方が少なからずいるようです。

その方々のために、ボクの質問が少しでも役立てば幸いです。

お気づきの点などありましたら、
急ぎませんのでいつでも返信くださいませ。

とりあえずのサンプルを作りました。まだ直さないといけない部分があるかと思うのと、そのページのみの機能です。

サンプル: 連番を振って、レスアンカーマウスオーバーで内容表示 | codepen

Hidekichiさん、お忙しいのに有難うございます。

このサンプルのような掲示板になれば、ユーザーさん皆が楽しめそうですね！

技術的な事はボクには本当にサッパリなもので…

このページのみの機能？　サンプル？ということで

コチラとしては見ているしか無いのでしょうね。

このサンプルを、どう使えばよいのか
(現時点でシートに書きこめばよいのか)

そんな事も分からないんです。

済みません。

Hidekichiさん、お世話になっております。たすくです。

自力でjqueryから勉強して、
レスアンカー機能を自サイトに付けることが出来ました。
本当に有難うございます。

それで一つ問題が発生しまして

◆「間に空白行を入れて」複数段に渡って
打ち込まれている改行コメントを
マウスオーバーすると
最初の一行しか表示されません。

例)
——————–
ボクは
(空白)
ボーイズちゃんねるを

頑張って

作ります
——————–
↑　このようなコメントの場合ですね。

「js」か、「css」か
どの部分を直したら宜しいでしょうか？

宜しくお願い致します。

重ね重ねですみません。

【二つ目の質問】も書いておきます。

スマホで表示させた時、

【ドルフィンブラウザ】だと、レスアンカーをマウスオーバーさせた時に参照コメントが表示されますが

【普通のブラウザ】だと、マウスオーバーさせた時に、全く何も表示されません。

これは、mobaile.cssに、何か別のcssの追記が必要になるのでしょうか？

サンプルをちょっとだけアップデートしました。
モバイルとPCで処理を分けました。モバイルにはマウスがなく、PCにはタッチがないので。

開いたビュー以外をクリックすると閉じます。

ドルフィンブラウザと普通のブラウザの違いがわかりませんが、一度サンプルのスクリプトを適用してもらってどうなるか見せて下さい。
今適用されているスクリプトはバックアップでもとっておいて下さい。

それと、作業する前にサンプルでどうなるかもチェックしてもらえると調べやすいです。
これがリザルトフル画面表示でのアドレスです。これを携帯とかで見てもらうとか。

viewboxのスタイルはひとまずのスタイルなので、しばらくそのままかも知れません。またスクリプトがテスト用にまとめられていないので、その内まとめます。

Hidekichiさん、ＧＷ中にも関わらずご丁寧に有難うございます。

まず、白基調のviewboxはすでに十分に素敵なデザインで申し分ありません。

報告いたします。
■■■■■■■

１。新しいスクリプトに書きかえる前に、サンプル画面をスマホで見たところ、
【アンドロイドブラウザ(普通のブラウザ)】も、【ドルフィンブラウザ】も、
問題なくポップアップが表示されました。

■■■■■■■

２。以前のスクリプトはバックアップをとった上で、ＪＳファイルと、ＣＳＳファイルを書き換えました。
(scssファイルは難しそうなので使ってません)

すると【アンドロイドブラウザ(普通のブラウザ)】でも、ポップアップが表示されました！

◆問題Ａ◆　ですがモバイルの操作時に問題が…。　例えば、>>5 のリンク部分に指を触れたとき、
ポップアップが半分以下の確率でしか、表示されません。

残りのタッチ時は全て、どのコメント番号からでも、
そのページの【トップ部までスクロール】してしまいます。
指先でトン……とピンポイントで触った時の方が、ポップアップが出やすいです。

一番最初に僕が無知なまま、「レスアンカー機能が」…と頼んでしまった事もありますが
ガールズちゃんねるのように
http://girlschannel.net/topics/738907/

コメント番号のリンクにマウスや指を合わせても、
スクロールせずに、その場に留まったまま【ポップアップだけ】表示される方が、
ユーザーさんにとっても使いやすいのかな、と個人的には思いました。

■■■■■■■

３。◆問題Ｂ◆　新しいスクリプトに書き替えても、ＰＣでもモバイルでも、
　　「空白行」を間に入れたコメントは、最初の一行しか表示されてません。

　　codepenのサンプルは、空白が間にない複数段コメントなので

　　ああああ
　　いいいい
　　うううう
　　ええええ

　　↑　こういうコメントは問題なく4行にわたって表示されるんです。でも、

　　ああああ
　
　　いいいい

　　うううう

　　↑　こういうコメントだと、新しいスクリプトでもやっぱり
　　　最初の1行目しかポップアップされません。携帯もＰＣも。　
　　　1行目の「ああああ」…で、ポップアップは終わってしまうんです。

※一応、新たなサンプルのため、ＨＰの投稿記事の一番上「男子って、女性のことを」…
のコメント欄は、空白行を挟んだコメントを付けておきました。
■■■■■■■

４。　あとは、ワードプレスログイン時に、ＰＣでマウスオーバーした時
　　　マウスポイントがプルプル震えて、コメント表示が点滅する事がありますが
　　　(僕はＰＣブラウザは、ファイアーフォックスを使ってます)
　　　ログアウトしたら、プルプルの症状は出なくなります。

■■■■■■■
とりあえず、ご報告はこれくらいで。

＞＞　ドルフィンブラウザと普通のブラウザの違いがわかりませんが、一度サンプルのスクリプトを適用してもらってどうなるか見せて下さい。

⇒これは、モバイルのソースコードをここに貼り付けることかな、と思ったのですが
　勘違いの可能性大なので今はやめておきます。

長々と済みません。宜しくお願い致します。

問題A
これは思い当たるフシがあったので今は直しました。
おそらくaタグが問題ではなかろうかと。現在はspanタグにしてあります。spanタグは色がデフォルトでついてないので、色を別途つける必要があります。例えば、色だけでなくボタンっぽい雰囲気にしても良いかと。

問題B
実はこれも簡単に直せるんですけれども、コメントがどのようなhtmlを作るのかがわからなかったんです。
仮に想定していたのは、

<p>
なにかしら<br>
なにかしら<br>
なにかしら
</p>

と改行ごとにPの中にbrを作っていくのか、あるいは1行開いた所については

<p>
なにかしら<br>
<br>
なにかしら
</p>

このようにbrを挟んでいるのか、それともそれぞれをpタグで囲むのかがわからなかったので、以前のサンプルではpタグの取得をしていました。現在は、この改行で1行開いたものも取得できるようになってます。
サンプルを確認してみて下さい。

popup表示の部分は好きなデザインでやって下さい(笑)
ただあまりにも広すぎると、ジャマかも知れませんね。
位置については、今の所クリック(タップ)した座標のyの値しかイジってませんが、xをイジることで横に動かせます。

例えば、.viewboxの横幅を取得して、xの値から横幅の半分を引いたらクリックした部分の真上にviewboxが表示されるかと思います。クリックした位置が画面に対してどの辺りにあるかも参考にすれば、画面からはみ出さずに良い感じの所にpopupさせることも可能かと思います。ここらはアイデア次第です。

ちなみに問題Aの部分は昨日気づいて、急遽モバイルとPCの仕様を分けタッチイベントでもPCでも座標が拾えるようにしてみたり、jQueryではアレだったのでjavascriptにしてみたり色々と手を尽くしましたが、aタグは直すのを忘れてました(笑)

それから、例えばスマホで、popupが表示されたけれどもpopup全部が表示されない時は、画面スクロールが必要になります。この時に、popup部分をタッチムーブさせたらpopupは閉じずにスクロールできるかと思いますので何かの参考までに。

理屈としては「先祖要素に.viewboxを持っていないものをクリックした時のみ閉じる」ということをしています。.viewboxは先祖要素というかそのものが.viewboxなのでここはどれだけタッチしてもクリックしてもモニターの画面を割ろうが閉じません(笑)
.viewboxを触れる前に、たいていその中身のいずれかを触ると思うのでより堅牢になっているかと。これpopupって言ってますが、いわゆる小さなモーダルウィンドウなんですよ(笑)

Hidekichiさん、タッチムーブのことまで細かいご配慮ありがとうございます。

■■■■

◆二つのモバイルブラウザ、完璧にポップアップが表示されてます！

　あ、モーダルウィンドウって言うんですねww

◆aタグから、spanタグに直された部分は分かったのですが
　これは正に、「>>5」…の部分の色についてのお話だと思います。
　ただどうしても、そのspanタグの部分の色変更だけ出来なくて。
　(テーマの他のspan部分しか色が変化しなかったりしました)

⇒　ですが、下記のcss部分を

#comments-thread .research {
color: #99c;
}

↓

#comments-thread .research {
color: #1e90ff;　
}

こう直したら、色づけ出来ました。有難うございます。

◆モーダルウィンドウは、サンプルでも見てた黒のデザインが
　適用されるようになりました。
　これ、めちゃクールですね！　カッコよすぎます。

■■■■■■

あとは強いて言うなら、

【問題Ｃ】　ＰＣのインターネットエクスプローラーブラウザでＨＰを表示させた時
　　　　　　モーダルウィンドウの幅が、極端につぶれてしまう事ぐらいです。
　　　　　　ちょうど文章の「改行幅」にウィンドウが固定されてしまうようです。
　　　　　　その場合、文章上の日付やＩＤは枠外に表示されてしまいます。
　　　　　　(まあ、文章だけ読めれば良いのですがw)

　　　　　　ファイアーフォックスとクロームの表示は全く問題ありません。

日々のお仕事でお疲れだと思いますので
またお手すきの時にでもご連絡くださいませ。

尚、ボーイズちゃんねるは早速、稼働させて
ユーザーさんの反応を伺ってみようと思います(^^)

> ＰＣのインターネットエクスプローラーブラウザでＨＰを表示させた時
> モーダルウィンドウの幅が、極端につぶれてしまう事ぐらいです。

IEはウチの環境にはないので確かめられませんが、

//viewboxの表示位置の処理

にある、max-widthを

viewbox.css({
	width: viewWidth + 30,

widthにしたらどうだろうかなと思います。元々はcss側でwidth: 100%にしていて、そこにmax-widthをjQueryで出してたんですけれども、もしcssも同じになっていて、jQueryでもスクリプトのままだとすると、cssでwidth:100%を取り除いたので、max-widthのみがstyle属性として入っているかと思います。
css側でサイズを入れても良いですし、上記の感じでも良いかと思います。

例えば上記を取り外して、cssで

.viewbox {
  //その他諸々
  min-width: 300px;
  max-width: 50%〜100%; //サイズはお好きに
}

とかとしても良いのかも。min-widthが設定されていて潰れるというなら、おそらく利用されたかわかりませんがflexの設定とかかと思います。ieは基本flexがあってないようなものなので、そこらも原因かも知れません。
min-width: 300px はiPhone5の縦向きでも少し間が開くような感じです。ブラウザの幅が広がって中の文字が増えた場合、最大でどこまでの幅にするかがmax-widthの値です。

.infoはflexを利用していますが、flexでなくてもスタイルできます。最初のspanだけinline-blockで後のspanはblockとかにすれば

000 名前:
投稿日: 2016/05/02(x) xx:xx:xx
ID: xxxxxxxxx

というような表示になるかと思います。各々マージン等が必要かも知れませんけれども。ここらはお好きにデザインして下さい。

また、

.info .comment-edit,
.info .research,
.info .count-box {
  display: none;
}

などとして不要なものは非表示にしておくと良いかと思います。更には、

//viewboxの中のspanを.infoブロックで囲む
viewbox.find("span").not(".research,.count-box").wrapAll("<div class='info'>");

これでも対応できるかも知れません。

Hidekichiさん、お世話になります。

min-widthを入れ、cssとか直しても、
インターネットエクスプローラーブラウザでのつぶれは直りませんでした。

ご指摘にあったようにボクのブラウザが、flex(boxですよね？)に対応していない
せいかもしれません。設定自体はいじった覚えがないのですが。

結局、利用者さんがコメントするハードルを更に下げるため、
掲示板のコメントＩＤが最初から表示されないようにしました。
それにより、つぶれ自体も余り気にならなくなったので大丈夫かと。

そしてどんどん、ボーイズちゃんねるにユーザーさんが遊びに来ているので
暫くは、この仕様で全く問題ないと思います。

何度も何度も、細かい部分までご丁寧に教えて頂き
有難うございました！　m(__)m