全百科精品资源分享
免费优质资源下载平台

分享wordpress主题模板开发常用的标签与使用说明

今天分享的WordPress主题模板开发制作的过程中,记录一些常用标签与使用说明,希望能帮助到大家。

WordPressCMS主题制作流程和代码

1、如何把静态页面制作成主题,多个CSS文件如何选择
2、制作顶部header.php和底部footer.php
3、如何制作幻灯片和tab式新闻栏目
4、如何在首页调用出各个分类下的文章以及图片栏目
5、制作首页的sidebar和添加热门标签栏目
6、制作分类页面category.php,以及分类页面sidebar
7、制作分页和面包屑导航。
8、制作内容页面single.php,添加摘要,上下一篇功能,添加相关文章和评论。
9、制作内容页面sidebar
10、添加搜索框功能search.php和文章浏览量功能。

一、如何把静态页面制作成主题,多个CSS文件如何选择
1、如何把静态页面制作成主题
2、有多个CSS文件的时候,用哪个文件作为style.css
3、如果头部有空行,用utf-8 无bom模式保存

制作一个最简单的主题,只需要两个文件,index.php和style.css

第一步,准备静态页面
第二步,制作index.php和style.css
第三步,给style.css添加版权信息
第四步:把主题上传到空间中wordpress安装路径,wp-content/themes/下面,这里主题的文件夹名字必须是英文
第五步,在wordpress后台启用主题

先给style.css添加版权信息
/*
Theme Name: 全百科主题   
Theme URI: http://www.quanbaike.com 
Description: 适应于大多数站长的主题
Author: 全百科 
Author URI: http://www.quanbaike.com 
Version: 1.0 
Tags: red, cms, quanbaike
*/
 
Style.css路径调用:<?php bloginfo( 'stylesheet_url' ); ?>
主题文件夹路径:<?php bloginfo('template_directory'); ?>

 
二、制作顶部header.php和底部footer.php
 
需要用到的调用标签:
<?php get_header();?>
<?php get_footer();?>
<?php get_sidebar();?>
 
获取主页路径:<?php echo get_option('home'); ?>
 
Header.php中用到的标签:
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
 
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' | '; } ?> <?php bloginfo('name'); ?></title>	
<?php wp_head(); ?>
 
设为首页、收藏本站:
<script type="text/javascript">
 
	// Bookmark
	function bookmark(title, url) {
	  if (document.all)
		window.external.AddFavorite(url, title);
	  else if (window.sidebar)
		window.sidebar.addPanel(title, url, "")
}
</script>
 
<div style="float:right">      <a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('<?php bloginfo('url'); ?>');" class="homepage">设为首页</a> | <a href="#" onClick="javascript:bookmark('<?php bloginfo('name'); ?>','<?php bloginfo('url'); ?>');" target="_blank" class="favicon">加为收藏</a></div>
 
自定义css的导航调用方法:
  <?php
$args=array(
  'orderby' => 'id',
  'order' => 'ASC'
  );
$categories=get_categories($args);
  foreach($categories as $category) { 
    echo '<li class="thisclass"><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a></li>';
    } 
?>
 
日期向右靠齐:
<div style="float:right"></div>
 
如何添加全站链接:
<a href=” <?php echo get_option('home'); ?>”>全站链接1</a>
三、如何制作幻灯片和tab式新闻栏目
调用幻灯片js代码:
<script src="<?php bloginfo('stylesheet_directory'); ?>/flash.js"></script>
 
时间调用:<?php the_time('m-d') ?>
 
最新文章:
<?php $rand_posts = get_posts('numberposts=9&orderby=date');foreach($rand_posts as $post) : ?> 
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> 
<?php endforeach;?>
 
随机文章:
<?php $rand_posts = get_posts('numberposts=9&orderby=rand');foreach($rand_posts as $post) : ?> 
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> 
<?php endforeach;?>
 
热门文章:
	<?php
$post_num = 9; // 设置调用条数
$args = array(
      'post_password' => '',
          'post_status' => 'publish', // 只选公开的文章.
          'post__not_in' => array($post->ID),//排除当前文章
          'caller_get_posts' => 1, // 排除置顶文章.
          'orderby' => 'comment_count', // 依评论数排序.
          'posts_per_page' => $post_num
);
        $query_posts = new WP_Query();
        $query_posts->query($args);
        while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>
         <div class="" style="padding:3px 0px;"><div class="f-left"><img src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif" align="middle" class="img-vm" border="0"/><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></div><div class="f-right"><?php the_time('m-d') ?></div><div class="clear"></div></div>
<?php } wp_reset_query();?>
 
 
四、如何在首页调用出各个分类下的文章以及图片栏目
精彩图片需要用到插件:
wp-thumbnails
 
