<https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=538857>
Hier zijn 3 dingen voor nodig. Doe dit in een child theme:
wp-content/themes/DiviChild/custom-modules/csfm.php {#wp-contentthemesdivichildcustom-modulescsfm.php}
Maak dit bestand met de volgende inhoud:
<?php
class WPC_ET_Builder_Module_Social_Media_Follow_Item extends
ET_Builder_Module {
function init() {
$this->name = esc_html__( 'Social
Network', 'et_builder' );
$this->slug =
'et_pb_social_media_follow_network';
$this->type = 'child';
$this->child_title_var = 'content_new';
$this->whitelisted_fields = array(
'social_network',
'content_new',
'url',
'bg_color',
'skype_url',
'skype_action',
);
$this->fields_defaults = array(
'url' => array( '#' ),
'bg_color' => array( et_builder_accent_color(),
'only_default_setting' ),
'skype_action' => array( 'call' ),
);
$this->advanced_setting_title_text = esc_html__( 'New
Social Network', 'et_builder' );
$this->settings_text = esc_html__( 'Social
Network Settings', 'et_builder' );
$this->custom_css_options = array(
'social_icon' => array(
'label' => esc_html__( 'Social Icon',
'et_builder' ),
'selector' => 'a.icon',
),
'follow_button' => array(
'label' => esc_html__( 'Follow Button',
'et_builder' ),
'selector' => 'a.follow_button',
),
);
}
function get_fields() {
$fields = array(
'social_network' => array(
'label' => esc_html__( 'Social Network',
'et_builder' ),
'type' => 'select',
'option_category' => 'basic_option',
'class' => 'et-pb-social-network',
'options' => array(
'' => esc_html__( 'Select a Network',
'et_builder' ),
'facebook' => array(
'value' => esc_html__( 'facebook',
'et_builder' ),
'data' => array( 'color' => '#3b5998' ),
),
'twitter' => array(
'value' => esc_html__( 'Twitter',
'et_builder' ),
'data' => array( 'color' => '#00aced' ),
),
'google-plus' => array(
'value' => esc_html__( 'Google+',
'et_builder' ),
'data' => array( 'color' => '#dd4b39' ),
),
'pinterest' => array(
'value' => esc_html__( 'Pinterest',
'et_builder' ),
'data' => array( 'color' => '#cb2027' ),
),
'linkedin' => array(
'value' => esc_html__( 'LinkedIn',
'et_builder' ),
'data' => array( 'color' => '#007bb6' ),
),
'tumblr' => array(
'value' => esc_html__( 'tumblr',
'et_builder' ),
'data' => array( 'color' => '#32506d' ),
),
'instagram' => array(
'value' => esc_html__( 'Instagram',
'et_builder' ),
'data' => array( 'color' => '#517fa4' ),
),
'skype' => array(
'value' => esc_html__( 'skype',
'et_builder' ),
'data' => array( 'color' => '#12A5F4' ),
),
'flikr' => array(
'value' => esc_html__( 'flikr',
'et_builder' ),
'data' => array( 'color' => '#ff0084' ),
),
'myspace' => array(
'value' => esc_html__( 'MySpace',
'et_builder' ),
'data' => array( 'color' => '#3b5998' ),
),
'dribbble' => array(
'value' => esc_html__( 'dribbble',
'et_builder' ),
'data' => array( 'color' => '#ea4c8d' ),
),
'youtube' => array(
'value' => esc_html__( 'Youtube',
'et_builder' ),
'data' => array( 'color' => '#a82400' ),
),
'vimeo' => array(
'value' => esc_html__( 'Vimeo',
'et_builder' ),
'data' => array( 'color' => '#45bbff' ),
),
'rss' => array(
'value' => esc_html__( 'RSS', 'et_builder'
),
'data' => array( 'color' => '#ff8a3c' ),
),
),
'affects' => array(
'#et_pb_url',
'#et_pb_skype_url',
'#et_pb_skype_action',
),
'description' => esc_html__( 'Choose the social
network', 'et_builder' ),
),
'content_new' => array(
'label' => esc_html__( 'Content', 'et_builder'
),
'type' => 'hidden',
),
'url' => array(
'label' => esc_html__( 'Account URL',
'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'The URL for
this social network link.', 'et_builder' ),
'depends_show_if_not' => 'skype',
),
'skype_url' => array(
'label' => esc_html__( 'Account Name',
'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'The Skype account
name.', 'et_builder' ),
'depends_show_if' => 'skype',
),
'skype_action' => array(
'label' => esc_html__( 'Skype Button
Action', 'et_builder' ),
'type' => 'select',
'option_category' => 'basic_option',
'options' => array(
'call' => esc_html__( 'Call', 'et_builder'
),
'chat' => esc_html__( 'Chat', 'et_builder'
),
),
'depends_show_if' => 'skype',
'description' => esc_html__( 'Here you can
choose which action to execute on button click', 'et_builder' ),
),
'bg_color' => array(
'label' => esc_html__( 'Icon Color',
'et_builder' ),
'type' => 'color-alpha',
'description' => esc_html__( 'This will change
the icon color.', 'et_builder' ),
'additional_code' => '<span
class="et-pb-reset-setting reset-default-color" style="display:
none;"></span>',
),
);
return $fields;
}
function shortcode_callback( $atts, $content = null,
$function_name ) {
global $et_pb_social_media_follow_link;
$social_network =
$this->shortcode_atts['social_network'];
$url = $this->shortcode_atts['url'];
$bg_color = $this->shortcode_atts['bg_color'];
$skype_url = $this->shortcode_atts['skype_url'];
$skype_action =
$this->shortcode_atts['skype_action'];
$follow_button = '';
$is_skype = false;
if ( isset( $bg_color ) && '' !== $bg_color ) {
$bg_color_style = sprintf( 'background-color: %1$s;',
esc_attr( $bg_color ) );
}
if ( 'skype' === $social_network ) {
$skype_url = sprintf(
'skype:%1$s?%2$s',
sanitize_text_field( $skype_url ),
sanitize_text_field( $skype_action )
);
$is_skype = true;
}
if ( 'on' ===
$et_pb_social_media_follow_link['follow_button'] ) {
$follow_button = sprintf(
'<a href="%1$s" class="follow_button"
title="%2$s"%3$s>%4$s</a>',
! $is_skype ? esc_url( $url ) : $skype_url,
esc_attr( trim( wp_strip_all_tags( $content ) ) ),
( 'on' ===
$et_pb_social_media_follow_link['url_new_window'] ? '
target="_blank"' : '' ),
esc_html__( 'Follow', 'et_builder' )
);
}
$social_network = ET_Builder_Element::add_module_order_class(
$social_network, $function_name );
$output = sprintf(
'<li class="et_pb_social_icon
et_pb_social_network_link%1$s">
<a href="%4$s" class="icon%2$s"
title="%5$s"%7$s style="%3$s"><span>%6$s</span></a>
%8$s
</li>',
( '' !== $social_network ? sprintf( ' et-social-%s',
esc_attr( $social_network ) ) : '' ),
( '' !== $et_pb_social_media_follow_link['shape'] ?
sprintf( ' %s', esc_attr(
$et_pb_social_media_follow_link['shape'] ) ) : '' ),
$bg_color_style,
! $is_skype ? esc_url( $url ) : $skype_url,
esc_attr( trim( wp_strip_all_tags( $content ) ) ),
sanitize_text_field( $content ),
( 'on' ===
$et_pb_social_media_follow_link['url_new_window'] ? '
target="_blank"' : '' ),
$follow_button
);
return $output;
}
}
Code language: HTML, XML (xml)wp-content/themes/DiviChild/functions.php {#wp-contentthemesdivichildfunctions.php}
Maak dit bestand met de volgende inhoud:
/*============================================
Loading the Custom Module into child theme
=============================================*/
function divi_child_theme_setup() {
if ( class_exists('ET_Builder_Module')) {
get_template_part( 'custom-modules/csfm' );
$csfm = new WPC_ET_Builder_Module_Social_Media_Follow_Item();
remove_shortcode( 'et_pb_social_media_follow_network' );
add_shortcode( 'et_pb_social_media_follow_network',
array($csfm, '_shortcode_callback') );
}
}
add_action('wp', 'divi_child_theme_setup', 9999);
add_filter(
'et_builder_module_fields_et_pb_social_media_follow_network',
'fn_custom_fields' );
function fn_custom_fields() {
$fields = array(
'social_network' => array(
'label' => esc_html__( 'Social Network',
'et_builder' ),
'type' => 'select',
'option_category' => 'basic_option',
'class' => 'et-pb-social-network',
'options' => array(
'' => esc_html__( 'Select a Network',
'et_builder' ),
'facebook' => array(
'value' => esc_html__( 'facebook', 'et_builder'
),
'data' => array( 'color' => '#3b5998' ),
),
'twitter' => array(
'value' => esc_html__( 'Twitter', 'et_builder'
),
'data' => array( 'color' => '#00aced' ),
),
'google-plus' => array(
'value' => esc_html__( 'Google+', 'et_builder'
),
'data' => array( 'color' => '#dd4b39' ),
),
'pinterest' => array(
'value' => esc_html__( 'Pinterest', 'et_builder'
),
'data' => array( 'color' => '#cb2027' ),
),
'linkedin' => array(
'value' => esc_html__( 'LinkedIn', 'et_builder'
),
'data' => array( 'color' => '#007bb6' ),
),
'tumblr' => array(
'value' => esc_html__( 'tumblr', 'et_builder'
),
'data' => array( 'color' => '#32506d' ),
),
'instagram' => array(
'value' => esc_html__( 'Instagram', 'et_builder'
),
'data' => array( 'color' => '#517fa4' ),
),
'skype' => array(
'value' => esc_html__( 'skype', 'et_builder' ),
'data' => array( 'color' => '#12A5F4' ),
),
'flikr' => array(
'value' => esc_html__( 'flikr', 'et_builder' ),
'data' => array( 'color' => '#ff0084' ),
),
'myspace' => array(
'value' => esc_html__( 'MySpace', 'et_builder'
),
'data' => array( 'color' => '#3b5998' ),
),
'dribbble' => array(
'value' => esc_html__( 'dribbble', 'et_builder'
),
'data' => array( 'color' => '#ea4c8d' ),
),
'youtube' => array(
'value' => esc_html__( 'Youtube', 'et_builder'
),
'data' => array( 'color' => '#a82400' ),
),
'vimeo' => array(
'value' => esc_html__( 'Vimeo', 'et_builder' ),
'data' => array( 'color' => '#45bbff' ),
),
'rss' => array(
'value' => esc_html__( 'RSS', 'et_builder' ),
'data' => array( 'color' => '#ff8a3c' ),
),
'custom_site' => array(
'value' => esc_html__( 'Website', 'et_builder'
),
'data' => array( 'color' => '#29c6c1' ),
),
),
'affects' => array(
'#et_pb_url',
'#et_pb_skype_url',
'#et_pb_skype_action',
),
'description' => esc_html__( 'Choose the social
network', 'et_builder' ),
),
'content_new' => array(
'label' => esc_html__( 'Content', 'et_builder' ),
'type' => 'hidden',
),
'url' => array(
'label' => esc_html__( 'Account URL',
'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'The URL for this
social network link.', 'et_builder' ),
'depends_show_if_not' => 'skype',
),
'skype_url' => array(
'label' => esc_html__( 'Account Name',
'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'The Skype account
name.', 'et_builder' ),
'depends_show_if' => 'skype',
),
'skype_action' => array(
'label' => esc_html__( 'Skype Button Action',
'et_builder' ),
'type' => 'select',
'option_category' => 'basic_option',
'options' => array(
'call' => esc_html__( 'Call', 'et_builder' ),
'chat' => esc_html__( 'Chat', 'et_builder' ),
),
'depends_show_if' => 'skype',
'description' => esc_html__( 'Here you can choose
which action to execute on button click', 'et_builder' ),
),
'bg_color' => array(
'label' => esc_html__( 'Icon Color',
'et_builder' ),
'type' => 'color-alpha',
'description' => esc_html__( 'This will change the
icon color.', 'et_builder' ),
'additional_code' => '<span class="et-pb-reset-setting
reset-default-color" style="display: none;"></span>',
),
);
return $fields;
}
Code language: PHP (php)Custom CSS in theme options (or child theme)
.et-social-custom_site a.icon:before {
content: "e0e3";
}
Code language: CSS (css)