刚刚创建了一个带有 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">&nbsp; &nbsp; <label for="search">Search in <?php echo home_url( '/' ); ?></label>&nbsp; &nbsp; <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />&nbsp; &nbsp; <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" /></form>有关更多信息，您可以随时参考get_search_form()文档，其中包含有关该主题的更多信息。