(WordPress) 自作のプラグインを作ってみる～その4：プラグインの画面にCSSを使用する

スポンサードリンク

前回はプラグインの中身を作成したました。

今回はこのプラグインの画面に

CSSを適用して

表示を少し変えてみましょう。

スポンサードリンク

使用するCSSを作成する

追加させたいCSSを作成します。

ファイル名は｢csv-upload.css｣をして作成します。

CHARSET "UTF-8";

.f10{
	font-size: 10px;
}

.table{
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #333333;
}

.tr_style{
	vertical-align: middle;
}

.center{
	text-align: center;
}

.table tr td{
	border: 1px solid #333333;
	padding-top: 5px;
	padding-bottom: 5px;
}

アップロードしたCSVを表示するテーブルを

CSSで装飾する内容です。

これを作成したプラグインのディレクトリに置きます。

ここでは｢css｣ディレクトリを作成して

そこに配置しました。

csv-uploader-plugin
   |-csv-uploader-plugin.php
   |-css
       |-csv-upload.css

作成したCSSを登録します。

先ほど作ったCSSをプラグインで使えるように

前回作ったcsv-uploader-plugin.phpに下記を追記します。

//CSS追加関数
function add_init(){
	// CSS登録 http://[site domain]/wp-content/plugins/csv_up/css/csv-upload.css
	wp_register_style('csv-upload', plugins_url('css/csv-upload.css', __FILE__));
	wp_enqueue_style('csv-upload');
}
add_action('admin_init', 'add_init');

ユーザー関数のadd_initの中に

CSSを登録するwp_register_style()を使い

先ほど作ったCSSを登録します。

登録する際の識別名は「csv-upload」にしました。

次のwp_enqueue_style()で

登録したCSSを読み込ませています。

引数にCSSを登録した時の識別名を使います。

そして、作ったユーザー関数のadd_initを

add_actionでフックさせて使います。

スポンサードリンク

CSSが追加されたか見てみましょう

CSVをアップロードして結果を見てみます。

アップロードしたCSVをテーブルで表示させるときに

作成したCSSの内容が

ちゃんとテーブルに使われいます。

これで管理画面でプラグインの表示画面を

CSSで装飾することができました。

次回はアップロードしたものを

データベースに登録してみましょう。

(参考)
wp_register_scriptとwp_register_styleの使い方

スポンサードリンク