User Tools

Site Tools

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

programmieren:wordpress:eigenes_widget_bauen [2020/03/03 10:31]
jgehrke created 		programmieren:wordpress:eigenes_widget_bauen [2020/03/09 19:11]
Line 1: Line 1:
-====== 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> 
programmieren/wordpress/eigenes_widget_bauen.txt · Last modified: 2020/03/09 19:11 (external edit)
CC Attribution-Share Alike 4.0 International Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International

Page Tools