如何在wordpress twentyten主题中自定义我的搜索小部件？

Question

我正在使用wordpress二十世纪主题 在这里我设置了搜索小部件。

现在我想自定义我的搜索选项，如

我希望像chang一样

任何人都能告诉我在哪里需要改变吗？

Answer 1

wordpress搜索表单的php是<?php get_search_form(); ?>，它在浏览器中写出以下内容

<form method="get" id="searchform" action="http://www.your-url.org.uk/">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>

所以你需要在主题的样式表中找到#searchform，然后从那里自定义css。如果您需要更多帮助，请尝试下载firebug并使用它来检查现有的Css。

Answer 2

由于我无法看到该网站，因此我将向您展示如何使用Google Chromes Developer Tools找出答案

1. 打开localhost以查看WordPress安装
2. 右键单击输入搜索框并选择“检查元素”
3. 在右栏中列出，您将看到与TwentyTen主题相关联的CSS样式。你还会注意到有一个style.css文件，下面有一个下划线，你可以点击它。 CSS检查器会显示哪条线路正在引用，您可以在右侧窗格中进行更改，并在您的站点上查看它们。
4. 由于您希望输入框背景颜色变为灰色，因此您必须在输入框样式内双击并将其更改为＃e4e4e4。
5. 接下来，您需要将颜色选择器更改为黑色，因为颜色不会显示为灰色背景。
6. 将填充更改为0px
7. 将宽度更改为144px
8. 通过选择要重新定位和设置样式的代码的其他元素，重复上述相同的步骤。
9. 最后，您可以通过单击“资源”选项卡，展开“样式表”和“右键单击Style.css”并选择“另存为”来保存更改，并将样式表保存在当前样式表的顶部。

但我建议您创建一个WordPress Child Theme而不是直接修改TwentyEleven主题，因为如果更新您的WordPress网站（经常发生），您的所有更改都将丢失。