WP主題開發16：wordpress主題trans，搜索頁模板如何創建？(WordPress 是如何給長文章進行內容分頁的？)

WP主題開發16：wordpress主題trans，搜索頁模板如何創建？

在wordpress主題的動態模板中，搜索頁模板並不是必須的。但是，為了對用戶更加的友好，可以讓用戶在wordpress網站上能夠通過搜索來查找自己的想要的文章內容，我們還是有必要給trans主題添加一個搜索頁模板。一般情況下，wordpress主題動態模板的搜索頁的整體布局和文章列表頁模板是差不多的，所以，我們可以參照文章列表頁來做。

第一步：創建一個search.php文件。

在wordpress主題trans目錄下創建一個search.php文件，這是wordpress程序要求的默認搜索頁模板的文件，名字必須是search。然後，把trans靜態模板search.html文件中的代碼全部複製到search.php文件中。

第二步：修改頭部的代碼。

在search.php文件中，刪除從< !doctype>到< /header>標籤之間的所有代碼。然後，在同樣的位置，通過wordpress函數來引入公共的頭部模板文件：

< ?php get_header(); //引入頭部模板 ?>

修改頭部模板header.php文件中的搜索表單的代碼，代碼如下：

< form action="< ?php bloginfo("siteurl"); ?>" method="get">

< input type="search" name="s" placeholder="搜索...">

< input type="submit" value="搜索">

</form>

註：第一個input輸入框的name值必須是 s （如上圖），這也是wordpress的硬性要求。否則，就搜索不到任何內容。

第三步：修改search.php的側邊欄代碼。

在search.php文件中，刪除< div class="c_right">標籤所包含的所有側邊欄代碼，然後，在這個位置上，引入sidebar.php側邊欄公共模板：

< ?php get_sidebar(); //引入側邊欄模板 ?>

第四步：修改搜索頁模板的底部代碼。

在搜索頁模板中，刪除從< footer>標籤到模板代碼結束的所有底部代碼，然後，在當前的位置上，添加如下代碼引入底部公共模板：

< ?php get_footer(); //引入底部模板 ?>

第五步：修改search.php的左側主體部分的麵包屑導航。

因為是搜索頁面模板，所以，這個麵包屑導航，我們要體現出搜索結果。所以，我們刪除search.php模板中< div class="left_top">標籤內部的所有代碼，替換成如下的代碼：

< ul>< li>< span class="dashicons-before dashicons-admin-generic"></span>搜索</li>< li>< a href="<?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首頁</a> > 搜索結果</li></ul>< ul> 關鍵詞「< ?php the_search_query(); ?>」共有 < ?php global $wp_query; echo $wp_query->found_posts; ?> 個搜索結果</ul>

上面代碼解說：

the_search_query()：輸出要搜索的關鍵詞；$wp_query：是wordpress提供的一個全局變數，它包含當前頁面的所有查詢數據；$wp_query->found_posts：搜索當前關鍵詞的數量

搜索頁面包屑導航效果如下圖：

第六步：修改搜索頁模板左側的文章列表。

刪除search.php搜索頁模板中< div class="left_bottom">標籤內部的所有代碼，然後，替換成如下代碼：

< ?php if ( have_posts() ): while ( have_posts() ) : the_post();?>< div class="list">< ul class="list_h">< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></ul>< ul class="list_con">< ul class="list_con_left">< a href="< ?php the_permalink(); ?>"> < ?php if(has_post_thumbnail()) { //如果有特色圖片，就調用特色圖片the_post_thumbnail( 'thumbnail' ,array( 'alt' => trim(strip_tags( $post->post_title )), 'title' => trim(strip_tags( $post->post_title )))); }else { //否則調用文章第一張圖片echo '<img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?></a></ul>< ul class="list_con_right">< li>< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ... </li>< li>< span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?> </span>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> </span>< span class="dashicons-before dashicons-visibility">< ?php echo get_post_meta($post->ID, 'views', true); ?> </span></li></ul></ul></div>

< ?php endwhile;endif;?>

這段代碼，我們在archive.php文章列表頁模板中我們已經介紹過了，就不多說了。

第七步：添加分頁代碼。

在trans靜態模板的代碼中，我們沒有分布代碼，這裡，我們添加上搜索結果的分頁效果代碼：

< div class="left_page">< ?phpthe_posts_pagination( array('mid_size' => 3, //當前頁碼數的 兩邊 顯示幾個頁碼。'prev_text' =>'<', //上一頁'next_text' =>'>', //下一南) );?></div>

這裡，我們使用到了wordpress提供的分頁函數the_posts_pagination()來實現搜索頁的文章列表的分頁效果。這個函數我們在修改首頁模板時，我們就介紹過了，如果想了解它，可以回到我們創建首頁模板index.php的文章去看看。

​好了，通過以上幾步，我們就完成了wordpress主題動態模板trans的搜索頁面模板的創建和修改。此時，我們在頭部搜索框中輸入關鍵詞進行搜索後，搜索結果如上圖所示。從這幾節課，我們可以看出，有了公共模板後，我們創建其它動態模板時，就方便多了，只要按照本節的幾個步驟，就可以很輕鬆地創建出wordpress主題的動態模板文件。如果喜歡我的文章，別忘了幫我「點贊、評論和關注我」哦。

WordPress 是如何給長文章進行內容分頁的？

　　我們可能會碰到這樣一種情況：發布的文章或頁面太長，想要把一篇文章分成好幾頁，有的時候是為了方便用戶閱讀，有的時候可以說是為了SEO，那麼WordPress 是如何給長文章進行內容分頁的？

　　WordPress系統是內置分頁功能的，要實現它極其簡單，只需要在你想要分頁的地方加入下面的代碼即可(注意，是在文本編輯模式下)：

　　<!–nextpage–>

　　但還有一個問題．要讓這個代碼真正能夠實現其分頁功能，還需要你所使用的WordPress主題支持，Wordpress的默認主題是支持的，如果你的主題不支持，那解決方法也很簡單，找到你主題文件內的single.php里的下面這行代碼：

　　在這段代碼下面加上：

　　即可。

　　如果你想了解更多，請查閱wp_link_pages()

　　如果你不想每次都切換到文本編輯模式，那你可以在 WordPress 編輯器添加「下一頁」分頁按鈕