如题所述
1ãå建æéçæ件
å¨è¿è¡ä¸»é¢å®å¶åï¼åºè¯¥é¦å å建ä¸ä¸ªå¯ä¾èªå®ä¹çâ设置é项页é¢âãå建设置é项页ç代ç éè¦æ¾ç½®å¨ä¸»é¢ç®å½ä¸çfunctions.phpæ件ä¸ãå¦ææ们ç主é¢å为âOptionPageâï¼é£ä¹functions.phpæ件çè·¯å¾ä¸ºï¼\wp-content\themes\OptionPage\functions.phphã æ们ä¸éè¦è®©wordpressæå¨å è½½å®ï¼å¨æ§è¡æ¶wordpressä¼èªå¨å è½½ã
2ã建ç«è®¾ç½®é项页
é¦å 第ä¸æ¥éè¦å¨åå°å»ºç«ä¸ä¸ªç©ºç½é¡µé¢ä¾æ们使ç¨ãæ们éè¿add_aactionæ¥å®ç°è¿ä¸æ¥ãActionså¯ä»¥å¨wordpressæ§è¡æ¶çç¹å®æ¶é´è¢«ååºï¼ä¾å¦ï¼å½å¨æ§å¶é¢æ¿å建èåæ¶ï¼admin_menuå°±ä¼è¢«ååºæ§è¡ãå æ¤ï¼å¯ä»¥å©ç¨è¿äºæ¥å®ç°æ们æéçåè½ãè¿æ¯æ们å建é项页çæåºæ¬çåè½ã
<?php
// 设置é项页
function themeoptions_admin_menu()
{
// å¨æ§å¶é¢æ¿ç侧边æ æ·»å 设置é项页é¾æ¥
add_theme_page("主é¢è®¾ç½®", "主é¢é项", 'edit_themes', basename(__FILE__), 'themeoptions_page');
}
function themeoptions_page()
{
// 设置é项页é¢ç主è¦åè½
}
add_action('admin_menu', 'themeoptions_admin_menu');
?>
themeoptions_admin_menu() æ¯å¨æ§å¶é¢æ¿ç侧边æ ä¸æ·»å ä¸ä¸ªé¾æ¥ï¼æåæ们å建çé项页ï¼themeoptions_pageã
add_theme_page() çåæ°ä¸ºï¼
页é¢æ é¢ï¼ä¸»é¢è®¾ç½®
èåæ é¢ï¼ä¸»é¢é项ï¼p.s.为äºåºåæ¾ç¤ºï¼é¡µé¢ä¸èåæ é¢æåäºä¸åæå½åï¼
ä½ç¨åè½ï¼edit_themesï¼
Handleï¼å¥æï¼ï¼å½åæ件ï¼
æ§è¡çå½æ°ï¼themeoptions_pageï¼
ç°å¨åå°æ§å¶é¢æ¿ä¾§è¾¹æ çå¤å°±å¤äºä¸ä¸ªâ主é¢è®¾ç½®âçèåï¼ä½æ¯ç°å¨è¿æ¯ç©ºç½çï¼æ们åé¢è¦å®ç°çå®å¶å 容就å¨è¿ä¸ªç©ºç½é¡µé¢ä¸å建ã
3ãæ·»å é项åå段
ç°å¨æ们就å¯ä»¥å¨åå建ç空ç½é¡µé¢ä¸æ·»å æ们çé项åå段ãè¿ä¸ªé¡µé¢ä½ å¯ä»¥æ ¹æ®èªå·±çéè¦è¿è¡æ ·å¼é£æ ¼åï¼ä½å¨æ¬æç¨ä¸æ们å°ä½¿ç¨wordpressé»è®¤çç±»ï¼è¿æ ·å¯ä»¥èçæ们çæ¶é´å¹¶ä¸çèµ·æ¥æ´å åçã
页é¢å 容ç代ç éå å«å¨ themeoptions_page() å½æ°å ãé¦å ï¼æ们å æ·»å ä¸ä¸ª class="wrap" ç div 容å¨ï¼ç¶åï¼å¨å¤´é¨æ·»å ä¸ä¸ªé»è®¤å¾æ ä½ä¸ºä½ä¸ºé¡µé¢æ é¢ï¼æåæ¯è®¾è®¡è¡¨åã
function themeoptions_page()
{
// here's the main function that will generate our options page
?>
<div class="wrap">
<div id="icon-themes" class="icon32"><br /></div>
<h2>主é¢è®¾ç½®</h2>
<form method="POST" action="">
<input type="hidden" name="update_themeoptions" value="true" />
<p><input type="submit" class="button-primary" name="bcn_admin_options" value="æ´æ°æ°æ®"/></p>
</form>
</div>
<?php
}
å¨è¡¨åä¸ï¼é¦å æ们éè¦æ·»å ä¸ä¸ªéèçå¼ï¼éè¿å®æ¥æ£æ¥æ´æ°æ¯å¦å·²ç»æ交ãç¶åæ·»å ä¸ä¸ªæ交æé®ï¼è¿éæä¹ä½¿ç¨wordpressé»è®¤çæé®æ ·å¼ãç°å¨çææ为ï¼
ç°å¨æ们已ç»å建äºè®¾ç½®é项页çåºæ¬ç»æï¼ä¸é¢æ们å¼å§æ ¹æ®ä¹åå¶å®çå 容è¿è¡å®åï¼
é¦å ï¼æ们è¦å 许主é¢ä½¿ç¨è å¯ä»¥æ´æ¹é¢è²æ¹æ¡ã对äºè¿ä¸ç¹ï¼æ们éè¦ä¸ä¸ªä¸æå表æä¾å¯ç¨çé è²æ¹æ¡ã
å ¶æ¬¡ï¼å¢å 两个广åä½çå 容ï¼æ们éè¦å¢å 两个ææ¬æ¡æ¥è¾å ¥å¾ççURLå广åé¾æ¥URLã
æåï¼ç¨æ·å¯éæ©æ¯å¦æ¾ç¤ºæç´¢æ¡ãè¿ä¸ç¹ï¼æ们éè¿æ·»å å¤éæ¡æ¥å®ç°ã
代ç å¦ä¸ï¼
function themeoptions_page()
{
// è¿æ¯äº§ç主é¢é项页é¢ç主è¦åè½
?>
<div class="wrap">
<div id="icon-themes" class="icon32"><br /></div>
<h2>主é¢è®¾ç½®</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'; } ?>>æµ è</option>
<option value="pink" <?php if ($colour=='pink') { echo 'selected'; } ?>>ç²çº¢</option>
</select>
<h4>å¾ç广åä½ï¼1ï¼</h4>
<p><input type="text" name="ad1image" id="ad1image" size="32" value="<?php echo get_option('mytheme_ad1image'); ?>"/> 广åå¾ç</p>
<p><input type="text" name="ad1url" id="ad1url" size="32" value="<?php echo get_option('mytheme_ad1url'); ?>"/> 广åé¾æ¥</p>
<h4>å¾ç广åä½ï¼2ï¼</h4>
<p><input type="text" name="ad2image" id="ad2image" size="32" value="<?php echo get_option('mytheme_ad2image'); ?>"/> 广åå¾ç</p>
<p><input type="text" name="ad2url" id="ad2url" size="32" value="<?php echo get_option('mytheme_ad2url'); ?>"/> 广åé¾æ¥</p>
<h4><input type="checkbox" name="display_search" id="display_search" <?php echo get_option('mytheme_display_search'); ?> /> æ¾ç¤ºæç´¢æ¡</h4>
<p><input type="submit" class="button-primary" name="bcn_admin_options" value="æ´æ°æ°æ®"/></p>
</form>
</div>
<?php
}
å°è¿éé项页é¢çå 容就已ç»åºæ¬æ建å®æ¯äºã
4ãæ°æ®åºæ´æ°
å°ç®å为æ¢ï¼æ们已ç»å建äºä¸ä¸ªä¸»é¢é项页é¢ï¼ä¸ä¸æ¥è¦åçå°±æ¯å¦ä½å°æ°æ®éè¿POSTæ交çwordpressæ°æ®åºãè¦åå°è¿ä¸ç¹ï¼éè¦å建ä¸ä¸ªæ°çåè½å½æ°themeoptions_update()ï¼è¿ä¸ªå½æ°å°ä¼è¢«themeoptions_page()è°ç¨ï¼æ以å°ä¸é¢ç代ç æ·»å å°themeoptions_page()å½æ°çæä¸é¢ã
if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update(); }
ä¸ä¸æ¥æ¯å¢å ä¸ä¸ªæ´æ°å½æ°ã
function themeoptions_update()
{
// æ°æ®æ´æ°éªè¯
update_option('mytheme_colour', $_POST['colour']);
update_option('mytheme_ad1image', $_POST['ad1image']);
update_option('mytheme_ad1url', $_POST['ad1url']);
update_option('mytheme_ad2image', $_POST['ad2image']);
update_option('mytheme_ad2url', $_POST['ad2url']);
if ($_POST['display_search']=='on') { $display = 'checked'; } else { $display = ''; }
update_option('mytheme_display_search', $display);
}
5ãè°ç¨é项å®å¶ä¸»é¢
5.1 æ´æ¹é è²æ¹æ¡
æ们主é¢çé»è®¤æ ·å¼æ件为 style.cssï¼å¦æ使ç¨å ¶ä»çé è²æ¹æ¡ï¼æ们éè¦å»ºç«ç¸åºçæ ·å¼æ件ï¼ä¾å¦æ¬ä¾ä¸ç blue.cssãpink.cssï¼style.css 为é»è®¤çç°è²ã
为äºåæ¢é è²æ¹æ¡æ ·å¼è¡¨ï¼éè¦å¨ä¸»é¢ 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">
5.2 å¢å 广åä½å¾ç
å¨ä½ æ³è¦æ¾ç½®å¹¿åçå°æ¹æ·»å 以ä¸ä»£ç ï¼
<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>
5.3 æ¯å¦æ¾ç¤ºæç´¢æ¡
å¨éè¦æ¾ç½®æç´¢æ¡çå°æ¹æ·»å 以ä¸ä»£ç ï¼å½ç¨æ·éæ©æ¾ç¤ºæç´¢æ¡æ¶ä¼æ¾ç¤ºï¼å¦ååä¸æ¾ç¤ºï¼
<?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" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', '85Ryan' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="æç´¢" />
</form>
<?php } ?>
6ãæ»ç»
æ¬æç¿»è¯èªNET TUTS+æç« ãHow to Integrate an Options Page into your WordPress Themeãï¼çæå½åæä½è ææã
为äºæ´å®¹æå°å¦ä¹ æ·»å 主é¢é项页çè¿ç¨ï¼æçç¥äºåæä¸é¨åå 容ï¼æå ´è¶£çè¯å¯ä»¥åèåæã
ç¿»è¯æ°´å¹³æéï¼å¦æé误ï¼è¯·æåºä¿®æ£ï¼è°¢è°¢ï¼è½¬è½½
å¨è¿è¡ä¸»é¢å®å¶åï¼åºè¯¥é¦å å建ä¸ä¸ªå¯ä¾èªå®ä¹çâ设置é项页é¢âãå建设置é项页ç代ç éè¦æ¾ç½®å¨ä¸»é¢ç®å½ä¸çfunctions.phpæ件ä¸ãå¦ææ们ç主é¢å为âOptionPageâï¼é£ä¹functions.phpæ件çè·¯å¾ä¸ºï¼\wp-content\themes\OptionPage\functions.phphã æ们ä¸éè¦è®©wordpressæå¨å è½½å®ï¼å¨æ§è¡æ¶wordpressä¼èªå¨å è½½ã
2ã建ç«è®¾ç½®é项页
é¦å 第ä¸æ¥éè¦å¨åå°å»ºç«ä¸ä¸ªç©ºç½é¡µé¢ä¾æ们使ç¨ãæ们éè¿add_aactionæ¥å®ç°è¿ä¸æ¥ãActionså¯ä»¥å¨wordpressæ§è¡æ¶çç¹å®æ¶é´è¢«ååºï¼ä¾å¦ï¼å½å¨æ§å¶é¢æ¿å建èåæ¶ï¼admin_menuå°±ä¼è¢«ååºæ§è¡ãå æ¤ï¼å¯ä»¥å©ç¨è¿äºæ¥å®ç°æ们æéçåè½ãè¿æ¯æ们å建é项页çæåºæ¬çåè½ã
<?php
// 设置é项页
function themeoptions_admin_menu()
{
// å¨æ§å¶é¢æ¿ç侧边æ æ·»å 设置é项页é¾æ¥
add_theme_page("主é¢è®¾ç½®", "主é¢é项", 'edit_themes', basename(__FILE__), 'themeoptions_page');
}
function themeoptions_page()
{
// 设置é项页é¢ç主è¦åè½
}
add_action('admin_menu', 'themeoptions_admin_menu');
?>
themeoptions_admin_menu() æ¯å¨æ§å¶é¢æ¿ç侧边æ ä¸æ·»å ä¸ä¸ªé¾æ¥ï¼æåæ们å建çé项页ï¼themeoptions_pageã
add_theme_page() çåæ°ä¸ºï¼
页é¢æ é¢ï¼ä¸»é¢è®¾ç½®
èåæ é¢ï¼ä¸»é¢é项ï¼p.s.为äºåºåæ¾ç¤ºï¼é¡µé¢ä¸èåæ é¢æåäºä¸åæå½åï¼
ä½ç¨åè½ï¼edit_themesï¼
Handleï¼å¥æï¼ï¼å½åæ件ï¼
æ§è¡çå½æ°ï¼themeoptions_pageï¼
ç°å¨åå°æ§å¶é¢æ¿ä¾§è¾¹æ çå¤å°±å¤äºä¸ä¸ªâ主é¢è®¾ç½®âçèåï¼ä½æ¯ç°å¨è¿æ¯ç©ºç½çï¼æ们åé¢è¦å®ç°çå®å¶å 容就å¨è¿ä¸ªç©ºç½é¡µé¢ä¸å建ã
3ãæ·»å é项åå段
ç°å¨æ们就å¯ä»¥å¨åå建ç空ç½é¡µé¢ä¸æ·»å æ们çé项åå段ãè¿ä¸ªé¡µé¢ä½ å¯ä»¥æ ¹æ®èªå·±çéè¦è¿è¡æ ·å¼é£æ ¼åï¼ä½å¨æ¬æç¨ä¸æ们å°ä½¿ç¨wordpressé»è®¤çç±»ï¼è¿æ ·å¯ä»¥èçæ们çæ¶é´å¹¶ä¸çèµ·æ¥æ´å åçã
页é¢å 容ç代ç éå å«å¨ themeoptions_page() å½æ°å ãé¦å ï¼æ们å æ·»å ä¸ä¸ª class="wrap" ç div 容å¨ï¼ç¶åï¼å¨å¤´é¨æ·»å ä¸ä¸ªé»è®¤å¾æ ä½ä¸ºä½ä¸ºé¡µé¢æ é¢ï¼æåæ¯è®¾è®¡è¡¨åã
function themeoptions_page()
{
// here's the main function that will generate our options page
?>
<div class="wrap">
<div id="icon-themes" class="icon32"><br /></div>
<h2>主é¢è®¾ç½®</h2>
<form method="POST" action="">
<input type="hidden" name="update_themeoptions" value="true" />
<p><input type="submit" class="button-primary" name="bcn_admin_options" value="æ´æ°æ°æ®"/></p>
</form>
</div>
<?php
}
å¨è¡¨åä¸ï¼é¦å æ们éè¦æ·»å ä¸ä¸ªéèçå¼ï¼éè¿å®æ¥æ£æ¥æ´æ°æ¯å¦å·²ç»æ交ãç¶åæ·»å ä¸ä¸ªæ交æé®ï¼è¿éæä¹ä½¿ç¨wordpressé»è®¤çæé®æ ·å¼ãç°å¨çææ为ï¼
ç°å¨æ们已ç»å建äºè®¾ç½®é项页çåºæ¬ç»æï¼ä¸é¢æ们å¼å§æ ¹æ®ä¹åå¶å®çå 容è¿è¡å®åï¼
é¦å ï¼æ们è¦å 许主é¢ä½¿ç¨è å¯ä»¥æ´æ¹é¢è²æ¹æ¡ã对äºè¿ä¸ç¹ï¼æ们éè¦ä¸ä¸ªä¸æå表æä¾å¯ç¨çé è²æ¹æ¡ã
å ¶æ¬¡ï¼å¢å 两个广åä½çå 容ï¼æ们éè¦å¢å 两个ææ¬æ¡æ¥è¾å ¥å¾ççURLå广åé¾æ¥URLã
æåï¼ç¨æ·å¯éæ©æ¯å¦æ¾ç¤ºæç´¢æ¡ãè¿ä¸ç¹ï¼æ们éè¿æ·»å å¤éæ¡æ¥å®ç°ã
代ç å¦ä¸ï¼
function themeoptions_page()
{
// è¿æ¯äº§ç主é¢é项页é¢ç主è¦åè½
?>
<div class="wrap">
<div id="icon-themes" class="icon32"><br /></div>
<h2>主é¢è®¾ç½®</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'; } ?>>æµ è</option>
<option value="pink" <?php if ($colour=='pink') { echo 'selected'; } ?>>ç²çº¢</option>
</select>
<h4>å¾ç广åä½ï¼1ï¼</h4>
<p><input type="text" name="ad1image" id="ad1image" size="32" value="<?php echo get_option('mytheme_ad1image'); ?>"/> 广åå¾ç</p>
<p><input type="text" name="ad1url" id="ad1url" size="32" value="<?php echo get_option('mytheme_ad1url'); ?>"/> 广åé¾æ¥</p>
<h4>å¾ç广åä½ï¼2ï¼</h4>
<p><input type="text" name="ad2image" id="ad2image" size="32" value="<?php echo get_option('mytheme_ad2image'); ?>"/> 广åå¾ç</p>
<p><input type="text" name="ad2url" id="ad2url" size="32" value="<?php echo get_option('mytheme_ad2url'); ?>"/> 广åé¾æ¥</p>
<h4><input type="checkbox" name="display_search" id="display_search" <?php echo get_option('mytheme_display_search'); ?> /> æ¾ç¤ºæç´¢æ¡</h4>
<p><input type="submit" class="button-primary" name="bcn_admin_options" value="æ´æ°æ°æ®"/></p>
</form>
</div>
<?php
}
å°è¿éé项页é¢çå 容就已ç»åºæ¬æ建å®æ¯äºã
4ãæ°æ®åºæ´æ°
å°ç®å为æ¢ï¼æ们已ç»å建äºä¸ä¸ªä¸»é¢é项页é¢ï¼ä¸ä¸æ¥è¦åçå°±æ¯å¦ä½å°æ°æ®éè¿POSTæ交çwordpressæ°æ®åºãè¦åå°è¿ä¸ç¹ï¼éè¦å建ä¸ä¸ªæ°çåè½å½æ°themeoptions_update()ï¼è¿ä¸ªå½æ°å°ä¼è¢«themeoptions_page()è°ç¨ï¼æ以å°ä¸é¢ç代ç æ·»å å°themeoptions_page()å½æ°çæä¸é¢ã
if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update(); }
ä¸ä¸æ¥æ¯å¢å ä¸ä¸ªæ´æ°å½æ°ã
function themeoptions_update()
{
// æ°æ®æ´æ°éªè¯
update_option('mytheme_colour', $_POST['colour']);
update_option('mytheme_ad1image', $_POST['ad1image']);
update_option('mytheme_ad1url', $_POST['ad1url']);
update_option('mytheme_ad2image', $_POST['ad2image']);
update_option('mytheme_ad2url', $_POST['ad2url']);
if ($_POST['display_search']=='on') { $display = 'checked'; } else { $display = ''; }
update_option('mytheme_display_search', $display);
}
5ãè°ç¨é项å®å¶ä¸»é¢
5.1 æ´æ¹é è²æ¹æ¡
æ们主é¢çé»è®¤æ ·å¼æ件为 style.cssï¼å¦æ使ç¨å ¶ä»çé è²æ¹æ¡ï¼æ们éè¦å»ºç«ç¸åºçæ ·å¼æ件ï¼ä¾å¦æ¬ä¾ä¸ç blue.cssãpink.cssï¼style.css 为é»è®¤çç°è²ã
为äºåæ¢é è²æ¹æ¡æ ·å¼è¡¨ï¼éè¦å¨ä¸»é¢ 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">
5.2 å¢å 广åä½å¾ç
å¨ä½ æ³è¦æ¾ç½®å¹¿åçå°æ¹æ·»å 以ä¸ä»£ç ï¼
<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>
5.3 æ¯å¦æ¾ç¤ºæç´¢æ¡
å¨éè¦æ¾ç½®æç´¢æ¡çå°æ¹æ·»å 以ä¸ä»£ç ï¼å½ç¨æ·éæ©æ¾ç¤ºæç´¢æ¡æ¶ä¼æ¾ç¤ºï¼å¦ååä¸æ¾ç¤ºï¼
<?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" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', '85Ryan' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="æç´¢" />
</form>
<?php } ?>
6ãæ»ç»
æ¬æç¿»è¯èªNET TUTS+æç« ãHow to Integrate an Options Page into your WordPress Themeãï¼çæå½åæä½è ææã
为äºæ´å®¹æå°å¦ä¹ æ·»å 主é¢é项页çè¿ç¨ï¼æçç¥äºåæä¸é¨åå 容ï¼æå ´è¶£çè¯å¯ä»¥åèåæã
ç¿»è¯æ°´å¹³æéï¼å¦æé误ï¼è¯·æåºä¿®æ£ï¼è°¢è°¢ï¼è½¬è½½
温馨提示:答案为网友推荐,仅供参考