最新缩略图设置: 
宽度:110,高度100;显示数量:5;图片间距:10;标题:不显示
调用代码:
<?php if(function_exists('wp_thumbnails_for_recent_posts')) { wp_thumbnails_for_recent_posts(); } ?>
 
 
调用分类目录下的新闻:
<?php $display_categories = array(1,3,4,130,6,7,8,5); 
		foreach ($display_categories as $category) { ?>
<div class="P_category">
<?php query_posts("showposts=8&cat=$category")?>
<h2 class="P_c_one"><a href="<?php echo get_category_link($category);?>"><?php single_cat_title(); ?></a></h2>
    <ul class="p_news">
<?php while (have_posts()) : the_post(); ?>
    <li>· <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40, '…'); ?>
</a> </li>
<?php endwhile; ?>
    </ul>
    </div>
<?php } wp_reset_query();?>
 
 
 
 
五、制作首页的sidebar和添加热门标签栏目
首页sidebar.php
 
热评文章的div:
<div class="orderlist">
<a href="../news/3190.html" title="青墨网络科技官网html模版源码免费下载【全网首发】" target="_blank">青墨网络科技官网html模版源码免费下载【全网首发】</a> <br />
<a href="../news/3115.html" title="浅谈解决品牌公关危机的底层逻辑" target="_blank">浅谈解决品牌公关危机的底层逻辑</a> <br />
</div>
 
 
热评文章:
	<?php
$post_num = 10; // 设置调用条数
$args = array(
      'post_password' => '',
          'post_status' => 'publish', // 只选公开的文章.
          'post__not_in' => array($post->ID),//排除当前文章
          'caller_get_posts' => 1, // 排除置頂文章.
          'orderby' => 'comment_count', // 依評論數排序.
          'posts_per_page' => $post_num
);
        $query_posts = new WP_Query();
        $query_posts->query($args);
        while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>
         <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a><br/>
<?php } wp_reset_query();?>
 
最新留言:
<?php
   $comments = get_comments('status=approve&number=5&order=asc');
   foreach($comments as $comment) :
    $output =  '<div class="msg_title">' .get_comment_author().'发表评论说:</div><div class="msg_content">  <a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . $comment->comment_content . '</a><br/></div>';
   echo $output;
   endforeach;?>
 
标签:
<?php wp_tag_cloud('smallest=8&largest=36&'); ?>
 
添加友情链接:
    <div class="IndexLinkListWrap">
  <ul>
<li><a href="http://www.quanbaike.com" target="_blank">全百科网</a></li>
    <li><?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24'); ?></li>
  </ul>
</div>
 
友情链接的CSS样式:
/*首页友情链接
===================================================*/
.IndexLinkListWrap{width:97%;}
.IndexLinkListWrap ul{padding:0;margin:0;}
.IndexLinkListWrap ul li{float:left;list-style:none;margin-left:20px;}
.IndexLinkListWrap ul li a{text-align:center;margin:0 2px 0 5px;color:#666;text-decoration: none;}
.IndexLinkListWrap ul li a:hover{text-decoration: none;color:#FF539C;}
 
六、制作分类页面category.php,以及分类页面sidebar
时间调用:
<?php the_time('Y-m-d h:m:s') ?>
 
页面的标题:<?php wp_title('');?>
 
分类列表调用:
<?php if ($posts_perpage) { ?>
						<?php $postsperpage = $posts_perpage; ?>
                    <?php } else { ?>
                        <?php $postsperpage = 10; ?>
                    <?php } ?>
        	 
        	  <?php
						$categoryID=$cat;
						$wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>
        	 
 
 
		<?php while (have_posts()) : the_post(); ?>
        	<ul>
          
				<li><span><?php the_date_xml(); ?></span><span></span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 
            </ul>
            <?php endwhile; ?>
 
 
调用其他sidebar:
<?php include( TEMPLATEPATH . '/sidebar3.php' ); ?>  
 
最新文章;
<?php $rand_posts = get_posts('numberposts=6&orderby=date');foreach($rand_posts as $post) : ?> 
   <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
<?php endforeach;?>
 
随机文章:
<?php $rand_posts = get_posts('numberposts=6&orderby=rand');foreach($rand_posts as $post) : ?> 
   <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
<?php endforeach;?>
 
 
七、制作分页和面包屑导航
在functions.php中添加:
分页代码:
//分页
function pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string ."&posts_per_page=-1");
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged - 1;							
$next = $paged + 1;	
$range = 6; // 修改数字,可以显示更多的分页链接
$showitems = ($range * 2)+1;
$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
	echo "<div class='pagination'>";
	echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
	echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";		
	for ($i=1; $i <= $pages; $i++){
	if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
	echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>"; 
	}
	}
	echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";
	echo ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";
	echo "</div>\n";
	}
}
 
