从0到1制作WordPress主题#10页面和菜单

本节我们将关注页面和菜单。除了在WordPress中创建帖子,我们还可以创建页面:
1、如果我们转到后端并单击页面,您会看到有几个示例页面;现在我们创建一个新页就叫About,我们再输入两段文字进去。然后点击发布。

创建页面

2、我们继续创建一个Service页面。 现在我们需要导航功能。为了使用菜单系统,我们需要编辑functions.php文件,因为现在,如果我们转到外观,则没有菜单选项。 所以让我们打开functions.php并输入以下代码:

<?php
function simple_theme_setup(){
    // Featured Image Support
    add_theme_support('post-thumbnails');

    // Menus
    register_nav_menus(array(
        'primary' => __('Primary Menu')
    ));
}
add_action('after_setup_theme', 'simple_theme_setup');
  • 在我们之前创建的这个simple_theme_setup函数中,我们将添加register_nav_menus
  • 然后我们传入一个数组
  • 通过数组我们将可以设置primary,然后设置可读版本

下面我们将进设置Primary Menu然后保存它

3、现在我们进入后端,刷新页面并转到外观,您会看到我们有这个菜单选项

菜单设置页面

如果我们单击“创建菜单”,现在您可以看到默认情况下它包含网站上的所有页面,您可以根据需要删除一些页面;如果你想添加页面,你可以很容易地做到; 单击“添加到菜单”。 在这里我们只需要保留我们现有的内容,然后我们需要确保选择了Primary Menu,确保其在主题中显示的位置,然后保存。

菜单管理

4、现在我们去前端刷新页面,但是没有看到任何东西,因为我们没有将它包含在我们的header文件中;我们希望在每个页面上都有顶部菜单,所以把它放在header.php文件中,我们直接在header结束标签下面创建一个nav标签,如下所示:

<nav class="main-nav">
    <div class="container">
    <?php
        $args = array(
            'theme_location' => 'primary'
        );
    ?>
    <?php wp_nav_menu($args); ?>
    </div>
</nav>

保存代码,看看这些代码都做了什么:

  • 在php标签内创建一个名为args的变量。
  • 这个变量包含一个参数theme_location
  • 这个参数指定了我们要在这里放置那个菜单
  • 调用一个名为wp_nav_menu的函数,并传入该args变量

5、回到前端页面刷新,就会看到我们的菜单,如下图:

导航菜单出现

6、我们给导航菜单添加一些样式,打开style.css文件,输入以下代码并保存:

.main-nav{
    background:#000;
    color:#fff;
    padding:5px;
} 
.main-nav ul{
    margin:0;
    padding:0;
} 
.main-nav li{
    list-style:none;
    float:left;
    padding-right:15px;
} 
.main-nav a{
    color:#fff;
    text-decoration:none;
}

返回前端页面刷新:

导航菜单

7、我们点击“About”,它会将我们带到“About”页面(“Service”也一样)。 细心的你将注意到,当我们转到About时,它的格式与index.php页面的格式完全相同,就好像它是一个帖子,但它不是,它是一个页面:

About页

我们不需要元数据或“阅读更多”链接。 所以我们需要做的是为我们的主题添加另一个页面。

8、在simple主题文件夹内创建一个新的文件page.php,现在返回并重新加载,About和Service页是空白的,因为它正在查看空文件。 所以我们可以做的是复制index.php中的代码并在page.php中使用它。
以下是我们将在代码中进行的一些更改:

<?php get_header(); ?>

<div class="main"> 
    <div class="container">
        <?php if(have_posts()) : ?>
        <?php while(have_posts()): the_post(); ?>
            <article class="post">
                <h3>
                    <?php the_title(); ?>
                </h3>
                <?php if(has_post_thumbnail()) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail(); ?>
                </div>
                <?php endif; ?>
                <?php the_content(); ?>
                <br>
            </article>
        <?php endwhile; ?>
        <?php else : ?>
            <?php echo wpautop('Sorry, No posts were found.'); ?>
        <?php endif; ?>
    </div>
</div>

<?php get_footer(); ?>

首先我们删除了标题中的链接和Read More按钮,然后把摘要the_excerpt换成了the_content,最后我们删除了整个meta元数据部分。保存代码,返回前端刷新页面:

修改后

现在看起来更像是一个普通的网页, Service页同样如此。 这是创建页面的方式,以及如何让导航定位该页面。 你还可以创建自定义页面和自定义模板,可以为不同的页面设置不同的布局,但这些知识我们将在下一个项目中学习。
构建主题还有很多其他内容,你可以做更多的事情,但在这里我不会作深入讲解;在这个项目中,我只想介绍制作主题的基础知识。 我们现在有页面和菜单。 在下一节中,我们将进入窗口小部件位置(widget),因为现在我们希望能够使用带有窗口小部件的侧边栏(sidebar)。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,976评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,249评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,449评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,433评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,460评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,132评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,721评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,641评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,180评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,267评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,408评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,076评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,767评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,255评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,386评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,764评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,413评论 2 358

推荐阅读更多精彩内容