WordPress主题模板修改教程.docx
- 文档编号:12279280
- 上传时间:2023-06-05
- 格式:DOCX
- 页数:40
- 大小:897.07KB
WordPress主题模板修改教程.docx
《WordPress主题模板修改教程.docx》由会员分享,可在线阅读,更多相关《WordPress主题模板修改教程.docx(40页珍藏版)》请在冰点文库上搜索。
WordPress主题模板修改教程
WordPress主题(模板)修改教程
(一):
准备工作
作者:
CreDSY发布:
2013-11-0811:
31分类:
网站建设阅读:
1,146次评论:
暂无
wordpress主题(模板)修改之前呢,我们需要做下准备工作,那就是需要安装一些软件,用来编辑和测试。
首先需要配备一些浏览器,比如:
火狐,谷歌,苹果(这个在国内用的比较少,国外居多,所以根据自己来选择安装),不过前两个是必须安装的,还有一个是IE浏览器,IE的话因为每个电脑只有一版本,我建议大家安装一个叫IETester(下载地址)的软件,用来测试不同IE版本下的页面是否兼容(页面是否错乱)的情况,这里需要多说一点,就是在对页面进行修改后它在每个浏览器上面显示多多少少会有所不同,最糟糕的就是在一个浏览器上面看起来很正常,而使用其他浏览器看时却乱成一片。
所以需要在多个浏览器上进行测试。
还有安装火狐浏览器后还需要安装它的一个扩展插件叫firebug这个很重要,它可以直接在页面上查看代码以及修改测试,非常方便,在后面的文章中教大家怎么使用。
其次需要用到的编辑软件,Dreamweaver(下载地址)、EditPlus、NotePad++(下载地址)等等,根据自己的编辑习惯来选择,不过我希望大家都装上,每个软件各有各的优点,在使用的时候新手的话建议先用Dreamweaver,它的功能多而且在写代码时会有提示,对你有很大的帮助。
将上面安装好后,我们需要安装wordpress的运行环境(也就是说怎样让它运行起来),因为wordpress是用php语言编写的,所以他需要搭建php环境才可以运行wordpress,本站在php环境搭建步骤流程这篇文章已经写出怎样安装php以及Mysql数据库等。
大家可以去了解下也可以看着安装下(注:
那篇文章说到是独立安装php环境的方法)。
环境搭建好后,就需要下载wordpress文件了。
我们只要去官网下载就可以了。
下面就是一些需要用到的下载地址:
火狐浏览器下载地址:
火狐扩展插件Firebug安装地址:
https:
//addons.mozilla.org/zh-CN/firefox/addon/firebug/?
src=search
当你安装好火狐浏览器后打开火狐浏览器将上面的地址打开,然后你就会看到有个按钮点击添加就可以了。
WordPress主题(模板)修改教程
(二):
本地搭建wordpress
作者:
比克发布:
2013-11-0919:
55分类:
网站建设阅读:
1,322次评论:
暂无
在昨天的时候,磊子写了WordPress主题(模板)修改教程的准备工作和php环境搭建的wamp5的安装和使用教程如果是刚刚接触wordpress没有看的希望去看下,了解下。
那么环境搭建好之后现在就开始在本地安装wordpress了。
这个教程还是比较简单的,大家一看就明白。
首先安装好wamp之后,会有一个www的文件目录,假如你是在C盘安装的,那么在C盘的根目录中会有一个wamp的文件夹,进去之后你就会看到有个www目录了,然后把下载好的wordpress文件放到这个目录下面,你可以随便给这个wordpress文件命个名字,像磊子的话由于项目文件比较多,所以是以日期来命名的。
比如今年的话,我先创建了名叫2011的文件夹,然后是每个月份的文件夹,之后在该11下放置wordpress的。
说明一点就是文件夹命名要都是字母或者数字不要出现中文文字。
避免读出文件时出现中文文字乱码而不发读取,这样做的目的主要是为了以后便于管理和归纳。
很清楚的知道自己这个月做了什么,如果大家的项目文件也比较多的话也可以采用这种方式。
然后放置好后,还需要创建数据库,运行方式呢,昨天已经有讲,直接在电脑左下角wamp绿色的图标上左键选择phpmyAdmin或者直接在地址栏中输入http:
//localhost/phpmyadmin也可以运行。
打开之后首先看到如下页面(点击放大):
然后点击数据库(横向菜单的第一个)菜单,如下图:
这时候你会看到新建数据库几个字,下面是已经创建的数据库。
如果第一次安装上去的话,默认已经有两个数据库了,这两个数据库不要管他,里面是些Mysql的配置信息的东西,我们在上面创建好数据库名称。
整理选择utf8-general-ci编码形式,选上的话主要是避免以后出现乱码情况,如果是独立安装php环境的话之前在安装Mysq的时候已经配置好后这个地方就不需要选了,最后点击创建,这样数据库就创建好了。
接下来就是运行wordpress,在地址栏里面输入http:
//localhost/XXX(这里是你的wordpress文件夹名称),运行后你会看到一个按钮
点击进去之后便是一个欢迎页面,然后在点击现在就开始的按钮。
便会看到如下配置信息:
WordPress主题(模板)修改教程(三):
主题文件结构和作用
作者:
比克发布:
2013-11-1019:
59分类:
网站建设阅读:
1,260次评论:
1
今天为大家讲解wordpress主题基本的文件以及它的每个文件的作用。
如果刚接触wordpress建议先去看下之前的教程哈,昨天说到了本地安装wordpress,安装成功后默认启动了一个主题叫twentyeleven这个主题是对新版的wordpress功能的一个展示。
今天磊子就对这个主题在做下具体的讲解。
这样大家也可以了解新版wordpress的一些功能。
安装好wordpress后,了解下它的文件结构,如下图:
大家可以清楚的看下里面有三个文件夹和一些文件。
因为我们是修改主题所以我们只需要找到主题文件放哪儿就可以了。
具体是在wp-content->themes里面,wp-admin可以看做是wordpress后台的核心文件,wp-includes可以看做是wordpress主要的核心和方法文件。
我们现在的wp-content里面,plugin就是插件放置的地方,language是语言包,之后还会有uploads你的一些附加图片什么的。
还有一个upgrade是你升级插件或wordpress系统时会自动生成的,我们主要看下themes里面的东西,默认有两个主题文件。
其中一个便是twentyeleven里面机构如下:
可以看到里面有很多的文件,假如你是制作主题的话,磊子在wordpress简单结构介绍这片文章介绍过,是不需要这么多文件的。
假如你制作单页面得话那文件就更少了,我们只需要一些基本的header.php,index.php,footer.php,style.css这四个文件你就可以做一个网站出来!
但是为了便于管理和进行修改,我们可以把index.php进行分解开来。
我们还需要添加图片需要创建images文件夹,需要加载js创建js文件夹。
这个主题呢有36个文件,5个文件夹。
我们先从文件夹说起,第一个color文件夹里面有个dark.css这个主要用于主题的皮肤所需要的颜色样式,第二个images主要就是放图片文件了,还有header头部的一些图片,inc这个文件夹可以当做是主题的扩展,一些额外的功能和设置。
我们在wordpress后台的外观那儿可以看到有个主题选项。
这里面显示的,主要是就inc里面文件所以运行的效果。
js文件夹这个就是放置一些js文件,language就是主题的语言包。
然后在下面的36个文件中,我们除了主题一般需要的文件外,比如
index.php(主体),header.php(头部),footer.php(底部),
sidebar.php(侧边栏),404.php(未找到页面内容),category.php(分类内容文件),
author.php(作者内容文件),page.php(页面内容文件),
search.php(搜索内容显示文件)和searchform.php(搜索框文件),
single.php(单页内容文件),style.css(样式文件)
functions.php(主题需要用到的方法文件),还有tag.php(标签内容文件)。
以上这些文件把wordpress每个板块显示的内容需要用到的文件都创建了出来。
这样的话便于我们进行修改而不影响其他页面的显示效果,比如你每个文章后面都加入了标签,当你点进去的时候里面内容是你不想要的效果你就直接修改tag.php文件即可。
前提是你了解文件里面那些代码都是做什么用的。
因为每个主题它的结构和写法都是不一样的,比如在tag.php文件中有个
php
get_template_part(‘content’,get_post_format());
?
>
//get_template_part是wordpress一个函数方法,字面意思就是获得引入主题里面一些模板
//文件的内容,而这个模板文件的主要部分组成名称叫content,如果大家已经打开这个主题文件就会很
//清楚的看到里面有一些content-xxx.php的文件,比如你定义了一个文件的名称叫content-1.php
//那么这个方法就可以这么写get_template_part(‘content’,1);至于这么做的原因如果以这个主题
//来说的话,就是tag.php的代码内容是和模板文件的内容是一样,完全可以共用一个模板文件。
//那get_post_format()是什么呢?
大家看下面的截图就可以明白。
这个叫形式的东东在添加或者编辑日志的时候在右侧边栏就会看到。
这样大家应该知道主题文件里的conten-xxx.php主要就是对这个形式内容分别创建的文件。
它们每个的显示效果也会不一样。
这个在wordpress之前的版本是没有的。
剩下的image.php和showcase.php还有一些css文件的东西。
大家都可以理解为主题专门定制的一些内容的文件。
image.php的话图片附件也就是wordpress后台媒体那儿添加图片时查看显示的效果,showcase.php是一个模板文件主要用在wordpress后台页面那边添加或者编辑页面时选择的模板效果。
最后还有sidebar-footer.php和sidebar-page.php这些都可以当做是主题里面的模板。
这样我们大概就对这个默认主题做了一些了解,我想大家也有所了解吧。
但是我们要做模板修改的话这个主题是不怎么适合做修改的,特别是对新手。
原因就是里面有配置文件inc这个文件,有配置文件就有调用这个文件的代码在header.php或者其他地方我们还得去找,这样是很麻烦的。
所以选择适合的主题框架进行修改,是非常重要的。
今天磊子主要就是说下结合默认主题大概对文件结构以及一些作用还有wordpress一些功能的做了下讲解,在明天磊子具体说下我们主题里面的一些常用到的函数。
第一个呢就是填写之前创建好的数据库名称,然后是你的用户名还有密码。
默认安装好wamp后用户名是root密码是没有的,所以密码不填。
然后提交,在点进行安装按钮。
就会出现让你填写站点标题,后台登录的用户名和密码,还有就是邮箱地址。
最后点击安装wordpress。
这样wordpress就安装成功了,你可以登录进去后台看看了(后台地址的话就是http:
//localhost/XXX/wp-admin),刚安装好后会有两个默认的主题。
有一个叫twentyeleven得主题,这个主题已经把新版的wordpress的大部分自带的功能都包含了。
大家可以先看下他的文件结构。
现在呢,磊子在教大家第二种安装wordpress的方法,直接修改配置修改安装。
在把wordpress文件放到www目录后,点击进去找到wp-config-sample.php这个文件。
然后把它的名字改成wp-config.php再打开。
主要是修改里面的18和21和24行
php
/**WordPress数据库的名称*/
define(‘DB_NAME’,‘database_name_here’);//填写你创建的数据库名称
/**MySQL数据库用户名*/
define(‘DB_USER’,‘username_here’);//你的数据库用户名
/**MySQL数据库密码*/
define(‘DB_PASSWORD’,‘password_here’);//你的数据库密码,没有的话不填
?
>
填好之后保存,然后在地址栏直接运行wordpress。
你会看到他直接跳到了填写网站标题和账户已经密码的地方,这样安装的话也是比较方便的,看大家自己选择了。
WordPress主题(模板)修改教程(四):
常用的wordpress主题函数和作用
作者:
比克发布:
2013-11-1110:
32分类:
网站建设阅读:
1,076次评论:
暂无
今天继续为大家讲解,上一篇磊子结合默认主题讲解了下主题(模板)文件结构和作用今儿也会结合默认主题说下wordpress主题中需要用到的函数和它的作用。
用法的话磊子会在后面章节具体用到时在具体讲下,今天只讲主题常用函数是什么。
先让大家有个了解,废话不多说进入正题。
首先我们在做网站时脑子里要有个大概,想你这个网站的整体结构。
是上,中,下型呢,还是左,中,右呢,自己得有个思路。
不过一般都是从上往下,也就是头部中间和底部,那我们先从头部开始讲起。
wordpress的header.php文件中
之间需要用到的一些函数。(建议大家不管在看什么教程的时候,先提前把需要的文件都准备好,边看边操作影响更深刻,呵呵)
1.
phplanguage_attributes();?
> 这个函数用于声明网页所使用的语言,如果你的主题是用于中文站点,而且文字方向是从左往右读那么在查看源码的时候会看到dir=”ltr”lang=”zh-CN”这么一小段。
主要放在里面。
2.
phpbloginfo(‘charset’);?
>这个函数用于声明网站的编码,这个编码可以在WordPress后台–设置–阅读,最后一个选项”页面和feed编码”那里设置,一般都是UTF-8。
3.
phpwp_title(‘|’,true,‘right’);?
> 该标签显示或返回页面的标题。
可定义一个分隔符也就是里面的’|’。
4.
phpbloginfo(‘name’);?
>用于输出博客网站的名称,可以在WordPress后台–设置–常规站点标题那儿修改。
5.
phpbloginfo(‘description’);?
> 站点的描述,可以在WordPress后台–设置–副标题那儿修改。
6.
phpbloginfo(‘url’);?
>用于输出博客的”站点地址(URL)”,可以在WordPress后台–设置–常规那里找到。
7.
phpbloginfo(‘stylesheet_url’);?
>用于输出博客的”style.css文件的地址”,如果你不知道这个地址是什么,可以打开你的网站首页,然后用浏览器的”查看源代码”功能来查看网页的源代码,查找style.css,应该可以找到http:
//example/wp-content/themes/XXX/style.css使用了这个函数就省去了写这么长的地址。
8.
phpbloginfo(‘stylesheet_directory’);?
>用于输出博客的”style.css文件所在的目录”,如http:
//example/wp-content/themes/XXX。
9.
phpbloginfo(‘rss2_url’);?
>用于输出你的feed的网址,一般形式如:
http:
//example/feed。
10.
phpbloginfo(‘pingback_url’);?
>用于输出你的pingback的网址。
(pingback大概意思就是说别人引用了你的文章也加上了你网站的链接,你就会受到pingback的信息。
)
11.
phpwp_head();?
> 这个函数是非常重要的,大家可以理解成我们装的插件和主题的接口,一些插件的作用是通过这个函数显示在主题上面的。
还有一个是wp_footer()这个也是,不过它是放在footer.php里面的。
结束后我们继续往下看,到了这里面的东西就很多了。我们网站的内容都是放在
html标签之间的(这个不清楚的,大家可以先去网上搜下,磊子会在以后讲到html标签)。首先网站肯定需要你自己logo可以是文字也可以是图片。
如果要用图片呢,我们就需要这个函数
phpbloginfo(‘template_url’);?
> 显示主题文件地址比如你的主题叫XXX,那么你的主题文件地址就是http:
//你的网站地址/wp-content/themes/XXX,然后图片是放在images文件里面的,这样完整的代码是
phpbloginfo('template_url');? >/images/logo.jpg"alt=""title=""/> //这里用到了html的图片标签img以及里面一些属性 这样做的好处是假如你本地测试后要传到空间上不需要自己再去修改图片地址。 我们继续往下看,我们可以在logo的右边加上搜索框,就像磊子博客上一样,那么用到的函数是 phpget_search_form();? > 这个是调用wp内置的搜索框,当然我们也可以自定义。 接下来是菜单导航。 在wordpress之前的版本中我们常用到的菜单导航函数是 phpwp_list_pages();? > 但由于新版的wp后台有了菜单选项,这个方法很少用了,而是新的函数 phpwp_nav_menu(array(‘theme_location’=>‘primary’));? >要使用这个函数还需要在functions.php里面激活这个功能,写法是 phpregister_nav_menu(‘primary’,__(‘主菜单’));? > 以上这些部分一般都是放在header.php里面的,原因就是它们都是公用的,你每个页面都会用到这些,所以呢在网站头部中如果是每个页面都会用到的可以放在header.php里面。 放进去之后那其他文件需要在文件里面最顶端加上 phpget_header();? >如果是调用footer.php在文件的最低端就上 phpget_footer();? >,侧边栏调用就是 phpget_sidebar();? >,昨天讲到文件结构时有个sidebar-page.php的文件,那调用代码就要写成 phpget_sidebar(‘page’);? >。 这样就把文件引入进来了。 其次网站主要内容部分,我们看博客首页的时候都是以列表的形式显示出来的,那么需要用到循环。 把整个文章里面的标题和内容全部显示出来,代码是 phpif(have_posts()): //判断是否有文章,如果有的话显示下面内容? > php/*开始循环*/? > phpwhile(have_posts()): the_post();? > phpthe_title();? >//显示文章标题 phpthe_author();? >//显示文章作者 phpthe_time('Y-m-dH: i: s')? >//显示文章发布时间,格式为2011-11-2321: 10: 11 phpthe_category(',')? >//显示分类名称用逗号','隔开 phpthe_tags(‘,’);? >//显示标签名称用逗号','隔开 phpthe_excerpt();? >//显示文章摘要 phpthe_content();? >//显示文章内容 //这些都需要放在循环里才可以显示出来,还有下面这些需要在循环里面添加的。 phpthe_permalink();? >//获得每篇文章的链接,一般放在a标签里面 phpechoget_author_posts_url(get_the_author_meta('ID'));? >//获取文章作者的链接同样也是a标签里面 phpcomments_popup_link(__('暂无评论','leizi'),__('1条评论','leizi'),__('%条评论','leizi'));? > //评论的链接以及一些设置,无评论时显示暂无评论,有一条时显示1条评论,多条时就是%条评论 phpendwhile;? > php/*结束循环*/? > phpelse: //如果没有内容显示下面信息? > phpecho'没有发布文章';//php中用echo来输出内容,这个大家可以记住。 以后看到就不陌生了。 ? > //以上是网站的主要内容部分用到的常用函数。 主要部分显示完之后如果需要有侧边栏.方法是: phpif(! dynamic_sidebar('post-sidebar')): ? > phpendif;//判断是否存在id是post-sidebar的侧边栏? > //然后你需要在functions.php文件里面激活 php functionlei_widgets_init(){ register_sidebar(array( 'name'=>__('首页','leizi'), 'id'=>'post-sidebar', 'description'=>__('这是一个侧边栏小工具','leizi'), 'before_widget'=>' 'after_widget'=>'
'before_title'=>'
',
'after_title'=>'',
));
}
add_action('widgets_init',‘lei_widgets_init');
//通过这个方法,就可以在后台的小工具那儿使用叫首页的侧边栏了。
这样一个网站大概内容基本都显示出来了。
还需要在详细页面single.php里面加上评论框,代码是
phpcomments_template(”,true);?
> ,single.php里面内容显示的方法和主要列表内容显示的方法是一样的。
把那些代码贴过去用就行。
还有分类文件category.php,作者内容文件author.php,存档文件archive.php等,都可以用上面的循环来显示出来。
我们用到上面的代码就可以做一个主题出来了。
在加上下面的一些判断。
php
is_home();//是否是首页
is_page();//是否是页面
is_single();//是否是文章详细页面
is_front_page();//是否是主页
is_search();//是否是搜索页面
?
>
is_404(),//是否是404页面is_admin(),//是否是管理员is_archive(),//是否是存档页面
is_attachment(),//是否是附件页面is_author(),//是否是作者页面
is_category(),//是否是分类页面
is_date(),is_day(),is_feed(),//是否是时间,天以
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WordPress 主题 模板 修改 教程