簡單操作，為你的wordpress主題，加入額外sidebar

第 12 屆 iThome 鐵人賽

DAY 21

Modern Web

讓0基礎的你也能製作簡單wordpress主題系列第 21 篇

12th鐵人賽 sidebar wordpress主題製作新手篇小工具 widge

thewayeasy

2020-10-06 23:49:08

1469 瀏覽

分享至

Sidebar，相信對大家來說，也並不陌生。不過大家有沒有試過，原先使用的wordpress主題，sidebar不夠你使用的情況？想自己開設一個新的sidebar，放到頁面裡，又不希望使用這麼多wordpress插件？那麼看這篇就對了，看完你就會知道，這一切，其實也只是這麼簡單。

開啟小工具（widge）

假若你經常使用wordpress，就會知道，wordpress有提供一個地方，可以讓用戶，編輯siedbar，沒錯那個地方就是widge，小具。一般來說，我們會在外觀裏找到，不過現在，我們並沒看到他的存在，這情況就好像我們之前封面圖片一樣正常該出現的功能，卻不知道到那裡去。

小工具在沒設定顯示時，是不會看到的

所以我們在這裡需要先在function加設編碼，讓這wordpress功能，可以開放給我們使用。編碼是怎樣？就和之前加設封面的差不多，我們來看看編碼吧：

add_theme_support('widgets');

相信也不需要解釋，對吧，現在我們回到wordpress，並刷新一下就會看到小工具的存在了。

小工具在外觀再次出現了

加設新的sidebar

現在點進去小工具裏看看，你會看到wordpress加設sidebar的各樣小工具是在了，不過我們卻沒有任何地方，可以給我們拖放進去，我們看看下方兩幅圖，就會完全明白了。

正常的

右邊是有大量可以讓用家，把小工具放進去的欄位

我們的

右邊是空白的，什麼也沒有

那麼右邊的究竟是怎樣來？我們可以透過function，來登記並加入新的sidebar欄位，接下來我們先看看編碼吧，接著我再慢慢解釋吧。

完整編碼：

function sidebars()

{

  register_sidebar(
           array(
             'name'=> _('Main Sidebar'),
             'id'=> 'sidebar-01',
             'before_title'=> '<h4 class="widget-title"> ',
             'after_title' => '</h4>',
             'before_widget'=>'<li id="%1$s" class="widget %2$s list－unstyled">',
             'after_widget'  => '</li>',
           )
  );
}
add_action('widgets_init','sidebars');

編碼解釋：

因為我們這次又是登記，你會發現上載css以及javascript的編碼，頗為相似。只是我們這次加入了array，來設定內裏的一些參數。

name： sidebar的名稱，這個名稱之後會在小工具的右邊顯示出來，這裡我們同樣用_（）的格式來顯示文字，方便我們之後作翻譯。

id： sidebar的id

before_title：設定這sidebar在頁面使用時，出現的標題，會由什麼html編碼包裹著，例如h1 ,h2 這些。widget-title則是代表我們的標題，會跟著小工具的名字而定的，例如分類就會是分類，最新文章就會是最新文章

after_title： before_title設定了，什麼就關掉什麼。

before_widget：當顯示出來時，每項我們設定好的小工具，是否會用什麼html編碼來包裹著。

例如這裡我們因為設定了li，所以整個category就會由li所包裹著，這裡注意一下，我們加進去的bootstrap，並不能看到下層的項目，你會看到category下的，並不會受到任何影響。

關於%1$s以及%2$s的解釋：

我們先要理解一個要點，這裡其實運用了php的sprintf的概念，sprintf和echo有點像，不過它並不會讓文字直接顯示出來，而是只是加入到編碼裏。

sprintf亦有著編碼，分別要來獲取文字，數字等。我們在wordpress裏會較常看到的是這兩個：%s要來加入文字的，%d要來加入我們平常看的數字的，所以阿，這裡我們是要獲取文字的。

不過，問題是，究竟我們是從何去取得呢？我們可以到wordpress網站看看他們的原始檔，你會發現他們在widget，對於before_widget有著這樣的設定。

$params[0]['before_widget'] = sprintf($params[0]['before_widget'], $id, $classname_);

這個編碼看不懂是正常的，但只要知道，這個設定，讓之後每個生成出來的每個before_widget，都會透過sprintf，來加入id和classname這兩項，就足夠了。那麼既然系統已經會自動生成了了，我們就可以透過系統，內直接獲取class和id的名字了，這樣每個項目，都會有獨立的class和id。

怎樣獲得？沒錯就是我們還沒說的部分，1$和2$，透過這樣，就能夠讓系統去獲取第二個，以及第三個的數值了。因為php第一項是0而不是1，所以我們會是用1$，來得到id，以及2$，來得到class name。

after_widget：把before_widget的關好

add_action('widgets_init','sidebars');：最後記得一定要add_action，不然你登記的，出不了來。widgets_init就是這工具欄在wordpress的名稱，sidebars就是你設好的名稱。

好了，這樣就初步完成了。大家回到wordpress看看，就會看到新的欄位出現了。

小工具右邊有你設定好的欄位出現

之後大家可以在function sidebars裡面，register更多的欄位，不過記得把name，id這些更改一下就是了。

放到頁面內

等等，可別以為這樣就完成了。現在，雖然是可以基本的設定好，不過我們無論拖放任何小工具到欄位裡，完全不會顯示在頁面內的，這時候我們需要在希望出現的頁面內，加入編碼：

   <?php if( is_active_sidebar('sidebar-01')):?>

    <?php dynamic_sidebar('sidebar-01');?>

   <?php endif;?>

if( is_active_sidebar('sidebar-01')：假若是用家有設定到sidebar－01，sidebar－01根據你之前設定的id 來更改。

dynamic_sidebar：讓這sidebar顯示出來。

接著若你希望它出現在其他地方，只要用上方一樣的方法去設定就可以了。

調整位置與美化

不過我們現在的sidebar 是在上方位置，我們可以透過bootstrap來修改，做法和之前的差不多，大家可以自己試試看。

編碼參考

<div class="container">
 <div class="row">

  <div class="col-lg-2 col-md-2 mt-4 pr-3">

   <?php if( is_active_sidebar('sidebar-01')):?>

    <?php dynamic_sidebar('sidebar-01');?>

   <?php endif;?>

  </div>

  <div class="card col-lg-10 col-md-10 border-right-0">
 
   <?php get_template_part('include/postcontent');?>

  </div>
 </div>
</div>

美化部分，就需要用到css了，不過需要的技巧，其實和之前教過的，例如page_pagination差別並不大。

編碼參考

.sidebar-01-setting>li>ul>li{list-style: none; }

.sidebar-01-setting>li>ul>li>a{color: #17A2B8;}

.sidebar-01-setting>li>ul>li>a:hover{text-decoration: none; color: teal;}

text-decoration修改文字有沒有底線，以及可以更改底線的樣式。不過我們常用的多數都為none，不加入底線，以及underline，加入底線，想看更多其他的設定可以到mozilla官網去。