WP主題開發(fā)14：怎樣添加wordpress主題tr

WP主題開發(fā)14：怎樣添加wordpress主題trans的文章列表頁模板？

前面的章節(jié)中，我們創(chuàng)建了wordpress主題trans的公共模板：header.php頭部模板、sidebar.php側(cè)邊欄模板、footer.php底部模板，這樣就更加方便了trans主題的其它動態(tài)模板的開發(fā)。就比如，今天我們要開發(fā)的模板——文章列表頁模板，就不需要再去修改頭部、側(cè)邊欄、底部的代碼了。好了，閑話不多說，我們直接進入到今天的主題當中，怎樣添加trans主題的文章列表頁模板？

第一步：創(chuàng)建列表頁模板文件。

在trans主題目錄下創(chuàng)建一個列表頁模板的文件——archive.php。wordpress程序默認的文章列表頁模板的名字必須是：archive 或 categoty，也就是說，可以是archive.php，也可以是category.php，我們這里用archive.php。

第二步：引入頭部模板。

用sublime等編輯器打開trans主題的靜態(tài)模板list.html，把你的代碼復(fù)制到archive.php文件中。然后，在代碼找到</header>這句代碼，從<!doctype html>與</header>之間的所有代碼全部刪除，因為這段代碼，我們已經(jīng)可以使用公共模板——header.php來代替了。

刪除后，我們再來引入header.php這個頭部模板：

< ?php get_header(); ?>

這時，我們可以正常打開列表頁了。但是有一個小問題：標題顯示的不是文章分類的名稱，仍然是網(wǎng)站的名稱。而我們需要的效果是，在列表頁時，我們需要顯示的是文章分類目錄的名稱。所以，我們要在header.php文件中的<title></title>標簽中修改一個調(diào)用代碼，

原代碼是：

< title>< ?php echo get_bloginfo("name"); ?></title>

修改成如下代碼：

< title>< ?php if(is_home()){echo get_bloginfo("name"); }else{if(is_category()){$cat_c=get_the_category();echo $cat_c[0]->cat_name; echo " - "; bloginfo("name");}else{the_title(); echo " - "; bloginfo("name");} } ?></title>

這段代碼的意思是：如果是網(wǎng)站的首頁，就顯示網(wǎng)站的名稱；如果是列表頁，就顯示為“分類目錄名稱 + 網(wǎng)站名稱”；否則就顯示“文章標題+網(wǎng)站名稱”。

第三步：引入右側(cè)邊欄模板。

在archive.php中找到< div class="c_right">標簽中的所有代碼，刪除掉，然后，在當前位置上，引入公共模板sidebar.php側(cè)邊欄模板，代碼如下：

< ?php get_sidebar(); ?>

這樣，我們就不需要再去修改原< div class="c_right">標簽內(nèi)的代碼了，而只需直接把sidebar.php拿來用就可以了。

第四步：引入底部模板。

同上，在archive.php代碼中找到< footer>標簽，然后，把< footer>及它后面的所有代碼全部刪除掉，現(xiàn)在不需要了，因為，我們有footer.php底部公共模板了。刪除掉后，我們在原位置上直接引入這個footer.php底部模板，代碼如下：

< ?php get_footer(); ?>

在引入完頭部、側(cè)邊欄、底部的公共模板后，我們再來看看archive.php的模板代碼，如下圖：

然后，我們只需要修改archive.php模板代碼中的 < div class="c_left">標簽內(nèi)部的代碼就可以了。

第五步：修改左側(cè)主體部分。

其實，我們查看trans主題的靜態(tài)代碼的效果時，我們可以看到，列表頁與首頁基本上是一樣的，只是左側(cè)的頂部多了一個面包屑導航。所以，我們只需要修改< div class="c_left">標簽里的代碼就可以了（如上圖所示）。我們可以先把archive.php代碼中的< div class="c_left">里的代碼全部刪除掉，然后把首頁模板index.php代碼中的< div class="c_left">所有代碼全部復(fù)制下來，粘貼到archive.php中。這段代碼包括了左側(cè)的文章列表以及分頁按鈕。這樣，archive.php的左側(cè)主體部分基本弄好。

第六步：添加面包屑導航。

我們在archive.php模板的< div class="c_left"> 標簽中的< div class="left_bottom">標簽的上方，添加發(fā)下代碼：

