wordpress仿站教程#3:拆分首页

在这篇中,我们将要着手开始写 WordPress 代码,这里建议搭建首先在本地电脑上安装 WordPress,而不是安装到服务器上,因为本地更方便测试。

第1步:打开 XAMPP 控制面板。

第2步:创建你的主题文件夹。

在你本地安装的 WordPress 主题文件夹下(应该在xampp/htdocs/wordpress/wp-content/themes),创建一个新的文件夹,命名为 demo,(文件夹名称随自己喜好)。

第3步:选择目标网站。

为了减少麻烦这里直接仿制本站,打开网站:有间客栈
鼠标右键查看源代码,并复制,打开DW软件,新建PHP文件,将复制的源代码拷贝至新建PHP文件中,另存为index.php备用,文件夹选择刚刚新建的demo文件夹,接下来下载目标网站CSS文件并命名为style.css
,并修改style.css顶部注释,打开wordpress后台外观并启用新建的主题。刷新首页试试!

分离头部header.php


在主题文件夹下新建header.php
文件,打开index.php,DW切换至设计模式,鼠标点击顶部任意位置,在下面标签中选择<div#header>
,然后在代码将此标签下所有代码及前面所有代码剪切至header.php,并保存备用。并在原位置添加头部调用代码<?php get_header();?>,到此头部分离完成。

分离侧边sidebar.php

方法基本类同,在主题文件夹下新建sidebar.php文件,打开index.php,选择<div#sidebar>标签,在代码格式下剪切拷贝至sidebar.php文件中,并在原index.php添加调用代码<?php get_sidebar.php(); ?>,到此侧边分离完成。

分离底部footer.php

方法同上,新建footer.php,在index.php中选择<div#footer>并剪切至footer.php文件中,在原位置添加<?php get_footer();?>

到此首页分离完成。

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论