整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          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ù)的更多干貨噢。


          主站蜘蛛池模板: 国产在线视频一区二区三区| 国产综合精品一区二区三区| 一区二区三区视频网站| a级午夜毛片免费一区二区| 国内精品视频一区二区八戒| 亚洲视频在线一区| 久久99国产精品一区二区| 在线观看国产一区二区三区| 韩国一区二区视频| 99久久人妻精品免费一区| 久久4k岛国高清一区二区| 狠狠综合久久AV一区二区三区| 无码精品人妻一区| 国产91精品一区| 日韩一区二区三区视频久久| 日韩在线一区二区三区免费视频| 国产Av一区二区精品久久| 国产成人欧美一区二区三区| 国产精品视频一区国模私拍| 精品无码国产一区二区三区51安 | 在线观看免费视频一区| 国产成人片视频一区二区| 一区二区不卡久久精品| 久久精品国产一区二区三区| 中文字幕日本一区| 精品一区二区三区中文字幕| 亚洲欧洲一区二区| 亚洲AV成人精品一区二区三区| 亚洲国产AV一区二区三区四区| 亚洲av综合av一区二区三区| 精品国产一区二区三区久| 国产成人精品无码一区二区老年人| 波多野结衣中文字幕一区 | 精品一区二区三区波多野结衣| 久久精品一区二区三区资源网| 麻豆高清免费国产一区| 一区二区无码免费视频网站| 国产成人精品一区二区三在线观看| 久久精品一区二区影院| 日本伊人精品一区二区三区| 亚洲AV日韩AV一区二区三曲|