在WordPress中定制谷歌的搜索框

时间:2016-05-05 作者:Amanda Vin Zant

我希望我张贴在正确的地方。如果没有,我道歉。

首先,我不是一个编码员。我的搜索框的代码可以从我的主题教程(custimzr-pro)中获得。无论如何,我已经在一个胶粘的标题中创建了一个服装搜索框,它看起来像一个放大镜,单击时会展开,允许搜索。我想用谷歌搜索(通过adsense)来取代这个搜索,但保持样式不变。我知道了如何将谷歌搜索放在那里,但我无法将其风格化,主要是因为我不知道谷歌搜索框中的元素叫什么。

这是我现在搜索框的代码。。。(位于子主题样式css中)

            /* my-nav-menu-search menu item created in functions.php. Move it way   over to the right */
.navbar .nav .my-nav-menu-search {
    float: right;
}
.navbar .nav {
    width: 100%;
}
.my-nav-menu-search .search-form {
    position: relative;
    margin: 0;
}
/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won\'t see it */
.my-nav-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

/* Style the search input textbox */
.my-nav-menu-search .search-field {
    background: transparent;
    border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    position: relative;
    -webkit-transition: width 400ms ease;
    -moz-transition:    width 400ms ease;
    -o-transition:      width 400ms ease;
    transition:         width 400ms ease;
    width: 0px;
}

/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
    color: #5a5a5a;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 70px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    margin: 0;
}

/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
    font-family: \'FontAwesome\';
    content: \'\\f002\';
    position: absolute; /* this is the key to put it visually inside the search field */
    font-size: 19px;
    font-weight: normal;
    top: 5px; /* tune this vertical alignment inside the search field, as needed */
    left: 5px; /* tune this horizontal alignment inside the search field, as needed */
}

/* Reset nav width and search floating for mobile menu */
.tc-second-menu-on .nav-collapse {
  width: auto;
  clear: none;
  top: 5px;
  float: right;
  margin-right: 5px;
}
.sticky-enabled .tc-second-menu-on .nav-collapse { top: 7px; }
@media (max-width: 979px){
    .navbar .nav .my-nav-menu-search {
        float: left;
    }
    .navbar .nav {
        width: auto;
    }
}
  .tc-second-menu-on .nav-collapse {
      top: 10px;    
    }
这是他们提供的谷歌搜索框代码。。

<form action="http://www.lifewithgremlins.com/search/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-5*my pub number*" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
有人知道怎么做吗?事实上,如果允许你这么做?我不知道谷歌有多在乎这个搜索框的外观。

提前谢谢你。

1 个回复
最合适的回答,由SO网友:Howard E 整理而成

这并不是wordpress特有的问题,但你必须先将搜索表单中的类添加到Google代码中,直到得到你想要的结果。如果看不到所有后端,很难说您需要做什么,但这应该会让您走上正确的轨道。您可能不需要将my nav menu search类添加到表单中,因为在您的主题中,它将位于nav menu search中。

  <form action="http://www.lifewithgremlins.com/search/" id="cse-search-box" class="my-nav-menu-search search-form" >
  <div>
    <input type="hidden" name="cx" value="partner-pub-5*my pub number*" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" class="search-field" />
    <input type="submit" name="sa" value="Search" class="search-submit" />
  </div>
</form> 
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

相关推荐

nothing happen in search form

我想创建搜索表单,但当我搜索时什么都没有发生,这是代码:索引。php: <div class=\"tech-btm\"> <?php get_search_form();?> </div> 搜索表单:<form role=\"search\" method=\"get\" id=\"searchform\" action=\"<?php echo home_url(\'/\')?>\"> &