ページのHTMLコード

Question

このページについてのご質問はhttps://www.webovo.nl/blog/です。 ウェブサイトで何かを調べると、たくさんのHTMLとCSSコードが表示されます。私はstyle.cssファイルでCSSを見つけることができると理解していますが、私は見ているhtmlコードをどこで見つけることができるのか分かりません。どこで（そしてどのように）私は見ているhtmlコードのソースを見ることができますか？

たとえば、検索フィールドに表示されるデフォルトのテキスト（zoeken ..）を変更したいとします。私はそのコードをどこにも見つけることができません。

私はOnepressテーマを使用しています。

誰かが私を助けることができますか？ ありがとう

Answer 1

これがあなたのサイトの場合、このセクションです。

しかし、私はどこ私はファイル:)の構造を見ることができないため、HTMLファイル内で探すをあなたにお勧めすることはできません。それはあなたが使用しているブラウザによって異なりhttps://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

Answer 2

：

詳細はこのことを確認してください。ただし、Chromeを右クリックして要素を調べると、のスタイルとComputedのタブに要素のCSSが表示されます。 [スタイル]タブでは、スタイルが継承された場所を確認できます。

あなたはスタイルがライン上のstyle.cssから継承されたことを確認することができ、検索バーの

Answer 3

Onepressテーマの検索フィールドがファイルテンプレート部品/コンテンツnone.phpに追加されます（ライン23および28）は、このコードによっては：

<?php get_search_form(); ?> 

これは、検索フォームが「searchform.php」が存在する場合、テンプレートから含まれているか、それは、この（ライン192）ように構築されwp-includes/general-template.phpに戻って参照し：

<input type="search" class="search-field" placeholder="' . esc_attr_x('Search &hellip;', 'placeholder') . '" value="' . get_search_query() . '" name="s" /> 

「... Zoeken」その後、再びテキストを

esc_attr_x('Search …', 'placeholder') 

をあなたのWordpressのインストールを持っている翻訳ファイルから引かれる：

あなたのプレースホルダーテキスト「Zoekenは...」ここに挿入されています。これらのファイルを変更することは、将来の更新によって上書きされる可能性があるという意味では、少し「危険」です。

つまり、カスタムテキストでカスタム検索を行う簡単な方法があります。独自のsearchform.phpを作成します。例えば、twentyelevenテーマのファイルを取ることができます：searchform.php。このファイルをOnepressテーマフォルダにコピーし、placeholder属性を変更すると完了です。

<input type="text" class="field" name="s" id="s" placeholder="Whatever" />