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

页面模板的作用

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

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

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

 代码如下 复制代码
< ?php
/*
Template Name:友链
*/
?>

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

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

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

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

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

 代码如下 复制代码

<?php
/*
Template Name: Contact
*/
?>
<?php
 
$nameError = '';
$emailError = '';
$commentError = '';
$sumError = '';
 
if(isset($_POST['submitted'])) {
        if(trim($_POST['contactName']) === '') {
            $nameError = 'Please enter your name.';
            $hasError = true;
        } else {
            $name = trim($_POST['contactName']);
        }
 
        if(trim($_POST['email']) === '')  {
            $emailError = 'Please enter your email address.';
            $hasError = true;
        } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$", trim($_POST['email']))) {
            $emailError = 'You entered an invalid email address.';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }
 
        if(trim($_POST['comments']) === '') {
            $commentError = 'Please enter a message.';
            $hasError = true;
        } else {
            if(function_exists('stripslashes')) {
                $comments = stripslashes(trim($_POST['comments']));
            } else {
                $comments = trim($_POST['comments']);
            }
        }
 
        if(trim($_POST['sum']) === '' || trim($_POST['sum']) != '11' ){
            $sumError = "Please enter what's 7 + 4";
            $hasError = true;
        }
 
        if(!isset($hasError)) {
            $emailTo = get_option('pu_email');
            if (!isset($emailTo) || ($emailTo == '') ){
                $emailTo = get_option('admin_email');
            }
            $subject = '[Contact Form] From '.$name;
            $body = "Name: $name nnEmail: $email nnComments: $comments";
            $headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $emailTo;
 
            mail($emailTo, $subject, $body, $headers);
            $emailSent = true;
        }
 
} ?>
 
<?php get_header(); ?>
 
<section class="box grid_9 list_posts">
        <div class="inner">
 
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
                    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
 
                        <h1 class="entry-title"><?php the_title(); ?></h1>
 
                        <div class="entry-content">
 
                            <div class="contact-form clearfix">
 
                            <?php if(isset($emailSent) && $emailSent == true) { ?>
 
                                <div class="thanks">
                                    <p><?php _e('Thanks, your email was sent successfully.', 'framework') ?></p>
                                </div>
 
                            <?php } else { ?>
 
                                <?php the_content(); ?>
 
                                <?php if(isset($hasError) || isset($captchaError)) { ?>
                                    <p class="error"><?php _e('Sorry, an error occured.', 'framework') ?><p>
                                <?php } ?>
 
                                <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
                                    <ul class="contactform">
                                        <li><label for="contactName"><?php _e('Name:', 'framework') ?></label>
                                            <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                            <?php if($nameError != '') { ?>
                                                <span class="error"><?php echo $nameError; ?></span>
                                            <?php } ?>
                                        </li>
 
                                        <li><label for="email"><?php _e('Email:', 'framework') ?></label>
                                            <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
                                            <?php if($emailError != '') { ?>
                                                <span class="error"><?php echo $emailError; ?></span>
                                            <?php } ?>
                                        </li>
 
                                        <li class="textarea"><label for="commentsText"><?php _e('Message:', 'framework') ?></label>
                                            <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>
                                            <?php if($commentError != '') { ?>
                                                <span class="error"><?php echo $commentError; ?></span>
                                            <?php } ?>
                                        </li>
 
                                        <li><label for="sum"><?php _e('7 + 4:', 'framework') ?></label>
                                            <input type="text" name="sum" id="sum" value="<?php if(isset($_POST['sum'])) echo $_POST['sum'];?>" class="required requiredField" />
                                            <?php if($sumError != '') { ?>
                                                <br/><span class="error"><?php echo $sumError; ?></span>
                                            <?php } ?>
                                        </li>
 
                                        <li class="buttons">
                                            <input type="hidden" name="submitted" id="submitted" value="true" />
                                            <label></label><button class="button-message" type="submit"><?php _e('Send Email', 'framework') ?></button>
                                        </li>
                                    </ul>
                                </form>
                            <?php } ?>
 
                            </div>
                        </div>
                    </div>
 
                    <?php endwhile; else: ?>
 
                    <div id="post-0" <?php post_class() ?>>
 
                        <h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1>
 
                        <div class="entry-content">
                            <p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p>
                            <?php get_search_form(); ?>
                        </div>
                    </div>
 
                <?php endif; ?>
 
            </div>
    </section>
 
    <?php get_sidebar(); ?>
 