< div class="left_top">< ul>< li><span class="dashicons-before dashicons-admin-generic"></span><?php echo $cat_c[0]->cat_name; //獲取當前分類名 ?></li>< li>< a href="< ?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首頁</a> > < ?php the_category(","); ?></li></ul>< ul>< ?php $cat_desc=$cat_c[0]->category_description; //獲取當前分類的描述。if($cat_desc){echo $cat_desc; }else{echo $cat_c[0]->cat_name; //獲取當前分類名}?></ul></div>

這段代碼中，我們又用到了幾個wordpress的函數(shù)：

the_category(",")：獲取當前分類導航；$cat_c=get_the_category()：獲取當前分類的信息，并賦值給$cat_c這個變量

面包屑導航的主要作用，就是讓用戶可以看到當前頁面所在的個體位置。而且，可以通過點擊面包屑導航中的相關(guān)鏈接，可以跳轉(zhuǎn)到鏈接頁面，如：返回首頁（如下圖）。

?通過上面的幾步，我們就完成了wordpress主題trans的文章列表頁動態(tài)模板的修改。嗯，是不是有一個小小的發(fā)現(xiàn)：修改trans主題的列表頁模板要比修改首頁模板index.php所花的時間要少得多。是的，因為在修改index.php首頁模板時，我們需要所有的代碼，而修改archive.php模板時，我們只需要把公共模板拿來直接用就可以了，省去了大量的時間，這就是公共模板的魅力之所在。好了，本節(jié)就介紹到這里，如有疑問，歡迎點評。

ordPress圈內(nèi)比較有名的培訓機構(gòu)，米課算得上是一家了。

曾經(jīng)在米課的群里聽過幾次直播。令我印象最深的，便是那些口頭語中帶的臟話！

他們推薦的編輯器是有名的Elementor。這確實是一款比較流行的編輯器。可視化的界面、隨意拖動的組件、豐富的插件支持。為什么我說它是“流行的”，而不是“最好的”呢？它并不是速度最快的，邏輯比較復(fù)雜，制作過程相當占用電腦資源。操作對新手并不友好。

這幾年一直在布局自己家的外貿(mào)站（大約80個），前前后后用過10幾款Themforest最流行的WordPress主題，做了漢化，也做過深度的優(yōu)化，仔細評測了加載速度、優(yōu)化得分、界面美觀度、新手上手難度等。

如果你是入門到中級水平，請直接看下面的結(jié)論吧，希望大家少走彎路，節(jié)約時間多賺錢。

1、目前銷量排名第一的Avada，功能強大，有自己的編輯器，但是各項設(shè)置太瑣碎。界面設(shè)計水平差點意思，用它的內(nèi)置組件，恐怕美觀度上大打折扣。

我的AVADA案例：www.chinapowdermill.com

2、推薦我用得最多的兩款主題：Uncode、Impreza。這兩款主題也是Themeforest里評分最高的（兩款都是銷量大的主題里最高分，4.89分）

Uncode主題設(shè)計師一定是學院派。界面相當美觀，像素級的設(shè)計。自帶模板庫非常實用。這是我用過的能用最短時間搭建漂亮網(wǎng)站的主題。最近的更新進一步優(yōu)化了性能，只加載頁面中用到的js和css，Google評分大幅提高。

我的Uncode案例：www.alpapowder.com

Impreza主題的設(shè)計也很優(yōu)秀。它最大的一個優(yōu)勢是，對js和css進行了單獨優(yōu)化，加載量只有幾十k，這是我用過的所有主題中，js和css加載量最少的。帶來的直接影響是Google評分能達到99，加載速度領(lǐng)先別的主題。

我的Impreza案例：www.tecpacksolutions.com

借用攝影圈的一句話，相機后面的那顆頭比鏡頭更重要。WordPress以及它的主題、插件只是實現(xiàn)你想法的工具，你的思維是無價的。每個WP主題的開發(fā)思路，決定了他提供的功能，并不能滿足每個人的獨特需求。祝愿大家找到更適合自己的，外貿(mào)生意更上一層樓。

#外貿(mào)出口##制造業(yè)強國##wordprees##獨立站#

若有收獲，就點個贊吧

