1

ブログの現在のテーマを変更し、すべての入力フィールドにクラスを追加したいと考えています。

私は正規表現コードに精通していないので、このようなことを行う必要があるたびに多くの問題が発生します。

タイプ="送信"

追加したいクラスを追加するbtn必要があります<input type="submit">

古いコード

<input type="submit" id="some_id" name="something" class="some_class" value="some_value" />

新しいコード

<input type="submit" id="some_id" name="something" class="btn some_class" value="some_value" />

と

同様に、クラスinputを追加して<input type="text">、<input type="textarea">

古いコード

<input type="text" id="some_id" name="something" class="some_class" value="some_value" />
<textarea id="some_id" name="something" class="some_class" value="some_value" />

新しいコード

<input type="text" id="some_id" name="something" class="input some_class" value="some_value" />
<textarea id="some_id" name="something" class="input some_class" value="some_value" />
4

4 に答える 4

8

制約がある場合、PHP でやりたいことを行い、Wordpress フレームワーク内にとどまる最もクリーンな方法は、DOMDocument を使用することです。正規表現に頼ることは可能ですが、非常にずさんであり、当初よりも多くの問題に遭遇する可能性があります。

これを functions.php ファイルに配置すると、必要なすべてが実行されます。

add_filter('the_content', 'add_text_input_classes', 20);
function add_text_input_classes($content)
{
    $doc = new DOMDocument(); //Instantiate DOMDocument
    $doc->loadHTML($content); //Load the Post/Page Content as HTML
    $textareas = $doc->getElementsByTagName('textarea'); //Find all Textareas
    $inputs = $doc->getElementsByTagName('input'); //Find all Inputs
    foreach($textareas as $textarea)
    {
        append_attr_to_element($textarea, 'class', 'input');
    }
    foreach($inputs as $input)
    {
        $setClass = false;
        if($input->getAttribute('type') === 'submit') //Is the input of type submit?
            $setClass = 'btn';
        else if($input->getAttribute('type') === 'text') //Is the input of type text?
            $setClass = 'input';

        if($setClass)
            append_attr_to_element($input, 'class', $setClass);
    }
    return $doc->saveHTML(); //Return modified content as string
}
function append_attr_to_element(&$element, $attr, $value)
{
    if($element->hasAttribute($attr)) //If the element has the specified attribute
    {
        $attrs = explode(' ', $element->getAttribute($attr)); //Explode existing values
        if(!in_array($value, $attrs))
            $attrs[] = $value; //Append the new value
        $attrs = array_map('trim', array_filter($attrs)); //Clean existing values
        $element->setAttribute($attr, implode(' ', $attrs)); //Set cleaned attribute
    }
    else
        $element->setAttribute($attr, $value); //Set attribute
}
于 2012-05-09T02:14:01.447 に答える
2

あなたの質問を正しく理解できれば、入力要素にクラスを動的に適用したいと思うでしょう。使用する必要があるのは、フィルターまたは一連のフィルターです。

まず、フィルターの仕組みについて説明します。フィルターは、アクションと同様に「フック」で機能します。詳細については、アクションとフィルターのコーデックス ページを参照してください。

btn各入力を手動で変更することなく、フックを使用してこのクラスを追加したいようです。それはフックの仕組みではありません。これにフックを使用するには、フィルターを使用します。つまり、次のように記述する必要があります。

<input type="submit" class="<?php echo apply_filters('input_class', 'some-default-class'); ?>" />

その後、「input_class」タグにフィルターを追加できます。

add_filter('input_class', 'btn_class_filter');

function btn_class_filter($default){
    return 'btn';
}

関数が返すものは何でも、デフォルト値を置き換えます。この場合、「some-default-class」は「btn」に置き換えられます。

ただし、クラスを追加する各入力フィールドにコードを追加する必要がなくなるわけではありません。これを行う唯一の方法は、javascript を使用することであり、jQuery を使用するのが最も簡単です。jQuery を使いたくないと言ったのは知っていますが、マークアップを編集したくない場合は、それが唯一の選択肢です。

最も簡単なことは、btnクラスを手動で追加することです。アクセスの問題であれば、jQuery が最適です。

于 2012-05-08T18:41:42.803 に答える
0

これらの要素にブランケット スタイル ルールを適用するだけで、IE6 のサポートを気にしない場合は、CSS で属性セレクターを使用しないでください。

.btn, input[type="submit"] {
    /* styles for buttons */
}

.input, input[type="text"], textarea {
    /* styles for text inputs and textareas */
}

参考までに、ありません<input type="textarea">。<textarea>

フックを使用してマークアップを操作するのは、時間がかかり、扱いにくいものです。すべてのテンプレート出力とプラグインで生成されたマークアップを取得する必要があります。これを試みないことをお勧めします。Wordpress のコードは非常に面倒です。

于 2012-05-08T06:53:11.637 に答える
-2

私は上で答えましたが、それを編集するだけですが、すでに投票を受けているため、この答えは大きく異なります。

最初の回答にいくつかコメントした後、@Aniket が変更したい入力フィールドはコンテンツ内ではなく、ウィジェットなどのサイト全体の要素やテンプレート自体であることに気付きました。

フック、アクション、またはフィルターを使用して、テーマ テンプレート内に記述されたコードを変更する方法はありません。フィルターは文字列と値を変更できますが、それを行うためのフックが既に利用可能な場合に限ります。あなたはこれを持っていないので、それは不可能です。入力フィールドを編集せずにこのクラスを動的に追加するための唯一のオプションは、javascript を使用することです。ただし、これは 2 つの理由で無意味です。

  1. 入力フィールド自体を編集する方が簡単です
  2. CSS では他の方法でこれらの要素を選択できるため、これらのクラスを追加する必要はありません。

'input'入力フィールドにクラスを追加する必要はありません。

CSS では、タグ名で要素を選択できるため、たとえば、任意の div を選択する場合、すべての div に".div"クラスを追加する必要はありません。"div"クラスやID表記なしで使用するだけで、すべてのdivを選択できます。

同じことがテキストエリアにも当てはまります。inputテキストエリア、テキストフィールド、送信ボタンにクラスを追加したいとおっしゃいましたが、それは必須ではありません。CSS 属性セレクターを使用して、これらすべてを選択できます。この場合、追加する 2 つのクラスの代わりに属性 submit と text、および textarea 要素で入力フィールドを指定しようとしていました。

ボタンを送信するために .btn クラスを追加する代わりに、...

input[type="submit"] {
   /* Your styles */
}

そして、テキストフィールドとテキストエリアに .input クラスを追加する代わりに...

textarea, input[type="text"] {
   /* Your styles */
}

または、テキストエリアとテキストフィールドだけでなく、すべての入力フィールドが必要な場合は...

input {
   /* Your styles */
}

JavaScript でこれを行ったとしても、とにかくこの種の CSS 選択を使用してこれらの要素を選択する必要があり、可能な正規表現はこれらの単純な行よりもはるかに複雑になります。

于 2012-05-10T04:55:57.467 に答える