首页 > WordPress
ACF添加自定义字段,并在elementor中使用
来源:TP课堂 时间:2023-01-01 点击:1580

之前有人问如何快速学会php?我只能以亲身经历相告:实践,最好去公司打工,项目练手!

有个问题困扰了两天,加上乱七八糟的事情,还天天带孩子做游戏、出去玩,磨磨蹭蹭才把问题解决。
项目背景:

wordpress+elementor pro。客户需要调取自定义字段,比如房产的价格、房产的位置、房产房间情况,这在elementor中的原始posts中原始的字段肯定无法满足:

image.png

1、先加字段:

有两种方法第一个是在数据库中自个来:

ALTER TABLE `wp_posts` ADD `house_status` VARCHAR(100) NOT NULL;

然后在functions.php中添加代码:

/**
     * ----------------
     * WordPress发布文章/页面时自动添加默认的自定义字段
     *
     */
    /* Define the custom box,适用WP 3.0以后的版本 */
    add_action( 'add_meta_boxes', 'ludou_add_custom_box' );
     
    // 如果是WP 3.0之前的版本,使用以下一行代码
    // add_action( 'admin_init', 'ludou_add_custom_box', 1 );
   
    /* Do something with the data entered */
    add_action( 'save_post', 'ludou_save_postdata' );
   
    /* Adds a box to the main column on the Post and Page edit screens */
    function ludou_add_custom_box() {
      add_meta_box(
        'ludou_sectionid',
        '附加字段', // 可自行修改标题文字
        'ludou_inner_custom_box',
        'post'
      );
    }
   
    /* Prints the box content */
    function ludou_inner_custom_box( $post ) {
      global $wpdb;
     
      // Use nonce for verification
      wp_nonce_field( plugin_basename( __FILE__ ), 'ludou_noncename' );
     
      // 获取固定字段keywords和description的值,用于显示之前保存的值
      // 此处wp_posts新添加的字段为keywords和description,多个用半角逗号隔开
      $date = $wpdb->get_row( $wpdb->prepare( "SELECT url,house_price,house_info,house_status FROM $wpdb->posts WHERE ID = %d", $post->ID) );
   
      // Keywords 字段输入框的HTML代码
      echo '<label for="url_new_field">文件地址</label> ';
      echo '<input type="text" id="url_new_field" name="url_new_field" value="'.$date->url.'" style="width:90%"  /><br><br>';
      echo '<label for="house_price_new_field">房产价格</label> ';
      echo '<input type="text" id="house_price_new_field" name="house_price_new_field" value="'.$date->house_price.'" style="width:90%" /><br><br>';
      echo '<label for="house_info_new_field">房产描述</label> ';
      echo '<input type="text" id="house_info_new_field" name="house_info_new_field" value="'.$date->house_info.'" style="width:90%" /><br><br>';
      echo '<label for="house_info_new_field">房产状态</label> ';
      echo '<input type="text" id="house_status_new_field" name="house_status_new_field" value="'.$date->house_status.'" style="width:90%" /><br><br>';

    }
   
    /* 文章提交更新后,保存固定字段的值 */
    function ludou_save_postdata( $post_id ) {
      // verify if this is an auto save routine.
      // If it is our form has not been submitted, so we dont want to do anything
      if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
          return;
   
      // verify this came from the our screen and with proper authorization,
      // because save_post can be triggered at other times
      if ( !wp_verify_nonce( $_POST['ludou_noncename'], plugin_basename( __FILE__ ) ) )
          return;
   
      // 权限验证
      if ( 'post' == $_POST['post_type'] ) {
        if ( !current_user_can( 'edit_post', $post_id ) )
            return;
      }
   
      // 获取编写文章时填写的固定字段的值,多个字段依此类推
      $url = $_POST['url_new_field'];
      $house_info = $_POST['house_info_new_field'];
      $house_price = $_POST['house_price_new_field'];
      $house_status = $_POST['house_status_new_field'];
      // 更新数据库,此处wp_posts新添加的字段为keywords和description,多个根据你的情况修改
      global $wpdb;
      $wpdb->update( "$wpdb->posts",
              // 以下一行代码,多个字段的话参照下面的写法,单引号中是字段名,右边是变量值。半角逗号隔开
              array( 'url' => $url, 'house_info'=>$house_info,'house_price'=>$house_price,'house_status'=>$house_status ),
              array( 'ID' => $post_id ),
              // 添加了多少个新字段就写多少个%s,半角逗号隔开
              array( '%s', '%s' ),
              array( '%d' )  
      );
    }

另一种方法是用插件Advanced Custom Fields,简称ACF:

image.png

安装插件、启动插件、新建字段等一系列操作。


2、验证自定义字段是否成功:

添加文章,能够找到并且能够保存上自定义的字段内容,就算成功了。

image.png

3、建立loop item

自定义字段添加成功了,如何调取呢,用的是loop。

首先打开两处开关,也就是让它启动:Save as Default和Loop

image.png


接下来在Theme Builder中建立loop item,这里找到你定义的字段。倒腾完后发布。

image.png

4、elementor调用自定义字段

接下来就简单了,用Loop Grid组件,找到刚刚保存的loop item。调整细节完事。


这块国内的资料真是少之又少,这篇文章是不是在国内也算香饽饽呢,哈哈。


参考文献:

https://www.youtube.com/watch?v=CnPmFonskso

https://youtu.be/DXxBFU9CNvg