WordPress自定义页面模板的方法图解

用过一段时间wordpress的人都会这个WordPress:自定义页面模板,但还有很多新手不知道页面模板功能.

页面模板的作用:让WordPress的页面有不同的布局或者样式,wordpress提供了页面功能,可以让我们建立不同的页面以展示不同的内容,如联系方式、留言本等等,很多人都喜欢建个这个,这些页面建立好了,可以自定义标题和内容,但是不同的页面,布局却是完全一样的,没法按自己的需求去改变和添加,有时候我们只想在某一个页面的边栏上添加个什么东西,比如说图片,这时就可以通过自定义模板来实现特定功能的页面.

1、通过ftp工具在你的主题目录下新建一个php文件,比如,links.php,名字随便取.

2、编辑这个新建的文件,在文件头部加上这段代码:

1. <?php 
2. /* 
3. Template Name:友链 
4. */ 
5. ?> 

3、将你的page.php中的内容直接拷贝到links.php当中.

4、然后在links.php 中找到你需要改变的地方,我想,最主要修改的一个是边栏,一个是文章内容,至于怎么改,得看你的需求.

5、修改并保存好这个文件后,创建一个新页面或者修改已存在的页面,在右下边有个“页面模板”的面板,在下拉菜单中选中“友链”后保存就可以了.

links.php当中可以是任何内容,不一定一定要复制page.php中的内容,甚至你可以在其中直接放上html代码而不加任何其它东西.

创建一个联系(contact)页面模板

如果你的网站有 联系单页面(contact page),这样会很容易让您的网站访问者发送电子邮件到你的WordPress博客管理员,下面是一个示例是新建一个联系人的单页面模板主题,你可以把下面的代码复制下:

1. <?php 
2. /* 
3. Template Name: Contact 
4. */ 
5. ?> 
6. <?php 
7.  
8. $nameError = ''; 
9. $emailError = ''; 
10. $commentError = ''; 
11. $sumError = ''; 
12.  
13. if(isset($_POST['submitted'])) { 
14.         if(trim($_POST['contactName']) === '') { 
15.             $nameError = 'Please enter your name.'; 
16.             $hasError = true; 
17.         } else { 
18.             $name = trim($_POST['contactName']); 
19.         } 
20.  
21.         if(trim($_POST['email']) === '')  { 
22.             $emailError = 'Please enter your email address.'; 
23.             $hasError = true; 
24.         } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$", trim($_POST['email']))) { 
25.             $emailError = 'You entered an invalid email address.'; 
26.             $hasError = true; 
27.         } else { 
28.             $email = trim($_POST['email']); 
29.         } 
30.  
31.         if(trim($_POST['comments']) === '') { 
32.             $commentError = 'Please enter a message.'; 
33.             $hasError = true; 
34.         } else { 
35.             if(function_exists('stripslashes')) { 
36.                 $comments = stripslashes(trim($_POST['comments'])); 
37.             } else { 
38.                 $comments = trim($_POST['comments']); 
39.             } 
40.         } 
41.  
42.         if(trim($_POST['sum']) === '' || trim($_POST['sum']) != '11' ){ 
43.             $sumError = "Please enter what's 7 + 4"; 
44.             $hasError = true; 
45.         } 
46.  
47.         if(!isset($hasError)) { 
48.             $emailTo = get_option('pu_email'); 
49.             if (!isset($emailTo) || ($emailTo == '') ){ 
50.                 $emailTo = get_option('admin_email'); 
51.             } 
52.             $subject = '[Contact Form] From '.$name; 
53.             $body = "Name: $name nnEmail: $email nnComments: $comments"; 
54.             $headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $emailTo; 
55.  
56.             mail($emailTo, $subject, $body, $headers); 
57.             $emailSent = true; 
58.         } 
59.  
60. } ?> 
61.  
62. <?php get_header(); ?> 
63.  
64. <section class="box grid_9 list_posts"> 
65.         <div class="inner"> 
66.  
67.                 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
68.  
69.                     <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> 
70.  
71.                         <h1 class="entry-title"><?php the_title(); ?></h1> 
72.  
73.                         <div class="entry-content"> 
74.  
75.                             <div class="contact-form clearfix"> 
76.  
77.                             <?php if(isset($emailSent) && $emailSent == true) { ?> 
78.  
79.                                 <div class="thanks"> 
80.                                     <p><?php _e('Thanks, your email was sent successfully.', 'framework') ?></p> 
81.                                 </div> 
82.  
83.                             <?php } else { ?> 
84.  
85.                                 <?php the_content(); ?> 
86.  
87.                                 <?php if(isset($hasError) || isset($captchaError)) { ?> 
88.                                     <p class="error"><?php _e('Sorry, an error occured.', 'framework') ?><p> 
89.                                 <?php } ?> 
90.  
91.                                 <form action="<?php the_permalink(); ?>" id="contactForm" method="post"> 
92.                                     <ul class="contactform"> 
93.                                         <li><label for="contactName"><?php _e('Name:', 'framework') ?></label> 
94.                                             <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" /> 
95.                                             <?php if($nameError != '') { ?> 
96.                                                 <span class="error"><?php echo $nameError; ?></span> 
97.                                             <?php } ?> 
98.                                         </li> 
99.  
100.                                         <li><label for="email"><?php _e('Email:', 'framework') ?></label> 
101.                                             <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" /> 
102.                                             <?php if($emailError != '') { ?> 
103.                                                 <span class="error"><?php echo $emailError; ?></span> 
104.                                             <?php } ?> 
105.                                         </li> 
106.  
107.                                         <li class="textarea"><label for="commentsText"><?php _e('Message:', 'framework') ?></label> 
108.                                             <textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> 
109.                                             <?php if($commentError != '') { ?> 
110.                                                 <span class="error"><?php echo $commentError; ?></span> 
111.                                             <?php } ?> 
112.                                         </li> 
113.  
114.                                         <li><label for="sum"><?php _e('7 + 4:', 'framework') ?></label> 
115.                                             <input type="text" name="sum" id="sum" value="<?php if(isset($_POST['sum'])) echo $_POST['sum'];?>" class="required requiredField" /> 
116.                                             <?php if($sumError != '') { ?> 
117.                                                 <br/><span class="error"><?php echo $sumError; ?></span> 
118.                                             <?php } ?> 
119.                                         </li> 
120.  
121.                                         <li class="buttons"> 
122.                                             <input type="hidden" name="submitted" id="submitted" value="true" /> 
123.                                             <label></label><button class="button-message" type="submit"><?php _e('Send Email', 'framework') ?></button> 
124.                                         </li> 
125.                                     </ul> 
126.                                 </form> 
127.                             <?php } ?> 
128.  
129.                             </div> 
130.                         </div> 
131.                     </div> 
132.  
133.                     <?php endwhile; else: ?> 
134.  
135.                     <div id="post-0" <?php post_class() ?>> 
136.  
137.                         <h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1> 
138.  
139.                         <div class="entry-content"> 
140.                             <p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p> 
141.                             <?php get_search_form(); ?> 
142.                         </div> 
143.                     </div> 
144.  
145.                 <?php endif; ?> 
146.  
147.             </div> 
148.     </section> 
149.  
150.     <?php get_sidebar(); ?> 
151.  
152. <?php get_footer(); ?> 

