|
|
programmieren:wordpress:eigenes_widget_bauen [2020/03/03 10:31] jgehrke created |
programmieren:wordpress:eigenes_widget_bauen [2020/03/09 19:11] |
====== Eigenes Wordpress Widget bauen ====== | |
| |
Das ist ein Dummy-Code der zeigt wie man an eigenes Widget registriert. Mit Backend-Eingaben, Speichern und Frontend-Ausgabe | |
| |
<code php> | |
<?php | |
| |
function dummy_load_widget() { | |
register_widget( 'dummy_banner_atlas_widget' ); | |
} | |
add_action( 'widgets_init', 'dummy_load_widget' ); | |
| |
| |
class dummy_banner_atlas_widget extends WP_Widget { | |
| |
function __construct() { | |
parent::__construct( | |
| |
// WIDGET-ID | |
'dummy_banner_atlas_widget', | |
| |
// WIDGET NAME | |
'dummyBanner', | |
| |
// WIDGET BESCHREIBUNG | |
array( 'description' => 'Ein Bannter als Dummy', ) | |
); | |
} | |
| |
/* | |
FRONTEND | |
*/ | |
public function widget( $args, $instance ) { | |
$title_bold = ( isset( $instance[ 'title_bold' ] ) ) ? $instance[ 'title_bold' ] : ''; | |
$title_light = ( isset( $instance[ 'title_light' ] ) ) ? $instance[ 'title_light' ] : ''; | |
$button_label = ( isset( $instance[ 'button_label' ] ) ) ? $instance[ 'button_label' ] : ''; | |
$button_target = ( isset( $instance[ 'button_target' ] ) ) ? $instance[ 'button_target' ] : ''; | |
| |
$logo_url = get_stylesheet_directory_uri() . '/gfx/banner/banner_01_dummy_logo.png'; | |
$visual_url = get_stylesheet_directory_uri() . '/gfx/banner/banner_01_dummy_visual.png'; | |
| |
// before and after widget arguments are defined by themes | |
echo $args['before_widget']; | |
echo " | |
<style> | |
.widget_avtest_banner_atlas_widget { | |
background : linear-gradient(0deg, rgba(177,202,213,1) 0%, rgba(255,255,255,1) 100%); | |
} | |
.widget_avtest_banner_atlas_widget .inner-wrapper { | |
padding : 10px 20px 20px 20px; | |
background-image : url($visual_url); | |
background-position : bottom right; | |
background-size : 170px 188px; | |
background-repeat : no-repeat; | |
} | |
| |
| |
.banner-title { | |
padding : 5px 0px 100px 0px; | |
font-family : 'Interstate',Arial,Helvetica,sans-serif; | |
font-size : 22px; | |
color : rgb(206, 4, 0); | |
} | |
.banner-title__bold { | |
font-weight : 600; | |
} | |
.banner-title__light { | |
font-family : 'InterstateLight',Arial,Helvetica,sans-serif; | |
font-weight : 200; | |
} | |
| |
.banner-logo {} | |
.banner-logo__image { | |
width : 165px; | |
} | |
</style> | |
<div class=\"inner-wrapper\"> | |
<a href=\"$button_target\" class=\"banner-logo\"> | |
<img src=\"$logo_url\" class=\"banner-logo__image\"/> | |
</a> | |
<p class=\"banner-title\"> | |
<span class=\"banner-title__bold\">$title_bold</span><br/> | |
<span class=\"banner-title__light\">$title_light</span> | |
</p> | |
| |
<a href=\"$button_target\" class=\"po-button\"> | |
$button_label | |
</a> | |
</div> | |
"; | |
echo $args['after_widget']; | |
} | |
| |
/* | |
BACKEND | |
*/ | |
public function form( $instance ) { | |
$title_bold = ( isset( $instance[ 'title_bold' ] ) ) ? $instance[ 'title_bold' ] : ''; | |
$title_light = ( isset( $instance[ 'title_light' ] ) ) ? $instance[ 'title_light' ] : ''; | |
$button_label = ( isset( $instance[ 'button_label' ] ) ) ? $instance[ 'button_label' ] : ''; | |
$button_target = ( isset( $instance[ 'button_target' ] ) ) ? $instance[ 'button_target' ] : ''; | |
| |
?> | |
<p> | |
<label for="<?php echo $this->get_field_id( 'title_bold' ); ?>">Titel (Bold & Light)</label> | |
<input class="widefat" placeholder="Erste Zeile in Bold" id="<?php echo $this->get_field_id( 'title_bold' ); ?>" name="<?php echo $this->get_field_name( 'title_bold' ); ?>" type="text" value="<?php echo esc_attr( $title_bold ); ?>" /> | |
<input class="widefat" placeholder="Zweite Zeile in Light" id="<?php echo $this->get_field_id( 'title_light' ); ?>" name="<?php echo $this->get_field_name( 'title_light' ); ?>" type="text" value="<?php echo esc_attr( $title_light ); ?>" /> | |
| |
<br /><br /> | |
| |
<label for="<?php echo $this->get_field_id( 'button_label' ); ?>">Button Label</label> | |
<input class="widefat" placeholder="Mehr »" id="<?php echo $this->get_field_id( 'button_label' ); ?>" name="<?php echo $this->get_field_name( 'button_label' ); ?>" type="text" value="<?php echo esc_attr( $button_label ); ?>" /> | |
| |
<br /><br /> | |
| |
<label for="<?php echo $this->get_field_id( 'button_target' ); ?>">Button Target</label> | |
<input class="widefat" placeholder="https://www.domain.de" id="<?php echo $this->get_field_id( 'button_target' ); ?>" name="<?php echo $this->get_field_name( 'button_target' ); ?>" type="text" value="<?php echo esc_attr( $button_target ); ?>" /> | |
| |
</p> | |
<?php | |
} | |
| |
/* | |
UPDATING / SAVING | |
*/ | |
public function update( $new_instance, $old_instance ) { | |
$instance = array(); | |
$instance['title_bold'] = ( ! empty( $new_instance['title_bold'] ) ) ? strip_tags( $new_instance['title_bold'] ) : ''; | |
$instance['title_light'] = ( ! empty( $new_instance['title_light'] ) ) ? strip_tags( $new_instance['title_light'] ) : ''; | |
$instance['button_label'] = ( ! empty( $new_instance['button_label'] ) ) ? strip_tags( $new_instance['button_label'] ) : ''; | |
$instance['button_target'] = ( ! empty( $new_instance['button_target'] ) ) ? strip_tags( $new_instance['button_target'] ) : ''; | |
| |
return $instance; | |
} | |
} | |
| |
</code> | |