Late ran ラテラン は、ウェブクリエイターのためのキュレーションマガジン

メニュー
検索

2016/2/3更新

プラグインを使わずにカスタムフィールドを実装『WPAlchemy』

mainimg

プラグインを使わずにカスタムフィールドを自在に設置したい――

そんな思いを抱いている制作者の方は多いと思います。

そんな方にお勧めしたいのが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フォルダ直下に置きます。

themes内の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というファイルを作って保存してください。

ファイル名の「template」の箇所は任意の名前に変更してください。

ここにカスタムフィールドの骨格を書き込んでいきます。骨格というのは、例えば、テキストボックスを設置した、ラジオボタンを設置したい、というときにどのようなスクリプトを記述すればよいのか、ということを指します。どのようにして書けばよいかについては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はカスタムフィールドの値を取得するときに使用するので忘れずにいましょう。

 

 

■作成したカスタムフィールドを使用してみよう

早速カスタム投稿を設定した投稿の投稿画面へ行ってみましょう。

今回の筆者の例ですと、以下のようなフィールドが画面に追加されます。

 

img01

 

さて、ここに入力したカスタムフィールドの値をどのようにして取得するのでしょうか。

値の取得は次のようにして行います。

 

  • 最初に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を活用して、素敵なサイトを作成してください。

Search