Web制作を行う全ての方へ

WordPressでダッシュボードにpdfを表示させるプラグイン「RD Dashboard pdf」を作りました

案件でユーザーマニュアルを作ってダッシュボードに表示するっていうことをしていたのですが、これからも使いそうなのでプラグインにして公式ディレクトリに掲載しました。

プラグインを作った動機

マニュアルの表示はpdfだったり動画だったりすると思うのですが、僕の場合は

  • Markdownで記述
  • pdfにエクスポート
  • テーマディレクトリに保存してダッシュボードに表示

というフローで行っています。

テーマディレクトリに保存だと、テーマが変わった場合ファイルの移し替えが発生することと、どうせなら管理画面でファイルをアップロードできたほうが便利という観点からプラグインにしようと思ったのですが、どうせそこまでやるなら公式ディレクトリに掲載までやってしまおうと思ってプラグイン作成に至ったのが経緯です。

プラグインについて

プラグインは公式ディレクトリからダウンロードできます。

WordPressプラグイン:RD Dashboard pdf

ソースファイルはGithubにあげています。

Github:RD Dashboard pdf

バグやご要望などありましたら上記issueなどへお願いします。

使い方

  • プラグインをダウンロードしたら、WordPressのpluginディレクトリに配置し、プラグインを有効化してください
  • 管理画面の設定>rd-dashboard-pdfより、ダッシュボードに表示させたいpdfファイルをアップロードしてください。この時pdf以外のファイルをアップロードするとエラーメッセージが出力されます。
  • アップロードができたらダッシュボードでpdfを閲覧することが出来るようになります。領域が狭いので、ブラウザで開くようにリンクを張っていますので、そちらを利用することで読みやすくなります。

ファイルについて

アップロードは一つしかできません。改めてアップロードすることで以前アップロードしているファイルはメディアから削除され、新しいファイルがメディアに追加され、そちらが表示されるようになります。

現在アップロードしているファイルの名前は、アップロードするボタンの右側もしくは下側に表示されます。

メディアからファイルが見れなくなっても、WordPressのUploadディレクトリにはファイルが残っているので、間違えて上書きした場合でも、そちらからファイルを一旦保存し、再度アップロードすることで再利用ができます。

管理画面の設定に関するソースについて

function rddp_init() {
    add_settings_section( "rddp-section", "File upload", null, "rddp" );
    add_settings_field( "rddp-file", __( "pdf file to display on the dashboard" ), "rddp_file_display", "rddp", "rddp-section", array( 'label_for' => 'rddp-file' ) );
    register_setting( "rddp-section", "rddp-file", "rddp_file_upload" );

    add_action( 'wp_dashboard_setup', 'rddp_dashboard_widgets' );
}

add_action( "admin_init", "rddp_init" );

 

add_settings_section
セクションの登録:設定画面のセクションを作成しています。

add_settings_section (
    "rddp-section", // ID
    "File upload", // セクションで表示する文字列
    null, // コールバック
    "rddp" // 表示するページ
);

add_settings_field
フィールドの登録:管理画面に表示するフィールドの設定。

add_settings_field (
    "rddp-file", //ID
    __( "pdf file to display on the dashboard", 'rd-dashboard-pdf' ), //フィールドのタイトル
    "rddp_file_display", //コールバック
    "rddp", //表示するページ
    "rddp-section", //表示するページ内のセクション(本プラグインでは上記のadd_settings_sectio)
    array( 'label_for' => 'rddp-file' ) //$args
);

register_setting
name登録と値の保存に関する設定

register_setting (
    "rddp-section", //設定のグループ名で、 settings_fields() のグループ名と一致していないといけません
    "rddp-file", //値を保存するoption名
    "rddp_file_upload" //コールバック
);

rddp_setting_page()
設定したセクション、フィールドを呼び出します、設定ページに表示します。

    <div class="wrap">
        <h1><?php echo __( 'Upload pdf for display on dashboard.', 'rd-dashboard-pdf' ); ?></h1>
        <form action="options.php" id="rddp-form" method="post" enctype="multipart/form-data">
//フォームの設定
            <?php
                //設定したセクションの呼び出し
                settings_fields( "rddp-section" );
                do_settings_sections( "rddp" );
                submit_button();
            ?>
        </form>
    </div>

rddp_file_display()
アップロードしたファイル名を出力します。

<input type="file" name="rddp-file" id="rddp-file">
    <?php
        $data = get_option( 'rd-dashboard-pdf' );
        if( $data['error'] ) {
             ?></td><td><?php echo $data['error']; ?></td><?php
        } else {
            ?></td><td><?php echo $data['name']; ?></td><?php
        }
     ?>

上記が、設定画面の設定と、それらの呼び出しに関する処理になります。

ファイルのアップロード処理

処理については wp_handle_upload を使っています。

この関数は、

  • ファイルのアップロード処理
  • ファイル名のサニタイズ
  • MIMEタイプの拡張子チェック
  • アップロードされたファイルをUploadディレクトリ内の適切な場所への移動

を行ってくれます。

$urls = wp_handle_upload(
$_FILES["rddp-file"], //添付されたファイル
$overrides, //処理のオーバーライド
NULL //時間
);

処理が成功すると、配列でデータが帰ってきます。

  • $urls[“file’] アップロードされたファイルへのローカルパス
  • $urls[“url”] アップロードされたファイルのパブリックURL
  • $urls[“type”] MIMEタイプ

管理画面でファイルをとりあえずアップロードさせるだけなら、ここまでの処理で色々出来そうな感じがします。

ひとまずプラグイン公開できたので、また何か作ろうと思います。

2017年9月18日追記
pdf title の項目を追加しました。この項目に入力された値はダッシュボードで表示されるウィジェットのタイトルに表示されます。
何も入力がない場合は pdf と表示されます。

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share