专注提供网络营销最落地的技巧分享

云帆WordPress模板制作教程

课程目标:制作出一个博客模板

课后作业:跟着视频,完成一个相同主题的制作。

 

课程目录:

第一课、模板结构 1

第二课、模板雏形 2

第三课、拆分制作 3

第五课、首页制作 5

第五课、其他页面 6

 

 

第一课、模板结构

第一节、模板介绍

  • php     首页模板

—-  header.php  头部

—-  sidebar.php  侧边栏

—-  footer.php   底部

2、 style.css       样式表

3、 single.php     文章内页模板

4、 page.php      页面模板

5、 archive.php    分类页面模板

6、 search.php     搜索模板

7、 404.php       错误提示模板

 

第二节、模板制作流程

  • 获取静态页面;(下载、仿制、制作等)
  • 制作不同的模板文件;(拆分、组合和调用)

 

第二课、模板雏形

第一节、素材准备

静态页面的获取方式:

下载模板:可以通过百度搜索“模板”,“div模板”,“div+css”等关键词搜索到以下网站,这些地方都是可以免费下载到漂亮的html页面的
www.865171.cn  | www.88web.org  | www.cssk8.com  | www.csscss.org  | www.mbsky.com

 

工欲善其事必先利其器!

  • 本地环境  // 参看  教程 / 网站搭建 / 本地搭建视频教程;
  • WordPress网站  //参看  网站搭建教程;
  • DW软件下载:http://www.wpbaike.net/bbs/thread-54931-1-1.html
  • .zip压缩软件 已安装可忽略

 

第二节、完成雏形

WordPress模板中至少要包含 index.php 和 style.css文件!

  • 复制静态页面中 html 并重命名为 index.php;
  • 为css 文件添加以下版权信息;

 

/*

Theme Name: WP百科网主题

Theme URI: http://www.wpbaike.net

Description:这是我们做的第一个主题哦

Author: WP百科网

Author URI: http://www.wpbaike.net

Version: 1.0

Tags: white, blog, WP百科网, blue

*/

 

  • 添加主题后台缩略图 png或screenshot.jpg;
  • 修改 php 和 style.css 文件/图片路径;

 

 

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

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

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

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

 

5、模板压缩包。

第三课、拆分制作

第一节、拆分首页

1、分离 header.php 顶部模板

通过WP标签调用回来,调用顶部标签:<?php get_header();?>

2、分离 sidebar.php 侧边栏

通过WP标签调用回来,调用侧边栏标签:<?php get_sidebar();?>

3、分离 footer.php 底部模板

通过WP标签调用回来,调用底部标签:<?php get_footer();?>

 

第二节、制作头部文件header.php

头部模板 编码格式、标题、hook信息调用:

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

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

<?php wp_head(); ?>

 

博客标题 <?php bloginfo(‘name’); ?>
博客描述 <?php bloginfo(‘description’); ?>

 

第三节、导航调用

WordPress3.0+以上全部支持菜单功能,我们直接用菜单功能制作导航:

  • 新建 php 函数文件并添加以下代码:
<?php

//自定义菜单

register_nav_menus(

array(

‘header-menu’ => __( ‘导航自定义菜单’ ),

)

);

?>

  • 导航位置添加菜单调用代码:
<?php wp_nav_menu( array( ‘theme_location’ => ‘header-menu’ ) ); ?>
  • 设置菜单。

 

菜单参数:http://codex.wordpress.org/Function_Reference/wp_nav_menu

菜单标签参数列表:

//最外层容器的标签名,默认div

‘container’ => ‘div’,

//最外层容器的class名

‘container_class’ => ‘mainNavBlock’,

//最外层容器的id名

‘container_id’ => ‘menu’,

//导航菜单ul标签的class名

‘menu_class’ => ‘mainNav’,

//导航菜单ul标签的id名

‘menu_id’ => “nav”,

//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false

‘echo’ => true,

//备用的导航菜单函数,用于没有在后台设置导航时调用

‘fallback_cb’ => ‘the_main_nav’,

//显示在导航a标签之前

‘before’ => ‘<p>’,

//显示在导航a标签之后

‘after’ => ‘</p>’,

//显示在导航链接名之前

‘link_before’ => ‘<em>’,

//显示在导航链接名之后

‘link_after’ => ‘</em>’,

//显示的菜单层数,默认0,0是显示所有层

‘depth’ => 0,

//调用一个对象定义显示导航菜单

‘walker’ => new Walker_Nav_Menu(),

//指定显示的导航名,如果没有设置,则显示第一个

‘theme_location’ => ‘primary’,

扩展知识

导航分类和页面单独调用代码:

页面调用:

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

分类目录调用:

<?php wp_list_categories(‘title_li=0&orderby=name&show_count=0’); ?>

首页调用:

<li><a href=”<?php echo get_option(‘home’); ?>”>首页</a></li>

WordPress函数标签和参数表地址:

http://codex.wordpress.org/zh-cn:%E5%87%BD%E6%95%B0%E5%8F%82%E8%80%83

 

第四节、侧边栏模板文件制作

  • 分类目录调用
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>
  • hierarchial=0– 不按照层式结构显示子分类
  • optioncount=1– 显示每个分类含有的日志数
  • sort_column=name– 把分类按字符顺序排列
  • 最新文章调用
