WordPress主题模板制作代码条用大全WP博客模版制作代码

WordPress仿站教程 阿山SEO建站wp百科网主题模板制作教程

WP 百科网主题模板制作教程 . .......

1、wordpress 模板结构分析 . ............

2、制作一个可以运行的 wordpress 主题©修改 style.css . ...........

3、制作出主题结构©index.php©header.php©footer.php©sidebar.php . ..........

4、修改 header.php©footer.php . .............

5、制作 sidebar.php . .............

6、制作 index.php© . .............

7、制作 single.php 页面©加入评论 . ..............

8、制作 page.php©archive.php©404.php. ...........

9、制作小工具 . ................

10、细节问题处理 . .............

1、wordpress 模板结构分析
索引页模版ªindex.php
顶部ªheader.php
文章页面模板ªsingle.php
边栏模板ªsidebar.php
底部ªfooter.php
页面模版ªpage.php
搜索结果ªsearch.php
文章归档ªarchive.php
评论ªcomments.php
404 页面模版ª404.php
主题支持函数ªfunctions.php 样式表ªstyle.css
2、制作一个可以运行的 wordpress 主题©修改 style.css
制作一个最简单的主题©只需要两个文件©index.php 和 style.css
第一步©准备静态页面
第二步©制作 index.php 和 style.css
第三步©给 style.css 添加版权信息
第四步ª把主题上传到空间中 wordpress 安装路径©wp-content/themes/下面©这里主题的文 件夹名字必须是英文
第五步©在 wordpress 后台启用主题

先给 style.css 添加版权信息
/* Theme Name: wordpress theme 01
Theme URI: http://www.wpbaike.com
Description: a simple bolg theme
Author: xixi
Author URI: http://www.wpbaike.com Version: 1.0
Tags: white, blog, liweihui, blue
*/

Style.css 路径调用ª<?php bloginfo( 'stylesheet_url' ); ?>
主题缩略图名字ªscreenshot.png

3、制作出主题结构©index.php©header.php©footer.php©sidebar.php

把 index.php 拆分成 header.php©footer.php 和 sidebar.phhp
<?php get_header();?>
<?php get_footer();?>
<?php get_sidebar();?>

4、修改 header.php©footer.php

新建一个 index.php 文件©header.php©footer.php©
这步需要用到的标签ª
获取博客名字ª<?php bloginfo('name'); ?>
获取博客描述ª<?php bloginfo('description'); ?>
获取主页路径ª<?php echo get_option('home'); ?>
获取主题存放路径ª<?php bloginfo('template_directory'); ?>
其他外部文件调用方法ª<?php include (TEMPLATEPATH . '/ad/ad2.htm'); ?>
<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 wp_list_pages('sort_column=menu_order&title_li=&depth=2&include='); ?> 分类目录调用:
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=2'); ?>

5、制作 sidebar.php

最新文章ª<?php wp_get_archives('type=postbypost&limit=20'); ?>
日志标题太长超出©修改 style.css©用到的代码ª
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
随机文章ª
<?php $rand_posts = get_posts('numberposts=10&orderby=rand');foreach($rand_posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach;?>
标签云ª
<?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'); ?>

6、制作 index.php©

<?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 the_content("Read More..."); ?> 调用文章内容摘要ª
<?php the_excerpt("Read More..."); ?>

作者ª<?php the_author_posts_link(); ?>
日期ª<?php the_time('F d, Y') ?>
评论调用ª<?php comments_number('No Comment', '1 Comment', '% Comments' );?> 文章所属分类ª标签ª<?php the_category(', ') ?>
上一页©下一页调用ª
<div style="float:left"><?php previous_post_link('&laquo; %link'); ?></div>
<div style="float:right"><?php next_post_link('%link &raquo;'); ?></div>

7、制作 single.php 页面©加入评论

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

8、制作 page.php©archive.php©404.php

Page.php 和 single.php 一样 archive.php 和 index.php 一样

9、制作小工具

添加 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; ?>

10、细节问题处理

分页的函数ª加到 functions.php 中
//pagenav
function pagenav($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 = 4; // only edit this if you want to show more page-links $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";
}
}

分页的 CSS 样式«

/*分页的样式 */
.pagination{ margin:0 10px 10px 15px;line-height:23px;text-align:center;}
.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;text-decoration:none;}
.pagination a:hover{background: #8cb900;border:1px solid #436206;color:#fff;font-size:12px;padding:2px 5px 2px 5px;}
.pagination .current{background: #8cb900;border:1px solid #436206;color:#fff;font-size:12px;padding:2px 5px 2px 5px;}

分页的调用ª
<?php pagenav($query_string); ?>

分类目录不按<li>标签显示

<?php
$args=array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($args);
foreach($categories as $category) {
echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a>';
}
?>

以下是深圳阿山SEO仿站过程中用到的代码感觉不错 就分享给大家

<?php echo  get_template_directory_uri(); ?>

例如

<script src="http://x15999.com/wp-content/themes/qiy/js/jquery.js"></script>

就是使用的的

<script src="<?php echo  get_template_directory_uri(); ?>/js/jquery.js"></script>

使用这个调用路径的代码也不错喔

发表评论

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