”シンプル”なデザインを、”フツー”のWEBサイトを

この記事は2017年11月9日に内容を更新しました。

WordPressにはカスタムフィールドという機能があります。これは、タイトルや投稿記事、公開設定、カテゴリーなど基本的な入力欄以外に、任意の入力項目を設定できる機能です。そして、それを自由に記事や固定ページ内に出力できるというもの。

例えば、服を売るサイトを制作するとします。そのとき、サイズや素材、色などの商品の細かい情報をそれぞれのページに掲載すると思うのですが、そういった、ある程度使い回す項目を予め投稿画面に設定しておけたりします。

と、偉そうに書いていますが、僕自身は実際つかったことはありません。いまひとつ使うポイントがわからなかったというか。必要なHTMLだったら直接書けるので、こういったテンプレート的な内容はAddQuicktagとかに登録して対応していました。

なぜ今さらカスタムフィールドなのか

そんな僕が、なぜ今さらカスタムフィールドなんかに手を付けたのか。それは、作ったサイトを自分で更新しない場合というのがどうしても出てくるからです。それもそんなに詳しくない人が投稿画面などでHTML部分をいじったりすると、結局はページが崩れてしまい一々直さなくてはいけないハメになるので。それならある程度投稿画面からの入力するだけで完結出来るようにしておこう、と思ったのがきっかけです。(もちろん限度はありますけど。)で、実際試しに自分のテストサイトでつかってみたら思いの外便利でした。

ちなみに、カスタムフィールドについては全く無知だったので超初歩的な部分から調べてみたのですが、最もオーソドックスな使い方については下記のサイトがわかりやすかたtです。

初心者必見!WordPressで便利なカスタムフィールドとは?設定する手順とプラグイン...
WordPressを扱っているなら絶対に知っておきたいカスタムフィールドの使い方を解説していきます。カスタムフィールドの設定は、初心者にとっては難しいところもあるので...

プラグインをつかわずにカスタムフィールドをつかってみる

先に紹介したサイトでも書かれているように、カスタムフィールド関連にも、Advanced Custom FieldsやCustom Field Templateといった便利なプラグインが色々あるようで、それらをつかえば簡単に設定出来るようです。サクッと導入したい場合は利用してみるのも良いかも知れません。ただ、それじゃあまり面白くない。ということで、プラグインをつかわないでカスタムフィールドを設定してみることにしました。

functions.phpへの記述

今回は例として、「スペック」という情報の中に、「セット内容」「素材」「サイズ」という項目を設定することとしてみます。まずは、functions.phpに以下のソースを記述します。

add_action('admin_menu', 'add_custom_inputbox');
add_action('save_post', 'save_custom_postdata');

function add_custom_inputbox() {
  add_meta_box( 'product_id','スペック', 'custom_area', 'post', 'normal' );
}

function custom_area(){
  global $post;
  echo 'セット内容:<input type="text" name="set" value="'.get_post_meta($post->ID,'set',true).'"><br>';
  echo '素材:<input type="text" name="material" value="'.get_post_meta($post->ID,'material',true).'"><br>';
  echo 'サイズ:<input type="text" name="size" value="'.get_post_meta($post->ID,'size',true).'"><br>';
}

function doSave($post_id, $data_name){
  $data = '';
  if(isset($_POST[$data_name])){
    $data = $_POST[$data_name]; 
  }else{
    $data = '';
  }
  if( $data != get_post_meta($post_id, $data_name, true)){
    update_post_meta($post_id, $data_name,$data);
  }elseif($data == ""){
    delete_post_meta($post_id, $data_name,get_post_meta($post_id,$data_name,true));
  }
}

function save_custom_postdata($post_id){
  doSave($post_id, 'set');
  doSave($post_id, 'material');
  doSave($post_id, 'size');
}

これで、投稿画面に先ほどの画像のような項目が表示されるようになると思います。あ、もしかしたら投稿画面の表示オプションでカスタムフィールドを表示しておかないとダメかも知れないので、もし表示されないようだったら、そこも確認してみてください。

add_meta_box( 'product_id','スペック', 'custom_area', 'post', 'normal' );

の四つ目の引数、[post]は、ここで設定したカスタムフィールドを表示させる画面の指定になります。[post]の場合は投稿、固定ページだったら[page]にしてください。

また、項目を増やしたい場合は、

echo '○○:<input type="text" name="□□" value="'.get_post_meta($post->ID,'□□',true).'"><br>';

doSave($post_id, '□□');

をコピペして増やしてください。一つ目のソースは投稿画面に表示する項目内容の設定で、二つ目のソースは入力した値を保存するためのものです。

入力したカスタムフィールドの内容を出力する

今回は投稿記事にカスタムフィールドを設定しているので、single.php内の任意の場所に以下を記述します。

<?php echo nl2br(get_post_meta( $post->ID , 'set' , true )); ?>
<?php echo nl2br(get_post_meta( $post->ID , 'material' , true )); ?>
<?php echo nl2br(get_post_meta( $post->ID , 'size' , true )); ?>

これで先ほど投稿画面のカスタムフィールドに入力した内容が、投稿記事内に表示されます。

ちなみに、[nl2br]というのは、もし値を入力した際に改行をしていた場合、そのまま改行として出力できるようにする関数です。

個人的な小技

基本的にはこれで、無事プラグインに頼らずにカスタムフィールドをつかえるようになると思うのですが、投稿画面の値を入力する際、ちょっとだけ便利にする小技です。

カスタムフィールドの入力部分にCSSをあてる

入力欄が少し小さくて入力し辛い場合、この入力部分にCSSをあてて大きさを変えたり出来ます。

functions.phpに以下のソースを記述してください。

add_action( 'admin_print_styles', 'my_admin_print_styles' );
function my_admin_print_styles() {
echo '<style>#poststuff #product_id .inside input{ height:60px; width:500px; }</style>';
}

適当に幅と高さを書いていますが、これで入力欄の大きさが変わると思います。

もし変わらなかったら、開発者ツールなどで入力欄部分のidやclass名を調べて、[#poststuff #product_id .inside input]の部分を適宜書き換えてみてください。

入力欄をtextareaにして長文でも入力しやすくする

先ほどfunctions.phpに書いたソースを見てもらえるとわかると思うのですが、カスタムフィールドの値を入力する部分は<input>タグになっています。通常はこれで事足りると思うのですが、もし長い文章を入力することが想定される場合、<textarea>にすることも出来ます。

echo '○○:<input type="text" name="□□" value="'.get_post_meta($post->ID,'□□',true).'"><br>';

となっている部分を

echo '○○:<textarea cols="80" name="□□">'.get_post_meta($post->ID,'□□',true).'</textarea><br>';

としてください。これで、入力部分が可変になるので長文でも入力しやすくなるかと思います。

使い方によってはカスタムフィールドって便利かも

このカスタムフィールド、もしかしたら使い方によってはかなり便利な気がします。

ただ僕の場合は先にも書いた通り、WEB担当者以外がWordPressをいじったりする場合に「余計なことをさせない」予防策につかうことが多くなると思いますが・・・

もっと役立つ使い方があったらまたこのブログで紹介させてもらいます。

2017年11月9日にこちらの記事も書いたので併せて読んでみてください。

WordPressのカスタムフィールドで値が空だった場合の処理方法
先日の記事で、プラグインをつかわずにWordPressのカスタムフィールドを利用する方法を書きました。段々楽しくなってきてちょこちょこいじり続けているのですが、かなり...