[WordPress]footer底部增加小工具欄位

/ 分類: / 0 則回應

標籤: ,

通常一個佈景主題會分為頂部.內容區.側邊欄位.底部位置
側邊欄位我們可以利用外觀>小工具 利用拖拉的方式新增區塊
但是如果想要像側邊區塊那樣方便的增加小工具.大部分的主題有時卻無法那麼簡單的增加欄位
通常底部Footer的規畫主要是放.熱門文章.最新消息.下載區等區塊

首先

在主题的functions.php 中設定小工具函數

/* Add this code to functions.php file in your theme */
register_sidebar(array(
‘name’ => ‘底部欄位1’,
‘id’ => ‘footer-1’,
‘description’ => ‘First footer widget area’,
‘before_widget’ => ‘<div id=”footer-widget1″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(
‘name’ => ‘底部欄位2’,
‘id’ => ‘footer-2’,
‘description’ => ‘Second footer widget area’,
‘before_widget’ => ‘<div id=”footer-widget2″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(
‘name’ => ‘底部欄位3’,
‘id’ => ‘footer-3’,
‘description’ => ‘Third footer widget area’,
‘before_widget’ => ‘<div id=”footer-widget3″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

 

在外觀>小工具 增加底部三個區塊的位置
打開footer.php檔案

/* Add this code to footer.php file in your theme */<div id=“footer-widgets”><div id=“footer-widget1”><?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-1’) ) : ?><?php endif; ?>

</div>

<div id=“footer-widget2”>

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-2’) ) : ?>

<?php endif; ?>

</div>

<div id=“footer-widget3”>

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-3’) ) : ?>

<?php endif; ?>

</div>

</div>

<div style=“clear-both”></div>

小工具區塊設定CSS 樣式
打開style.css檔案

 

/* Add this code to style.css file in your theme */#footer-widgets {display: block;width:950px;margin–right:0;

background: #ffffff;

}

#footer-widget1 {

width: 260px;

float: left;

margin: 15px 10px 10px 30px;

padding: 10px;

background–color: #ffffff;

}

#footer-widget2 {

width: 260px;

float: left;

margin: 15px 10px 10px 15px;

padding: 10px;

background–color: #ffffff;

}

#footer-widget3 {

width: 260px;

float: left;

margin: 15px 10px 10px 15px;

padding: 10px;

background–color: #ffffff;

}

這樣就可以在外觀>小工具內看到 增加底部的三個區塊設定了.接下來拖拉就可以了
如果不滿意的話可以進去footer.php ,style.css修改細節即可

發表留言