wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > wordpress自定义字段(4):给自定义面版添加下拉框、复选框等表单项

    wordpress自定义字段(4):给自定义面版添加下拉框、复选框等表单项

    高时银博客 wordpress CMS主题制作 点击: 2,813 次 0 0

    上一章我们为后台文章发表页添加了wordpress自定义字段面版——关键字与文章描述面版。但是,在我们wordpress主题目的开发中,只是这2项,还是远远不够。我们在wordpress主题开发时,还是可以大大地利用wordpress自定义字段的更加强大的功能的。比如:自定义面版中添加单选框、复选框、文本框、文本域、下拉选择框、上传图片等等。那么,怎样在wordpress自定义面版中添加下拉框、复选框这些表单项呢?这就是本章要讲的内容了,本章我们将给自定义面板添加简单的表单:文本框、文本域、单选框、复选框、下拉选择框。完成后,效果如下图:

    wordpress自定义字段(4):给自定义面版添加下拉框、复选框等表单项

    1、添加字段数组,代码如下:

    $new_meta_boxes =
    array(
    "title" => array(
    "name" => "_meta_title",
    "std" => "",
    "title" => "标题",
    "type"=>"title"),

    "keywords" => array(
    "name" => "_meta_keywords",
    "std" => "",
    "title" => "关键字",
    "type"=>"text"),

    "description" => array(
    "name" => "_meta_description",
    "std" => "",
    "title" => "描述",
    "type"=>"textarea"),

    "category" => array(
    "name" => "_meta_cate",
    "std" => "",
    "title" => "选择分类",
    "subtype"=> "cat",
    "type"=>"dropdown"),

    "radio" => array(
    "name" => "_meta_radio",
    "std" => 1,
    "title" => "单选框",
    "buttons" => array('Yes','No'),
    "type"=>"radio"),

    "checkbox" => array(
    "name" => "_meta_checkbox",
    "std" => 1,
    "title" => "复选框",
    "type"=>"checkbox"),

    );

    这段代码是我们要在自定义面版中需要添加的表单项。

    2、创建自定义面版内容函数,代码如下:

    //面板内容的函数
    function new_meta_boxes() {
    global $post, $new_meta_boxes;
    foreach($new_meta_boxes as $meta_box) {
    $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);
    if($meta_box_value != "")
    $meta_box['std'] = $meta_box_value;

    echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
    switch ( $meta_box['type'] ){
    case 'title':
    echo'<h4>'.$meta_box['title'].'</h4>';
    break;
    case 'text':
    echo'<h4>'.$meta_box['title'].'</h4>';
    echo '<input type="text" size="40" name="'.$meta_box['name'].'_value" value="'.$meta_box['std'].'" /><br />';
    break;
    case 'textarea':
    echo'<h4>'.$meta_box['title'].'</h4>';
    echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box['std'].'</textarea><br />';
    break;
    case 'dropdown':
    echo'<h4>'.$meta_box['title'].'</h4>';
    if($meta_box['subtype'] == 'cat'){
    $select = 'Select category';
    $entries = get_categories('title_li=&orderby=name&hide_empty=0');//获取分类
    }
    echo '<p><select name="'.$meta_box['name'].'_value"> ';
    echo '<option value="">'.$select .'</option> ';
    foreach ($entries as $key => $entry){
    $id = $entry->term_id;
    $title = $entry->name;
    if ( $meta_box['std'] == $id ){
    $selected = "selected='selected'";
    }else{
    $selected = "";
    }
    echo "<option $selected value='". $id."'>". $title."</option>";
    }
    echo '</select><br />';
    break;
    case 'radio':
    echo'<h4>'.$meta_box['title'].'</h4>';
    $counter = 1;
    foreach( $meta_box['buttons'] as $radiobutton ) {
    $checked ="";
    if(isset($meta_box['std']) && $meta_box['std'] == $counter) {
    $checked = 'checked = "checked"';
    }
    echo '<input '.$checked.' type="radio" class="kcheck" value="'.$counter.'" name="'.$meta_box['name'].'_value"/>'.$radiobutton;
    $counter++;
    }
    break;
    case 'checkbox':
    echo'<h4>'.$meta_box['title'].'</h4>';
    if( isset($meta_box['std']) && $meta_box['std'] == 'true' )
    $checked = 'checked = "checked"';
    else
    $checked = '';
    echo '<input type="checkbox" name="'.$meta_box['name'].'_value" value="true" '.$checked.' />';
    break;

    }
    }
    }

    3、创建自定义面版,代码如下:

    function create_meta_box() {
    global $theme_name;

    if ( function_exists('add_meta_box') ) {
    add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );
    }
    }

     

    4、保存更新自定义面版数据。代码如下:

    function save_postdata( $post_id ) {
    global $post, $new_meta_boxes;

    foreach($new_meta_boxes as $meta_box) {
    if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
    return $post_id;
    }

    if ( 'page' == $_POST['post_type'] ) {
    if ( !current_user_can( 'edit_page', $post_id ))
    return $post_id;
    }
    else {
    if ( !current_user_can( 'edit_post', $post_id ))
    return $post_id;
    }

    $data = $_POST[$meta_box['name'].'_value'];

    if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
    add_post_meta($post_id, $meta_box['name'].'_value', $data, true);
    elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
    update_post_meta($post_id, $meta_box['name'].'_value', $data);
    elseif($data == "")
    delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
    }
    }

    5、添加动作触发函数。代码如下:

    add_action('admin_menu', 'create_meta_box');
    add_action('save_post', 'save_postdata');

    相关函数,我们在前面已经做了详细的解说,所以这里就不多说了,只是帖出代码,供大家参考。

    好了,有关wordpress自定义面版添加文本框、复选框、下拉框等表单项的内容就介绍到这里,如有疑问可参阅高时银博客的相关内容,后期将继续为大家讲解wordpress自定义字段的相关内容。谢谢参阅。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506034217.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    2 个评论 来自 “wordpress自定义字段(4):给自定义面版添加下拉框、复选框等表单项”

    1. joffrey 回复 | 引用 Post:2016-08-09 at 17:53

      请教一个问题,WordPress中评论表单中可以添加下拉框和复选框吗?

      • 高时银博客 回复 | 引用 Post:2016-08-19 at 09:10

        当然可以添加,只要你懂php代码。
        不过,没这个必要吧。

    发表评论