【重要】このページの作り方

題名このページの作り方を解説します
作者対馬 俊彦
価格は?0円

functions.php に記述するやり方

参考

カスタム投稿タイプ「おすすめの本」を作成

VK All in One Expansion Unit のカスタム投稿タイプ設定機能を使って作成しました。

投稿タイプID を recobook としてあります。

カスタム投稿タイプ「おすすめの本」を作成
カスタム投稿タイプ「おすすめの本」を作成

functions.php に記述するコード

functions.php に以下のコードを記述してあります。

// 固定カスタムフィールドボックス
function add_book_fields() {
	//add_meta_box(表示される入力ボックスのHTMLのID, ラベル, 表示する内容を作成する関数名, 投稿タイプ, 表示方法)
	//第4引数のpostをpageに変更すれば固定ページにオリジナルカスタムフィールドが表示されます(custom_post_typeのslugを指定することも可能)。
	//第5引数はnormalの他にsideとadvancedがあります。
	add_meta_box( 'book_setting', '本の情報', 'insert_book_fields', 'recobook', 'normal');
}
add_action('admin_menu', 'add_book_fields');


// カスタムフィールドの入力エリア
function insert_book_fields() {
	global $post;

	//下記に管理画面に表示される入力エリアを作ります。「get_post_meta()」は現在入力されている値を表示するための記述です。
	echo '題名: <input type="text" name="book_name" value="'.get_post_meta($post->ID, 'book_name', true).'" size="50" /><br>';
	echo '作者: <input type="text" name="book_author" value="'.get_post_meta($post->ID, 'book_author', true).'" size="50" /><br>';
	echo '価格: <input type="text" name="book_price" value="'.get_post_meta($post->ID, 'book_price', true).'" size="50" /> <br>';
	
	if( get_post_meta($post->ID,'book_label',true) == "best-seller" ) {
		$book_label_check = "checked";
	}//チェックされていたらチェックボックスの$book_label_checkの場所にcheckedを挿入
	echo 'ベストセラー: <input type="checkbox" name="book_label" value="best-seller" '.$book_label_check.' style="margin-right:20px;">';
	
	if( get_post_meta($post->ID,'book_label2',true) == "master-reco" ) {
		$book_label_check2 = "checked";
	}//チェックされていたらチェックボックスの$book_label_check2の場所にcheckedを挿入
	echo '店長のおすすめ: <input type="checkbox" name="book_label2" value="master-reco" '.$book_label_check2.' >';
}
 
 
// カスタムフィールドの値を保存
function save_book_fields( $post_id ) {
	if(!empty($_POST['book_name'])){ //題名が入力されている場合
		update_post_meta($post_id, 'book_name', $_POST['book_name'] ); //値を保存
	}else{ //題名未入力の場合
		delete_post_meta($post_id, 'book_name'); //値を削除
	}
	
	if(!empty($_POST['book_author'])){
		update_post_meta($post_id, 'book_author', $_POST['book_author'] );
	}else{
		delete_post_meta($post_id, 'book_author');
	}
	
	if(!empty($_POST['book_price'])){
		update_post_meta($post_id, 'book_price', $_POST['book_price'] );
	}else{
		delete_post_meta($post_id, 'book_price');
	}
	
	if(!empty($_POST['book_label'])){
		update_post_meta($post_id, 'book_label', $_POST['book_label'] );
	}else{
		delete_post_meta($post_id, 'book_label');
	}
	
	if(!empty($_POST['book_label2'])){
		update_post_meta($post_id, 'book_label2', $_POST['book_label2'] );
	}else{
		delete_post_meta($post_id, 'book_label2');
	}
}
add_action('save_post', 'save_book_fields');

