• 因为前段时间频繁更换了几个网站程序,导致网站被降权,现在还在考察恢复期,所以网站更新并不多,等网站恢复后会大量更新。

  • 原易无休资源网的站长不做了,我买来继续为大家更新,希望大家多多支持。 :smile:

  • 因为近期工作调整,比较忙,网站会暂停更新,预计半个月吧~~~

  • 以后所有商业资源,特别是源码类资源都会附上视频教程!!!

  • 出差啦,,回来再更新!!!

  • 这几天比较忙,更新不稳定,预计15号左右恢复!!

  • 主题更新了,感谢云落大神!

  • 又从HTTPS滚回来了 :evil: :evil: 太耗资源了,没有装X的资本呀,以后豪了再说!!

  • 配置了SSL,加上小绿锁,逼格瞬间高了不少。

  • 网站被百度网址安全中心标注“风险”提示:该页面可能存在虚假信息!!怀疑跟昨天发的电影资源关~~~申诉中!!!

wordpress WP主题模板开发制作文档

技术教程 admin 2年前 (2017-07-08) 1327次浏览 0个评论
最近在学习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: WP易无休CMS主题   
Theme URI: http://www.ewuxiu.com 
Description: 蓝色大气的CMS主题
Author: ewuxiu 
Author URI: http://www.ewuxiu.com 
Version: 1.0 
Tags: red, cms, wpewuxiu
*/

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="../wzjc/519.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank">4种不适合做网络兼职赚钱的人分析</a> <br />
<a href="../wzzt/520.htm" title="网络兼职赚钱,思路决定出路" target="_blank">网络兼职赚钱,思路决定出路</a> <br />
<a href="../wszq/518.htm" title="豆豆对话利为汇陈辉民:seo现状和前景分析" target="_blank">豆豆对话利为汇陈辉民:seo现状和…</a> <br />
<a href="../wzjc/517.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank">4种不适合做网络兼职赚钱的人分析</a> <br />
<a href="../wzjc/516.htm" title="网络兼职赚钱,从青蛙比赛中发现秘密" target="_blank">网络兼职赚钱,从青蛙比赛中发现秘密</a> <br />
<a href="../wzjc/515.htm" title="懂懂谈对于互联网创业的看法30条(7)" target="_blank">懂懂谈对于互联网创业的看法30条(…</a> <br />
<a href="../wzjc/514.htm" title="懂懂谈对于互联网创业的看法30条(6)" target="_blank">懂懂谈对于互联网创业的看法30条(…</a> <br />
<a href="513.htm" title="懂懂和陈辉民的第一次亲密接触" target="_blank">懂懂和陈辉民的第一次亲密接触</a> <br />
<a href="../wzjc/512.htm" title="懂懂谈对于互联网创业的看法30条(5)" target="_blank">懂懂谈对于互联网创业的看法30条(…</a> <br />
<a href="../wzjc/511.htm" title="懂懂谈对于互联网创业的看法30条(4)" target="_blank">懂懂谈对于互联网创业的看法30条(…</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.ewuxiui.com" target="_blank">seo</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.wheatv.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>

易无休资源网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:wordpress WP主题模板开发制作文档
喜欢 (5)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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