前面的章節(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了。
今天我們定義了一套主題的設(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ù)的更多干貨噢。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。