<?php get_footer(); ?>

创建一个宽屏页面模板
全宽页面模板是其主要区别在于，侧边栏已经被删除，使得在内容区域伸展跨越页面宽度的模板。

 代码如下 复制代码

<?php
/*
Template Name: Fullwidth
*/
?>
 
<?php get_header(); ?>
 
<section class="box grid_12 list_posts">
        <div class="inner">
 
            <article id="primary" class="hfeed">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
                <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                    <h1 class="entry-title"><?php the_title(); ?></h1>
 
                    <div class="entry-content">
                        <?php the_content(); ?>
                        <?php wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'framework').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
 
                    </div>
                </div>
 
                <?php comments_template('', true); ?>
 
                <?php endwhile; endif; ?>
            </article>
            </div>
        </section>
 
<?php get_footer(); ?>

创建一个存档页面模板
存档页面模板将显示您的所有旧的文章列表。在这个模板也将按月按类别列出前30天的所有的列表。

 代码如下 复制代码

<?php
/*
Template Name: Archives
*/
?>
 
<?php get_header(); ?>
 
<section class="box grid_9 list_posts">
        <div class="inner">
 
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
                    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
 
                        <h1 class="entry-title"><?php the_title(); ?></h1>
 
                        <div class="entry-content">
 
                            <div class="archive-lists">
 
                                <h4><?php _e('Last 30 Posts', 'framework') ?></h4>
 
                                <ul>
                                <?php $archive_30 = get_posts('numberposts=30');
                                foreach($archive_30 as $post) : ?>
                                    <li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
                                <?php endforeach; ?>
                                </ul>
 
                                <h4><?php _e('Archives by Month:', 'framework') ?></h4>
 
                                <ul>
                                    <?php wp_get_archives('type=monthly'); ?>
                                </ul>
 
                                <h4><?php _e('Archives by Subject:', 'framework') ?></h4>
 
                                <ul>
                                    <?php wp_list_categories( 'title_li=' ); ?>
                                </ul>
 
                            </div>
            </div>
        </div>
 
                    <?php endwhile; else: ?>
 
                    <div id="post-0" <?php post_class() ?>>
 
                        <h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1>
 
                        <div class="entry-content">
                            <p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p>
                            <?php get_search_form(); ?>
                        </div>
                    </div>
 
                <?php endif; ?>
        </div>
    </section>
 
    <?php get_sidebar(); ?>
 
<?php get_footer(); ?>

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

时间： 2024-10-27 02:01:04

WordPress自定义页面模板的方法图解的相关文章

三星galaxy s5 g9006v 自定义来电铃声方法图解

1费话不说多我们在手机桌面找到[应用程序]点击它进入,细节如下.   2.再者我们再点击[设定]图标. 3.设置下面你会看到有一个[声音]图标,我们点击"声音"进入. 4.在进入到声音里边我们找到[铃声]按钮,点击它如图所示. 5.再者进入到铃声中点击[添加]按钮.   6.根据您所需,选择设置铃声的路径,这里以"声音挑选程序"为例.(如果您想一直使用该路径,点击[总是]即可.)     7.如图所示我们可以选择网络音乐也可以选择本地音乐,进入之后设置再点击[完成]

Wordpress页面模板制作方法及使用

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 Wordpress页面模板制作方法及使用 因在网上未发现同类教程,所以今天蚊子在这里写一写,分享给大家. 平时接触到很多人要用WP实现许多单页面功能,例如留言板,投稿,链接申请,淘宝客单页等, 许多同学都不懂如何实现这些功能,在网上也很少有这方面的教程. 其实,自从WP支持首页设置页面功能以后,这些功能都是很简单的. 思路就是利用WP的页面模