创建一个宽屏页面模板

全宽页面模板是其主要区别在于,侧边栏已经被删除,使得在内容区域伸展跨越页面宽度的模板,代码如下:

1. <?php 
2. /* 
3. Template Name: Fullwidth 
4. */ 
5. ?> 
6.  
7. <?php get_header(); ?> 
8.  
9. <section class="box grid_12 list_posts"> 
10.         <div class="inner"> 
11.  
12.             <article id="primary" class="hfeed"> 
13.             <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
14.  
15.                 <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> 
16.                     <h1 class="entry-title"><?php the_title(); ?></h1> 
17.  
18.                     <div class="entry-content"> 
19.                         <?php the_content(); ?> 
20.                         <?php wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'framework').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> 
21.  
22.                     </div> 
23.                 </div> 
24.  
25.                 <?php comments_template('', true); ?> 
26.  
27.                 <?php endwhile; endif; ?> 
28.             </article> 
29.             </div> 
30.         </section> 
31.  
32. <?php get_footer(); ?> 

创建一个存档页面模板

存档页面模板将显示您的所有旧的文章列表,在这个模板也将按月按类别列出前30天的所有的列表,代码如下:

1. <?php 
2. /* 
3. Template Name: Archives 
4. */ 
5. ?> 
6.  
7. <?php get_header(); ?> 
8.  
9. <section class="box grid_9 list_posts"> 
10.         <div class="inner"> 
11.  
12.                 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
13.  
14.                     <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> 
15.  
16.                         <h1 class="entry-title"><?php the_title(); ?></h1> 
17.  
18.                         <div class="entry-content"> 
19.  
20.                             <div class="archive-lists"> 
21.  
22.                                 <h4><?php _e('Last 30 Posts', 'framework') ?></h4> 
23.  
24.                                 <ul> 
25.                                 <?php $archive_30 = get_posts('numberposts=30'); 
26.                                 foreach($archive_30 as $post) : ?> 
27.                                     <li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li> 
28.                                 <?php endforeach; ?> 
29.                                 </ul> 
30.  
31.                                 <h4><?php _e('Archives by Month:', 'framework') ?></h4> 
32.  
33.                                 <ul> 
34.                                     <?php wp_get_archives('type=monthly'); ?> 
35.                                 </ul> 
36.  
37.                                 <h4><?php _e('Archives by Subject:', 'framework') ?></h4> 
38.  
39.                                 <ul> 
40.                                     <?php wp_list_categories( 'title_li=' ); ?> 
41.                                 </ul> 
42.  
43.                             </div> 
44.             </div> 
45.         </div> 
46.  
47.                     <?php endwhile; else: ?> 
48.  
49.                     <div id="post-0" <?php post_class() ?>> 
50.  
51.                         <h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1> 
52.  
53.                         <div class="entry-content"> 
54.                             <p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p> 
55.                             <?php get_search_form(); ?> 
56.                         </div> 
57.                     </div> 
58.  
59.                 <?php endif; ?> 
60.         </div> 
61.     </section> 
62.  
63.     <?php get_sidebar(); ?> 
64.  
65. <?php get_footer(); ?> 

好了,到这为止,有关创建WordPress的自定义页面模板就介绍到这里,希望你通过这篇文章的简单了解,可以制作出各种漂亮的页面模板.