改变WordPress默认搜索小工具样式

2011年10月6日01:15:50 69 16,837
摘要

  鉴于近期Google搜索变得极不稳定,HotNews Pro 主题集成的Google自定义搜索功能,也时常失去作用,无法显示搜索结果。   如果你不想彻底关闭Google自定义搜索功能,而全部使用WP自带的简易搜索功能,可以在侧边栏中调用WP默认的搜索小工具,为保持该小工具样式与主题风格保持一致,可以把下面的代码加到主题样式文件style.css中,改变其默认样式。   最终效果如我博客侧边栏的站内搜索。

鉴于近期Google搜索变得极不稳定,HotNews Pro 主题集成的Google自定义搜索功能,也时常失去作用,无法显示搜索结果,如果你不想彻底关闭Google自定义搜索功能,而全部使用WP自带的简易搜索功能,可以在侧边栏中调用WP默认的搜索小工具,为保持该小工具样式与主题风格保持一致,可以把下面的代码加到主题样式文件style.css中,改变其默认样式。

  1. /** 搜索小工具 **/  
  2. input#s {   
  3. width:190px;   
  4. height22px;   
  5. *margin10px 0 0 0;   
  6. *+margin10px 0 0 0;   
  7. padding1px;   
  8. border:1px solid #ccc    
  9. }   
  10. input#searchsubmit {   
  11. background:url(images/go.gif) no-repeat;      
  12. width:15px;   
  13. height:15px;   
  14. border:none;   
  15. cursor:pointer;   
  16. text-indent:-10000px;   
  17. }   
  18. .box {   
  19. *height:100%;   
  20. *+height:100%;   
  21. }   
  22. .screen-reader-text {   
  23. displaynone;   
  24. }  

最终效果如我博客侧边栏的站内搜索。

