wordpress企业主题制作视频教程

  • A+
所属分类:wordpress

1、企业静态页面制作成wordpress主题

企业主题和博客主题的区别

1、首页显示内容不一样

2、产品为主,图片丰富,更加的细分

3、在制作上和博客主题的区别,category.php

 

制作一个最简单的主题,只需要两个文件,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://wordpress.liweihui.com/

Description: a company theme

Author: xixi

Author URI: http://wordpress.liweihui.com/

Version: 1.0

Tags: white, company, liweihui, blue,products,news

*/

 

Style.css路径调用:<?php bloginfo( 'stylesheet_url' ); ?>

主题所在路径调用:<?php bloginfo('stylesheet_directory'); ?>

 

第六步,把index.php拆分成header.php,footer.php和sidebar.phhp

需要用到的调用标签:

<?php get_header();?>

<?php get_footer();?>

<?php get_sidebar();?>

 

 

2、制作header.php,footer.php和sidebar

1、Header.php和footer.php用到代码:

<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>

 

Footer.php版权信息:

© Copyright (c) 2011 <a href="http://www.duanshaolin.com/wp-content/themes/begin/inc/go.php?url=http://wordpress.liweihui.com/" target="_parent">利为汇wordpress教程网</a> | Powered by 利为汇<a href="http://wordpress.liweihui.com">wordpress教程网</a>

 

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

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

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

页面调用:

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

 

2、sidebar.php用到代码:

 

产品分类调用代码:修改child_of=

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=1&hide_empty=0&child_of=10'); ?>

 

新闻分类代码调用:修改child_of=

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=1&hide_empty=0&child_of=10'); ?>

 

部分页面导航调用:修改include=中的id为你想要显示的id

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

 

3、首页图片调用和文章列表显示和友情链接

这里需要用到缩略图插件wp-thumbnails

 

1、首页图片展示代码:

源代码   
  1. <?php if (have_posts()) : ?>
  2.  
  3. <?php query_posts('cat=3' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
  4.  
  5. <?php while (have_posts()) : the_post(); ?>
  6.  
  7.  
  8.  
  9.  
  10. <li>
  11.  
  12. <?php if(function_exists('wp_thumbnails_for_homepage')) { wp_thumbnails_for_homepage(); } ?>
  13.  
  14. <br /><p><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></p>
  15.  
  16. </li>
  17.  
  18.  
  19.  
  20.  
  21. <?php endwhile;?>
  22.  
  23. <?php else : ?>
  24.  
  25. <?php endif; ?>

2、调用一个类别下面的文章:

源代码   
  1. <?php if (have_posts()) : ?>
  2.  
  3. <?php query_posts('cat=1&showposts=20'); ?>
  4.  
  5.  
  6.  
  7.  
  8. <?php while (have_posts()) : the_post(); ?>
  9.  
  10. <ul>
  11.  
  12.  
  13.  
  14.  
  15. <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
  16.  
  17.  
  18.  
  19.  
  20. </ul>
  21.  
  22. <?php endwhile; ?>
  23.  
  24. <?php else : ?>
  25.  
  26. <?php endif; ?>

首页友情链接:

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

 

 

4、新闻列表页面的制作和分页

新建页面category-*.php,*号为wordpress后台建立的相应的分类id号

1、显示列表:

源代码   
  1. <?php if ($posts_perpage) { ?>
  2.  
  3.                                           <?php $postsperpage = $posts_perpage; ?>
  4.  
  5.                    <?php } else { ?>
  6.  
  7.                        <?php $postsperpage = 10; ?>
  8.  
  9.                    <?php } ?>
  10.  
  11.  
  12.  
  13.  
  14.                <?php
  15.  
  16.                                           $categoryID=$cat;
  17.  
  18.                                           $wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.               <?php while (have_posts()) : the_post(); ?>
  30.  
  31.               <ul>
  32.  
  33.  
  34.  
  35.  
  36.                             <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>
  37.  
  38.  
  39.  
  40.  
  41.            </ul>
  42.  
  43.            <?php endwhile; ?>

2、显示分页

调用方式:    <?php pagenav($query_string); ?>

 

在functions.php中添加:

源代码   
  1. //pagenav
  2.  
  3. function pagenav($query_string){
  4.  
  5. global $posts_per_page, $paged;
  6.  
  7. $my_query = new WP_Query($query_string ."&posts_per_page=-1");
  8.  
  9. $total_posts = $my_query->post_count;
  10.  
  11. if(empty($paged))$paged = 1;
  12.  
  13. $prev = $paged - 1;
  14.  
  15. $next = $paged + 1;
  16.  
  17. $range = 4; // only edit this if you want to show more page-links
  18.  
  19. $showitems = ($range * 2)+1;
  20.  
  21.  
  22.  
  23.  
  24. $pages = ceil($total_posts/$posts_per_page);
  25.  
  26. if(1 != $pages){
  27.  
  28. echo "<div class='pagination'>";
  29.  
  30. echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
  31.  
  32. echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";
  33.  
  34.  
  35.  
  36.  
  37. for ($i=1; $i <= $pages; $i++){
  38.  
  39. if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
  40.  
  41. echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
  42.  
  43. }
  44.  
  45. }
  46.  
  47.  
  48.  
  49.  
  50. echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";
  51.  
  52. echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";
  53.  
  54. echo "</div>\n";
  55.  
  56. }
  57.  
  58. }

在sytle.css下面添加

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

 

5、产品展示页面的制作和分页

新建页面category-*.php,*号为wordpress后台建立的相应的分类id号

 

图片调用:

<?php if ($posts_perpage) { ?>

<?php $postsperpage = $posts_perpage; ?>

<?php } else { ?>

<?php $postsperpage = 9; ?>

<?php } ?>

 

<?php

$categoryID=$cat;

$wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>

<ul>

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

<li>

<?php if(function_exists('wp_thumbnails_for_homepage')) { wp_thumbnails_for_homepage(); } ?>

<br /><p><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></p>

</li>

<?php endwhile;?>

</ul>

 

 

6、制作详细内容页面single.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_time('F d, Y') ?>

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

标签:<?php the_category(', ') ?>

内容:<?php the_content("Read More..."); ?>

 

文章导航,上一篇,下一篇

<div style="float:left"><?php previous_post_link('&laquo; %link'); ?></div>

<div style="float:right"><?php next_post_link('%link &raquo;'); ?></div>

 

7、制作独立页面page.php

复制single.php,删除文章导航,上一篇,下一篇代码。

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

发表评论

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