wordpress单页主题制作视频教程

  • A+
所属分类:wordpress

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中

源代码   
  1. //pagenav
  2. function pagenav($query_string){
  3. global $posts_per_page, $paged;
  4. $my_query = new WP_Query($query_string ."&posts_per_page=-1");
  5. $total_posts = $my_query->post_count;
  6. if(empty($paged))$paged = 1;
  7. $prev = $paged - 1;
  8. $next = $paged + 1;
  9. $range = 4; // only edit this if you want to show more page-links
  10. $showitems = ($range * 2)+1;
  11.  
  12. $pages = ceil($total_posts/$posts_per_page);
  13. if(1 != $pages){
  14. echo "<div class='pagination'>";
  15. echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
  16. echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";
  17.  
  18. for ($i=1; $i <= $pages; $i++){
  19. if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
  20. echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
  21. }
  22. }
  23.  
  24. echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";
  25. echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";
  26. echo "</div>\n";
  27. }
  28. }

分页的CSS样式;

 

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

分页的调用:

<?php pagenav($query_string); ?>

 

 

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

源代码   
  1. <?php
  2.  
  3. $args=array(
  4.  
  5. ‘orderby’ => ‘name’,
  6.  
  7. ‘order’ => ‘ASC’
  8.  
  9. );
  10.  
  11. $categories=get_categories($args);
  12.  
  13. foreach($categories as $category) {
  14.  
  15.    echo<a href=”‘ . get_category_link( $category->term_id ) . ‘” title=”‘ . sprintf( __( “View all posts in %s” ), $category->name ) . ‘” ‘ .>. $category->name.'</a>';
  16.  
  17.    }
  18.  
  19. ?>

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

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