整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前面的章節中，我們創建了wordpress主題trans的公共模板：header.php頭部模板、sidebar.php側邊欄模板、footer.php底部模板，這樣就更加方便了trans主題的其它動態模板的開發。就比如，今天我們要開發的模板——文章列表頁模板，就不需要再去修改頭部、側邊欄、底部的代碼了。好了，閑話不多說，我們直接進入到今天的主題當中，怎樣添加trans主題的文章列表頁模板？
第一步：創建列表頁模板文件。
在trans主題目錄下創建一個列表頁模板的文件——archive.php。wordpress程序默認的文章列表頁模板的名字必須是：archive 或 categoty，也就是說，可以是archive.php，也可以是category.php，我們這里用archive.php。
第二步：引入頭部模板。
用sublime等編輯器打開trans主題的靜態模板list.html，把你的代碼復制到archive.php文件中。然后，在代碼找到</header>這句代碼，從<!doctype html>與</header>之間的所有代碼全部刪除，因為這段代碼，我們已經可以使用公共模板——header.php來代替了。
刪除后，我們再來引入header.php這個頭部模板：
< ?php get_header(); ?>
這時，我們可以正常打開列表頁了。但是有一個小問題：標題顯示的不是文章分類的名稱，仍然是網站的名稱。而我們需要的效果是，在列表頁時，我們需要顯示的是文章分類目錄的名稱。所以，我們要在header.php文件中的<title></title>標簽中修改一個調用代碼，
原代碼是：
< 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>
這段代碼的意思是：如果是網站的首頁，就顯示網站的名稱；如果是列表頁，就顯示為“分類目錄名稱 + 網站名稱”；否則就顯示“文章標題+網站名稱”。
第三步：引入右側邊欄模板。
在archive.php中找到< div class="c_right">標簽中的所有代碼，刪除掉，然后，在當前位置上，引入公共模板sidebar.php側邊欄模板，代碼如下：
< ?php get_sidebar(); ?>
這樣，我們就不需要再去修改原< div class="c_right">標簽內的代碼了，而只需直接把sidebar.php拿來用就可以了。
第四步：引入底部模板。
同上，在archive.php代碼中找到< footer>標簽，然后，把< footer>及它后面的所有代碼全部刪除掉，現在不需要了，因為，我們有footer.php底部公共模板了。刪除掉后，我們在原位置上直接引入這個footer.php底部模板，代碼如下：
< ?php get_footer(); ?>
在引入完頭部、側邊欄、底部的公共模板后，我們再來看看archive.php的模板代碼，如下圖：
然后，我們只需要修改archive.php模板代碼中的 < div class="c_left">標簽內部的代碼就可以了。
第五步：修改左側主體部分。
其實，我們查看trans主題的靜態代碼的效果時，我們可以看到，列表頁與首頁基本上是一樣的，只是左側的頂部多了一個面包屑導航。所以，我們只需要修改< div class="c_left">標簽里的代碼就可以了（如上圖所示）。我們可以先把archive.php代碼中的< div class="c_left">里的代碼全部刪除掉，然后把首頁模板index.php代碼中的< div class="c_left">所有代碼全部復制下來，粘貼到archive.php中。這段代碼包括了左側的文章列表以及分頁按鈕。這樣，archive.php的左側主體部分基本弄好。
第六步：添加面包屑導航。
我們在archive.php模板的< div class="c_left"> 標簽中的< div class="left_bottom">標簽的上方，添加發下代碼：
< 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的函數：
the_category(",")：獲取當前分類導航；$cat_c=get_the_category()：獲取當前分類的信息，并賦值給$cat_c這個變量
面包屑導航的主要作用，就是讓用戶可以看到當前頁面所在的個體位置。而且，可以通過點擊面包屑導航中的相關鏈接，可以跳轉到鏈接頁面，如：返回首頁（如下圖）。
?通過上面的幾步，我們就完成了wordpress主題trans的文章列表頁動態模板的修改。嗯，是不是有一個小小的發現：修改trans主題的列表頁模板要比修改首頁模板index.php所花的時間要少得多。是的，因為在修改index.php首頁模板時，我們需要所有的代碼，而修改archive.php模板時，我們只需要把公共模板拿來直接用就可以了，省去了大量的時間，這就是公共模板的魅力之所在。好了，本節就介紹到這里，如有疑問，歡迎點評。
ordPress圈內比較有名的培訓機構，米課算得上是一家了。
曾經在米課的群里聽過幾次直播。令我印象最深的，便是那些口頭語中帶的臟話！
他們推薦的編輯器是有名的Elementor。這確實是一款比較流行的編輯器?？梢暬慕缑妗㈦S意拖動的組件、豐富的插件支持。為什么我說它是“流行的”，而不是“最好的”呢？它并不是速度最快的，邏輯比較復雜，制作過程相當占用電腦資源。操作對新手并不友好。
這幾年一直在布局自己家的外貿站（大約80個），前前后后用過10幾款Themforest最流行的WordPress主題，做了漢化，也做過深度的優化，仔細評測了加載速度、優化得分、界面美觀度、新手上手難度等。
如果你是入門到中級水平，請直接看下面的結論吧，希望大家少走彎路，節約時間多賺錢。
1、目前銷量排名第一的Avada，功能強大，有自己的編輯器，但是各項設置太瑣碎。界面設計水平差點意思，用它的內置組件，恐怕美觀度上大打折扣。
我的AVADA案例：www.chinapowdermill.com
2、推薦我用得最多的兩款主題：Uncode、Impreza。這兩款主題也是Themeforest里評分最高的（兩款都是銷量大的主題里最高分，4.89分 ）
Uncode主題設計師一定是學院派。界面相當美觀，像素級的設計。自帶模板庫非常實用。這是我用過的能用最短時間搭建漂亮網站的主題。最近的更新進一步優化了性能，只加載頁面中用到的js和css，Google評分大幅提高。
我的Uncode案例：www.alpapowder.com
Impreza主題的設計也很優秀。它最大的一個優勢是，對js和css進行了單獨優化，加載量只有幾十k，這是我用過的所有主題中，js和css加載量最少的。帶來的直接影響是Google評分能達到99，加載速度領先別的主題。
我的Impreza案例：www.tecpacksolutions.com
借用攝影圈的一句話，相機后面的那顆頭比鏡頭更重要。WordPress以及它的主題、插件只是實現你想法的工具，你的思維是無價的。每個WP主題的開發思路，決定了他提供的功能，并不能滿足每個人的獨特需求。祝愿大家找到更適合自己的，外貿生意更上一層樓。
#外貿出口##制造業強國##wordprees##獨立站#
若有收獲，就點個贊吧
迎來到《真香，30天做一套wordpress主題》系列文章，我們的目標是（沒有蛀牙?。┙⒁惶兹碌膚ordpress主題，花上30天的時間閉關修煉，如果你看到的第一篇文章不是《基礎框架搭建》，建議你關注我們（數字江湖異志錄），從該系列的第一篇開始閱讀。
我們將盡量保持文章的循序漸進和通俗易懂，請確保自己已經掌握了那一篇文章的全部內容時才選擇跳過，不然可能會錯過關鍵的信息噢~
這里我們假定你已經知曉了以下基礎知識，這些基礎知識對理解文章內容是至關重要的：
1. HTML/CSS/JS基礎
2. PHP基礎
3. 如何使用Wordpress
4. 如何搭建web環境
如果你已經知曉了以上基礎知識，恭喜你，本系列的任何文章內容對你而言都沒有什么難度。
新版的wordpress增加了自定義主題設置的功能，并且官方也推薦開發者把相關的設置放到主題自定義里。默認的情況下，主題會自動開啟一些自定義參數（即使我們的主題還沒有使用它們）：
我們在主題文件夾下建立一個functions.php文件，這個文件會影響到主題的方方面面，首先我們建立自定義的主題參數連接：
// Customizer
function my_customize_register($wp_customize) {
};
add_action( 'customize_register', 'my_customize_register' );相關的主題設定我們都會寫到my_customize_register里，我們先來了解三個基本概念：
1. Section
2. Settings
3. Control
為了方便理解，我們可以把section當成設置的一級菜單，control是菜單里的設置控件，settings則是存儲設置的容器。
通過查閱wordpress文檔，我們找出了那些默認開啟的section的唯一id，然后我們在代碼里把它們去除：
// 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，這里我們先盤點一下目前的需求，我們需要對頁面的公共頂部進行設置，公共頂部含有以下元素：
1. 博客標題
2. 主標語（slogan/tagline）
3. 副標語
那么我們在functions.php里實現代碼是像這樣的：
$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
對應section、settings、control的添加，需要注意的是，我們在設置文本的title輸出那里用到了魔術方法__()，這是為后期主題的國際化做準備，魔術方法__()和魔術方法_e()都是為了主題多語言而存在的，它們之間的不同就是__()返回字符串，而_e()直接把文本在頁面里輸出，當然，它們都是根據當前系統設定的語言找到對應的語言包輸出的，主題國際化的相關內容我們在本系列的后期進行展開。
這樣設定之后，我們就可以在主題的任意位置調用這些設置好的內容，現在我們把它們在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>這里我們用到的內置方法是get_theme_mod，我們傳兩個參數給它，一個是主題設置的settings id，一個是默認值。
還記得我們在第1天建立框架時有添加的style amp-custom嗎，我們在里面添加一段css，讓我們的header凸顯出來：
<style amp-custom>
header {
width: 100vw;
height: 18.5185vw;
background: gray;
}
</style>刷新頁面，我們應該能看到這樣的頁面輸出：
這里，Hhacker's blog是我的blog名稱，其它的就是剛才我們設定的主標語和副標語的默認值了。
我們在主題自定義那里設定這些settings并點擊發布時，頁面里對應的部分就會發生變化了。
接下來我們順便把主題的favicon參數也實現了吧，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的內置控件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取到的內容是一個數字id，我們需要使用wp_get_attachment_url獲取圖片id對應的url路徑。
這樣我們刷新頁面 ，就能在標簽頁上看到我們設置好的的favicon了。
今天我們定義了一套主題的設置選項，之后我們會把所有跟主題相關的設置統統放到里面，wordpress的主題自定義設置設計得非常優雅，相對于以往的建立專門的主題設置頁面而言，在自定義設置里添加相應的控制選項非常簡單和直接，讓我們可以對主題設定進行統一管理。
明天（第3天）我們將真正將這一套公共頂部搭建起來，并且實現頁面在PC、平板、手機上的響應式布局。
如果你喜歡這個系列的文章，趕快關注我們吧，不要錯過后續的更多干貨噢。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
