Wordpress主题技巧

WordPress 主题教程 #14:底部和拆分 Index

WordPress 主题教程 #14:底部和拆分 Index

底部和拆分 Index是从零开始创建 WordPress 主题系列教程的第十四篇,这篇我们完成对主题的样式化和开始把 index.php 文件分成多个小文件。在这篇中,首先要对 style.css 文件进行修改,然后把 index.php 分成一些新的文件。

打开 XAMPP,主题文件夹,Firefox,IE,index.php 和 style.css。

第1步:样式化 footer

footer DIV 增加 10px 顶部填充。你还记得如何增加填充?这次我不提供代码。

第2步:设置 footer P 的行距

给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。(今天关于 CSS 的就这么多。)

第3步:header.php

创建一个新文件,把它命名为 header.php
index.php 文件中,把 header DIV 及以上所有东西都拷贝到 header.php 文件中。

create-headerphp.gif

copy-header.gif

这是我的 header.php 文件。不要从我的这里拷贝,从你自己的 index.php 文件拷贝。

第4步:在 index.php 中导入 header.php

为了使所有从 index.php 中拷出的内容依然在 index.php 文件中,输入以下代码:

<?php get_header(); ?>

get-header.gif

这是个 WordPress 主题系统特别用来导入 header.php 文件的函数,而不用使用 PHP 的函数:<?php include (TEMPLATEPATH . ‘/header.php’); ?>.

保存并刷新浏览器,你应该看到没有变化。如果你的改变破坏了主题,那么肯定有错误。

第4步:sidebar.php

和第4步一样,更多相同的事情。这次,创建 sidebar.php 文件。
index.php 文件中的 Sidebar DIV 从开始到结尾都复制到 sidebar.php 文件中。
那么,在 index.php 文件,将其取代为:<?php get_sidebar(); ?>.
保存并刷新浏览器,再一次,你应该看到没有变化。
这是我的 sidebar.php 文件。

get-sidebar.gif

第5步:footer.php

footer.php 重复上面的步骤。
这是我的 footer.php 文件。

get-footer.gif

教程回顾

创建了三个新文件:header.phpsidebar.phpfooter.php
使用了三个新的函数:get_header()get_sidebar()get_footer()
下面是这节课结束之后的文件:index,style,header,sidebar,footer。

原文:link

标签:WordPress 主题 WordPress 教程

Wordpress主题技巧

更多有关于 Wordpress主题技巧

V9火车采集器,快速入门!

塔克网整站模板 安装使用指南

WordPress如何备份网站数据库和文件?WordPress整站搬家操作流程。

WordPress网站安全设置教程

国外英文广告联盟网站模板,WordPress主题整站演示地址列表

WordPress主题开发:开启文章缩略图功能

WordPress 自定义头像插件:WP User Avatar

WordPress 后台管理界面UI自定义插件:WP Admin UI Customize

WordPress 自定义文章/页面阅读权限的插件:User Specific Content

本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal等单词的拼写,熟悉Windows、Linux、OS X、Android、iOS、WP8等系统的开关机。

通过下面的方式来联系我们:

电邮:138762189@qq.com

联系QQ:点击这里给我发消息

官方站:www.tadke.com

※ ※ 联系请加我的企鹅号 ※※

※ ※技术支持请微信联系站长 ※※

Copyright © 2016 Tadke.com. Powered by Wordpress.