如何在wordpress主題中添加設(shè)置頁(yè)面

1、創(chuàng)建所需的文件

創(chuàng)新互聯(lián)建站是專業(yè)的前鋒網(wǎng)站建設(shè)公司，前鋒接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行前鋒網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

在進(jìn)行主題定制前，應(yīng)該首先創(chuàng)建一個(gè)可供自定義的“設(shè)置選項(xiàng)頁(yè)面”。創(chuàng)建設(shè)置選項(xiàng)頁(yè)的代碼需要放置在主題目錄下的functions.php文件中。如果我們的模板名為“OptionPage”，那么functions文件的路徑為：wp-contentthemesOptionPagefunctions.php。

我們不需要讓wordpress手動(dòng)加載它，在執(zhí)行時(shí)wordpress會(huì)自動(dòng)加載。

2、建立設(shè)置選項(xiàng)頁(yè)

首先第一步需要在后臺(tái)建立一個(gè)空白頁(yè)面供我們使用。我們通過(guò)add_aaction來(lái)實(shí)現(xiàn)這一步。Actions可以在wordpress執(zhí)行時(shí)的特定時(shí)間被響應(yīng)，例如，當(dāng)在控制面板創(chuàng)建菜單時(shí)，admin_menu就會(huì)被響應(yīng)執(zhí)行。因此，可以利用這些來(lái)實(shí)現(xiàn)我們所需的功能。這是我們創(chuàng)建選項(xiàng)頁(yè)的最基本的功能。

?php

// 設(shè)置選項(xiàng)頁(yè)

function themeoptions_admin_menu()

{

// 在控制面板的側(cè)邊欄添加設(shè)置選項(xiàng)頁(yè)鏈接

add_theme_page(“主題設(shè)置”, “主題選項(xiàng)”, ‘edit_themes’, basename(__FILE__), ‘themeoptions_page’);

}

function themeoptions_page()

{

// 設(shè)置選項(xiàng)頁(yè)面的主要功能

}

add_action(‘a(chǎn)dmin_menu’, ‘themeoptions_admin_menu’);

?

themeoptions_admin_menu()是在控制面板的側(cè)邊欄中添加一個(gè)鏈接，指向我們創(chuàng)建的選項(xiàng)頁(yè)：themeoptions_page。

add_theme_page() 的參數(shù)為：

頁(yè)面標(biāo)題：主題設(shè)置

菜單標(biāo)題：主題選項(xiàng)（p.s.為了區(qū)分顯示，頁(yè)面與菜單標(biāo)題我做了不同我命名）

作用功能：edit_themes；

Handle（句柄）：當(dāng)前文件；

執(zhí)行的函數(shù)：themeoptions_page；

現(xiàn)在后臺(tái)控制面板側(cè)邊欄的處就多了一個(gè)“主題設(shè)置”的菜單，但是現(xiàn)在還是空白的，我們后面要實(shí)現(xiàn)的定制內(nèi)容就在這個(gè)空白頁(yè)面上創(chuàng)建。

3、添加選項(xiàng)和字段

現(xiàn)在我們就可以在剛創(chuàng)建的空白頁(yè)面上添加我們的選項(xiàng)和字段。這個(gè)頁(yè)面你可以根據(jù)自己的需要進(jìn)行樣式風(fēng)格化，但在本教程中我們將使用wordpress默認(rèn)的類，這樣可以節(jié)省我們的時(shí)間并且看起來(lái)更加原生。

頁(yè)面內(nèi)容的代碼需包含在 themeoptions_page()函數(shù)內(nèi)。首先，我們先添加一個(gè)class=”wrap”的div容器；然后，在頭部添加一個(gè)默認(rèn)圖標(biāo)作為作為頁(yè)面標(biāo)題；最后是設(shè)計(jì)表單。

div class=“wrap”

div id=“icon-themes” class=“icon32”br //div

h2主題設(shè)置/h2

form method=“POST” action=“”

input type=“hidden” name=“update_themeoptions” value=“true” /

