構(gòu)建HTML正文

接下來我們學(xué)習(xí)如何在正文中添加基本HTML標(biāo)簽：
1、打開index.php文件庸毫，在 body 標(biāo)簽內(nèi)加入以下代碼：

<header>
    <h1><?php bloginfo('name'); ?></h1>
</header> 

保存仔拟，返回瀏覽器刷新，我們看到頁面出現(xiàn)了標(biāo)題“從0到1制作WordPress主題”飒赃，差不多你已經(jīng)明白了 bloginfo('name') 函數(shù)可以動(dòng)態(tài)的把title內(nèi)容插入標(biāo)簽

標(biāo)題

2利花、如果我們想要更改前端輸出，我們可以轉(zhuǎn)到“設(shè)置”载佳，并將“站點(diǎn)標(biāo)題”更改為其他名字炒事，例如“Simple主題制作”，

修改站點(diǎn)標(biāo)題副標(biāo)題

保存更改蔫慧，返回前端頁面刷新就可以看到效果挠乳。
3、除了大標(biāo)題姑躲，我們還可以加入標(biāo)語睡扬。 用small標(biāo)簽配合bloginfo()，但不使用name參數(shù)黍析，我們使用 description 參數(shù)卖怜，如下面的代碼塊所示：

<header>
    <h1><?php bloginfo('name'); ?></h1>
    <small><?php bloginfo('description'); ?></small>
</header> 

保存代碼，返回瀏覽器刷新前端頁面阐枣，看到之前設(shè)置的站點(diǎn)副標(biāo)題出現(xiàn)在頁面上

副標(biāo)題

4马靠、接下來我們輸入更多代碼，如下：

<div class="main">
    <?php if(have_posts()) : ?> 
        post found
    <?php else : ?>
        <?php echo wpautop('Sorry, No posts were found'); ?>
    <?php endif; ?> 
</div> 

我們?cè)?strong>header標(biāo)簽下輸入了class為main的div代碼塊蔼两，WordPress使用稱為循環(huán)或主循環(huán)的東西來獲取我們的每篇博客帖子甩鳄，無論類別或其他任何類型。if(have_posts()) 查看是否有帖子宪哩，有帖子就返回 post found 娩贷，沒有帖子就進(jìn)入php else : 部分第晰，輸出 Sorry, No posts were found锁孟；endif 用來結(jié)束 if 語句彬祖。echo wpautop（）的作用是它會(huì)雙線換行并自動(dòng)將輸出內(nèi)容變成段落。

5品抽、保存代碼储笑，返回瀏覽器刷新頁面，可以看到post found圆恤，返回網(wǎng)站后臺(tái)進(jìn)入“文章”選項(xiàng)突倍，發(fā)現(xiàn)有一篇《你好，世界》的文章盆昙，點(diǎn)擊“編輯”來修改文章羽历，把標(biāo)題改成《從0到1制作WordPress主題》，然后點(diǎn)擊更新淡喜。

寫文章

6秕磷、回到index.php文件，將 post found 替換為以下代碼：

<?php while(have_posts()): the_post(); ?>
    <h3><?php the_title(); ?></h3>
    <div class="meta">
    Created By <?php the_author(); ?> on <?php the_date('l jS \of F Y h:i:s A'); ?>
    </div>
    <?php the_content(); ?>
<?php endwhile; ?> 

保存炼团，返回前端刷新頁面澎嚣，

顯示文章

剛才發(fā)生了什么？

• if(have_posts()) – 檢查博客是否有日志瘟芝。
• while(have_posts()) – 如果有日志易桃，那么當(dāng)博客有日志的時(shí)候，執(zhí)行下面 the_post() 這個(gè)函數(shù)锌俱。
• the_post() – 調(diào)用具體的日志來顯示晤郑。
• the_title() –調(diào)用日志標(biāo)題
• the_author() –它是輸出當(dāng)前日志作者的名字
• the_date('l jS \of F Y h:i:s A') – 調(diào)用日志發(fā)布日期，并以固定格式顯示
• the_content() 函數(shù)調(diào)用了 日志的內(nèi)容
• endwhile; – 遵照規(guī)則 #1贸宏，這里用于關(guān)閉 while()
• endif; – 關(guān)閉 if()

7贩汉、接下來我們加入footer 標(biāo)簽，讓網(wǎng)站動(dòng)態(tài)顯示版權(quán)信息锚赤，在body 結(jié)束標(biāo)簽上方輸入以下代碼：

<footer>
    <p>&copy; <?php the_date('Y'); ?>-<?php bloginfo('name'); ?></p>
</footer> 

回到前端刷新匹舞，我們看到了 ? 2018-從0到1制作WordPress主題。

現(xiàn)在來回顧以下本節(jié)添加的所有代碼

<header>
    <h1><?php bloginfo('name'); ?></h1>
    <small><?php bloginfo('description'); ?></small>
</header>

<div class="main">
    <?php if(have_posts()) : ?> 
        <?php while(have_posts()): the_post(); ?>
            <h3><?php the_title(); ?></h3>
            <div class="meta">
            Created By <?php the_author(); ?> on <?php the_date('l jS \of F Y h:i:s A'); ?>
            </div>
            <?php the_content(); ?>
        <?php endwhile; ?>
    <?php else : ?>
        <?php echo wpautop('Sorry, No posts were found'); ?>
    <?php endif; ?> 
</div>

<footer>
        <p>&copy; <?php the_date('Y'); ?>-<?php bloginfo('name'); ?></p>
</footer>