fbpx

《WP筆記》如何將佈景設定改為後台設定

加入Wordpress佈景製作的人愈來愈多,最近網友Carrie也正好在研究佈景製作,問起了丫湯後台設定的寫法,該如何去整合一些設定到後台,其實丫湯也是參考其它佈景的設定,再加上自己的一些想法來將設定寫入後台,因此我們今天就來大概說明一下簡易的後台設定,如果對於製作佈景有興趣的可以參考看看哦,不過內容對於不太熟悉php的朋友們可能有點難懂,慢慢研究囉。

範例說明-將RSS位址設定移至WP後台:

比如我們原本寫在佈景的RSS程式碼如下,而我們主要就是要將http://feeds2.feedburner.com/steach  這一個網址修改成能夠在後台設定,請往下來看。

<a href="http://feeds2.feedburner.com/steach" title="訂閱『<?php bloginfo('name'); ?>』的RSS"  target="_blank">

    <img src="<?php bloginfo('template_url'); ?>/i/rss_32.gif" alt="訂閱RSS">

</a>

先將以下這一大段編輯進functions.php裡,我們後面再來一一說明。

<?php

class SOptions {

 

    function getOptions() {

        $options = get_option('S_options');

        if (!is_array($options)) {

            $options['feed_url'] = '';

            update_option('S_options', $options);

        }

        return $options;

    }

 

    function add() {

        if(isset($_POST['S_save'])) {

            $options = SOptions::getOptions();    

            $options['feed_url'] = stripslashes($_POST['feed_url']);

            update_option('S_options', $options);

        } else {

            SOptions::getOptions();

        }

        add_theme_page ('佈景設定','佈景設定', 'edit_themes', basename(__FILE__), array('SOptions', 'display'));

    }

    function display() {

        $options = SOptions::getOptions();

?>

        <h2>佈景設定</h2>

            請輸入RSS位址:

            <br />

             <input type="text" name="feed_url" id="feed_url" class="code" size="60" value="<?php echo($options['feed_url']); ?>">                 

        <p class="submit">

            <input class="button-primary" type="submit" name="S_save" value="儲存設定" />

        </p>

 

<?php

    }

}

add_action('admin_menu', array('SOptions', 'add'));

?>

再來將原本寫在前端佈景RSS的程式碼改為以下程式碼,也就是將原本的RSS網址改成讀取feed_url這一個變數,並在前面加上一個讀取設定。

<?php $options = get_option('S_options');?>

<a href="<?php echo $feed_url; ?>" title="訂閱『<?php bloginfo('name'); ?>』的RSS"  target="_blank">

    <img src="<?php bloginfo('template_url'); ?>/i/rss_32.gif" alt="訂閱RSS">

</a>

我們到後台看,也會多了一個佈景設定,裡面就有剛剛寫進functions.php裡的設定項目,如此一來就可以從後台直接設定RSS。

01

functions.php設定說明:

一開始這一段是用來宣告設定變數,S_optoins是丫湯設定的佈景設定名稱,你也可以自己修改為其它名稱,而feed_url就是定義給rss位址的變數,一樣你可以改為其它名稱,前面這一段是宣告變數的陣列,如果你還有更多的變數要一同宣告,可以再往下加options,比如$options['email']='';,接續在feed_url下方下去即可。

<?php

class SOptions {

    function getOptions() {

        $options = get_option('S_options');

        if (!is_array($options)) {

              $options['feed_url'] = '';

             update_option('S_options', $options);

        }

        return $options;

    }

stripslashes這一個php函數就不特別說明是為什麼要加入這個步驟,如果想深入了解請Google,只要先記得,只要是資料輸入框的變數都要加入此步驟,有多個變數的話一樣往下接續寫即可,而下方的佈景設定則是要顯示在WP後台的選單名稱,你也可以自行修改其它名稱。

function add() {

        if(isset($_POST['S_save'])) {

            $options = SOptions::getOptions();    
            $options['feed_url'] = stripslashes($_POST['feed_url']);

        } else {

            SOptions::getOptions();

        }

        add_theme_page ('佈景設定','佈景設定', 'edit_themes', basename(__FILE__), array('SOptions', 'display'));

    }

    function display() {

        $options = SOptions::getOptions();

?>

再來就是顯示在後台選項的項目,輸入框的對照value設定為feed_url變數。

<h2>佈景設定</h2>

請輸入RSS位址:

<br /><input type="text" name="feed_url" id="feed_url" class="code" size="60" value="<?php echo($options['feed_url']); ?>">

最後再加入啟用剛剛宣告的設定到admin_menu也就是後台的選單中,這樣就完成囉。

<?php

    }

}

add_action('admin_menu', array('SOptions', 'add'));

?>

 

以上全部的步驟看起來很像有點複雜,其實很簡單,只是需要實際操作過一遍,熟能生巧,這只是最簡單的將資料寫進資料庫,再去做讀取而已,不用想的太複雜,而其它更多的應用方式就要靠自己去變化囉,像是加入jquery選單、是否啟用項目等等,你也可以拆解丫湯寫過的佈景對照,或許可以更清楚。

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

5 個留言

  1. Avatar 阿成表示:

    早~阿湯哥
    小弟按照您的步驟,但程式好像沒運作@@~
    是不是哪裡還需要調整呢?
    小弟最近想依照不同分頁做不同頁面的SIDEBAR想說這功能剛好可以符合需求
    可是沒動作,沒辦法進行了~~
    麻煩阿湯哥解圍啊:P

    阿湯說:

    不同頁面做不同sidebar是要去修改每個頁面的檔案,並不是做後台設定哦

  2. Avatar 阿成表示:

    阿湯哥你好~
    可以請教阿湯哥是如何觀察WP的寫法的嗎?
    我看了您的寫法,然後在WP裡頭追追看他是怎寫的;但是我發現完全不能逆推~~
    所以想請教阿湯哥是如何做到的呢?

    阿湯說:

    所有的學習都是從基礎開始,你要先學會了解網頁最基礎的結構,慢慢練習自然就會了

  3. Avatar Carrie表示:

    太感激ㄚ湯出了這篇教學文,你這麼講解我就有點了解,當然還是要自己手作之後比較能夠完全理解啦~

    沒想到我居然現在才看到 😛

    阿湯說:

    大概寫一下,當做是筆記啦~~

  4. Avatar 夢實現表示:

    這..
    要花點時間才能弄懂吧~~

    對了~~
    阿湯~~
    我有收到簡訊~~
    說什麼主機IP已更新
    要我更新DNS?!?!
    那是什麼意思啊?!?!
     
     
    我的新文:
    別在下豪雨啦~~ 
    http://bossgood.com/?p=94
     
     
     
     

    阿湯說:

    你的網址在我這裡,所以之後收到這個都不用理,我會幫你更新的

  5. Avatar 小安網站表示:

    搶沙發!!只不過這的確是個可以讓佈景主題人性化一點的方法呢!
    謝謝教學啦!

    阿湯說:

    嗯嗯

發表留言 »

姓名(*)
信箱(*)