在sytle.css下面添加
/** 翻页 **/
.navigation {	float:right;	width:700px;	margin: 5px 0 5px 0;	text-align:right;	}
.navigation_b {	float:right;	width:700px;	text-align:right;	}
.pagination {	line-height:25px;	}
.pagination span, .pagination a {	font-size:12px;	margin: 2px 6px 2px 0;	background:#fff;	border:1px solid #ccc;	color:#787878;	padding:2px 5px 2px 5px;	}
.pagination a:hover {	background: #0196E3;	border:1px solid #fff;	color:#fff;	}
.pagination .current {	background: #0196E3;	color:#fff;	font-size:12px;	padding:2px 5px 2px 5px;	}
 
使用方法:
<?php pagination($query_string); ?>
 
 
标题调用:
<?php wp_title('');?>
 
面包屑导航调用:
<?php wheatv_breadcrumbs(); ?>
 
在functions.php中添加:
function wheatv_breadcrumbs() {
  $delimiter = ' > ';
  $name = '首页'; //
 
  if ( !is_home() ||!is_front_page() || is_paged() ) {
 
    global $post;
    $home = get_bloginfo('url');
    echo '<a href="' . $home . '"  class="gray">' . $name . '</a> ' . $delimiter . ' ';
 
    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo single_cat_title();
 
    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '"  class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '"  class="gray">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo get_the_time('d');
 
    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '"  class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo get_the_time('F');
 
    } elseif ( is_year() ) {
      echo get_the_time('Y');
 
    } elseif ( is_single() ) {
      $cat = get_the_category(); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo "正文";
 
    } elseif ( is_page()||!$post->post_parent ) {
      the_title();
 
    } elseif ( is_page()||$post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '<a href="http://www.quanbaike.com/site/wp-admin/ . get_permalink($page->ID) . "  class="gray">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      the_title();
 
    } elseif ( is_search() ) {
      echo get_search_query();
 
    } elseif ( is_tag() ) {
      echo single_tag_title();
 
    } elseif ( is_author() ) {
       global $author;
      $userdata = get_userdata($author);
      echo '由'.$userdata->display_name.'发表';
 
    } elseif ( is_404() ) {
      echo '404 错误';
    }
 
    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo '第' . ' ' . get_query_var('paged').' 页';
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }
  }else{
    echo $name;
  }
}
 
 
八、制作内容页面single.php,添加摘要,上下一篇功能,添加相关文章和评论
文章标题:
<?php the_title_attribute(); ?>
 
作者:<?php the_author_posts_link(); ?>;
发布日期:<?php the_date_xml(); ?>;
(用到插件wp-postviews)查看次数:<?php the_views();?>
 
摘要代码:
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>
 
内容代码:
<?php the_content("Read More..."); ?>
 
 
循环代码:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
 
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
 
【上一篇】: <?php previous_post_link('%link'); ?>
【下一篇】: <?php next_post_link('%link'); ?>
 
相关文章:
<?php
$cats = wp_get_post_categories($post->ID);
if ($cats) {
 
$cat = get_category( $cats[0] );
$first_cat = $cat->cat_ID;
$args = array(
        'category__in' => array($first_cat),
        'post__not_in' => array($post->ID),
        'showposts' => 5,
        'caller_get_posts' => 1
    );
query_posts($args);
 
if (have_posts()) :
    while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li>* <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else : ?>
<li>* 暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
 
 
评论调用:
	<?php comments_template(); ?>
 
九、制作内容页面sidebar
 
热门排行:
<?php
$post_num = 9; // 设置调用条数
$args = array(
      'post_password' => '',
          'post_status' => 'publish', // 只选公开的文章.
          'post__not_in' => array($post->ID),//排除当前文章
          'caller_get_posts' => 1, // 排除置頂文章.
          'orderby' => 'comment_count', // 依評論數排序.
          'posts_per_page' => $post_num
);
        $query_posts = new WP_Query();
        $query_posts->query($args);
        while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a><br/>
<?php } wp_reset_query();?>
 
随机推荐:
<?php $rand_posts = get_posts('numberposts=9&orderby=rand');foreach($rand_posts as $post) : ?> 
   <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
<?php endforeach;?>
 
最新文章:
<?php $rand_posts = get_posts('numberposts=9&orderby=date');foreach($rand_posts as $post) : ?> 
   <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
<?php endforeach;?>
 
 
十、添加搜索框功能search.php和文章浏览量功能
 
添加search.php
导航标题:
<?php wp_title('');?><?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<span class="search-terms">');  _e('</span>'); _e(' — '); echo $count . ' '; _e('条相关结果'); wp_reset_query(); ?>
 
 
在header.php中添加搜索代码:
<form id="search" action="<?php bloginfo('url'); ?>/" target="_blank">
  
 <input id="s" name="s"  maxlength="30" style="vertical-align: middle; margin-bottom:12px;" type="text" value="<?php the_search_query(); ?>"/>
    <input type="image" width="60" height="22" class="searchaction" onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search" src="<?php bloginfo('template_directory'); ?>/img/sbtn.gif" border="0" />
</form>
 
 
  	<div class="sform fl"></div>
Premium WordPress Themes Download
Free Download WordPress Themes
Download Best WordPress Themes Free Download
Premium WordPress Themes Download
lynda course free download
download karbonn firmware
Premium WordPress Themes Download
download udemy paid course for free

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 分享wordpress主题模板开发常用的标签与使用说明

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址