web-dev-qa-db-ja.com

コメント送信ボタンにクラスを追加するにはどうすればいいですか？

コメント送信ボタンにクラスを追加するにはどうすればいいですか？単純化された関数comment_form(array('id_submit'=>'buttonPro'));は明らかにidを変更するだけで、class_submitは存在しないようです。

Ottoの と Beauの の両方の記事を読みましたが、役に立ちません。

commentscomment-form
6
torinagrippa

関数comment_form()のソースをチェックアウトすると、入力にクラスさえ表示されないことがわかります。

<input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />

スタイリング用のクラスを追加する必要があると思いますか？ CSSを修正してみましょう。

input.submit, #buttonPro {
    /* some awesome style */
}

そうでなければ、 '最も簡単な'解決策は、単に関数をあなたのfunctions.phpにコピーし、名前を変更し、クラス引数＆printを追加し、代わりにそれを使うことであると思います - あなたができる ここで見つける ;）

6
TheDeadMedic

WordPressバージョン4.1から （ Tracチケット＃20446 ） 'class_submit'配列キーを使ってcomment_form($args)の引数としてあなた自身のクラスを渡すために追加されました：

$args = array( 'class_submit' => 'btn btn-default' );

余分な努力をする必要はありません。 （コーデックスも編集）:)

10
Mayeenul Islam

私は財団の枠組みにも取り組んでいます。私は、フィルタをかけられない要素にクラスを追加する最も簡単な方法はjQueryを使ってそれを行うことであることを発見しました。

jQuery(document).ready(function($) { //noconflict wrapper
    $('input#submit').addClass('button');
});//end noconflict
7
Philip Downer

送信ボタンにクラスが必要なのはなぜですか。あなたが発見したように、あなたはそれにIDを与えることができます、そしてそれはあなたがそれをスタイルするのに必要なすべてです。

comment_form(array('id_submit'=>'buttonPro'));

それからそれをスタイルする：

input#buttonPro {...}

簡単です。あるいは、何らかの理由でクラスを使用したい場合は、

.form-submit input {...}

コメントフォームの送信ボタンにクラスを追加しても、どの角度から見ても利点はありません。

3
Otto

私は同じ解決策を探していましたが、やっと解決策が見つかりました。下のコードが完璧に機能しました。送信ボタンに "btn btn-primary"クラスをコメント形式で追加したいと思いました。

ob_start();
comment_form( $args );
$form = ob_get_clean(); 
$form = str_replace('class="comment-form"','class="comment-form"', $form);
echo str_replace('id="submit"','class="btn btn-primary"', $form);

私が使った$ argsは

$args = array(
'comment_field' => '<p class="comment-form-comment"><label for="comment">Comment</label> <textarea class="form-control" id="comment" name="comment" cols="35" rows="12" aria-required="true"></textarea></p>',
'fields'        => array(
    'author' => '<p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input class="form-control input-comment-author" id="author" name="author" type="text" value="" size="30" aria-required="true"></p>',
    'email'  => '<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input class="form-control input-comment-email" id="email" name="email" type="text" value="" size="30" aria-required="true"></p>',
    'url'    => '<p class="comment-form-url"><label for="url">Website</label> <input class="form-control input-comment-url" id="url" name="url" type="text" value="" size="30"></p>',
),
'cancel_reply_link' => '<button class="btn btn-danger btn-xs">Cancel reply</button>',
'label_submit' => 'Post Comment',);
1
Aamer Shahzad

私はこの問題を抱えている人に、私がやったように "post-comment" idのスタイルを設定することを勧めます。

#post-comment {
background: none repeat scroll 0 0 transparent;
border: 1px solid #FFFFFF;
padding: 8px 20px;
float: left;}

がんばろう！ :)

1
Marjan