当前位置: 首页 >wordpress

wordpress主题模板制作教程

wordpress 2014-6-30 阅读量: 593 TAG: 标签:, ,

一:

准备:先给style.css添加版权信息

/*

Theme Name: wordpress theme 01

Theme URI: http://blog.860914.com

Description: a simple bolg theme

Author: banglin

Author URI: http://blog.860914.com

Version: 1.0

Tags: white, blog, liweihui, blue

*/

新建模板函数 (functions.php)

 

二:

(1)首页index.php(一般一个页面)

把首页拆分成header.php,footer.php和sidebar.phhp

头部  <?php get_header();?>

获取博客名字:<?php bloginfo(‘name’); ?>

获取博客描述:<?php bloginfo(‘description’); ?>

获取主页路径:<?php echo get_option(‘home’); ?>

获取主题存放路径:<?php bloginfo(‘template_directory’); ?>

<meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo( ‘charset’ ); ?>” />

<?php wp_head(); ?>

<title><?php if (is_home()||is_search()) { bloginfo(‘name’); } else { wp_title(”); print ” – “; bloginfo(‘name’); } ?> </title>

边栏 <?php get_sidebar();?>

随机文章:

<?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();?>

标签云:

<?php wp_tag_cloud(‘smallest=8&largest=36&’); ?>

文章日期归档:

<?php wp_get_archives( ‘type=monthly’ ); ?>

分类目录:

<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>

友情链接:

<?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=24’); ?>

 

页面调用:

<?php wp_list_pages(‘sort_column=menu_order&title_li=&depth=2&include=’); ?>

小工具

添加functions.php,

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => ‘<div class=”sidebox”>’,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<h2>’,

‘after_title’ => ‘</h2>’,

));

?>

在sidebar.php中模块最上面插入:

<?php if ( !function_exists(‘dynamic_sidebar’)

|| !dynamic_sidebar() ) : ?>

Sidebar最下面,添加<?php endif; ?>

首页内容

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

标题: <a href=”<?php the_permalink() ?>”><?php the_title_attribute(); ?></a>

图片:<?php echo catch_that_image() ?>

用代码实现wordpress抓取文章第一张图片为缩略图函数,在functions.php中添加如下代码:

function catch_that_image() {

global $post, $posts;

$first_img = ”;

ob_start();

ob_end_clean();

$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$random=rand(0,29);

$first_img = “/wp-content/images/default-images.jpeg”;

//$first_img = “/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/”.$random.”.jpg”;

}

return $first_img;}

调用函数

在要显示缩略图的地方调用如下代码

调用1. <?php echo catch_that_image() ?>

调用2.

<img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” title=”<?php the_title(); ?>” width=”227px” height=”200px” /></a>

调用3.

<div id=”containernew”>

<div id=”photonew”>   <IMG alt=”<?php the_title(); ?>” src=”<?php echo catch_that_image() ?>”></div> <div id=”contentnew”><?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 200,”…”); ?></div> </div>

这样就可轻松实现自动抓取图片了。

CSS

将css代码加入style.css文件中
#containernew {width: 100%;}
#photonew {float: left; width: 40%;}
#contentnew {float: right; width: 60%;}

调用文章内容:

<?php echo excerptcontent(400); ?>

阅读全文: <a href=”<?php the_permalink() ?>”>阅读全文»</a>

作者:<?php the_author_posts_link(); ?>

日期:<?php the_time(‘F d, Y’) ?>

<?php the_time(‘m-d’) ?>

<?php the_date_xml()?>

评论调用:<?php comments_number(‘No Comment’, ‘1 Comment’, ‘% Comments’ );?>

阅读次数:

文章所属分类:<?php the_category(‘, ‘) ?>标签:<?php the_tags(‘,’); ?>

④分页代码

1.将下面的代码放到 functions.php 最后一个 ?> 的前面

function par_pagenavi($range = 9){

global $paged, $wp_query;

if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}