pinput type=“submit” name=“submit” id=“submit” class=“button button-primary” value=“保存更改”/p

/form

/div

在表單中，首先我們需要添加一個(gè)隱藏的值，通過(guò)它來(lái)檢查更新是否已經(jīng)提交。然后添加一個(gè)提交按鈕，這里我也使用wordpress默認(rèn)的按鈕樣式?，F(xiàn)在的效果為：

現(xiàn)在我們已經(jīng)創(chuàng)建了設(shè)置選項(xiàng)頁(yè)的基本結(jié)構(gòu)，下面我們開始根據(jù)之前制定的內(nèi)容進(jìn)行完善：

首先，我們要允許主題使用者可以更改顏色方案。對(duì)于這一點(diǎn)，我們需要一個(gè)下拉列表提供可用的配色方案。

其次，增加兩個(gè)廣告位的內(nèi)容，我們需要增加兩個(gè)文本框來(lái)輸入圖片的URL及廣告鏈接URL。

最后，用戶可選擇是否顯示搜索框。這一點(diǎn)，我們通過(guò)添加復(fù)選框來(lái)實(shí)現(xiàn)。

代碼如下：

function themeoptions_page()

{

// 這是產(chǎn)生主題選項(xiàng)頁(yè)面的主要功能

?

div

div id=“icon-themes”br //div

h2主題設(shè)置/h2

form method=“POST” action=“”

input type=“hidden” name=“update_themeoptions” value=“true” /

h4主題配色方案/h4

select name =“colour”

?php $colour = get_option(‘mytheme_colour’); ?

option value=“gray” ?php if ($colour==’gray’) { echo ‘selected’; } ? 灰色/option

option value=“blue” ?php if ($colour==’blue’) { echo ‘selected’; } ?淺藍(lán)/option

option value=“pink” ?php if ($colour==’pink’) { echo ‘selected’; } ?粉紅/option

/select

h4圖片廣告位（1）/h4

pinput type=“text” name=“ad1image” id=“ad1image” size=“32” value=“?php echo get_option(‘mytheme_ad1image’); ?”/ 廣告圖片/p

pinput type=“text” name=“ad1url” id=“ad1url” size=“32” value=“?php echo get_option(‘mytheme_ad1url’); ?”/ 廣告鏈接/p

h4圖片廣告位（2）/h4

pinput type=“text” name=“ad2image” id=“ad2image” size=“32” value=“?php echo get_option(‘mytheme_ad2image’); ?”/ 廣告圖片/p

pinput type=“text” name=“ad2url” id=“ad2url” size=“32” value=“?php echo get_option(‘mytheme_ad2url’); ?”/ 廣告鏈接/p

h4input type=“checkbox” name=“display_search” id=“display_search” ?php echo get_option(‘mytheme_display_search’); ? / 顯示搜索框/h4pinput type=“submit” name=“bcn_admin_options” value=“更新數(shù)據(jù)”//p

/form

/div

?php

}

到這里選項(xiàng)頁(yè)面的內(nèi)容就已經(jīng)基本構(gòu)建完畢了。

4、數(shù)據(jù)庫(kù)更新

到目前為止，我們已經(jīng)創(chuàng)建了一個(gè)主題選項(xiàng)頁(yè)面，下一步要做的就是如何將數(shù)據(jù)透過(guò)POST提交的wordpress數(shù)據(jù)庫(kù)。要做到這一點(diǎn)，需要?jiǎng)?chuàng)建一個(gè)新的功能函數(shù)themeoptions_update()，這個(gè)函數(shù)將會(huì)被themeoptions_page()調(diào)用，所以將下面的代碼添加到themeoptions_page()函數(shù)的最上面。

if ( $_POST[‘update_themeoptions’] == ’true’ ) { themeoptions_update(); }

下一步是增加一個(gè)更新函數(shù)。

function themeoptions_update()

