Wordpress主题制作基础教程
2017-11-15 11:48
351 查看
首先你要去官网下载并安装好wordpress,官方网站:https://cn.wordpress.org/
然后你要制作好你的网站所有页面的静态页
都做好后,就可以开始制作主题了
这个css文件起到的作用就是在后台的主题菜单里面显示你的主题名字
2、做一张300x225尺寸的PNG图片当作你的主题缩略图,名字叫 screenshot.png
3、把你做好的静态页以及相关资源文件都放到主题文件夹内复制到 wp-content\themes\ 目录内
4、把 index.html 改名为 index.php ,然后修改头部的css等文件链接地址,比如改为:
这里面:
2、把 index.php 页面里面需要调用头部或尾部的地方用php代码获取:
3、修改header.php头部的一些代码,改为动态获取,比如:
↑ 把title改为调用后台配置的文字,还有 bloginfo(‘description’); 网站描述
↑判断当前显示的页面是否为首页 “is_home()”如果是首页就显示 index.css ,如果不是就显示 page.css
列出几个常用的判断:
is_home():当前页面为主页时返回true
is_category():当前页面为分类页时返回true
is_single():当前页面为单文章页时返回true
is_page():当前页面为单页面时返回true,多个页面判断方法: “is_page(array(‘help’,’help-zjsla’,’help-ypsla’))”
4、制作默认的文章分类页模板“category.php”
把你已经做好的分类页的html模板重命名为 category.php ,引入头部和尾部,如果有侧边栏,同样也可以引入,这样文章分类页基本就做好了,例如:
()括号里面可以写一些参数,比如你有多个header就可以写get_header(1)、get_header(a),对应的php文件就是 header-1.php,header-a.php,其他同理。
如果你有多个分类,可以在 category.php 后边加上 - 分隔符,例如:category-activities.php
接下来是显示指定分类目录下的文章,并显示文章缩略图,这个缩略图功能要首先在 functions.php 页面里增加一段代码后才能调用,后边有单独介绍。
① 显示指定分类下的文章列表,搭配缩略图
如果你想显示日期,可以使用 “get_the_date()”函数。
5、制作默认的文章内容显示页模板 “single.php”
① 把你已经做好的文章内容页的html模板重命名为 single.php ,并替换里面的头部和尾部模板。
② 在文章标题处填写动态获取代码:
③ 在发表时间处填写动态获取代码:
④ 在文章内容处,必须先写上主循环代码,然后才能加入文章内容获取代码,例如:
the_post() 函数被调用之后,我们就可以使用许多模板函数和全局变量,以下是获取文章的一些属性方法:
the_author:获取作者的名字。
the_title:显示当前日志的标题。
the_content:显示日志的内容。
the_permalink:显示日志的永久链接的 URL。
the_ID:显示日志的 ID。
6、制作文章页的侧边栏 “sidebar.php”
① 把你已经做好的文章内容页侧边栏div代码抠出来,新建一个php文件命名为 sidebar.php,把抠出来的代码粘贴进去。
② 修改循环列表处的代码如下:
如果你想显示日期,可以使用 “get_the_date()”函数。
7、新建一个函数库文件 “functions.php”
里面写一些必要的函数,比如你想给发布的文章搭配一个缩略图,就需要在functions.php里面增加一段代码:
这样你发布文章的时候就可以添加缩略图了
如果你希望能自定义文章的链接地址到指定的网址,可以添加一个插件,叫:Page Links To 官网地址:https://wordpress.org/plugins/page-links-to/
然后你要制作好你的网站所有页面的静态页
都做好后,就可以开始制作主题了
第一步:建立你的主题标记
1、新建一个style.css,放在你的主题包根目录下,内容如下:/* Theme Name: 你的主题名称,随便起 Theme URI: 你的官方网站网址 Description: 你的主题描述文字 Version: 版本号 Author: 作者的名称 Author URI: 作者的网站网址 Tags: 随便起个标签名字 */
这个css文件起到的作用就是在后台的主题菜单里面显示你的主题名字
2、做一张300x225尺寸的PNG图片当作你的主题缩略图,名字叫 screenshot.png
3、把你做好的静态页以及相关资源文件都放到主题文件夹内复制到 wp-content\themes\ 目录内
4、把 index.html 改名为 index.php ,然后修改头部的css等文件链接地址,比如改为:
<link href="<?php bloginfo('template_url'); ?>/css/index.css" rel="stylesheet" type="text/css">
这里面:
<? php bloginfo('template_url'); ?>就是读取模板所在目录的URL地址,再加上你后边写的css文件的存放目录,就能正确显示你的css文件了
第二步:制作常用的主题模板文件
1、把 index.html 里面共用的头部和尾部抠出来,分别存为 header.php 和 footer.php,注意修改里面的资源链接地址,改为动态获取的当前模板路径:<?php bloginfo('template_url'); ?>
2、把 index.php 页面里面需要调用头部或尾部的地方用php代码获取:
<?php get_header(); ?> <?php get_footer(); ?>
3、修改header.php头部的一些代码,改为动态获取,比如:
<title><?php bloginfo('name'); ?></title>
↑ 把title改为调用后台配置的文字,还有 bloginfo(‘description’); 网站描述
<link href="<?php bloginfo('template_url'); if (is_home()) {echo '/css/index.css';} else {echo '/css/page.css';} ?>" rel="stylesheet" type="text/css">
↑判断当前显示的页面是否为首页 “is_home()”如果是首页就显示 index.css ,如果不是就显示 page.css
列出几个常用的判断:
is_home():当前页面为主页时返回true
is_category():当前页面为分类页时返回true
is_single():当前页面为单文章页时返回true
is_page():当前页面为单页面时返回true,多个页面判断方法: “is_page(array(‘help’,’help-zjsla’,’help-ypsla’))”
4、制作默认的文章分类页模板“category.php”
把你已经做好的分类页的html模板重命名为 category.php ,引入头部和尾部,如果有侧边栏,同样也可以引入,这样文章分类页基本就做好了,例如:
<?php get_header(); ?> <?php get_footer(); ?>
<?php get_sidebar(); ?>
()括号里面可以写一些参数,比如你有多个header就可以写get_header(1)、get_header(a),对应的php文件就是 header-1.php,header-a.php,其他同理。
如果你有多个分类,可以在 category.php 后边加上 - 分隔符,例如:category-activities.php
接下来是显示指定分类目录下的文章,并显示文章缩略图,这个缩略图功能要首先在 functions.php 页面里增加一段代码后才能调用,后边有单独介绍。
① 显示指定分类下的文章列表,搭配缩略图
<!--开启主循环查询--> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); //主循环 ?> <li> <!--调用缩略图开始--> <?php if ( has_post_thumbnail() ) : ?> <?php the_post_thumbnail(); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/xxxxxx.jpg" width="370" height="171" alt=""> <?php endif; ?> <!--调用缩略图结束--> <h4 class="am-text-center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> </li> <?php endwhile; endif; ?> <!--关闭主循环查询-->
如果你想显示日期,可以使用 “get_the_date()”函数。
5、制作默认的文章内容显示页模板 “single.php”
① 把你已经做好的文章内容页的html模板重命名为 single.php ,并替换里面的头部和尾部模板。
② 在文章标题处填写动态获取代码:
<?php the_title(); ?>
③ 在发表时间处填写动态获取代码:
<?php the_time('Y年-n月-j日') ?>
④ 在文章内容处,必须先写上主循环代码,然后才能加入文章内容获取代码,例如:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; endif; ?>
the_post() 函数被调用之后,我们就可以使用许多模板函数和全局变量,以下是获取文章的一些属性方法:
the_author:获取作者的名字。
the_title:显示当前日志的标题。
the_content:显示日志的内容。
the_permalink:显示日志的永久链接的 URL。
the_ID:显示日志的 ID。
6、制作文章页的侧边栏 “sidebar.php”
① 把你已经做好的文章内容页侧边栏div代码抠出来,新建一个php文件命名为 sidebar.php,把抠出来的代码粘贴进去。
② 修改循环列表处的代码如下:
<ul class="aside-list-news"> <!--文章主循环查询开始--> <?php query_posts('showposts=3&cat=1'); //showposts显示数量,cat指定分类目录 if(have_posts()) : while (have_posts()) : the_post(); //主循环 ?> <li> <figure> <!--缩略图查询开始--> <?php if ( has_post_thumbnail() ) : ?> <?php the_post_thumbnail(); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/xxxxxxx.jpg" width="370" height="171" alt=""> <?php endif; ?> <!--缩略图查询结束--> <figcaption><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></figcaption> </figure> </li> <?php endwhile; endif; ?> <!--文章主循环查询结束--> </ul>
如果你想显示日期,可以使用 “get_the_date()”函数。
7、新建一个函数库文件 “functions.php”
里面写一些必要的函数,比如你想给发布的文章搭配一个缩略图,就需要在functions.php里面增加一段代码:
<?php add_theme_support( 'post-thumbnails' ); ?>
这样你发布文章的时候就可以添加缩略图了
如果你希望能自定义文章的链接地址到指定的网址,可以添加一个插件,叫:Page Links To 官网地址:https://wordpress.org/plugins/page-links-to/
相关文章推荐
- <CSS基础>导航栏制作教程
- (转)jquery傻瓜基础教程之教你如何制作jquery插架一
- NSIS安装制作基础教程
- 基础动画-动态遮罩教程-Flash-网页制作
- jquery傻瓜基础教程之教你如何制作简单的dialog插件
- Axure RP 8基础教程-制作下拉菜单
- (转)jquery傻瓜基础教程之教你如何制作简单的dialog插件
- 基础动画-动态遮罩教程-Flash-网页制作
- 免费全景摄影制作教程 - 摄影基础知识
- 零基础HTML5游戏制作教程 第4章 移动的控制
- WordPress主题制作全过程(一):基础准备
- WordPress主题制作教程9:文章形式
- 【Unity3D基础教程】给初学者看的Unity教程(三):通过制作Flappy Bird了解Native 2D中的Sprite,Animation
- DIV+CSS基础教程:导航条的制作详解
- 【网站制作视频教程】-第12讲 html表单应用基础!-传智播客
- NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者
- 【N多原创】十分钟变身ROM达人~AnThing ROM制作与修改系列教程第一弹[基础与签名篇]
- Unity3d基础教程7-灯光(灯光阴影参数设置及lightmapping制作)
- Blaze 3D Studio基础教程之制作流程详解
- 基础的WordPress插件制作教程