Home > wordpress > [WP]投稿ページにオプションエリアを追加する

[WP]投稿ページにオプションエリアを追加する

2008-04-26 (土) 17:16
wordpress
wordpress | wp-function

タグとかカテゴリーみたいなクリックで開閉するオプションエリアを追加する方法について。
ページと同じくこれもテーマのfunction.phpで可能です。プラグインで作っても良い。

オプションエリアの表示

基本ソース

PHP:

<?php
add_action('edit_form_advanced', 'test_tab' );
function test_tab(){ ?>
<div id="test_tab" class="postbox <?php echo postbox_classes('test_tab', 'page'); ?>">
<h3>Test Tab</h3>
<div class="inside">
<p>Test<p>
</div>
</div>
<?php } ?>

edit_form_advancedで記事投稿、edit_page_formでページ作成のとき表示される。
postbox_classes($id,$page)はwp-admin/includes/post.phpの５８７行目あたりにある関数。
タブの初期開閉状態を操作するクラスを追加する。
引数は次の通りです。

$id Div要素につけたID
$page
'page'　・・・　常に開いた状態
'post'　・・・　開閉を記憶

サンプル

GoogleMapの座標を検索するタブ
function.phpにコピペで動きます多分。

PLAIN TEXT

PHP:

<?php
add_action('edit_form_advanced', 'gmap_tab' );
add_action('edit_page_form', 'gmap_tab' );
add_action('admin_head', 'gmap_tab_header');
function gmap_tab(){ ?>
<div id="gmap_tab" class="postbox <?php echo postbox_classes('gmap_tab', 'page'); ?>">
<h3><?php _e('GoogleMap座標検索') ?></h3>
<div class="inside">
<p><label for="geoName">住所検索</label><input type="text" id="geoName" size="50" onfocus="this.select()">
<input type="button" value="検索" onClick="searchPoint()"></p>
<p><label for="show_xy">LatLng:</label><input type="text" id="show_xy" size="60" onfocus="this.select()" /></p>
<div id="googlemap"></div>
</div>
</div>
<?php }
function gmap_tab_header(){
$apikey =get_option('googlemaps_api_key');
$scriptname = $_SERVER['SCRIPT_NAME'];
if(preg_match("/post/",$scriptname)||preg_match("/page/",$scriptname)){
?>
<script src="http://maps.google.com/maps?file=api&v=1&key=<?php echo $apikey;?>" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
<!--
#googlemap {
width:100%;
height:300px;
}
-->
</style>
<script type="text/javascript">
//<![CDATA[
var map;
var xy;
var center_point;
var center_mark;
window.onload = function (){
if(!GBrowserIsCompatible()){
return;
}
map = new GMap2(document.getElementById("googlemap"));
pos = new GLatLng(35.42322427979045,136.76058053970337);
map.setCenter(pos, 15);
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl(new GSize(180,140)));
map.enableDoubleClickZoom();
gGeo = new GClientGeocoder();
bounds = map.getBounds();
xy = map.getCenter();
document.getElementById("show_xy").value =xy.lat()+","+xy.lng();
center_point = new GLatLng(xy.lat(), xy.lng());
center_mark = new GMarker(center_point);
map.addOverlay(center_mark);
GEvent.addListener(map, 'moveend', function(){
var xy = map.getCenter();
document.getElementById("show_xy").value = xy.lat()+","+xy.lng();
map.removeOverlay(center_mark);
center_point = new GLatLng(xy.lat(), xy.lng());
center_mark = new GMarker(center_point);
map.addOverlay(center_mark);
});
}
function searchPoint() {
var address = document.getElementById("geoName").value;
gGeo.getLatLng(address, checkGeo);
}
function checkGeo(point) {
if (!point)alert("見つかりませんでした");
else map.setCenter(point, 17);
}
</script>
<?php }} ?>

add_meta_box()を使うと、詳細オプション下にタブを追加できます。

Tags:
wordpress , wp-function

Comments:2

チョッパー 08-07-06 (日) 23:07: 最初の TestTab ですが、9行目に ? が抜けているみたいです。
4行目は page ではなく post の方がタブの開け閉めが記憶されるので便利です。
Tenderfeel 08-07-07 (月) 16:16: ばっちり抜けてましたね！ご指摘ありがとうございます。
引数の説明も足しつつ、サンプルのソースもちょっと変更しました。

Trackbacks:0

Trackback URL for this entry: http://tenderfeel.xsrv.jp/wordpress/139/trackback/
Listed below are links to weblogs that reference: [WP]投稿ページにオプションエリアを追加する from WebTecNote

Home > wordpress > [WP]投稿ページにオプションエリアを追加する

Search

Scripts

カテゴリー