function my_add_entry_body_after2(){
    // カスタム投稿タイプ recobook のときだけカスタムフィールドを表示する
    if ( 'recobook' === get_post_type() ){
        global $post;
        $append_html  = '<table class="table mt-4 mb-4">';
        $append_html .= '<tr><th>題名</th>';
        $append_html .= '<td class="text-right"><span class="best ' . esc_html( $post->book_label ) . '"></span><span class="reco ' . esc_html( $post->book_label2 ) . '"></span>' . esc_html( $post->book_name ) . '</td></tr>';
        $append_html .= '<tr><th>作者</th>';
        $append_html .= '<td class="text-right">' . esc_html( $post->book_author ) . '</td></tr>';
        $append_html .= '<tr><th>価格</th>';
        $append_html .= '<td class="text-right">' . esc_html( $post->book_price ) . '</td></tr>';
        $append_html .= '</table>';
        echo $append_html;
    }
}
add_action( 'lightning_entry_body_before', 'my_add_entry_body_after2' );

style.css に記述するコード

ベストセラー・店長おすすめにチェックされたときにラベルを表示するようにしてあります。

/*-------------------------------------------*/
/*	ベストセラー・店長おすすめのラベル
/*-------------------------------------------*/
span.best-seller:before {
display: inline-block;
background-color: #0d0;
content: "ベストセラー";
color: #fff;
text-align: center;
padding: 2px 10px;
font-size: 11px;
border-radius: 5px;
margin-right: 5px;
}

span.master-reco:before {
display: inline-block;
background-color: #99f;
content: "店長おすすめ";
color: #fff;
text-align: center;
padding: 2px 10px;
font-size: 11px;
border-radius: 5px;
margin-right: 5px;
}

この結果、ページの先頭に本の情報が表示されています。

このやり方の長所

  • テキストデータ以外も入力ができる。
  • 入力画面がユーザーフレンドリー。

このやり方の短所

  • 機能を組み込むのに必要なスキルレベルが高くかつ手間がかかるので、複雑な案件では苦労しそう。
    Advaced Custom Field を使えば楽ができるけど、Advaced Custom Field は他のプラグイン (例:Welcart) との相性問題が起きているようなので注意が必要。

アーカイブページにカスタムフィールドを表示するには

カスタム投稿タイプ「おすすめの本」のアーカイブページにもカスタムフィールドを表示するようにしました。

「おすすめの本」のアーカイブページ:https://lightning.hp2.work/recobook/

Lightning アーカイブページ設定

カスタマイズ ⇒ Lightning アーカイブページ設定 ⇒ おすすめの本 で表示タイプとカラム、表示要素を指定します。

Lightning アーカイブページ設定

Lightning はカスタム投稿タイプごとに日付や新着表示を非表示にすることができるので、すごく便利です。

functions.php に記述するコード

functions.php に以下のコードを記述してあります。

// カスタム投稿タイプ「おすすめの本(recobook)」のアーカイブページにカスタムフィールドを表示する。
add_filter( 'vk_post_options', 'my_vk_post_option_custom' );
function my_vk_post_option_custom( $options ){
    global $post;
    // カスタム投稿タイプのアーカイブを指定
    if ( get_post_type() === 'recobook' || is_archive() ){

        // 先頭に追加するHTMLを変数に入れておく。
        $prepend_html = '<span class="best ' . esc_html( $post->book_label ) . '"></span><span class="reco ' . esc_html( $post->book_label2 ) . '"></span>';

        // 先頭に追加するHTMLをオプションにセット
        $options['body_prepend'] = $prepend_html;

        // 最後に追加するHTMLを変数に入れておく。
        $append_html .= '<table class="table-sm mt-1 mb-1">';
        $append_html .= '<tr><th>作者</th>';
        $append_html .= '<td class="text-right">' . esc_html( $post->book_author ) . '</td></tr>';
        $append_html .= '<tr><th>価格</th>';
        $append_html .= '<td class="text-right">' . esc_html( $post->book_price ) . '</td></tr>';
        $append_html .= '</table>';

        // 最後に追加するHTMLをオプションにセット
        $options['body_append'] = $append_html;

    }
    return $options;
}
できるPower BI
作者奥田 理恵
価格2,640円
おいしいコーヒーの淹れ方
作者マスターT
価格1,320円