User Tools

Site Tools

Trace:
no way to compare when less than two revisions

Differences

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


—programmieren:wordpress:eigenes_widget_bauen [2020/03/03 10:31] (current) – created jgehrke
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: by jgehrke
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