A-A+

wordpress主题制作

2013年11月28日 PHP开源系统 暂无评论 阅读 65 views 次

制作一个最简单的主题,只需要两个文件,index.phpstyle.css

第一步,准备静态页面

第二步,制作index.phpstyle.css

第三步,给style.css添加版权信息

第四步:把主题上传到空间中wordpress安装路径,wp-content/themes/下面,这里主题的文件夹名字必须是英文

第五步,在wordpress后台启用主题

先给style.css添加版权信息

如果还有其他样式文件需要添加可以用@import url('样式所在文件夹/style2.css');导入样式

第六步,把index.php拆分成header.phpfooter.phpsidebar.phh(可以根据自己网站的需要设置)

需要用到的调用标签:

<?php get_header();?>  调用头部文件

<?php get_footer();?>  调用脚部文件

<?php get_sidebar();?> 调用侧栏文件

 header.php的制作

将index文件中头部分的代码拆分到header.php文件中,拆分后的的header.php文件信息为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>wordpress</title>

</head>

 <body>

<div id="header">

<p>这是网页头部信息</p>

</div>

然后用

<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()  ?>

这段代码覆盖掉头部的meta和title部分代码。

<link rel="pingback" href="<?php bloginfo( 'stylesheet_url' ); ?>" />引用CSS样式

完成后的header.php内容为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<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();?>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>

</head>

 <body>

<div id="header">

<p>这是网页头部信息</p>

</div>

footer.php的制作

与header制作方法一样,将index中脚部信息截取到footer文件中,如:

<div id="footer">

<p>这是网页底部信息</p>

</div>

</body>

</html>

header和footer制作好后再将它们整合到index.php文件中,整合后的index.php如下:

<?php get_header();?>

<div id="page">

<p>这是网页中间内容部分信息</p>

</div>

<?php get_footer();?>

 OK一个简单的wordpress主题就制作完成了。
标签:

给我留言