ワードプレスの管理画面のカスタマイズの基礎

ワードプレスは、テーマで様々なページの表示をワードプレスの組み込みの関数を使い行うことができますが、管理画面の拡張も行うことができます。
ここでは３つの簡単なカスタマイズのコードを見ていきながら管理画面のカスタマイズの基礎的な方法をご紹介します。

管理画面内でだけ読み込まれるＣＳＳやＪＡＶＡＳＣＲＩＰＴ

function admin_custom_enqueue($hook_suffix) {
    wp_enqueue_script('admin_custom_js', get_template_directory_uri() . 'admin_custom.js');
    wp_enqueue_style('admin_custom_css', get_template_directory_uri() . 'admin_custom.css');
}
add_action( 'admin_enqueue_scripts', 'admin_custom_enqueue' );

このコードはadmin_enqueue_scriptsというフックによって、ワードプレスが管理画面内のスクリプトを読み込む際に自分で作成した任意のＣＳＳとＪＳを読み込むコードです。

wp_enqueue_script(‘一意のスクリプトの識別子’, ‘読みこむＪＳのＵＲＬ’);
という書式でテーマフォルダに含まれるFunctions.phpや制作されているプラグインに追加することができます。
このコードのget_template_directory_uri()は、ワードプレスが自動的に、テーマのフォルダのURLを取得してくれる関数です。
また、プラグインのフォルダのURLを取得する関数はplugin_dir_url( __FILE__ )となります。

投稿の編集画面にメモ欄を作る

function _add_custom_mypostmemo()
{
   add_meta_box( 'mymemomypostmemo', 'MEMO', '_add_memometa_box', 'post', 'advanced', 'default', NULL );
}
add_action( 'add_meta_boxes', '_add_custom_mypostmemo' );

上記のコードはadd_meta_boxesにフックして投稿編集画面にオリジナルな設定欄の部品(メタボックスと呼ばれます)を追加するコードです。

add_meta_box( ‘一意のメタボックス名’, ‘メタボックス名’, ‘このメタボックスを描画する関数’, ‘このメタボックスを表示する投稿タイプ’, ‘メタボックスの表示部分’, ‘表示優先順位’, NULL );

という書式になっています。

function _add_memometa_box( $post )
{
   $value = get_post_meta( $post->ID, 'mypostmemo', TRUE );
   echo '<input type="text" name="mypostmemo" value="'.esc_attr( $value ).'" style="width:100%">';
}

この関数はメタボックスの描画部分になります。
このコードでは、まず保存された値がある場合はその値を取得してINPUTの初期値にします。

function _save_custom_mypostmemo( $post_id )
{
    update_post_meta( $post_id, 'mypostmemo', $_POST[ 'mypostmemo' ] );
    return $post_id;
}
add_action( 'save_post', '_save_custom_mypostmemo' );

最後に上記のINPUTに入力された値をsave_post(投稿の保存時)に受け取って投稿メタとして保存します。
update_post_metaで投稿ID($post_id　にワードプレスが入れてくれます)を指定すると任意の値を投稿メタ値として保存することができます。

管理画面左メニューに独自のメニューを追加する

下記の例では、管理画面の左メニューにオリジナルなメニューを追加します。

add_action( 'admin_menu', 'my_plugin_menu' );
function my_plugin_menu() {
add_options_page( 'My Plugin Options', 'My Plugin', 'manage_options', 'my-unique-identifier', 'my_plugin_options' );
}

function my_plugin_options() {
?>
ここにメニューをクリックした気に表示するHTMLコードを記載します
<?php
}

admin_menuというワードプレスが管理画面のメニューを生成するときに割り込むフックを使い、add_options_page( ‘このページ名’, ‘メニュー名’, ‘メニューを表示するのに必要なユーザー権限’, ‘メニューのURL’, ‘このメニュー内容を描画する関数’ );の書式で管理画面メニューを生成します。

その下に続くmy_plugin_optionsの内容がメニューをクリックした気に表示するHTMLコードとなります。my_plugin_optionsは、add_options_pageの第五引数で指定した名称と同じである必要がございます。

\ 　他社の制作したワードプレスサイトもOK ! 　/
ワードプレスの制作・復旧・修正・カスタマイズのご相談・ご依頼はこちらから