<?php wp_get_archives(‘type=postbypost&limit=10’); ?>
  • type=postbypost:按最新文章排列
  • limit:限制文章数量最新10篇
  • 日期存档调用
<?php wp_get_archives( ‘type=monthly’ ); ?>

type=monthly按月份读取

  • 友情链接调用
<?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=24’); ?>
  • type=monthly按月份读取
  • limit:调用友链数量为24个

恢复wordpress友链管理功能方法:

  • php文件添加以下代码:
<?php add_filter( ‘pre_option_link_manager_enabled’, ‘__return_true’ ); ?>
  • 安装插件 Link Manager
  • 元数据调用
注册:<?php wp_register(‘,’); ?>
登录:<?php wp_loginout(); ?>

 

第五节、小工具调用

使用wordpress内置小工具模块,方便修改侧边栏调用项目。

  • 在php函数文件中添加以下代码:
<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

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

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

‘before_title’ => ‘<h2>’,

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

));

?>

  • 在php文件中添加以下调用代码:
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?>

3、小工具模块设置。

 

 

 

第六节、底部文件制作

  • 添加版权信息
Copyright ©2013

<a href=” <?php echo get_option(‘home’); ?>”> <?php bloginfo(’name’); ?></a>

  • hook函数
hook函数:<?php wp_footer(); ?>

3、添加站点统计代码

(1)登陆CNZZ网站:http://www.cnzz.com/

(2)注册账号;

(3)设置网站信息;

(4)添加站点统计代码。

 

第五课、首页制作

  • 循环介绍
<?php if (have_posts()) : ?>

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

<!– 需要循环输入的重复模块 –>

<?php endwhile; ?>

<?php endif; wp_reset_query(); ?>

  • if(have_posts()) – 检查博客是否有日志。
  • while(have_posts()) –当博客有日志的时候,执行下面 the_post() 这个函数。
  • the_post() – 调用具体的日志来显示。
  • endwhile; – 遵照规则 #1,这里用于关闭 while()
  • endif; – 关闭 if()

 

第二节、日志信息调用

1、调用标题

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

标题太长了怎么办?

<a href=”<?php the_permalink() ?>”><?php echo mb_strimwidth(get_the_title(), 0, 32, ‘…’); ?></a>
  • 32指标题显示32个字节(1汉字≈2字节),可调整

2、调用内容

全文调用: <?php the_content(); ?>
 

摘要调用:

 

<?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 200,”……”);

?>

  • 200指显示文章摘要字节,可调整

 

3、日志元数据调用

发布日期

 

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

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

<?php the_date_xml()?>

 

所属分类 <?php the_category(‘, ‘) ?>

 

文章标签 <?php the_tags(‘标签: ‘, ‘, ‘, ”); ?>

 

留言数 <?php comments_popup_link(‘0 条评论’, ‘1 条评论’, ‘% 条评论’, ”, ‘评论已关闭’); ?>

 

更多按钮 <a href=”<?php the_permalink() ?>”>更多内容</a>

 

发表评论 <a href=”<?php the_permalink() ?>#commentform” >发表评论</a>

 

作者 <?php the_author(); ?>

 

 

第三节、文章分页

1、网站后台 》 设置 》 阅读 设置显示数量;

2、安装 WP-PageNavi 插件;

下载地址:http://wordpress.org/plugins/wp-pagenavi/

  • 插件设置和调用代码:
<?php wp_pagenavi(); ?>

居中显示:

<div style=”text-align:center”><?php wp_pagenavi(); ?></div>

 

放置在 <?php endwhile; ?> 和 <?php endif; wp_reset_query(); ?> 中间。

 

4、搜索框的代码调用:

<form method=”get” action=”<?php bloginfo(‘url’); ?>/”>

<input type=”text” value=”<?php the_search_query(); ?>” name=”s” id=”s” />

<input type=”submit” id=”searchsubmit” value=”Search” />

</form>

 

第五课、其他页面

第一节、制作文章页面single.php

  • 添加默认评论模块
<?php comments_template(); ?>

放置在 <?php endwhile; ?> 和 <?php endif; wp_reset_query(); ?> 中间。

2、修改摘要调用为全文内容调用

3、删除更多内容调用标签

4、添加翻页代码

上一篇:<?php previous_post_link(‘« %link’); ?>

下一篇:<?php next_post_link(‘%link »’); ?>

 

第二节、制作归档和页面模板

1、分类列表页面archive.php

archive.php和index.php模板相同。

2、page.php页面模板

page.php和single.php模板相同。

特殊页面制作:

(1)复制page.php文件并重命名,如 page-liuyan.php;

(2)在page-liuyan.php文件顶部添加模板名称代码

<?php

/*

Template Name: 留言板页面

*/

?>

(3)后台添加留言板页面。

 

第三节、搜索和404页面制作

  • 搜索结果页面 php 文件制作

(1)复制 archive.php 文件并重命名为 search.php

(2)添加无结果判断语句

<?php endwhile; ?>

<?php else : ?>

您搜索的结果不存在,请重新搜索!

 

2、404页面制作

(1)重命名素材中404.html文件为 404.php;

(2)复制图片到主题图片文件夹;

(3)修改路径和网址。

未经允许不得转载:云帆工作室(王建欣)博客 » 云帆WordPress模板制作教程

分享到:

评论 抢沙发

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

云帆工作室,全部精华作品均可在线购买

云帆淘宝店了解云帆