迎來到《真香，30天做一套wordpress主題》系列文章，我們的目標是（沒有蛀牙！）建立一套全新的wordpress主題，花上30天的時間閉關(guān)修煉，如果你看到的第一篇文章不是《基礎(chǔ)框架搭建》，建議你關(guān)注我們（數(shù)字江湖異志錄），從該系列的第一篇開始閱讀。

我們將盡量保持文章的循序漸進和通俗易懂，請確保自己已經(jīng)掌握了那一篇文章的全部內(nèi)容時才選擇跳過，不然可能會錯過關(guān)鍵的信息噢~

這里我們假定你已經(jīng)知曉了以下基礎(chǔ)知識，這些基礎(chǔ)知識對理解文章內(nèi)容是至關(guān)重要的：

1. HTML/CSS/JS基礎(chǔ)

2. PHP基礎(chǔ)

3. 如何使用Wordpress

4. 如何搭建web環(huán)境

如果你已經(jīng)知曉了以上基礎(chǔ)知識，恭喜你，本系列的任何文章內(nèi)容對你而言都沒有什么難度。

直奔主題

新版的wordpress增加了自定義主題設(shè)置的功能，并且官方也推薦開發(fā)者把相關(guān)的設(shè)置放到主題自定義里。默認的情況下，主題會自動開啟一些自定義參數(shù)（即使我們的主題還沒有使用它們）：

我們在主題文件夾下建立一個functions.php文件，這個文件會影響到主題的方方面面，首先我們建立自定義的主題參數(shù)連接：

// Customizer

function my_customize_register($wp_customize) {

};

add_action( 'customize_register', 'my_customize_register' );

相關(guān)的主題設(shè)定我們都會寫到my_customize_register里，我們先來了解三個基本概念：

1. Section

2. Settings

3. Control

為了方便理解，我們可以把section當成設(shè)置的一級菜單，control是菜單里的設(shè)置控件，settings則是存儲設(shè)置的容器。

通過查閱wordpress文檔，我們找出了那些默認開啟的section的唯一id，然后我們在代碼里把它們?nèi)コ?/p>

// Customizer

function my_customize_register($wp_customize) {

 // remove default section

 $wp_customize->remove_section('title_tagline');

 $wp_customize->remove_section('custom_css');

 $wp_customize->remove_section('static_front_page');

};

然后我們添加自己的section、control、settings，這里我們先盤點一下目前的需求，我們需要對頁面的公共頂部進行設(shè)置，公共頂部含有以下元素：

1. 博客標題

2. 主標語（slogan/tagline）

3. 副標語

那么我們在functions.php里實現(xiàn)代碼是像這樣的：

 $wp_customize->add_section( 'header_setting' , array(

 'title'=> __( 'Header Setting'),

 'priority'=> 10,

 ) );

 $wp_customize->add_setting( 'blog_title' , array(

 'default'=> get_bloginfo('name'),

 'transport'=> 'refresh',

 ) );

 $wp_customize->add_setting( 'main_tagline' , array(

 'default'=> 'Free the Internet',

 'transport'=> 'refresh',

 ) );

 $wp_customize->add_setting( 'sub_tagline' , array(

 'default'=> 'Across the Great Wall we can reach every corner in the world',

 'transport'=> 'refresh',

 ) );

 

 $wp_customize->add_control(

 'input_blog_title', 

 array(

 'label'=> __( 'Blog Title'),

 'section'=> 'header_setting',

 'settings'=> 'blog_title',

 'type'=> 'text',

 )

 );

 $wp_customize->add_control(

 'input_main_tagline', 

 array(

 'label'=> __( 'Main tagline'),

 'section'=> 'header_setting',

 'settings'=> 'main_tagline',

 'type'=> 'text',

 )

 );

 $wp_customize->add_control(

 'input_sub_tagline', 

 array(

 'label'=> __( 'Sub tagline'),

 'section'=> 'header_setting',

 'settings'=> 'sub_tagline',

 'type'=> 'textarea',

 )

 );

這里我們用到了三個方法：

1. add_section

2. add_settings

3. add_control

