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

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

ただいまの
回答率

88.58%

WordPressの※アンカー時に改行

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 854

arukuhito

score 13

 前提・実現したいこと

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

1
書き出し


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

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

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

1書き出し

 該当のソースコード

    /**
     * 「これにレス」機能
     *
     * @link http://ugokay01.wpblog.jp/wordpress-2ch-like-res-link/
     */
    (function () {
        var
            // 設定
            selResFormLink = '.comment-form-link'    // 返信リンクのjQueryセレクタ
            , selForm      = '#respond'                // コメントフォームのjQueryセレクタ(form要素)
            , selComment   = '#comment'                // コメント本文のjQueryセレクタ(textarea要素)
            , strResAnchor = '※'                    // レスアンカーの開始文字列(複数指定は不可)
            , flagScroll   = false                    // スムーズスクロール(true:する、false:しない)
            , flagBack     = true                    // ジャンプ先から戻れるようURLを履歴に残す(true:する、false:しない)

            // その他変数
            , jqResFormLink        // 返信リンクのjQueryオブジェクト
            , jqForm            // コメントフォームのjQueryオブジェクト
            , jqComment            // コメント本文のjQueryオブジェクト
        ;

        // jQueryオブジェクトを取得
        jqResFormLink = $(selResFormLink);    // 返信リンク
        jqForm = $(selForm);                // コメントフォーム
        jqComment = $(selComment);            // コメント本文

        // 返信リンクのイベントにバインド
        jqResFormLink
            .on('click', function(eventObject) {
                if (flagScroll) {    // スムーズスクロールの判定
                    $('body, html').animate({scrollTop: jqForm.offset().top}, 200);    // スムーズスクロール
                }
                if (!flagBack) {    // 戻るフラグの判定はスムーズスクロールの後に行う(移動を伴うため)
                    $('body, html').scrollTop(jqForm.offset().top);    // 表示位置変更
                    eventObject.preventDefault();                    // a要素の動作を無効化
                }
                jqComment.val(jqComment.val() + strResAnchor + $(this).html());    // コメント本文の末尾にレスアンカー挿入
            })
            .attr('title', 'これにレス')
        ;
    }());
});

 試したこと

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/11 17:22

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

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

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

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

 追記(2018/11/11)

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

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

 追記(2018/11/12)

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

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

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

// 省略
jqComment.val(...)
jqComment.focus();
eventObject.preventDefault(); // 追加

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/11 22:26

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

    キャンセル

  • 2018/11/12 14:56

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

    キャンセル

  • 2018/11/12 15:49

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

    キャンセル

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

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る