WordPressプラグインの設定画面デザイン用コードのメモ

Ads

WPプラグインの設定画面を
デザイン、というかスタイル
用のコードとかをメモします。
そんなに作る機会は無いで
すけど。

CODEXみたんですがちょっと見当たらなかったので調べたものをメモ。

アイコン

wp-plugin-design01
↑こういうアイコンを表示。

投稿アイコン

wp-plugin-design02

<div id="icon-edit" class="icon32"></div>

メディアアイコン

wp-plugin-design03

<div id="icon-upload" class="icon32"></div>

リンクアイコン

wp-plugin-design04

<div id="icon-link-manager" class="icon32"></div>

ページアイコン

wp-plugin-design05

<div id="icon-edit-pages" class="icon32"></div>

コメントアイコン

wp-plugin-design06

<div id="icon-edit-comments" class="icon32"></div>

外観アイコン

wp-plugin-design07

<div id="icon-themes" class="icon32"></div>

プラグインアイコン

wp-plugin-design08

<div id="icon-plugins" class="icon32"></div>

ユーザーアイコン

wp-plugin-design09

<div id="icon-users" class="icon32"></div>

ツールアイコン

wp-plugin-design10

<div id="icon-tools" class="icon32"></div>

設定アイコン

wp-plugin-design11

<div id="icon-options-general" class="icon32"></div>

ボタン

送信ボタンとか。

wp-plugin-design12
↑保存するボタンみたいなやつ

<input class='button-primary' type='submit' name='Save' value='<?php _e('保存する'); ?>' id='submitbutton' />

wp-plugin-design13
↑送信ボタンとか。

<iinput type='submit' value='<?php _e('送信する'); ?>' class='button-secondary' />

wp-plugin-design14
↑そのほか。

<a class='button-secondary' href='#' title='link'>リンク</a>

テーブル

wp-plugin-design15
テーブルのサンプル

<table class="widefat">
<thead>
    <tr>
        <th>ID</th>
        <th>名前</th>
        <th>メール</th>
    </tr>
</thead>
<tfoot>
    <tr>
    <th>ID</th>
    <th>名前</th>
    <th>メール</th>
    </tr>
</tfoot>
<tbody>
   <tr>
     <td>IDのコード</td>
     <td>名前のコード</td>
     <td>メールのコード</td>
   </tr>
</tbody>
</table>

cssを使う

フックさせるらしい。(まだテストしてない

function admin_register_head() {
    $siteurl = get_option('siteurl');
    $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/mycss.css';
    echo "\n";
}
add_action('admin_head', 'admin_register_head');

ページネーション

wp-plugin-design13
↑ページングのスタイル。

<div class='tablenav-pages'>
    ここにページネーション
</div>

参考:How To Design And Style Your WordPress Plugin Admin Panel