Wordpress主题制作经验
来源:互联网 发布:恋爱循环mmd相机数据 编辑:程序博客网 时间:2024/04/29 11:16
首先你要去官网下载并安装好wordpress,官方网站:https://cn.wordpress.org/
然后你要制作好你的网站所有页面的静态页
都做好后,就可以开始制作主题了
第一步:建立你的主题标记
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
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; ?><?php 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/
- Wordpress主题制作经验
- 从零开始制作 WordPress 主题
- wordpress主题制作
- WordPress主题制作
- WordPress主题制作全过程
- wordpress主题修改/制作
- WordPress主题制作-第一个WordPress主题
- WordPress黑白哀悼主题制作
- Wordpress主题制作不完全指南
- WordPress主题制作-bloginfo()函数
- wordpress主题模板制作流程
- WordPress 主题制作常用函数
- wordpress主题制作学习记录
- 主题文件构成|WordPress主题制作全过程
- WordPress主题制作全过程(四):小试牛刀
- wordpress企业站主题制作笔记
- wordpress 主题制作之调用方法
- wordpress主题制作中的列表分页问题
- angular Meterial错误 Did you add it to @NgModule.entryComponents
- Python----__repr__用于显示给开发人员
- 10个最佳的大数据处理编程语言
- 海滩上有一堆桃子,5只猴子来分.
- ajax的一些问题
- Wordpress主题制作经验
- java.util.concurrent学习之 Executor
- 全栈工程师培训材料
- emacs启动报错:找不到init.el
- 程序员 30 岁前,该如何规划自己的职业发展?
- 二分查找(时间复杂度为O(logn))
- TI AM3552开发板(arm cortex A8) 初体验
- 2.3 Reduce任务
- Linux常用指令