web-dev-qa-db-ja.com

ショートコードを使用してワードプレスのビジュアルエディタに<div>タグを配置する

こんにちは私は特定のページに次のコードが必要です。

<div class="searchbar" >

            <div class="searchbar-inner" >

                search <input type="text" id="search" />

                <span class="result-count" ></span>

            </div>

</div>

ページの編集中にショートコードを使用してビジュアルエディタに配置することは可能ですか？

shortcodetinymcevisual-editor
1
Laurize

ショートコードを書き留めていないとします...

function search_shortcode()
{
    $struct = '<div class="searchbar" ><div class="searchbar-inner" >search <input type="text" id="search" /><span class="result-count" ></span></div></div>';
    return $struct;
}
add_shortcode('search_box', 'search_shortcode');

エディタが「HTML」モードになっていることを確認し、ショートコードを「search_box」として貼り付けます。ショートコードを使用すると、このフォームを好きな場所で再利用できます。

0
Rutwick Gangurde

はい、あなたはショートコードを使うことができます、しかしそれは必要ではありません。

ポストエディタで[HTML]タブ（[ビジュアル]タブの横）に切り替えて、そこにコードを貼り付けることができます。

また、WordPressの検索ルールに従うことを計画している場合は、検索入力を以下のようにフォーマットする必要があります。

<div class="searchbar">
    <div class="searchbar-inner">
        <form action="http://example-site-name.tld/" method="get">
            <label for="search">Search</label><input id="search" type="text" name="s" />
        </form>
        <span class="result-count"> </span>
    </div>
</div>

乾杯、

0
byjml