對應(yīng)section、settings、control的添加，需要注意的是，我們在設(shè)置文本的title輸出那里用到了魔術(shù)方法__()，這是為后期主題的國際化做準備，魔術(shù)方法__()和魔術(shù)方法_e()都是為了主題多語言而存在的，它們之間的不同就是__()返回字符串，而_e()直接把文本在頁面里輸出，當然，它們都是根據(jù)當前系統(tǒng)設(shè)定的語言找到對應(yīng)的語言包輸出的，主題國際化的相關(guān)內(nèi)容我們在本系列的后期進行展開。

這樣設(shè)定之后，我們就可以在主題的任意位置調(diào)用這些設(shè)置好的內(nèi)容，現(xiàn)在我們把它們在home.php里顯示出來看看。

 <body>

 <header>

 <?php echo get_theme_mod('blog_title') ?>

 <?php echo get_theme_mod('main_tagline', 'Free the Internet') ?>

 <?php echo get_theme_mod('sub_tagline', 'Across the Great Wall we can reach every corner in the world') ?>

 Header Area

 </header>

 </body>

這里我們用到的內(nèi)置方法是get_theme_mod，我們傳兩個參數(shù)給它，一個是主題設(shè)置的settings id，一個是默認值。

還記得我們在第1天建立框架時有添加的style amp-custom嗎，我們在里面添加一段css，讓我們的header凸顯出來：

 <style amp-custom>

 header {

 width: 100vw;

 height: 18.5185vw;

 background: gray;

 }

 </style>

刷新頁面，我們應(yīng)該能看到這樣的頁面輸出：

這里，Hhacker's blog是我的blog名稱，其它的就是剛才我們設(shè)定的主標語和副標語的默認值了。

我們在主題自定義那里設(shè)定這些settings并點擊發(fā)布時，頁面里對應(yīng)的部分就會發(fā)生變化了。

接下來我們順便把主題的favicon參數(shù)也實現(xiàn)了吧，favicon是顯示在瀏覽器標簽頁上的小圖標，我們按照之前的方法，建立一套settings和control，并綁定到我們的section里：

 $wp_customize->add_setting( 'favicon' , array(

 'default'=> '',

 'transport'=> 'refresh',

 'sanitize_callback'=> 'absint',

 ) );

 $wp_customize->add_control( new WP_Customize_Site_Icon_Control( $wp_customize, 'set_favicon',

 array(

 'label'=> __( 'Favicon' ),

 'description'=> __( 'Favicon is what you see in <strong>browser tabs</strong>, bookmark bars'),

 'section'=> 'header_setting',

 'settings'=> 'favicon',

 'width'=> 32, 

 'height'=> 32, 

 )

 ) );

這里我們直接使用了wordpress的內(nèi)置控件WP_Customize_Site_Icon_Control,這個控件可以直接對圖片進行上傳和裁剪。

然后我們在header.php公共頭里使用使用這個favicon：

<?php

 if ($icon=wp_get_attachment_url(get_theme_mod('favicon'))) {

 echo '<link rel="shortcut icon" href="'.$icon.'">';

 }

?>

這里需要注意的是我們直接get_theme_mod取到的內(nèi)容是一個數(shù)字id，我們需要使用wp_get_attachment_url獲取圖片id對應(yīng)的url路徑。

這樣我們刷新頁面，就能在標簽頁上看到我們設(shè)置好的的favicon了。

總結(jié)和預(yù)告

今天我們定義了一套主題的設(shè)置選項，之后我們會把所有跟主題相關(guān)的設(shè)置統(tǒng)統(tǒng)放到里面，wordpress的主題自定義設(shè)置設(shè)計得非常優(yōu)雅，相對于以往的建立專門的主題設(shè)置頁面而言，在自定義設(shè)置里添加相應(yīng)的控制選項非常簡單和直接，讓我們可以對主題設(shè)定進行統(tǒng)一管理。

明天（第3天）我們將真正將這一套公共頂部搭建起來，并且實現(xiàn)頁面在PC、平板、手機上的響應(yīng)式布局。

如果你喜歡這個系列的文章，趕快關(guān)注我們吧，不要錯過后續(xù)的更多干貨噢。

在線咨詢

上一篇：前端自適應(yīng)布局方法總結(jié)
下一篇：Web服務(wù)開發(fā)：Spring集成Swagger，3步

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

WP主題開發(fā)14：怎樣添加wordpress主題tr

直奔主題

總結(jié)和預(yù)告

您的項目需求