• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress自定义字段(7):创建自定义面版类文件

    wordpress自定义字段(7):创建自定义面版类文件

    作者: 分类:wordpress CMS主题制作 点击: 2,247 次
    wordpress CMS主题:ssmay主题

      通过前面几章有关wordpress自定义字段的介绍,我们了解了如何在wordpress主题中添加wordpress自定义字段面版,wordpress自定义面版包括:文本框、文本域、下拉框、单选框、复选框、编辑器、图片上传等一系列表单项,这样大大丰富了wordpress主题功能的。但是,这样有时在制作wordpress主题中,总是这样一点点地添加代码,有点麻烦,为了让这些wordpress自定义面版的功能能在以后的wordpress主题制作中方便地利用,我们可以把这些wordpress自定义字段代码封到一个类中,这样,想什么时候用就可以轻松地拿出来。下面,就一起来看看怎样创建wordpress自定义字段面版类文件及怎样使用。

      1、在主题文件夹下创建一个metabox.class.php类文件,然后通过dreamweaver打开这个metabox.class.php文件,将下面这段代码放进去:

      <?php
      //文章自定义字段类文倒插门
      class ashu_meta_box{
      var $options;
      var $boxinfo;

      //构造函数
      function ashu_meta_box($options,$boxinfo){
      $this->options = $options;
      $this->boxinfo = $boxinfo;

      add_action('admin_menu', array(&$this, 'init_boxes'));
      add_action('save_post', array(&$this, 'save_postdata'));
      }

      //初始化
      function init_boxes(){
      $this->add_script_and_styles();
      $this->create_meta_box();
      }

      //加载css和js脚本
      function add_script_and_styles(){
      if(basename( $_SERVER['PHP_SELF']) == "page.php"
      || basename( $_SERVER['PHP_SELF']) == "page-new.php"
      || basename( $_SERVER['PHP_SELF']) == "post-new.php"
      || basename( $_SERVER['PHP_SELF']) == "post.php"
      || basename( $_SERVER['PHP_SELF']) == "media-upload.php")
      {
      //注意加载的脚本的url
      wp_enqueue_style('metabox_fields_css', TEMJS_URI. 'metabox_fields.css');
      wp_enqueue_script('metabox_fields_js',TEMJS_URI. 'metabox_fields.js');
      wp_enqueue_style('thickbox');
      wp_enqueue_script('media-upload');
      wp_enqueue_script('thickbox');

      if(isset($_GET['hijack_target']))
      {
      add_action('admin_head', array(&$this,'add_hijack_var'));
      }
      }
      }

      /*************************/
      function add_hijack_var()
      {
      echo "<meta name='hijack_target' content='".$_GET['hijack_target']."' />\n";
      }

      //创建自定义面板
      function create_meta_box(){
      if ( function_exists('add_meta_box') && is_array($this->boxinfo['page']) )
      {
      foreach ($this->boxinfo['page'] as $area)
      {
      if ($this->boxinfo['callback'] == '') $this->boxinfo['callback'] = 'new_meta_boxes';

      add_meta_box(
      $this->boxinfo['id'],
      $this->boxinfo['title'],
      array(&$this, $this->boxinfo['callback']),
      $area, $this->boxinfo['context'],
      $this->boxinfo['priority']
      );
      }
      }
      }

      //创建自定义面板的显示函数
      function new_meta_boxes(){
      global $post;
      //根据类型调用显示函数
      foreach ($this->options as $option)
      {
      if (method_exists($this, $option['type']))
      {
      $meta_box_value = get_post_meta($post->ID, $option['id'], true);
      if($meta_box_value != "") $option['std'] = $meta_box_value;

      echo '<div class="alt kriesi_meta_box_alt meta_box_'.$option['type'].' meta_box_'.$this->boxinfo['context'].'">';
      $this->$option['type']($option);
      echo '</div>';
      }
      }

      //隐藏域
      echo'<input type="hidden" name="'.$this->boxinfo['id'].'_noncename" id="'.$this->boxinfo['id'].'_noncename" value="'.wp_create_nonce( 'ashumetabox' ).'" />';
      }

      //保存字段数据
      function save_postdata() {
      if( isset( $_POST['post_type'] ) && in_array($_POST['post_type'],$this->boxinfo['page'] ) && (isset($_POST['save']) || isset($_POST['publish']) ) ){
      $post_id = $_POST['post_ID'];

      foreach ($this->options as $option) {
      if (!wp_verify_nonce($_POST[$this->boxinfo['id'].'_noncename'], 'ashumetabox')) {
      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 ;
      }
      //将预定义字符转换为html实体
      if( $option['type'] == 'tinymce' ){
      $data = stripslashes($_POST[$option['id']]);
      }elseif( $option['type'] == 'checkbox' ){
      $data = $_POST[$option['id']];
      }else{
      $data = htmlspecialchars($_POST[$option['id']], ENT_QUOTES,"UTF-8");
      }

      if(get_post_meta($post_id , $option['id']) == "")
      add_post_meta($post_id , $option['id'], $data, true);

      elseif($data != get_post_meta($post_id , $option['id'], true))
      update_post_meta($post_id , $option['id'], $data);

      elseif($data == "")
      delete_post_meta($post_id , $option['id'], get_post_meta($post_id , $option['id'], true));

      }
      }
      }
      //显示标题
      function title($values){
      echo '<p>'.$values['name'].'</p>';
      }
      //文本框
      function text($values){
      if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];

      echo '<p>'.$values['name'].'</p>';
      echo '<p><input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';
      echo $values['desc'].'<br/></p>';
      echo '<br/>';
      }
      //文本域
      function textarea($values){
      if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];

      echo '<p>'.$values['name'].'</p>';
      echo '<p><textarea class="kriesi_textarea" cols="60" rows="5" id="'.$values['id'].'" name="'.$values['id'].'">'.$values['std'].'</textarea>';
      echo $values['desc'].'<br/></p>';
      echo '<br/>';
      }
      //媒体上传
      function media($values){
      if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];

      //图片上传按钮
      global $post_ID, $temp_ID;
      $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);
      $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";
      $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&amp;type=image");

      $button = '<a href="'.$image_upload_iframe_src.'&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true" id="'.$values['id'].'" class="k_hijack button thickbox" onclick="return false;" >上传</a>';

      //判断图片格式,图片预览
      $image = '';
      if($values['std'] != '') {
      $fileextension = substr($values['std'], strrpos($values['std'], '.') + 1);
      $extensions = array('png','gif','jpeg','jpg','pdf','tif');

      if(in_array($fileextension, $extensions))
      {
      $image = '<img src="'.$values['std'].'" />';
      }
      }

      echo '<div id="'.$values['id'].'_div" class="kriesi_preview_pic">'.$image .'</div>';
      echo '<p>'.$values['name'].'</p><p>';
      if($values['desc'] != "") echo '<p>'.$values['desc'].'<br/>';
      echo '<input class="kriesi_preview_pic_input" type="text" size="'.$values['size'].'" value="'.$values['std'].'" name="'.$values['id'].'"/>'.$button;
      echo '</p>';
      echo '<br/>';
      }
      //单选框
      function radio( $values ){
      if(isset($this->database_options[$values['id']]))
      $values['std'] = $this->database_options[$values['id']];
      echo '<p>'.$values['name'].'</p>';
      foreach( $values['buttons'] as $key=>$value ) {
      $checked ="";
      if($values['std'] == $key) {
      $checked = 'checked = "checked"';
      }
      echo '<input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>'.$value;
      }
      }
      //复选框
      function checkbox($values){
      echo '<p>'.$values['name'].'</p>';
      foreach( $values['buttons'] as $key=>$value ) {
      $checked ="";
      if( is_array($values['std']) && in_array($key,$values['std'])) {
      $checked = 'checked = "checked"';
      }
      echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;
      }
      echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/></p>';
      }
      //下拉框
      function dropdown($values){
      echo '<p>'.$values['name'].'</p>';
      //选择内容可以使页面、分类、菜单、侧边栏和自定义内容
      if($values['subtype'] == 'page'){
      $select = 'Select page';
      $entries = get_pages('title_li=&orderby=name');
      }else if($values['subtype'] == 'cat'){
      $select = 'Select category';
      $entries = get_categories('title_li=&orderby=name&hide_empty=0');
      }else if($values['subtype'] == 'menu'){
      $select = 'Select Menu in page left';
      $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) );
      }else if($values['subtype'] == 'sidebar'){
      global $wp_registered_sidebars;
      $select = 'Select a special sidebar';
      $entries = $wp_registered_sidebars;
      }else{
      $select = 'Select...';
      $entries = $values['subtype'];
      }

      echo '<p><select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';
      echo '<option value="">'.$select .'</option> ';

      foreach ($entries as $key => $entry){
      if($values['subtype'] == 'page'){
      $id = $entry->ID;
      $title = $entry->post_title;
      }else if($values['subtype'] == 'cat'){
      $id = $entry->term_id;
      $title = $entry->name;
      }else if($values['subtype'] == 'menu'){
      $id = $entry->term_id;
      $title = $entry->name;
      }else if($values['subtype'] == 'sidebar'){
      $id = $entry['id'];
      $title = $entry['name'];
      }else{
      $id = $entry;
      $title = $key;
      }

      if ($values['std'] == $id ){
      $selected = "selected='selected'";
      }else{
      $selected = "";
      }

      echo"<option $selected value='". $id."'>". $title."</option>";
      }

      echo '</select>';
      echo $values['desc'].'<br/></p>';
      echo '<br/>';
      }

      //编辑器
      function tinymce($values){
      if(isset($this->database_options[$values['id']]))
      $values['std'] = $this->database_options[$values['id']];

      echo '<p>'.$values['name'].'</p>';
      wp_editor( $values['std'], $values['id'] );
      //wp_editor( $values['std'], 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) );
      //带配置参数
      /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式
      tinymce=>1,//可视化模式
      media_buttons=>0,//取消媒体上传
      textarea_rows=>5,//行数设为5
      editor_class=>"textareastyle") ); */
      }

      }

      上面这段代码就是我们前面所介绍过的wordpress自定义字段面版的类,这个类文件包含了我们前介绍过的所有表单项。

      2、主题文件夹下创建调用这个类的文件metabox.php,通过dreamweaver打开这个文件,在这个metabox.php文件中添加以下代码:

      <?php
      //自定义面板类的实例
      $options = array();

      $boxinfo = array('title' => 'meta box', 'id'=>'ashubox', 'page'=>array('page','post'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');

      $options[] = array( "name" => "标题",
      "type" => "title");

      $options[] = array(
      "name" => "文本框",
      "desc" => "",
      "id" => "ashu_text",
      "size"=>"40",
      "std" => "",
      "type" => "text"
      );

      $options[] = array(
      "name" => "文本域",
      "desc" => "",
      "id" => "ashu_textarea",
      "std" => "",
      "type" => "textarea"
      );

      $options[] = array(
      "name" => "图片上传",
      "desc" => "",
      "id" => "ashu_upimg",
      "std" => "",
      "button_label"=>'上传图片',
      "type" => "media"
      );

      $options[] = array(
      "name" => "单选框",
      "desc" => "",
      "id" => "ashu_radio",
      "std" => 1,
      "buttons" => array('Yes','No'),
      "type" => "radio"
      );

      $options[] = array(
      "name" => "复选框",
      "desc" => "喜欢吃啥?",
      "id" => "ashu_checkbox",
      "buttons" => array('苹果','香蕉','西瓜','芒果'),
      "type" => "checkbox"
      );

      $options[] = array(
      "name" => "下拉选择",
      "desc" => "",
      "id" => "ashu_dropdown",
      "subtype"=> array(
      '1'=>'1',
      '2'=>'2',
      '3'=>'3'
      ),
      "type" => "dropdown"
      );

      $options[] = array(
      "name" => "选择分类",
      "desc" => "",
      "id" => "ashu_cat",
      "subtype"=> "cat",
      "type" => "dropdown"
      );

      $options[] = array(
      "name" => "选择页面",
      "desc" => "",
      "id" => "ashu_page",
      "subtype"=> "page",
      "type" => "dropdown"
      );

      $options[] = array(
      "name" => "选择菜单",
      "desc" => "",
      "id" => "ashu_menu",
      "subtype"=> "menu",
      "type" => "dropdown"
      );

      $options[] = array(
      "name" => "选择侧边栏",
      "desc" => "",
      "id" => "ashu_sidebar",
      "subtype"=> "sidebar",
      "type" => "dropdown"
      );

      $options[] = array(
      "name" => "编辑器",
      "desc" => "",
      "id" => "ashu_tinymce",
      "std" => "",
      "type" => "tinymce"
      );

      $new_box = new ashu_meta_box($options, $boxinfo);

      通过上面这段代码,我们就实例化了这个wordpress自定义面版类了。这样,就可以在后台的发表文章页面显示wordpress自定义面版。如果想让图片上传功能可用,我们还要引用前面我们介绍过的JS文件,将这个JS文件重新命名为metabox_fields.js,这是为了跟上面的类里的引用的JS文件名一至。如果不想显示图片上传功能,可以直接删除metabox.php文件中的图片上传代码就行了。

      使用类的方便之处就在于此了,类里面已经包含了所有我们想要的功能,在实际使用中,我们想使用哪个就调用哪个,就是在metabox.php文件中添加调用的代码,不想使用的功能,就可以不添加,如上面我们说的图片上传,我们不想使用,就可以不添加,这样就大大地降低了我们写代码的工作。

      3、在主题的functions.php文件中添加如相代码来引用metabox.class.php和metabox.php这2个文件:

      include_once('metabox.class.php');
      include_once('metabox.php');

      好了,有关如何创建wordpress自定义字段面版的类文件以及调用就介绍到这里。后续,我们将推了更精彩的内容。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.