WordPress自定义时间显示格式

 这篇文章主要介绍了WordPress自定义时间显示格式的方法,需要的朋友可以参考下     在帮King改他的私人情侣博客模版~找了一些找了,总算是把时间显示为想要的格式了.于是将获得的一些信息记下,供备忘,亦供朋友们参考. WordPress 通过一系列的时间日期函数控制时间日期的输出,下面介绍几个常用的函数: 1.the_date_xml() 函数 调用格式:    代码如下: <?php the_date_xml(); ?>   输出格式:YYYY-MM-DD 如:2005-05-14

如何让wordpress自定义文章类型支持置顶功能

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近开发一个wordpress淘宝客主题,应客户要求,需要做一个店铺推广.这个店铺推广需要上首页,也就是说只有提供了赞助的的店长的链接才可以在首页展示.为了达到这个目的,笔者提供的解决方案是采用置顶功能.店铺采用wordpress自定义文章类型.然而问题来了,wordpress自定义文章类型默认并不支持置顶功能.为此我们可以通过一个插件来实现

android开发中如何自定义UI模板【图解教程】

每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一个标题的xml文件,然后在需要的地方直接通过include来引用,这比起在每个布局文件中写标题栏已经进化很多了,但仍然不是最简单有效的方法,我们为什么不能自定义一个标题控件呢?今天就带大家自己做一个标题栏控件.效果图如下: <?xml version="1.0" encoding="utf-8"?> <resources>     <declare-st

Wordpress评论头像设置方法

Wordpress 从 2.6 版开始集成 Grhttp://www.aliyun.com/zixun/aggregation/16376.html">avatar 头像插件.昨天给博客换了模板,新模板可以显示头像,有些朋友看到部分回复有自定义的头像,邮件问如何设置,樂思蜀下面给出详细的设置方法: 第一步.注册 1.访问这里,点击"Sign Up",输入常用邮箱后确认. 2.检查邮件,会收到一封 support@gravatar.com 发来的邮件,点击其中的链接确认你

WordPress自定义菜单实现当前导航高亮

我研究了一下wordpress的自定义菜单,发现用它来实现当前导航高亮方法其实是很简单了.首先我们要让你的主题支持自定义菜单,注意了wordpress自定义菜单是在3.0+版本以上才有的哦,我们要在你主题的functions.php的中间加一段代码:  代码如下 复制代码 //自定义菜单     if(function_exists('register_nav_menus')){         register_nav_menus( array(             'header-men

如何在服务端(Page.Write)调用自定义的JS方法

js 自从[javascript]自定义MessageBox一文发布以后,很多网友都来信询问,如何在服务端调用ShowInfo方法,周末休息想了个折中的办法来实现. 首先,我们应该可以先明确,为什么我们用Page.Write把自定义的JS方法输出到页面上为什么IE不能识别,会出现"XXX未定义"的错误.原因很简单,因为我们用Page.Write输出的脚本是出现在页面的最顶端.IE读到是javascript函数的时候,就开始执行,但是此时我们link的js文件并未被IE读入,所以IE无法

PS怎么给杂乱的头发抠图 PS通道抠头发方法图解

PS通道抠头发方法图解. 步骤 1.首先把素材图片拖放进Photoshop,然后Ctrl+J复制一份背景图片,隐藏背景! 2.然后我们把到通道里去找一个黑白对比度高的颜色通道,拖到下发创建新通道 3.之后Ctrl+L打开色阶,调整色阶,让黑色区域的更黑,白色区域的更白,方便我们后面抠图 4.然后Ctrl+鼠标左键单击蓝色通道图层的缩略图,获得选取,Ctrl+Shift+I反向一下,返回RGB颜色(就是单击RGB通道图层),返回图层,在图层1Ctrl+J复制一份 5.最后扣取人物,不需要抠的那么细