wordpress边栏增加百度站内搜索框及嵌入式搜索结果页
在wordpress的侧栏增加百度搜索框有两种方式,一种是类似小工具的方式,需要制作侧栏小工具,这样的方法有些麻烦,涉及需要了解如何制作wordpress小工具。另外一种方式就是直接在侧栏模板写入html代码,主要是表单代码:
<aside class="sidebar"> <!-- 百度站内搜索框 --> <div class="widget widget_baidu"> <h3 class="widget_tit">百度站内搜索</h3> <div id="bdcsMain"> <form method="get" class="dropdown search-form" action="http://www.hzwlb.org/baidu-search"> <input class="search-input" name="q" type="text" placeholder="百度一下,你就知道" x-webkit-speech=""> <input class="btn btn-success search-submit" type="submit" value="度娘"> </form> </div> </div> <!-- 百度站内搜索框 --> <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_sitesidebar')) : endif; if (is_single()){ if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_postsidebar')) : endif; } else if (is_page()){ if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_pagesidebar')) : endif; } else if (is_home()){ if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_sidebar')) : endif; } else { if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_othersidebar')) : endif; } ?> </aside>
在sidebar.php文件添加了站内搜索框表单代码,该表单代码最主要的几个元素及属性:
<!-- form 的action是搜索结果页地址 --> <form method="get" action="这里是搜索结果页地址"> <!-- 输入表单的name值必须是q --> <input class="search-input" name="q" type="text" placeholder="百度一下,你就知道" x-webkit-speech=""> <!-- 以上关键部分保证在输入框内的关键词可以传递到搜索结果页 -->
接下来需要的步骤是制作搜索结果的展现页面:
从当前主题的页面模板(page.php或者page-[slug].php)或者文章页模板(single.php或者single-[slug].php)选择一个作为模板来修改,建议使用文章页的,因为有侧栏啊:
/* 文章页面模板 */ <?php get_header(); ?> <div class="content-wrap"> <div class="content"> <div class="breadcrumbs"><?php echo deel_breadcrumbs() ?></div> <?php while (have_posts()) : the_post(); ?> /* 制作百度站内搜索结果页时需要删除 */ <header class="article-header"> <h1 class="article-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1> <div class="meta"> /* 制作百度站内搜索结果页时需要删除 */ <?php $category = get_the_category(); if($category[0]){ echo '<span class="muted"><a href="'.get_category_link($category[0]->term_id ).'"><i class="icon-list-alt icon12"></i> '.$category[0]->cat_name.'</a></span>'; } ?> <span class="muted"><i class="icon-user icon12"></i> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>"><?php echo get_the_author() ?></a></span> <?php echo dopt('d_post_from_s') && hui_get_post_from() ? '<span class="muted">'.hui_get_post_from().'</span>' : '' ?> <time class="muted"><i class="ico icon-time icon12"></i> <?php echo timeago( get_gmt_from_date(get_the_time('Y-m-d G:i:s')) )?></time> <span class="muted"><i class="ico icon-eye-open icon12"></i> <?php deel_views('浏览'); ?></span> <?php if ( comments_open() ) echo '<span class="muted"><i class="icon-comment icon12"></i> <a href="'.get_comments_link().'">'.get_comments_number('去', '1', '%').'评论</a></span>'; ?> <?php edit_post_link('[编辑]'); ?> </div> </header> <?php if( dopt('d_adpost_01_b') ) echo '<div class="banner banner-post">'.dopt('d_adpost_01').'</div>'; ?> <article class="article-content"> <?php the_content(); ?> </article> <?php endwhile; ?> /* 制作百度站内搜索结果页时需要删除 */ <footer class="article-footer"> <?php the_tags('<div class="article-tags">继续浏览有关 ','',' 的文章</div>'); ?> /* 制作百度站内搜索时需要删除 */ <?php deel_share(); ?> </footer> <nav class="article-nav"> /* 制作百度站内搜索结果页时需要删除 */ <span class="article-nav-prev"><?php previous_post_link('上一篇 %link'); ?></span> <span class="article-nav-next"><?php next_post_link('%link 下一篇'); ?></span> </nav> <div class="relates"> /* 制作百度站内搜索结果页时需要删除 */ <h3>与本文相关的文章</h3> <?php include( 'modules/related.php' ); ?> </div> <?php if( dopt('d_adpost_02_b') ) echo '<div class="banner banner-related">'.dopt('d_adpost_02').'</div>'; ?> <?php comments_template('', true); ?> <?php if( dopt('d_adpost_03_b') ) echo '<div class="banner banner-comment">'.dopt('d_adpost_03').'</div>'; ?> </div> </div> <?php get_sidebar(); get_footer(); ?>
因为是要制作成结果页,所以文章页的内容部分就要替换成百度站内搜索提供的代码:
<div id="bdcs-frame-box"></div> <script type="text/javascript"> var bdcsFrameSid="你的id"; var bdcsFrameWidth = 552; var bdcsFrameWt = 1; var bdcsFrameHt = 1; var bdcsFrameResultNum = 10; var bdcsFrameBgColor = "#ffffff"; </script> <script type="text/javascript" src="http://zhannei.baidu.com/static/js/iframe.js"></script> <!-- 以上是百度站内搜索默认的嵌入式代码,具体参数可以参考百度站内搜索修改 -->
文章模板主题部分的一些内容就需要删除修改:
<?php while (have_posts()) : the_post(); ?> /* 文章内容while 循环,制作百度站内搜索结果页时需要删除 */ <?php endwhile; ?> /* 文章内容while 循环,制作百度站内搜索结果页时需要删除 */ <div class="meta"> /* meta内容,主要是文章的来源作者发布时间等 制作百度站内搜索结果页时需要删除 */ <?php $category = get_the_category(); if($category[0]){ echo '<span class="muted"><a href="'.get_category_link($category[0]->term_id ).'"><i class="icon-list-alt icon12"></i> '.$category[0]->cat_name.'</a></span>'; } ?> <span class="muted"><i class="icon-user icon12"></i> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>"><?php echo get_the_author() ?></a></span> <?php echo dopt('d_post_from_s') && hui_get_post_from() ? '<span class="muted">'.hui_get_post_from().'</span>' : '' ?> <time class="muted"><i class="ico icon-time icon12"></i> <?php echo timeago( get_gmt_from_date(get_the_time('Y-m-d G:i:s')) )?></time> <span class="muted"><i class="ico icon-eye-open icon12"></i> <?php deel_views('浏览'); ?></span> <?php if ( comments_open() ) echo '<span class="muted"><i class="icon-comment icon12"></i> <a href="'.get_comments_link().'">'.get_comments_number('去', '1', '%').'评论</a></span>'; ?> <?php edit_post_link('[编辑]'); ?> </div> <?php the_tags('<div class="article-tags">继续浏览有关 ','',' 的文章</div>'); ?> /* 制作百度站内搜索结果页时需要删除 */ <nav class="article-nav"> /* 制作百度站内搜索结果页时需要删除 */ <span class="article-nav-prev"><?php previous_post_link('上一篇 %link'); ?></span> <span class="article-nav-next"><?php next_post_link('%link 下一篇'); ?></span> </nav> <div class="relates"> /* 制作百度站内搜索结果页时需要删除 */ <h3>与本文相关的文章</h3> <?php include( 'modules/related.php' ); ?> </div>
然后需要将
<?php the_content(); ?>
替换成上面的百度站内搜索嵌入代码。最后记得在制作结果页模板的时候添加模板名称注释,以免在生成页面的时候找不到模板可生成。
/* template name: 百度站内搜索嵌入式结果页 */
本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者: 柴宏俊» wordpress边栏增加百度站内搜索框及嵌入式搜索结果页
-
wordpress头部模块header代码
-
wordpress主循环the_loop内可以
-
wordpress根据不同页面类型
-
wordpress学习笔记之文章页