将社交媒体图标小部件添加到定制器

时间:2016-06-08 作者:J. Doe

如何添加自定义程序小部件来添加社交媒体图标,并将其链接到其社交媒体配置文件?为了清理它,我使用inspect元素创建了一些图像。

I want to have a section like this, with an add widget button:

When you click on it, the user will see the Social Media widget:

The user clicks on it and gets the following form:

<我尝试了什么?我已经在widgets API page 我已经试过了register_sidebar:

function arphabet_widgets_init() {

    register_sidebar( array(
        \'name\'          => \'Social Media button\',
        \'id\'            => \'smb\',
        \'before_widget\' => \'<div>\',
        \'after_widget\'  => \'</div>\',
    ) );

    register_sidebar( array(
        \'name\'          => \'Link button\',
        \'id\'            => \'lb\',
        \'before_widget\' => \'<div>\',
        \'after_widget\'  => \'</div>\',
    ) );

    class My_Widget extends WP_Widget {

        public function __construct() {
            $widget_ops = array( 
                \'classname\' => \'my_widget\',
                \'description\' => \'Adds a new Social Media button\',
            );
            parent::__construct( \'my_widget\', \'Social Media button\', $widget_ops );
        }

    public function widget( $args, $instance ) {
        echo $args[\'before_widget\'];
        if ( ! empty( $instance[\'title\'] ) ) {
            echo $args[\'before_title\'] . apply_filters( \'widget_title\', $instance[\'title\'] ) . $args[\'after_title\'];
        }
        echo __( esc_attr( \'Hello, World!\' ), \'text_domain\' );
        echo $args[\'after_widget\'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance[\'title\'] ) ? $instance[\'title\'] : __( \'New title\', \'text_domain\' );
        ?>
        <p>
        <label for="<?php echo esc_attr( $this->get_field_id( \'title\' ) ); ?>"><?php _e( esc_attr( \'Title:\' ) ); ?></label> 
        <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( \'title\' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( \'title\' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php 
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance[\'title\'] = ( ! empty( $new_instance[\'title\'] ) ) ? strip_tags( $new_instance[\'title\'] ) : \'\';

        return $instance;
    }
    }

    register_widget( \'My_Widget\' );

}
add_action( \'widgets_init\', \'arphabet_widgets_init\' );
但这并没有将“添加小部件”按钮添加到定制器的小部件部分。我不知道该怎么解决这个问题。

2 个回复
最合适的回答,由SO网友:Sumit 整理而成

你们的小部件还可以,但问题是,若在当前查看页面上并没有调用侧栏,那个么定制程序不会显示侧栏选项。

您确实注册了这两个侧边栏,但没有在customizer中看到的页面模板中的任何位置调用它们。

使用dynamic_sidebar 函数并调用模板中某个地方的侧栏。

示例:-

dynamic_sidebar( \'smb\' ); //For social media buttons sidebar
/* OR/AND */
dynamic_sidebar( \'lb\' ); //For link button sidebar

SO网友:Rohit Kaushik

嗨,你可以为此制作一个插件

<?php
/*
  Plugin Name: Adlivetech Social Profile Widget
  Plugin URI: http://adlivetech.com
  Description: Links to Author social media profile
  Author: Rohit Kaushik
  Author URI: http://adlivetech.com
 */

/**
 * Adds Adlivetech_Social_profile widget.
 */
class Adlivetech_Social_profile extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
                \'Adlivetech_Social_profile\',
                __(\'Social Networks Profiles\', \'translation_domain\'), // Name
                array(\'description\' => __(\'Links to Author social media profile\', \'translation_domain\'),)
        );
    }

    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget($args, $instance) {

        $title = apply_filters(\'widget_title\', $instance[\'title\']);
        $facebook = $instance[\'facebook\'];
        $twitter = $instance[\'twitter\'];
        $google = $instance[\'google\'];
        $linkedin = $instance[\'linkedin\'];
        $instagram = $instance[\'instagram\'];

        // social profile link
        $facebook_profile = \'<a target="_blank" class="facebook" href="\' . $facebook . \'"><i class="fa fa-facebook"></i></a>\';
        $twitter_profile = \'<a target="_blank" class="twitter" href="\' . $twitter . \'"><i class="fa fa-twitter"></i></a>\';
        $google_profile = \'<a target="_blank" class="google" href="\' . $google . \'"><i class="fa fa-google-plus"></i></a>\';
        $linkedin_profile = \'<a target="_blank" class="linkedin" href="\' . $linkedin . \'"><i class="fa fa-linkedin"></i></a>\';
        $instagram_profile = \'<a target="_blank" class="instagram" href="\' . $instagram . \'"><i class="fa fa-instagram"></i></a>\';

        echo $args[\'before_widget\'];

        if (!empty($title)) {
            echo $args[\'before_title\'] . $title . $args[\'after_title\'];
        }

        echo \'<div class="social-icons">\';
        echo (!empty($facebook) ) ? $facebook_profile : null;
        echo (!empty($twitter) ) ? $twitter_profile : null;
        echo (!empty($google) ) ? $google_profile : null;
        echo (!empty($linkedin) ) ? $linkedin_profile : null;
        echo (!empty($instagram) ) ? $instagram_profile : null;
        echo \'</div>\';

        echo $args[\'after_widget\'];
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form($instance) {
        isset($instance[\'title\']) ? $title = $instance[\'title\'] : null;
        empty($instance[\'title\']) ? $title = \'My Social Profile\' : null;

        isset($instance[\'facebook\']) ? $facebook = $instance[\'facebook\'] : null;
        isset($instance[\'twitter\']) ? $twitter = $instance[\'twitter\'] : null;
        isset($instance[\'google\']) ? $google = $instance[\'google\'] : null;
        isset($instance[\'linkedin\']) ? $linkedin = $instance[\'linkedin\'] : null;
        isset($instance[\'instagram\']) ? $instagram = $instance[\'instagram\'] : null;
        ?>
        <p>
            <label for="<?php echo $this->get_field_id(\'title\'); ?>"><?php _e(\'Title:\'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id(\'title\'); ?>" name="<?php echo $this->get_field_name(\'title\'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'facebook\'); ?>"><?php _e(\'Facebook:\'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id(\'facebook\'); ?>" name="<?php echo $this->get_field_name(\'facebook\'); ?>" type="text" value="<?php echo esc_attr($facebook); ?>">
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'twitter\'); ?>"><?php _e(\'Twitter:\'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id(\'twitter\'); ?>" name="<?php echo $this->get_field_name(\'twitter\'); ?>" type="text" value="<?php echo esc_attr($twitter); ?>">
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'google\'); ?>"><?php _e(\'Google+:\'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id(\'google\'); ?>" name="<?php echo $this->get_field_name(\'google\'); ?>" type="text" value="<?php echo esc_attr($google); ?>">
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'linkedin\'); ?>"><?php _e(\'Linkedin:\'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id(\'linkedin\'); ?>" name="<?php echo $this->get_field_name(\'linkedin\'); ?>" type="text" value="<?php echo esc_attr($linkedin); ?>">
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'instagram\'); ?>"><?php _e(\'Instagram:\'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id(\'instagram\'); ?>" name="<?php echo $this->get_field_name(\'instagram\'); ?>" type="text" value="<?php echo esc_attr($instagram); ?>">
        </p>

        <?php
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance[\'title\'] = (!empty($new_instance[\'title\']) ) ? strip_tags($new_instance[\'title\']) : \'\';
        $instance[\'facebook\'] = (!empty($new_instance[\'facebook\']) ) ? strip_tags($new_instance[\'facebook\']) : \'\';
        $instance[\'twitter\'] = (!empty($new_instance[\'twitter\']) ) ? strip_tags($new_instance[\'twitter\']) : \'\';
        $instance[\'google\'] = (!empty($new_instance[\'google\']) ) ? strip_tags($new_instance[\'google\']) : \'\';
        $instance[\'linkedin\'] = (!empty($new_instance[\'linkedin\']) ) ? strip_tags($new_instance[\'linkedin\']) : \'\';
        $instance[\'instagram\'] = (!empty($new_instance[\'instagram\']) ) ? strip_tags($new_instance[\'instagram\']) : \'\';

        return $instance;
    }

}

// register Adlivetech_Social_profile widget
function register_Adlivetech_Social_profile() {
    register_widget(\'Adlivetech_Social_profile\');
}

add_action(\'widgets_init\', \'register_Adlivetech_Social_profile\');

// enqueue css stylesheet
function Adlivetech_Social_profile_widget_css() {
    wp_enqueue_style(\'social-profile-widget\', plugins_url(\'designmodo-social-profile-widget.css\', __FILE__));
}

add_action(\'wp_enqueue_scripts\', \'Adlivetech_Social_profile_widget_css\');

相关推荐

My widgets do not save

每次我保存我的小部件并离开页面时,我的小部件都会消失。侧边栏已完全清空,不会保存任何更改。控制台或PHP日志中没有任何错误。如果我将小部件直接复制并保存在数据库中widgets_text, 它们将被显示,但我仍然无法在侧边栏中添加或删除任何内容。这只发生在我的右侧边栏上,左侧边栏工作正常,但它们都以相同的方式注册。这是我注册侧边栏的方式:function my_widgets_init() { register_sidebar( array ( \'name\'