注:使用WP默认小工具,一定要添写小工具的标题,否则会造成模板错位。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:69   其中:访客  57   博主  11   引用   1

    • 看得见风的人 6

      鸟哥,你是怎样实现,例如:让一个视频在它的正文页面显示的所属分类是“欧美音乐”但是又在总的“热门影音”内也显示出来?
      我自己弄的话这个的视频的正文页面就会显示这个视频属于“欧美音乐”和“热门影音”两个分类···

        • 知更鸟 Admin

          @看得见风的人 把“欧美音乐”设置父级分类为“热门影音”,再调用这两个分类到导航菜单
          并不是一篇文章选择两个分类
          看了你的问题,才知道为什么经常有人喜欢把一篇文章划到两个分类中了,这些是WP的基本功能

        • 米多 1

          不想改了,怕弄坏了

          • 看得见风的人 6

            鸟哥,为什么侧边栏小工具的那个广告位,放置百度联盟广告不能居中显示呢?

            • 看得见风的人 6

              鸟哥,你是如何让“外部引用”只显示标题,而不带链接的?

              • Win7en乐园 8

                呵呵,我直接用的谷歌AD里面的自定义搜索代码,用着蛮好的。让搜索的结果在外部打开

                • Win7en乐园 8

                  不过我有个问题呀,希望鸟哥帮忙解决,就是导航栏上面的搜索,当打开主页的时候,你使用上面的搜索东西,会显示没有结果,而在内页使用的时候,搜索正常,不知道该如何解决,求教鸟哥。

                    • 知更鸟 Admin

                      @Win7en乐园 你使用的版本首页是谷歌自定义搜索

                        • Win7en乐园 8

                          @知更鸟 哦,这样呀、那有没有快速的将它改成WP自带的呢?(弱弱的问下,用免费的主题,我已经感觉到很不好意思了~~~~还问问题。。)

                      • Win7en乐园 8

                        另外,今天的PR清空了,以后没有PR值了呀!!呵呵

                        • 瑶浴药包 0

                          呵呵 哎呀哎呀

                          • gaogang 2

                            我也不改了,我的文章太少,用不上站内搜索。

                            • 牛初乳 1

                              我的文章不多,,谢谢博主分享。

                              • 面包机 1

                                这个还不错。。经常关注博客的可以搜索。

                                • 宝宝 5

                                  我的首页头部标签还是不能靠右,标签不少了,但是不会显示在头上!哎!

                                    • 知更鸟 Admin

                                      @宝宝 主题设置中增加显示的标签数量

                                    • 汕头SEO 5

                                      这个很好!

                                      • wmtimes 7

                                        楼层都给盖住了。

                                        • 空中白鹤 2

                                          不太想改 我不懂代码啊

                                          • 四川人 6

                                            奇怪,为啥我的就不行呢!显示样子不是你这样的

                                              • 知更鸟 Admin

                                                @四川人 嗯,是上面转换的代码有误,重新复制

                                              • 四川人 6

                                                对了,你上面的代码应该是input,少了一个i,我找了半天

                                                • 四川人 6

                                                  还少了几个东西 完整代码如下: /** 搜索小工具 **/

                                                  • 四川人 6

                                                    对了博主问下,我的网站每个人的头像怎么都不显示了?gravatar服务器是不是在我网站就不显示了

                                                      • 知更鸟 Admin

                                                        @四川人 这个问题很早就写过了
                                                        而且主题说明中已注明方法
                                                        http://zmingcx.com/loaded-directly-from-the-main-station-www-gravatar-com-avatar-gravatar.html

                                                      • 调皮鬼 3

                                                        G最近或将有动作,其实不只是搜索功能受到了一定程度的影响,幸亏鸟兄将问题解决了,辛苦了!

                                                        • Bob 5

                                                          感谢鸟哥啊,正需要这个呢!

                                                          • 我震惊了 1

                                                            鸟哥,你真是太强大了,支持

                                                            • Love下载 2

                                                              我的搜索样式还是没有改变,都是按照你说的修改的,小工具标题也写了,css文件也添加了

                                                              • Love下载 2

                                                                知道什么问题了,是浏览器的问题,我用火狐浏览器没问题。用360极速浏览器中的兼容和IE9就会没改变,希望能在修改一下支持所有浏览器

                                                                  • 知更鸟 Admin

                                                                    @Love下载 从不用250+110浏览器,不过可以清空浏览器缓存试试

                                                                  • 银川摄影工作室 3

                                                                    学习了

                                                                    • whxcr 1

                                                                      这里人好多 来学习一下

                                                                      • 我的移动互联 2

                                                                        鸟哥,真心是服务到细致哈~

                                                                        • 冰菁翎羽 4

                                                                          用了这段css加入之后,侧栏有错位。你看看你的右栏读者墙就错位了!

                                                                          • 北京摄影 2

                                                                            来取经的,嘿嘿

                                                                            • 银川婚纱摄影 3

                                                                              不错这东西蛮好的

                                                                              • sealango 5

                                                                                突然发现一个问题。
                                                                                之前就一直奇怪鸟哥在2.6右上角搜索,用的是谷歌搜索,为什么到了2.7中改成了主题自带的。
                                                                                今天才发现你这里还是用的谷歌搜索。于是去翻查了2.7和我博客上的代码。发现都是写的判断谷歌搜索是否启用的东西。
                                                                                但就是这样,我的博客右上角还是用的主题自带的搜索结果。这是为什么?是不是哪里没有开启了。
                                                                                这搜索的代码,一直没有动过。

                                                                                  • 知更鸟 Admin

                                                                                    @sealango 如果你看全了主题说明,就不会问这个问题了

                                                                                      • sealango 5

                                                                                        @知更鸟 ■ Google自定义搜索

                                                                                        可以在主题设置中开启Google自定义搜索,然后添加一个页面,右下页面属性“模板”中选择“谷歌搜索”模板,最终搜索结果将显示在这个页面中,只需在主题设置中输入搜索结果链接页面及自已的搜索ID即可,默认是我的。附:Google自定义搜索操作方法

                                                                                        如果指的是这个的话,在2.4中,确实都如法泡制,直到2.6中也没做任何修改。都可以正常搞用谷歌搜索。到了2.7中就不出来了。

                                                                                        • sealango 5

                                                                                          @知更鸟 找到问题所在了,确实是2.7中的一个更新细节。
                                                                                          你把他做到了主题设置中,并单独开辟了一个搜索设置的区块,给其他人自己选择搜索结果页的形式。
                                                                                          我自认为已经很用心地研究你的主题了,都没发觉到这个变化,更不指望多数人都能发现这个升级细节啊。2.7说明的一句话也没讲清楚这一块啊。

                                                                                            • 知更鸟 Admin

                                                                                              @sealango 主题设置中单独分出一块设置这个,没看见?还是不够用心,呵呵

                                                                                        • Coach Outlet 2

                                                                                          鸟哥厉害啊

                                                                                          • ugg outlet 1

                                                                                            主题设置中单独分出一块设置这个,没看见?还是不够用心,呵呵

                                                                                            • 小虾米 0

                                                                                              鸟哥哥,你那欧美音乐那里面那些歌和那些图片排序是怎么整上去的,模板里面为什么没有啊,里面只有6个模板没有音乐啊

                                                                                              • cheap burberry 1

                                                                                                鸟哥哥,你那欧美音乐那里面那些歌和那些图片排序是怎么整上去的,模板里面为什么没有啊,里面只有6个模板没有音乐啊

                                                                                                • louis vuitton outlet 1

                                                                                                  提示:为了防止垃圾留言,您的留言中必须输入一些中文!

                                                                                                  • ugg outlet 0

                                                                                                    Ugg Knit Cardy ugg outlet store, you can use spot colors that will make your brands more identifiable.2. Other than this Burberry Crossbody Bag Uggs Outlet 很好

                                                                                                    • eyeyue.com 0

                                                                                                      防止垃圾留言,您的留言中必须输入一些中文!

                                                                                                      • yumanutong 6

                                                                                                        加了,没用,汗

                                                                                                          • yumanutong 6

                                                                                                            @yumanutong 刚才缓存,现在有效果了,可是不怎么和谐啊!!!!

                                                                                                          • obert 0

                                                                                                            Robin 大哥,您好!
                                                                                                            我在使用您的2.7plus主题,现在有一个地方有点儿小问题,请您协助看一下。网站现在主页面,分类页面打开、显示都正常。但是在点击:阅读全文 看里面详细内容的时候,右侧就出现错位,底部菜单也跑到了右侧,不知是何原因。请问您是不是我有什么地方设置或者修改有问题?
                                                                                                            盼复,谢谢您!
                                                                                                            obert msn&email:[email protected]

                                                                                                            • 大师兄 0

                                                                                                              很多问题需要解决

                                                                                                              • 583598992 0

                                                                                                                请问一下 网站的站内搜索框是这么弄的啊 能给一下代码 参考一下吗

                                                                                                              • 来自外部的引用: 1

                                                                                                                • 修改wordpress搜尋樣式 | 老森常譚