刚刚创建了一个带有 html 和 css 的搜索栏，我如何为 php 搜索表单使用相同的样式？

Question

这是我的搜索栏 HTML 代码： <div class="search-box">    <input class="search-txt" type="text" name="" placeholder="Type to search">      <a class ="search-btn" href="#">        <i class="fas fa-search"></i>      </a> </div>当我删除 HTML 并添加此 php 代码时，<?php get_search_form(); ?>搜索栏在我的 Wordpress 网站上运行良好。但是默认样式非常基本，我想更改它以匹配我原来的静态搜索栏。我将如何实现这一目标？

Answer 1

如果您使用的是 Wordpress，您可以创建一个返回您的 html 的简码，这样它将保持您原来的 HTML 样式。

在这里，您可以获得有关短代码以及如何使用它们来呈现 HTML 元素的更多信息。

希望这对你有帮助！

Answer 2

正如您可以从codex中的模板层次结构中检查的那样。您必须从 wordpress 修改相应的模板或小部件

在您的情况下，您必须覆盖 searchform 小部件，并且有几种方法可以做到这一点，这已经在stackoverflow上得到了回答。

可能的解决方案是在您的主题中插入/覆盖 searchform.php 并在其上添加您的标记：

<form action="/" method="get">

    <label for="search">Search in <?php echo home_url( '/' ); ?></label>

    <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />

    <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />

</form>

有关更多信息，您可以随时参考get_search_form()文档，其中包含有关该主题的更多信息。