WordPress主题制作进阶#8页面,自定义模板和子导航

定制页面模板

现在我们访问“关于”页面,可以看到它的格式就像一个帖子,这不是我们想要的。我们只希望页面有标题,我们不想要元数据,阅读更多,以及类似的东西。 所以为了改变这一切,我们须要创建一个新文件并将其保存为page.php。
我们将index文件中的代码复制,粘贴到page文件中,然后修改一些内容,用下面的代码覆盖while内部的 get_template_part()

<article class="page">
	<h2><?php the_title(); ?></h2>
	<?php the_content(); ?>
</article>

我们到前端刷新,会发现服务页和关于页使用了相同的格式;接下来将学习如何为某些页面创建单独的模板。
我们将新建一个文件命名为page-about.php,将page文件中的代码复制,粘贴到新文件中,然后在h2标题行下方添加一行电话号码,如下:

<article class="page">
	<h2><?php the_title(); ?></h2>
	<div class="well">Company Phone: 555-555-5555</div>
	<?php the_content(); ?>
</article> 

保存然后回到前端刷新页面,现在应该只有关于页发生变化。

我们成功的定制了单个页面,单这不是最好的方法,当你想在某些页面上拥有特定的样式或内容时,更好的办法是使用模板,我们要摆脱页面文件。现在我们删除page-about.php文件,然后创建一个模板。

创建一个新文件并将其保存为company-template.php。 我们将复制page.php文件中的内容,并将其粘贴到companytemplate.php文件中,然后在其顶部添加声明注释,注意这个注释要放在php标签中;然后在the_title()下方,输入电话号码,代码如下:

<?php
/*
    Template Name: Company Layout
*/
?>

<?php get_header(); ?>

    <div class="container content">
        
        <div class="main block">
        <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post(); ?>
            <article class="page">
                <h2><?php the_title(); ?></h2>
                <?php the_content(); ?>
                <p class="phone">1-800-555-5555</p> 
            </article> 

在给其加点样式:

.phone {
    background: #f4f4f4;
    border: 1px solid #ccc;
    padding: 8px;
    font-weight: bold;
} 

保存代码,然后我们进入后台,页面->关于页,重新编辑它,在右边找到模板,选择Company Layout,点击更新。
模板
回到前端刷新
号码出现了
我们跳转到服务页,不会看到号码; 如果你希望它出现在服务页,只需进入“服务”页面并选择“Company-Layout”, 电话号码就会出现。

创建子导航

接下来我们学习如何创建子导航菜单,前面我们为关于页创建了两个子页面:团队FAQ,现在我们让关于页的两个子页面显示出来,这个方法适合任何具有子项的页面。
1、我们先到后台的关于页中移除Company—Layout模式,让页面不显示电话号码
2、然后进入page.php中,在article标签下面添加 php wp_list_pages(),代码如下:

<article class="page">
	<?php wp_list_pages(); ?>
	<h2><?php the_title(); ?></h2>
	<p class="phone">1-800-555-5555</p>
	<?php the_content(); ?>
</article> 

保存代码,让我们到前端页面看看发生了什么:
页面列表
可以看到我们在WordPress网站上的所有页面都被列出来了,但我们只想获取“关于”页面及其子页面,所以我们再转到page.php文件,就在wp_list_pages()之上添加一些代码,

<article class="page">
<?php
	$args = array(
		'child_of' => get_top_parent(),
		 'title_li' => ''
	); 
?>
<?php wp_list_pages($args); ?> 

如果我们刷新页面,我们将得到一个错误,因为没有名为get_top_parent()的函数。 让我们进入functions.php并在最下面,创建一个名为get_top_parent()的函数。代码如下

function get_top_parent(){
    global $post;
    if($post->post_parent){
        $ancestors = get_post_ancestors($post->ID);
        return $ancestors[0];
    } 
 	return $post->ID;
}

保存代码,刷新页面:
子页面出现
关于页的子菜单出现了,我们回到page.php并在article标签内创建一个ul标签。 在ul标签上方,创建一个nav标签,并为其提供一个nav和sub-nav类。 现在在ul标签下,我将放置一个span标签,并为其提供一个父级链接。 在它里面,我们将放置一个a标签,它将转到<?php echo get_the_permalink();?>。 给它传递get_top_parent()函数。 然后,对于链接文本我们会说<?php echo the_title();?>,代码如下:

<nav class="nav sub-nav">
	<ul>
	<span class="parent-link">
		<a href="<?php echo get_the_permalink(get_top_parent()); ?>">
			<?php echo get_the_title(get_top_parent()); ?>
		</a>
	</span>
    <?php
    	$args = array(
    		'child_of' =>get_top_parent(), 
    		'title_li' => ''
            );
     ?>
    <?php wp_list_pages($args); ?>
	</ul>
</nav>

现在保存代码,刷新页面看一下
在这里插入图片描述
如果我们转到服务页面,即使没有子链接,它仍将具有此功能。 因此,我们将在functions.php文件中创建另一个短函数并调用page_is_parent。 然后,我们创建全局$ post并将get_pages()赋值给$ pages,在这里,我们将 ‘child_of=’.$post->ID 作为参数传递给get_pages()。然后返回我们想要的页数,我们会计算返回的页数,如果页数大于零,那么我们就知道它是父级:

function page_is_parent(){
	global $post;
	
	$pages = get_pages('child_of='.$post->ID);
	return count($pages);
} 

我们回到page.php并在

<?php if(page_is_parent() || $post->post_parent > 0): ?> 
<nav class="nav sub-nav"> 
。。。。。。
</nav>
<?php endif; ?> 

保存代码,然后返回服务页面刷新。 我们可以看到菜单现在已经消失了,但是如果我们去关于页,菜单仍然存在,因为它有子页面。

现在我们需要的功能已经正常工作,接下来我们为子菜单添加一些样式,让它更好看:

.sub-nav {
    margin-top: 10px;
    float: right;
    width: 300px;
}
.sub-nav ul {
    float: right;
}
.sub-nav .parent-link {
    font-weight: bold;
    color: #000;
    float: left;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #009acd;
}
.sub-nav .parent-link a {
    font-weight: bold;
    color: #000;
}
.sub-nav .current_page_item {
    font-weight: bold;
}

最后我们清除一下浮动,转到page.php文件中,在nav结束标签下方添加< div class=“clr” >,然后在样式表中添加以下样式:

.clr{
	clear:both;
}

保存回到前端页面刷新:
完成子导航菜单
在下一节中,我们将介绍小工具(widgets)。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章