页面的HTML代码

Question

我对此页面有疑问：https://www.webovo.nl/blog/。 当我在网站上检查一些东西时，我会看到很多html和css代码。我知道我可以在style.css文件中找到css，但我不知道在哪里可以找到（并编辑）我看到的html代码。在哪里（以及如何）我可以看到我看到的HTML代码的来源？

例如，我想更改您在搜索字段中可以看到的默认文本（即：zoeken ..）。我无法在任何地方找到这段代码。

我正在使用Onepress主题。

有人能帮助我吗？ 感谢

Answer 1

Onepress主题中的搜索字段通过以下代码添加到文件template-parts / content-none.php（第23和28行）中：

<?php get_search_form(); ?>

这引用了wp-includes/general-template.php，其中搜索表单包含在模板中，如果存在“searchform.php”，或者它是这样构建的（第192行）：

<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。例如，您可以从二十二主题中获取文件：searchform.php。将此文件复制到Onepress主题文件夹中，更改placeholder属性即可完成。

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

Answer 2

如果这是您的网站，则是此部分。

但是，我无法建议您查看HTML文件的内容，因为我无法查看文件的结构:)。

请查看以获取更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

Answer 3

这取决于您使用的浏览器。但是，对于Chrome，右键单击并检查元素时，会出现样式和计算标签，其中显示了该元素的CSS。在样式选项卡上，您可以看到样式的继承位置。

对于搜索栏，您可以看到该样式是继承自第80行的style.css。