if($max_page > 1){if(!$paged){$paged = 1;}

if($paged != 1){echo “<a href='” . get_pagenum_link(1) . “‘ class=’extend’ title=’跳转到首页’> 返回首页 </a>”;}

previous_posts_link(‘ 上一页 ‘);

if($max_page > $range){

if($paged < $range){for($i = 1; $i <= ($range + 1); $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;

if($i==$paged)echo ” class=’current'”;echo “>$i</a>”;}}

elseif($paged >= ($max_page – ceil(($range/2)))){

for($i = $max_page – $range; $i <= $max_page; $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;

if($i==$paged)echo ” class=’current'”;echo “>$i</a>”;}}

elseif($paged >= $range && $paged < ($max_page – ceil(($range/2)))){

for($i = ($paged – ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;if($i==$paged) echo ” class=’current'”;echo “>$i</a>”;}}}

else{for($i = 1; $i <= $max_page; $i++){echo “<a href='” . get_pagenum_link($i) .”‘”;

if($i==$paged)echo ” class=’current'”;echo “>$i</a>”;}}

next_posts_link(‘ 下一页 ‘);

if($paged != $max_page){echo “<a href='” . get_pagenum_link($max_page) . “‘ class=’extend’ title=’跳转到最后一页’> 最后一页 </a>”;}}

}

  1. 添加下面的css样式到你的 style.css中

.page_navi{overflow:hidden;width:100%;text-align:center}

.page_navi a{height:36px;border:1px solid #DDD;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;color:#888;text-decoration:none;line-height:36px;margin:2px;padding:3px 8px}

.page_navi a:hover,.page_navi a.current{border:1px solid #FFBB76;color:#FF7200;font-weight:bolder}

  1. 在需要显示的地方(比如主题的 index.php、archive.php、category.php、search.php)中添加下面的调用代码即可

<div class=”page_navi”><?php par_pagenavi(9); ?></div>

⑤底部<?php get_footer();?>

版权

统计代码

(2)单页Page(单页面也可以作为封面,可以有多个命名:默认page.php其他page-单页面别名.php)

(3)列表category.php  (列表默认category.php,不同列表使用不同列表模板可以这样category-分类别名.php)

(4)内容Single.php(内容页模板)不同内容使用不同模板

当前位置:<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>     »

<?php

if( is_single() ){

$categorys = get_the_category();

$category = $categorys[0];

echo( get_category_parents($category->term_id,true, ‘» ‘) );

the_title();

} elseif ( is_page() ){

the_title();

} elseif ( is_category() ){

single_cat_title();

} elseif ( is_tag() ){

single_tag_title();

} elseif ( is_day() ){

the_time(‘Y年Fj日’);

} elseif ( is_month() ){

the_time(‘Y年F’);

} elseif ( is_year() ){

the_time(‘Y年’);

} elseif ( is_search() ){

echo $s.’ 的搜索结果’;

}

?>

标题:<?php the_title_attribute(); ?>

作者:<?php the_author_posts_link(); ?>

来源:<?php the_category(‘, ‘) ?>

时间: <?php the_time(‘Y年n月j日  G:h’) ?>

文章内容:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php the_content(“Read More…”); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

评论:

在single.php中调用<?php endwhile; ?>和<?php else : ?>中间让入

<?php comments_template(); ?>

 

方法一:根据模板文件名进行判断

  1. 将下面的代码添加到当前主题的 functions.php 文件:

/**

* 不同分类使用不同的文章模板

* From http://www.wpdaxue.com/custom-single-post-template.html

*/

//定义模板文件所在目录为 single 文件夹

define(SINGLE_PATH, TEMPLATEPATH . ‘/single’);

//自动选择模板的函数

function wpdaxue_single_template($single) {

global $wp_query, $post;

//通过分类别名或ID选择模板文件

foreach((array)get_the_category() as $cat) :

if(file_exists(SINGLE_PATH . ‘/single-cat-‘ . $cat->slug . ‘.php’))

return SINGLE_PATH . ‘/single-cat-‘ . $cat->slug . ‘.php’;

elseif(file_exists(SINGLE_PATH . ‘/single-cat-‘ . $cat->term_id . ‘.php’))

return SINGLE_PATH . ‘/single-cat-‘ . $cat->term_id . ‘.php’;

endforeach;

}

//通过 single_template 钩子挂载函数

add_filter(‘single_template’, ‘wpdaxue_single_template’);

  1. 在当前主题的根目录创建一个名为 single 的文件夹,然后根据不同分类创建不同的文件,命名格式为 single-cat-[分类别名或ID].php。请记得为所有分类创建自己的模板文件。

例如邦林blog”WordPress“这个分类的别名为”wordpress“,ID 为 2,那就可以命名为 single-cat-wordpress.php 或 single-cat-2.php 。这样,只要是WordPress这个分类,就会自动选择 single-cat-wordpress.php 或 single-cat-2.php 作为这个分类的文章模板。

方法二:使用 in_category() 进行判断

in_category() 函数可以通过分类别名或ID判断当前文章所属的分类,而且可以直接在循环(Loop)内部和外部使用。

如果是单个分类 ID ,比如ID 为 2 ,可以这样写: in_category(2)

如果是单个分类别名,比如别名为 themes,可以这样写in_category(‘themes’)

如果是多个ID,可以这样写in_category( array( 2,3,7) )

如果是多个别名,可以这样写 in_category( array( ‘themes’,’plugins’,’develop’) )

然后我们结合 if 语句就可以很好地实现模板的选择。比如我们可以在主题的根目录创建3个文章模板文件,分别命名为 single001.php , single002.php 和 single003.php,然后我们希望 ID 为 2 和 3 的分类使用 single001.php,ID为 7 的分类使用 single002.php ,其他分类使用 single003.php,那么,我们可以在 single.php 文件写入下面的代码:

<?php

if ( in_category(array( 2,3 )) ) {

get_template_part(‘single001’ );

} elseif ( in_category( 7 )) {

get_template_part(‘single002’ );

} else {

get_template_part(‘single003’ );

}

?>

(5)文章归档 archive.php

(6)标签模板 (tag.php)

(tags.php)

(7)搜索结果 (search.php)

(8)评论 (comments.php)

(9)把每个页面拆分成header.php,footer.php和sidebar.phhp

<?php get_header();?>

<?php get_footer();?>

<?php get_sidebar();?>

(10)完善细节完工

 

 

来源:(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!

相关信息

  • * 暂无相关文章

本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。

如有需要请加QQ: 909912499