{

// 數(shù)據(jù)更新驗(yàn)證

update_option(‘mytheme_colour’, $_POST[‘colour’]);

update_option(‘mytheme_ad1image’, $_POST[‘a(chǎn)d1image’]);

update_option(‘mytheme_ad1url’, $_POST[‘a(chǎn)d1url’]);

update_option(‘mytheme_ad2image’, $_POST[‘a(chǎn)d2image’]);

update_option(‘mytheme_ad2url’, $_POST[‘a(chǎn)d2url’]);

if ($_POST[‘display_search’]==’on’) { $display = ‘checked’; } else { $display = ”; }

update_option(‘mytheme_display_search’, $display);

}

5、調(diào)用選項(xiàng)定制主題

我們主題的默認(rèn)樣式文件為style.css，如果使用其他的配色方案，我們需要建立相應(yīng)的樣式文件，例如本例中的blue.css、pink.css，style.css為默認(rèn)的灰色。

為了切換配色方案樣式表，需要在主題header中加入以下代碼：

link rel=“stylesheet” href=“?php bloginfo(‘stylesheet_directory’); ?/default.css” type=“text/css”

link rel=“stylesheet” href=“?php bloginfo(‘stylesheet_directory’); ?/?php echo get_option(‘mytheme_colour’); ?.css” type=“text/css”

增加廣告位圖片—在你想要放置廣告的地方添加以下代碼：

a href=“?php echo get_option(‘mytheme_ad1url’); ?”img src=“?php echo get_option(‘mytheme_ad1image’); ?” height=“125” width=“125” //a

a href=“?php echo get_option(‘mytheme_ad2url’); ?”img src=“?php echo get_option(‘mytheme_ad2image’); ?” height=“125” width=“125” //a

是否顯示搜索框—在需要放置搜索框的地方添加以下代碼，當(dāng)用戶選擇顯示搜索框時(shí)會(huì)顯示，否則則不顯示：

?php if ( get_option(‘mytheme_display_search’) == ‘checked’) { ?

h3搜索框/h3

form method=“get” id=“searchform” action=“?php echo esc_url( home_url( ‘/’ ) ); ?”

input type=“text” name=“s” id=“s” placeholder=“?php esc_attr_e( ‘Search’, ’85Ryan’ ); ?” /

input type=“submit” name=“submit” id=“searchsubmit” value=“搜索” /

/form

?php } ?

本文固定鏈接:

轉(zhuǎn)載請(qǐng)注明: 品味人生

2013年08月22日

于 前端開拓者 發(fā)表

wordpress搜索框添加到導(dǎo)航欄最右邊

是通過(guò)DIV+CSS修改的，

先找到你的導(dǎo)航欄的DIV，如果只有個(gè)導(dǎo)航條的通常用了個(gè)div，然后導(dǎo)航菜單使用的ul,分類用li。

如果想把搜索框添加進(jìn)導(dǎo)航條的右側(cè)，個(gè)人做法是在原先的div中給導(dǎo)航條再添加個(gè)div,并添加新的class或id，另外search的搜索框使用另個(gè)div加搜索的class或id,

然后就是調(diào)整CSS的屬性了。

以上只是方法，具體看實(shí)際操作，希望對(duì)你有啟發(fā)吧，

wordpress 怎么做下拉選項(xiàng)

1.functions.php 注冊(cè)菜單項(xiàng)。

// 注冊(cè)菜單

add_theme_support( 'Primary Menu );或register_nav_menu( 'primary', __( 'Primary Menu', '主題名稱' ) );

2.后臺(tái)添加菜單,名為：Primary Menu。

2.header.php 菜單位置調(diào)用如下代碼：

你上面寫的那段要用下面這段代碼替換：

?php wp_nav_menu( array(

'theme_location' = 'primary',

'container_id' = 'primaryNav' ,

'menu_class' = 'fr ',

'menu_id' = 'topnav',

'link_before' = 'span',

'link_after' = '/span',

) );

?

然后用firebug，查看菜單位置的源碼，修改上面的相應(yīng)參數(shù)。