php 扩展Elementor：自定义按钮字段和皮肤| https://www.ibenic.com/extending-elementor-custom-button-field-skin

Posted 2021-05-05

<?php

/**
   * Render button widget output in the editor.
   * Copy of the Button content template.
   *
   * Written as a Backbone JavaScript template and used to generate the live preview.
   *
   */
  public function _content_template() {
    ?>
    <div class="elementor-button-wrapper">
      <a class="<# if( 'no' === settings.custom_button_type ) { #>elementor-size-{{ settings.size }}<# } else { #>{{ settings.custom_button_type }}<# } #> elementor-button elementor-animation-{{ settings.hover_animation }}" href="{{ settings.link.url }}">
        <span class="elementor-button-content-wrapper">
          <# if ( settings.icon ) { #>
          <span class="elementor-button-icon elementor-align-icon-{{ settings.icon_align }}">
            <i class="{{ settings.icon }}"></i>
          </span>
          <# } #>
          <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">{{{ settings.text }}}</span>
        </span>
      </a>
    </div>
    <?php
  }

<?php

add_action( 'elementor/init', 'custom_register_skin' );

/**
 * Adding our Skin Class on Elementor Init
 */
function custom_register_skin() {
  class Custom_Button_Skin extends Elementor\Skin_Base {

    public function __construct( Elementor\Widget_Base $parent ) {
      parent::__construct( $parent );
    }

     
    public function get_id() {
      return 'custom_button';
    }

    public function get_title() {
      return __( 'Custom Button', 'yourtextdomain' );
    }
 
    public function render() {
      $settings = $this->parent->get_settings();

      $this->parent->add_render_attribute( 'button', 'class', 'elementor-button-wrapper' );

      if ( ! empty( $settings['link']['url'] ) ) {
        $this->parent->add_render_attribute( 'button', 'href', $settings['link']['url'] );
        $this->parent->add_render_attribute( 'button', 'class', 'elementor-button-link' );

        if ( $settings['link']['is_external'] ) {
          $this->parent->add_render_attribute( 'button', 'target', '_blank' );
        }

        if ( $settings['link']['nofollow'] ) {
          $this->parent->add_render_attribute( 'button', 'rel', 'nofollow' );
        }
      }

      $button_type = 'no';
      
      if( $settings['custom_button_type'] ) { 
         $this->parent->add_render_attribute( 'button', 'class', $settings['custom_button_type'], true );
         $button_type = $settings['custom_button_type'];
      }

      $this->parent->add_render_attribute( 'button', 'class', 'elementor-button' );

      if ( $settings['hover_animation'] ) {
        $this->parent->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['hover_animation'] );
      }

      if ( ! empty( $settings['size'] ) && 'no' === $button_type ) {
        $this->parent->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['size'] );
      }

      ?>
      <div <?php echo $this->parent->get_render_attribute_string( 'wrapper' ); ?>>
        <a <?php echo $this->parent->get_render_attribute_string( 'button' ); ?>>
          <?php $this->render_text(); ?>
        </a>
      </div>
      <?php
    }
    
    /**
     * Direct Copy of the Button Class
     */
    protected function render_text() {
      $settings = $this->parent->get_settings();
      $this->parent->add_render_attribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' );
      $this->parent->add_render_attribute( 'icon-align', 'class', 'elementor-align-icon-' . $settings['icon_align'] );
      $this->parent->add_render_attribute( 'icon-align', 'class', 'elementor-button-icon' );

      $this->parent->add_render_attribute( 'text', 'class', 'elementor-button-text' );

      ?>
      <span <?php echo $this->parent->get_render_attribute_string( 'content-wrapper' ); ?>>
        <?php if ( ! empty( $settings['icon'] ) ) : ?>
        <span <?php echo $this->parent->get_render_attribute_string( 'icon-align' ); ?>>
          <i class="<?php echo esc_attr( $settings['icon'] ); ?>"></i>
        </span>
        <?php endif; ?>
        <span <?php echo $this->parent->get_render_attribute_string( 'text' ); ?>><?php echo $settings['text']; ?></span>
      </span>
      <?php
    }
  }
}

<?php

public function __construct( Elementor\Widget_Base $parent ) {
  parent::__construct( $parent );
  add_filter( 'elementor/widget/print_template', array( $this, 'skin_print_template' ), 10, 2 );
}

public function skin_print_template( $content, $button ) {
  if( 'button' == $button->get_name() ) {
    // If we don't want a JavaScript Template, just uncomment this below
    // return '';
    
    ob_start();
    $this->_content_template();
    $content = ob_get_clean();
  }
  return $content;
}

<?php

add_action( 'elementor/widget/button/skins_init', 'add_skin_button' ); 

/**
 * Adding our Custom Button Skin
 */
function add_skin_button( $button ) {
  $button->add_skin( new Custom_Button_Skin( $button ) );
}

<?php

add_action( 'elementor/element/button/section_style/after_section_start', 'custom_button_field', 10, 2 );

/**
 * Adding button fields
 * @param \Elementor\Widget_Base $button
 * @param array                  $args
 */
function custom_button_field( $button, $args ) {

    $button->add_control( 'custom_button_type',
        [
        'label' => __( 'Button Type', 'elementor' ),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'button',
        'options' => array(
          'no' => 'Default Button',
          'button' => 'Button',
          'button brand' => 'Orange',
          'button brand gradient' => 'Orange Gradient'
        )
        ]
    );
}

<?php

add_action( 'elementor/widget/before_render_content', 'custom_render_button' );

/**
 * Adding a new attribute to our button
 *
 * @param \Elementor\Widget_Base $button
 */
function custom_render_button( $button ) {
  //Check if we are on a button
  if( 'button' === $button->get_name() ) {
    // Get the settings
    $settings = $button->get_settings();
    
    // Adding our type as a class to the button
    if( $settings['custom_button_type'] ) {
      $button->add_render_attribute( 'button', 'class', $settings['custom_button_type'], true );
    }
  }
}