︿
✖ CLOSE

WordPress佈景主題製作【sidebar.php】

24 小時 之前│
Jin

本篇要來介紹製作WordPress佈景主題之一的sidebar.php檔案,WordPress中的sidebarr.php是用來專門顯示側邊欄,結合小工具的方式可以直接拖曳一些額外的功能,讓WordPress更加豐富,例如:粉絲團、最新文章、熱門文章…等等。

資料夾上建立一個 sidebar.php 頁面並放入下方語法。

<aside id="sidebar"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) :endif; ?></aside>

通常WordPress小工具都是使用此方法來註冊使用,通常一般的Blog版型側邊欄位大多是使用小工具來擺放功能,只要將以下語法放入functions.php之後,就能在小工具內看到所註冊的項目出現。

註冊側邊欄位的細項介紹
name:用來註冊小工具的顯示名稱
id:小工具ID標記,此項目不能重複,依照加入名稱修改,例如:側邊欄英文代表就是「sidebar」。
description:註解說明此小工具。
before_widget:小工具每個單項功能顯示區塊的「開始」。
after_before_widget:小工具每個單項功能顯示區塊的「結束」。
before_title:小工具每個單項功能顯示區塊的標題「開始」。
after_title:小工具每個單項功能顯示區塊的標題「結束」。

使用的方法很簡單,在資料夾內新增一個 sidebar.php 頁面,並放入下方語法。


<?php
function theme_slug_widgets_init() {
if ( function_exists('register_sidebar') ):
register_sidebar(array(
'name' => '側邊欄',
'id' => 'sidebar',
'description' => '顯示於每個網頁的右方。',
'before_widget' => '<section id="%1$s" class="sidebar-right">',
'after_widget' => '</section>',
'before_title' => '<div class="sidebar-title"><h1>',
'after_title' => '</h1></div>'
));
add_action( 'widgets_init', 'theme_slug_widgets_init' );
?>

在 style.css 內加入下方語法。

/*側邊欄*/
#sidebar{
float:right;
width:29%;
max-width:315px;
margin:0 auto
}

.sidebar-title{
margin:20px auto 0;
text-align:left;
color:#000;
font-weight:600
}

.sidebar-title h1{
background:#a7a7a7;
color:#fff;
border-top-left-radius:2px;
border-top-right-radius:2px;
text-align:center;
padding:2px;
font-size:13px;
}

#sidebar a {
color:#888
}

#sidebar a:hover {
color:#333;
text-decoration:none
}

#sidebar ul {
margin:0 auto;
background:#FFF;
color:#666;
font-size:16px;
}

#sidebar li {
padding:10px;
border-bottom:1px solid #E9E9E9;
border-radius:0;
list-style:none;
font-size:14px;
font-weight:400
}

#sidebar li>a {
display:block;
position:relative;
margin:0
}

完成之後,之後在其他頁面就能使用 <?php get_header(); ?> 語法來帶入sidebar.php頁面,所以各自頁面都是獨立處理的,也可以避免程式碼過於雜亂。

關於WordPress系列文章事項
文章版本:
第 1.0 版本,此WordPress系列教學純屬個人經驗,若有錯誤會重新修正並加上版本號碼,目前會持續調整樣式、整理佈景語法,最終版本會以最終版本告知(預計此系列文章會在12月前完成)。

▪ 相關文章