WordPress主题制作课程#12:制作单页面文件page.php
作者:xlnxin发布时间:2021-04-15分类:WordPress教程浏览:364
制作单页面文件page.php是全套wordpress主题制作课程的最后一篇,在进入正文前先来解释一下什么是单页面,很多人把单页面单纯地理解为网站的一个页面,在wordpress中单页面指的是在“后台——页面”里创建的页面,一个用于单独显示网站某部分内容的页面,例如“网站简介”、“联系方式”等内容的页面。
单页面文件page.php和文章内容页面文件single.php基本是相通的,具体理论不作解析,有兴趣的可以在制作完page.php文件后,把代码和single.php文件的代码进行对比。
开始制作page.php文件
编辑page.html文件,删除header.php、footer.php、sidebar.php文件的公共部分代码,保存为page.php文件,并在该文件中删除代码的原位置分别调用上面三个文件,page.php文件初始代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <?php get_header(); ?> <!-- Column 1 / Content --> <div class="grid_8"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel porta erat. Quisque sit amet risus at odio pellentesque sollicitudin. Proin suscipit molestie facilisis. Aenean vel massa magna. Proin nec lacinia augue. Mauris venenatis libero nec odio viverra consequat. In hac habitasse platea dictumst.</p> <!-- Contact Form --> <form id="comment_form" action="" method="post"> <h3>Add a comment</h3> <div class="hr dotted clearfix"> </div> <ul> <li class="clearfix"> <label for="name">Your Name</label> <input id="name" name="name" type="text" /> </li> <li class="clearfix"> <label for="email">Your Email</label> <input id="email" name="email" type="text" /> </li> <li class="clearfix"> <label for="email">Your Website</label> <input id="website" name="website" type="text" /> </li> <li class="clearfix"> <label for="message">Comment</label> <textarea id="message" name="message" rows="3" cols="40"></textarea> </li> <li class="clearfix"> <!-- Add Comment Button --> <a type="submit" class="button medium black right">Add comment</a> </li> </ul> </form> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
添加页面标题
搜索代码:
1 | <!-- Column 1 / Content --> |
改成:
1 2 | <!-- Column 1 / Content --> <h2 class="grid_12 caption clearfix"><?php the_title(); ?></h2> |
添加页面内容
把下的代码:
1 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel porta erat. Quisque sit amet risus at odio pellentesque sollicitudin. Proin suscipit molestie facilisis. Aenean vel massa magna. Proin nec lacinia augue. Mauris venenatis libero nec odio viverra consequat. In hac habitasse platea dictumst.</p> |
改成:
1 | <?php the_content(); ?> |
添加评论框
把 <!-- Contact Form -->
与 </form>
之间的所有代码删除(包括</form>
)
替换成:
1 | <?php comments_template(); ?> |
添加查询语句
搜索代码:
1 | <!-- Column 1 / Content --> |
改成:
1 2 | <!-- Column 1 / Content --> <?php if (have_posts()) : the_post(); update_post_caches($posts); ?> |
查找:
1 2 | </div> <?php get_sidebar(); ?> |
改成:
1 2 3 4 5 6 7 | </div> <?php else : ?> <div class="grid_8"> 没有找到你想要的页面! </div> <?php endif; ?> <?php get_sidebar(); ?> |
至此,page.php文件就制作完成了。此外还有两个页面,无边栏页面full_width.php,联系页contact.php,制作方法和page.php完全一样,不再详述了,压缩包里已经直接写好,下载即可。那这两个页面怎么用呢?这两个页面的代码开头分别写了两个注释。
full_width.php文件:
1 2 3 4 5 | <?php /* Template Name: Page without sidebar */ ?> |
contact.php文件:
1 2 3 4 5 | <?php /* Template Name: contract */ ?> |
新建页面的时候,在右边栏可选择页面模板,你可以选择Page without sidebar 或 contract,不选默认使用page.php模板!contact.php边栏的联系方式你自己改一下内容就可以了。
完整主题文件下载:aurelius_final.zip
PS:到此,断断续续终于把露兜博客的整套wordpress主题制作教程转载完毕,该套教程虽然已经发了好几年,但是由于wordpress的模板机制没有改变,因此该教程依然可用,如果你具有一定的html、css、php基础,看完整套教程,相信应该可以独立制作出一款主题了。
相关推荐
- 微信小程序function函数arguments 是什么意思呢?
- 小程序和H5中canvas卡顿的性能优化方向和实践
- 微信小程序反编译报SyntaxError: Unexpected token ‘}‘ 不完美的解决方法
- 解决小程序反编译出现 app-service.js
- PHP把textarea中的回车换行替换为br
- zblogphp使用GetArticleList、GetList函数调用热门文章列表
- expose_php = On/Off,是干什么的?底层原理是什么?
- 国产安可立思辰打印机手动双面打印设置教程
- 淘宝给大家发6.5元新年购物红包啦,不要嫌少还有很多优惠,快来领取吧!
- 快手极速版给大家发56元新年红包啦,快来领取吧!
- WordPress教程排行
- 最近发表