プラグインを使わずにカスタムフィールドを自在に設置したい――
そんな思いを抱いている制作者の方は多いと思います。
そんな方にお勧めしたいのがWPAlchemyです。
WPAlchemyは設置こそ多少のPHPの知識が必要ですが、一度設置方法を覚えてしまえばあとは比較的簡単に設置できるPHPセットです。
このセットは以下で公開されています。
http://www.farinspace.com/wpalchemy-metabox/
スクリプトのダウンロードはこちらからできます。
https://github.com/farinspace/wpalchemy/archive/master.zip
WPAlchemyは設置が容易なだけではなく、カスタムフィールドのカスタマイズという点では、非常に自由度の高いスクリプトセットです。自由自在にできるといっても過言ではないと思います。
非常に優れているスクリプトなのですが、日本語での解説や紹介がほとんどありません。
英語の解説はとっつきにくいと思っている方は、本記事を参考にぜひ導入を試みてください。
ではさっそく設置方法をご紹介しましょう。
■WPAlchemyの構成を確認してみよう
まずWPAlchemyをダウンロードしましょう。
こちらからダウンロ-ドできます。
https://github.com/farinspace/wpalchemy/archive/master.zip
ファイルの構成は以下のようになっています。
wpalchemy
-MediaAccess.php
-MetaBox.php
themes
-mytheme
-metaboxes
-checkbox-meta.php
-checkbox-spec.php
-full-meta.php
-full-spec.php
-meta.css
-radio-meta.php
-radio-spec.php
-select-meta.php
-select-spec.php
-setup.php
-simple-meta.php
-simple-spec.php
-functions.php
■WPAlchemyを設置しよう
wpalchemyフォルダをwp-contentフォルダ直下に置きます。
ｔhemes内のmytheme以下にあるmetaboxesを、ご自身が使用しているWordpressテーマの下に置きます。
mythemeの下にあるfunction.phpですが、これはご自身のテーマ内にあるfuction.phpに相当するものです。そのまま上書きせずに、中の記述をコピーして、function.phpに張り付けて保存してください。
基本ファイルの設置はこれで終わりです。
setup.phpの記述を
$custom_checkbox_mb = new WPAlchemy_MetaBox(array
(
‘id’ => ‘_sample _meta‘,//rename _**_meta
‘title’ => ‘Images custom fields‘,
‘template’ => get_stylesheet_directory() . ‘/metaboxes/sample _meta.php’,//set appropriate file.
‘types’ => array(‘images’)// post type
));
_sample _meta‘,のsample _metaの箇所は後で書き換えるので覚えておいてください。
今変更するのは次の2か所です。
- ‘title’ => ‘Images custom fields‘,
カスタムフィールドの名前を入れてください。
- ‘types’ => array(‘images’)// post type
カスタムフィールドを使用する投稿名を入れてください。（上記はimagesというカスタム投稿で使用する想定です）
画像のアップロード項目を設置したい方はsetting.phpの記述をこちらに変更してください。
<?php
include_once WP_CONTENT_DIR . ‘/wpalchemy/MetaBox.php’;
// global styles for the meta boxes
if (is_admin()) add_action(‘admin_enqueue_scripts’, ‘metabox_style’);
function metabox_style() {
wp_enqueue_style(‘wpalchemy-metabox’, get_stylesheet_directory_uri() . ‘/metaboxes/meta.css’);
}
include_once WP_CONTENT_DIR . ‘/wpalchemy/MediaAccess.php’;
// include css to help style our custom meta boxes
add_action( ‘init’, ‘my_metabox_styles’ );
function my_metabox_styles()
{
if ( is_admin() )
{
wp_enqueue_style( ‘wpalchemy-metabox’, get_stylesheet_directory_uri() . ‘/metaboxes/meta.css’ );
}
}
$wpalchemy_media_access = new WPAlchemy_MediaAccess();
$custom_checkbox_mb = new WPAlchemy_MetaBox(array
(
‘id’ => ‘_sample_meta‘,//rename _**_meta
‘title’ => ‘Images custom fields‘,
‘template’ => get_stylesheet_directory() . ‘/metaboxes/sample _meta.php’,//set appropriate file.
‘types’ => array(‘images‘)// post type
));
先にご説明した通り、function.phpに以下記述を書き加えましょう。
// WP Alchemy 設定ファイルの読み込み
include_once ‘metaboxes/setup.php’;
mythemeの下にあるfunction.phpの中でも、これだけ記述しておけば設置はできます。
■WPAlchemyでカスタムフィールドをカスタマイズしよう
ではカスタムフィールドを生成してみましょう。
mythemeにあるmetaboxesの中にtemplate_metabox.phpというファイルを作って保存してください。
ファイル名の「ｔemplate」の箇所は任意の名前に変更してください。
ここにカスタムフィールドの骨格を書き込んでいきます。骨格というのは、例えば、テキストボックスを設置した、ラジオボタンを設置したい、というときにどのようなスクリプトを記述すればよいのか、ということを指します。どのようにして書けばよいかについてはfull-meta.phpが参考になります。full-meta.phpに骨格のサンプルが記載されています。
full-meta.phpファイルの2行目の記述、
<?php global $wpalchemy_media_access; ?>
これは必ずコピーしてスクリプトの一番上に貼り付けてください。この記述がなければWPAlchemyは機能しません。
骨格を作っていきましょう。例えばfull-meta.php内の以下の記述はテキストボックスの骨格になります。
<label>Name</label>
<p>
<?php $mb->the_field(‘name‘); ?>
<input type=”text” name=”<?php $metabox->the_name(‘name’); ?>” value=”<?php $metabox->the_value(‘name’); ?>”/>
<span>Enter in a name</span>
</p>
Labelタグの箇所にはテキストエリアの名前を入れます。名前の入力欄であれば「お名前」などと入れます。不要であれば削除してかまいません。
次の記述
<?php $mb->the_field(‘name‘); ?>
のnameはカスタムフィールドのキー名になります。一意の文字列を設定しましょう。
spanタグの箇所はカスタムフィードの説明等、入力者へのメッセージ、説明を入れます。名前の入力欄であれば「お名前を漢字で入力してください」といった文面がよいかもしれません。ケースバイケースで設定してください。ここも不要であれば削除してかまいません。
ここで施されているマークアップは自由に変更してかまいません。管理画面上でのスタイルの変更はmetaboxesのmeta.cssでできます。
では実際にサンプルスクリプトをもとに独自のカスタムフィールドを作成してみましょう。
筆者はこのようなカスタムフィールドを作成してみました。
<div class=”my_meta_control”>
<?php global $wpalchemy_media_access; ?>
<section>
<p>Main image</p>
<!– media upload –>
<?php $mb->the_field(‘mainimage‘); ?>
<?php $wpalchemy_media_access->setGroupName(‘nn’)->setInsertButtonLabel(‘Insert’); ?>
<div>
<?php echo $wpalchemy_media_access->getField(array(‘name’ => $mb->get_the_name(), ‘value’ => $mb->get_the_value())); ?>
<?php echo $wpalchemy_media_access->getButton(); ?>
</div>
</section>
<p>Image Position </p>
<?php $clients = array(‘center’,’left’,’right’); ?>
<?php foreach ($clients as $i => $client): ?>
<?php $mb->the_field(‘image_position‘); ?>
<input type=”radio” name=”<?php $mb->the_name(); ?>” value=”<?php echo $client; ?>”<?php $mb->the_radio_state($client); ?> /> <?php echo $client; ?><br/>
<?php endforeach; ?>
</section>
</div>
このカスタムフィールドは記事にメイン画像を設定し、ラジオボックスを使用して、画像位置を調節するクラスを付与する目的で設置してみました。
画像アップロードのスクリプトはfull-meta.phpにはなく、こちらで紹介されています。より深く知りたい方はこちらもご参照ください。
http://www.farinspace.com/wordpress-media-uploader-integration/
このようにWPAlchemyを使用するとカスタムフィールドのスタイルも項目も自由に設定できます。
さてここまでで骨格の設定は完了です。
最後に骨格を使えるようにするため、setting.phpを書き変えましょう。先にご説明したsetting.phpの太字部分を適切な名前に書き換えます。今回はtemplate_metabox.phpというファイルを作成したので以下のように変更します。
$custom_checkbox_mb = new WPAlchemy_MetaBox(array
(
‘id’ => ‘_template _meta‘,//rename _**_meta …（A）
‘title’ => ‘Images custom fields’,
‘template’ => get_stylesheet_directory() . ‘/metaboxes/template _meta.php’,//set appropriate file.
‘types’ => array(‘images’)// post type
));
このようになります。
Aのidはカスタムフィールドの値を取得するときに使用するので忘れずにいましょう。
■作成したカスタムフィールドを使用してみよう
早速カスタム投稿を設定した投稿の投稿画面へ行ってみましょう。
今回の筆者の例ですと、以下のようなフィールドが画面に追加されます。
さて、ここに入力したカスタムフィールドの値をどのようにして取得するのでしょうか。
値の取得は次のようにして行います。
- 最初にtemplate _meta.phpで設定したすべてのカスタムフィールドの値を取得します。
$customInfo = get_post_meta(get_the_ID(),’_images_meta‘,true);
get_post_metaで作成したカスタムフィールドの値すべてを取ります。このとき、「WPAlchemyでカスタムフィールドをカスタマイズしよう」のAで設定したid「_images_meta」をキーとして使用します。これですべてのカスタムフィールドの値が配列として取得できます。
- $customInfoからカスタムフィールドの値をそれぞれ取り出します。
カスタムフィールドの値それぞれは、$customInfo[‘キー名’];で取り出せます。例えば筆者が設定したメイン画像のカスタムフィールドの例ですと、このように利用できます。
<div id=”mainImg”><img src=”<?php echo $customInfo[‘mainimage’]; ?>” width=”582″ height=”200″ alt=””></div>
このようにget_post_metとPHPの配列を使用することで簡単にカスタムフィールドの値を取り出せます。
いかがでしょうか。
以上がWPAlchemyの基本的な使用方法です。
WordPressとPHPの知識が多少必要ですが、慣れてしまえばどんなカスタムフィールドでも自在に作れるようになります。
柔軟性に富んだWPAlchemyを活用して、素敵なサイトを作成してください。
- 2855 views
- キム
