質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

411閲覧

WordPressの※アンカー時に改行

arukuhito

総合スコア13

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/11 08:11

編集2018/11/11 12:38

前提・実現したいこと

WordPressのコメント欄でレス番号をクリックしたらそれに※印アンカー付きで返信できる機能を追加したいと思っています。
参考となるページがあったので、ほとんどそのページで紹介されているコードをコピーして導入したのですが一つだけ変更したい点があります。
レス番号を押して※○と記入された際に改行を入れたいです。

※1 書き出し

としたいということです。

追記
そして、それと同時にテキストエリアが選択されている状態になってほしいです。

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

※1書き出し

該当のソースコード

JavaScript

1 /** 2 * 「これにレス」機能 3 * 4 * @link http://ugokay01.wpblog.jp/wordpress-2ch-like-res-link/ 5 */ 6 (function () { 7 var 8 // 設定 9 selResFormLink = '.comment-form-link' // 返信リンクのjQueryセレクタ 10 , selForm = '#respond' // コメントフォームのjQueryセレクタ(form要素) 11 , selComment = '#comment' // コメント本文のjQueryセレクタ(textarea要素) 12 , strResAnchor = '※' // レスアンカーの開始文字列(複数指定は不可) 13 , flagScroll = false // スムーズスクロール(true:する、false:しない) 14 , flagBack = true // ジャンプ先から戻れるようURLを履歴に残す(true:する、false:しない) 15 16 // その他変数 17 , jqResFormLink // 返信リンクのjQueryオブジェクト 18 , jqForm // コメントフォームのjQueryオブジェクト 19 , jqComment // コメント本文のjQueryオブジェクト 20 ; 21 22 // jQueryオブジェクトを取得 23 jqResFormLink = $(selResFormLink); // 返信リンク 24 jqForm = $(selForm); // コメントフォーム 25 jqComment = $(selComment); // コメント本文 26 27 // 返信リンクのイベントにバインド 28 jqResFormLink 29 .on('click', function(eventObject) { 30 if (flagScroll) { // スムーズスクロールの判定 31 $('body, html').animate({scrollTop: jqForm.offset().top}, 200); // スムーズスクロール 32 } 33 if (!flagBack) { // 戻るフラグの判定はスムーズスクロールの後に行う(移動を伴うため) 34 $('body, html').scrollTop(jqForm.offset().top); // 表示位置変更 35 eventObject.preventDefault(); // a要素の動作を無効化 36 } 37 jqComment.val(jqComment.val() + strResAnchor + $(this).html()); // コメント本文の末尾にレスアンカー挿入 38 }) 39 .attr('title', 'これにレス') 40 ; 41 }()); 42});

試したこと

JavaScriptなので\nを入れれば改行できるとは思うのですが、どこに入れればいいかがわかりませんでした。

補足情報(FW/ツールのバージョンなど)

こちらのページをそのまま導入しています。

http://ugokay01.wpblog.jp/2ch-like-wordpress-comment/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/11/11 08:22

「WordPress」をタグに追加しておいてください。「JavaScript」だけではタグが足りないように思います。WordPress自体はPHPで作られているものですし、JavaScriptだけで対応するのが良いとは思えない内容です。
guest

回答1

0

ベストアンサー

WPサイトを実際に立ち上げた訳でないので、質問に記載のJavaScriptを見る限りですが、
以下の部分で、コメント欄の本文を書き換えているようです。

JavaScript

1jqComment.val(jqComment.val() + strResAnchor + $(this).html()); // コメント本文の末尾にレスアンカー挿入

該当部分の内訳としては以下になります。
jqComment.val(...):コメント本文の要素(<textarea>)に「...」の文字列を適用
jqComment.val():現在のコメント本文の要素(<textarea>)から文字列を取得
strResAnchor:「※」の文字
$(this).html():クリックしたリンク要素のHTML文字列(レス番号)

arukuhitoさんのケースでは、レス番号の後に改行をいれて結合すればOKだと思います。

JavaScript

1jqComment.val(jqComment.val() + strResAnchor + $(this).html() + '\n'); // コメント本文の末尾にレスアンカー挿入

追記(2018/11/11)

コメント本文の要素(<textarea>)にフォーカスする場合は以下の通りです。
一般に、テキストフィールドなどを選択しカーソルが出た状態になることを「(要素に)フォーカスする」というので、ご自分で検索する際などに参考にしてください。
jQueryには、その名の通り.focus()メソッドがあります。

JavaScript

1// 省略 2jqComment.val(...) 3jqComment.focus(); // 追加

追記(2018/11/12)

すみません。あるべき記述が抜けていたようです。

リンク要素をクリックした際に、デフォルトの挙動(リンク遷移)を抑制するためにpreventDefaultします。

JavaScriptのイベントは大事な概念なので、一度概要を調べてみるのをおすすめします。

JavaScript

1// 省略 2jqComment.val(...) 3jqComment.focus(); 4eventObject.preventDefault(); // 追加

投稿2018/11/11 10:39

編集2018/11/12 04:51
NozomuIkuta

総合スコア1260

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

arukuhito

2018/11/11 12:34

回答ありがとうございます。 求めていた動作が確認できました。 ただ、もう一つ追加したい機能が発覚したのですが、※アンカーを生成したときに同時にテキストエリアを選択している状態にしたいです。つまりカーソルが点滅してる状態になる機能が欲しいです。もしよろしければ追加質問にも答えていただきましたら幸いです。お願いします。
NozomuIkuta

2018/11/11 12:48

回答に追記しました。
arukuhito

2018/11/11 13:26

追加回答ありがとうございます。 しかし申し訳ないのですが、どうやらうまくいかないようです… 私の書き方が間違っている可能性も高いです…
arukuhito

2018/11/12 05:56

できました!やりたかった理想の動作がすべて確認できました。 ご助力いただき本当に感謝しつくせません。イベントについても調べようと思います。 NozomuIkutaさん、この度はありがとうございました。
NozomuIkuta

2018/11/12 06:49

解決したようでよかったです。 ではまた
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問