Im letzten Artikel habe ich gezeigt, wie man den Textauszug in Widgets begrenzen kann.
In diesem Artikel zeige ich Euch am Beispiel des Themes Colormag, wie man den Textauszug für jedes einzelne Widget auf der Übersichtsseite festlegen kann.
Wichtig dafür sind zwei Dateien bzw. eine Datei und ein bereits im vorherigen Artikel genutztes Codesnippet. Die Rede ist von der widgets.php im Verzeichnis inc/widgets. Und hier interessiert vor allem die Abschnitte Featured Posts widget Style 1 und Style 2. Los gehts ab ca. Zeile 462.
Im Original sieht der Teil der Datei für die genannten Widgets im Style 1 so aus:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | /**
* Featured Posts widget
*/
class colormag_featured_posts_widget extends WP_Widget {
function __construct() {
$widget_ops = array( 'classname' => 'widget_featured_posts widget_featured_meta', 'description' =>__( 'Display latest posts or posts of specific category.' , 'colormag') );
$control_ops = array( 'width' => 200, 'height' =>250 );
parent::__construct( false,$name= __( 'TG: Featured Posts (Style 1)', 'colormag' ),$widget_ops);
}
function form( $instance ) {
$tg_defaults['title'] = '';
$tg_defaults['text'] = '';
$tg_defaults['number'] = 4;
$tg_defaults['type'] = 'latest';
$tg_defaults['category'] = '';
$instance = wp_parse_args( (array) $instance, $tg_defaults );
$title = esc_attr( $instance[ 'title' ] );
$text = esc_textarea($instance['text']);
$number = $instance['number'];
$type = $instance['type'];
$category = $instance['category'];
?>
<p><?php _e( 'Layout will be as below:', 'colormag' ) ?></p>
<div style="text-align: center;"><img src="<?php echo get_template_directory_uri() . '/img/style-1.jpg'?>"></div>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<?php _e( 'Description','colormag' ); ?>
<textarea class="widefat" rows="5" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e( 'Number of posts to display:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" />
</p>
<p><input type="radio" <?php checked($type, 'latest') ?> id="<?php echo $this->get_field_id( 'type' ); ?>" name="<?php echo $this->get_field_name( 'type' ); ?>" value="latest"/><?php _e( 'Show latest Posts', 'colormag' );?><br />
<input type="radio" <?php checked($type,'category') ?> id="<?php echo $this->get_field_id( 'type' ); ?>" name="<?php echo $this->get_field_name( 'type' ); ?>" value="category"/><?php _e( 'Show posts from a category', 'colormag' );?><br /></p>
<p>
<label for="<?php echo $this->get_field_id( 'category' ); ?>"><?php _e( 'Select category', 'colormag' ); ?>:</label>
<?php wp_dropdown_categories( array( 'show_option_none' =>' ','name' => $this->get_field_name( 'category' ), 'selected' => $category ) ); ?>
</p>
<?php
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );
if ( current_user_can('unfiltered_html') )
$instance['text'] = $new_instance['text'];
else
$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) );
$instance[ 'number' ] = absint( $new_instance[ 'number' ] );
$instance[ 'type' ] = $new_instance[ 'type' ];
$instance[ 'category' ] = $new_instance[ 'category' ];
return $instance;
}
function widget( $args, $instance ) {
extract( $args );
extract( $instance );
global $post;
$title = isset( $instance[ 'title' ] ) ? $instance[ 'title' ] : '';
$text = isset( $instance[ 'text' ] ) ? $instance[ 'text' ] : '';
$number = empty( $instance[ 'number' ] ) ? 4 : $instance[ 'number' ];
$type = isset( $instance[ 'type' ] ) ? $instance[ 'type' ] : 'latest' ;
$category = isset( $instance[ 'category' ] ) ? $instance[ 'category' ] : '';
if( $type == 'latest' ) {
$get_featured_posts = new WP_Query( array(
'posts_per_page' => $number,
'post_type' => 'post',
'ignore_sticky_posts' => true
) );
}
else {
$get_featured_posts = new WP_Query( array(
'posts_per_page' => $number,
'post_type' => 'post',
'category__in' => $category
) );
}
echo $before_widget;
?>
<?php
if ( $type != 'latest' ) {
$border_color = 'style="border-bottom-color:' . colormag_category_color($category) . ';"';
$title_color = 'style="background-color:' . colormag_category_color($category) . ';"';
} else {
$border_color = '';
$title_color = '';
}
if ( !empty( $title ) ) { echo '<h3 class="widget-title" '. $border_color .'><span ' . $title_color .'>'. esc_html( $title ) .'</span></h3>'; }
if( !empty( $text ) ) { ?> <p> <?php echo esc_textarea( $text ); ?> </p> <?php } ?>
<?php
$i=1;
while( $get_featured_posts->have_posts() ):$get_featured_posts->the_post();
?>
<?php if( $i == 1 ) { $featured = 'colormag-featured-post-medium'; } else { $featured = 'colormag-featured-post-small'; } ?>
<?php if( $i == 1 ) { echo '<div class="first-post">'; } elseif ( $i == 2 ) { echo '<div class="following-post">'; } ?>
<div class="single-article clearfix">
<?php
if( has_post_thumbnail() ) {
$image = '';
$title_attribute = get_the_title( $post->ID );
$image .= '<figure>';
$image .= '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
$image .= get_the_post_thumbnail( $post->ID, $featured, array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';
$image .= '</figure>';
echo $image;
}
?>
<div class="article-content">
<?php colormag_colored_category(); ?>
<h3 class="entry-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title(); ?></a>
</h3>
<div class="below-entry-meta">
<?php
$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time>';
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() )
);
printf( __( '<span class="posted-on"><a href="%1$s" title="%2$s" rel="bookmark"><i class="fa fa-calendar-o"></i> %3$s</a></span>', 'colormag' ),
esc_url( get_permalink() ),
esc_attr( get_the_time() ),
$time_string
);
?>
<span class="byline"><span class="author vcard"><i class="fa fa-user"></i><a class="url fn n" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" title="<?php echo get_the_author(); ?>"><?php echo esc_html( get_the_author() ); ?></a></span></span>
<span class="comments"><i class="fa fa-comment"></i><?php comments_popup_link( '0', '1', '%' );?></span>
</div>
<?php if( $i == 1 ) { ?>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
<?php } ?>
</div>
</div>
<?php if( $i == 1 ) { echo '</div>'; } ?>
<?php
$i++;
endwhile;
if ( $i > 2 ) { echo '</div>'; }
// Reset Post Data
wp_reset_query();
?>
<!-- </div> -->
<?php echo $after_widget;
}
} |
Für unser Vorhaben benötigen wir eine Variable, wir nennen sie summary. Diese müssen wir an verschiedenen Stellen im Code einsetzen.
Als erstes nach Zeile 17 als Inhalt für die Variable tg_defaults, diese ergänzen wir mit
sanitize_text_field($new_instance['summary']); |
Zum zweiten Mal kommt sie dann in nach der 24. Zeile zum Einsatz, in der ihr die Instanz summary zugewiesen wird. Die beiden Zeilen sehen dann wie folgt aus:
$tg_defaults['summary'] = sanitize_text_field($new_instance['summary']); $summary = $instance['summary']; |
Anschließend sorgen wir dafür, das wir im Widget auch einen Bereich haben, in der wir die Länge des Textauszuges eintragen können. Dafür kopieren wir die Zeilen 33 bis 36 und fügen sie nach der 44. Zeile ein. Die Bezeichnung 'number' in den beiden Zeilen nach get_field_id ersetzen wir durch summary, das 'Number of post to display' durch die gewünschte Bezeichnung des Bereichs. Ich habe ihn 'Länge des Textauszugs' genannt.
Natürlich müssen wir auch die Variable nach dem echo-Befehl umbenennen. Für size geben wir einen niedrigen einstelligen Wert ein, da wir ja nur eine Maximal dreistellige Zahl eingeben werden.
Als nächstes müssen wir dem Update-Block eine Zeile zuweisen, die dafür sorgt, das es sich um keine negativen Wert handelt. Das geschieht mit
$instance[ 'summary' ] = absint( $new_instance[ 'summary' ]); |
Nun müssen wir der Widget-Funktion sagen, das es eine neue Variable gibt. Nach der Zeile für die Kategorie binden wir die Zeile für den Auszug ein:
$summary = empty( $instance[ 'summary' ] ) ? '' : $instance[ 'summary' ] ; |
Nun tauschen wir die reguläre Variable für den Auszug - the_excerpt - gegen die Variable summary und binden gleichzeitig den Codesnippet aus dem letzten Artikel mit ein. Das geschieht im obigen Beispiel in Zeile 140. Diese sieht am Ende dann wie folgt aus:
<?php excerpt_chars($summary); ?> |
Im vorherigen Artikel sah der Code so aus:
function excerpt_chars($chars = 100, $echo = TRUE) { global $post; $out = strip_tags($post->post_excerpt); $out = substr($out, 0, (int) $chars); if(strlen($post->post_excerpt)>100) $out = end_on_word($out) .' …'; $out = end_on_word($out) . ' …'; $out = xwp_autop($out); if ( $echo ) { echo $out; return; } return $out; } |
Diesen ändern wir nun wie folgt ab:
In der ersten Zeile legen wir für die Variable chars einen Wert fest, nach dessen Überschreiten der Textauszug gekappt und die berühmten drei Punkte angehängt werden sollen. Bei mir im Blog sind das ca. 150 Zeichen.
Den numerischen Wert in der 7. Zeile können wir auch mit $chars ersetzen. So braucht man nur einen Wert ersetzen und keinen 2. Was den Arbeitsaufwand aber ja auch nicht wesentlich vereinfacht.
Entsprechend müssen wir nun auch im Bereich Featured Posts widget für den Style 2 vorgehen. Dann haben wir für die beiden Hauptwidgets des Colormag-Themes die Möglichkeit, für jedes Widget explizit die Länge des Textauszugs festzulegen. Im Beispielbild dunkel unterlegt.
Letzten Endes sieht der gesamte Code dann so aus:
/**
* Featured Posts widget
*/
class colormag_featured_posts_widget extends WP_Widget {
function __construct() {
$widget_ops = array( 'classname' => 'widget_featured_posts widget_featured_meta', 'description' =>__( 'Display latest posts or posts of specific category.' , 'colormag') );
$control_ops = array( 'width' => 200, 'height' =>250 );
parent::__construct( false,$name= __( 'TG: Featured Posts (Style 1)', 'colormag' ),$widget_ops);
}
function form( $instance ) {
$tg_defaults['title'] = '';
$tg_defaults['text'] = '';
$tg_defaults['number'] = 4;
$tg_defaults['type'] = 'latest';
$tg_defaults['category'] = '';
$tg_defaults['cat'] = sanitize_text_field($new_instance['cat']);
$tg_defaults['summary'] = sanitize_text_field($new_instance['summary']);
$instance = wp_parse_args( (array) $instance, $tg_defaults );
$title = esc_attr( $instance[ 'title' ] );
$text = esc_textarea($instance['text']);
$number = $instance['number'];
$type = $instance['type'];
$category = $instance['category'];
$cat = $instance['cat'];
$summary = $instance['summary'];
?>
<p><?php _e( 'Layout will be as below:', 'colormag' ) ?></p>
<div style="text-align: center;"><img src="<?php echo get_template_directory_uri() . '/img/style-1.jpg'?>"></div>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<?php _e( 'Description','colormag' ); ?>
<textarea class="widefat" rows="5" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e( 'Number of posts to display:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" />
</p>
<p><input type="radio" <?php checked($type, 'latest') ?> id="<?php echo $this->get_field_id( 'type' ); ?>" name="<?php echo $this->get_field_name( 'type' ); ?>" value="latest"/><?php _e( 'Show latest Posts', 'colormag' );?><br />
<input type="radio" <?php checked($type,'category') ?> id="<?php echo $this->get_field_id( 'type' ); ?>" name="<?php echo $this->get_field_name( 'type' ); ?>" value="category"/><?php _e( 'Show posts from a category', 'colormag' );?><br /></p>
<p>
<label for="<?php echo $this->get_field_id( 'category' ); ?>"><?php _e( 'Select category', 'colormag' ); ?>:</label>
<?php wp_dropdown_categories( array( 'show_option_none' =>' ','name' => $this->get_field_name( 'category' ), 'selected' => $category ) ); ?>
</p>
<p>
<label for="<?php echo $this->get_field_id('cat'); ?>"><?php _e( 'categories to display:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id('cat'); ?>" name="<?php echo $this->get_field_name('cat'); ?>" type="text" value="<?php echo $cat; ?>" size="30" />
</p>
<p>
<label for="<?php echo $this->get_field_id('summary'); ?>"><?php _e( 'Länge des Textauszugs:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id('summary'); ?>" name="<?php echo $this->get_field_name('summary'); ?>" type="text" value="<?php echo $summary; ?>" size="5" />
</p>
<?php
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );
if ( current_user_can('unfiltered_html') )
$instance['text'] = $new_instance['text'];
else
$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) );
$instance[ 'number' ] = absint( $new_instance[ 'number' ] );
$instance[ 'type' ] = $new_instance[ 'type' ];
$instance[ 'category' ] = $new_instance[ 'category' ];
$instance[ 'cat' ] = absint( $new_instance[ 'cat' ]);
$instance[ 'summary' ] = absint( $new_instance[ 'summary' ]);
return $instance;
}
function widget( $args, $instance ) {
extract( $args );
extract( $instance );
global $post;
$title = isset( $instance[ 'title' ] ) ? $instance[ 'title' ] : '';
$text = isset( $instance[ 'text' ] ) ? $instance[ 'text' ] : '';
$number = empty( $instance[ 'number' ] ) ? 4 : $instance[ 'number' ];
$link = empty($instance['link']) ? '' : $instance['link'];
$type = isset( $instance[ 'type' ] ) ? $instance[ 'type' ] : 'latest' ;
$category = isset( $instance[ 'category' ] ) ? $instance[ 'category' ] : '';
$cat = empty( $instance[ 'cat' ] ) ? '' : $instance[ 'cat' ] ;
$summary = empty( $instance[ 'summary' ] ) ? '' : $instance[ 'summary' ] ;
if( $type == 'latest' ) {
$get_featured_posts = new WP_Query( array(
'posts_per_page' => $number,
'post_type' => 'post',
'ignore_sticky_posts' => true,
) );
}
else {
$get_featured_posts = new WP_Query( array(
'posts_per_page' => $number,
'post_type' => 'post',
'category__in' => $category,
) );
}
if ($link) {
$before_title = $before_title . '<a href="' . esc_url($link) . '" class="widget-title-link">';
$after_title = '</a>' . $after_title;
} elseif ($category) {
$cat_url = get_category_link($category);
$before_title = $before_title . '<a href="' . esc_url($cat_url) . '" class="widget-title-link">';
$after_title = '</a>' . $after_title;
}
if ($cat) {
$get_featured_posts = new WP_Query( array(
'posts_per_page' => $number,
'cat' => $cat,
'summary' => $summary,
$type => 'latest',
) );
}
echo $before_widget;
?>
<?php
if ( $type != 'latest' ) {
$border_color = 'style="border-bottom-color:' . colormag_category_color($category) . ';"';
$title_color = 'style="background-color:' . colormag_category_color($category) . ';"';
} else {
$border_color = '';
$title_color = '';
}
if ( !empty( $title ) ) { echo '<h3 class="widget-title" '. $border_color .'><span ' . $title_color .'>'. esc_html( $title ) .'</span></h3>'; }
if( !empty( $text ) ) { ?> <p> <?php echo esc_textarea( $text ); ?> </p> <?php } ?>
<?php
$i=1;
while( $get_featured_posts->have_posts() ):$get_featured_posts->the_post();
?>
<?php if( $i == 1 ) { $featured = 'colormag-featured-post-medium'; } else { $featured = 'colormag-featured-post-small'; } ?>
<?php if( $i == 1 ) { echo '<div class="first-post">'; } elseif ( $i == 2 ) { echo '<div class="following-post">'; } ?>
<div class="single-article clearfix">
<?php
if( has_post_thumbnail() ) {
$image = '';
$title_attribute = get_the_title( $post->ID );
$image .= '<figure>';
$image .= '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
$image .= get_the_post_thumbnail( $post->ID, $featured, array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';
$image .= '</figure>';
echo $image;
}
?>
<div class="article-content">
<?php colormag_colored_category(); ?>
<h3 class="entry-title">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title(); ?></a>
</h3>
<div class="below-entry-meta">
<?php
$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time>';
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() )
);
printf( __( '<span class="posted-on"><a href="%1$s" title="%2$s" rel="bookmark"><i class="fa fa-calendar-o"></i> %3$s</a></span>', 'colormag' ),
esc_url( get_permalink() ),
esc_attr( get_the_time() ),
$time_string
);
?>
<span class="byline"><span class="author vcard"><i class="fa fa-user"></i><a class="url fn n" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" title="<?php echo get_the_author(); ?>"><?php echo esc_html( get_the_author() ); ?></a></span></span>
<span class="comments"><i class="fa fa-comment"></i><?php comments_popup_link( '0', '1', '%' );?></span>
</div>
<?php if( $i == 1 ) { ?>
<div class="entry-content">
<?php excerpt_chars($summary); ?>
</div>
<?php } ?>
</div>
</div>
<?php if( $i == 1 ) { echo '</div>'; } ?>
<?php
$i++;
endwhile;
if ( $i > 2 ) { echo '</div>'; }
// Reset Post Data
wp_reset_query();
?>
<!-- </div> -->
<?php echo $after_widget;
}
} |
Artikelbild:
© pixelcreatures / Werner Moser, pixabay.de
Hallo,
interessanter Beitrag! Ich hoffe das der nicht mit dem Problem zusammenhängt das ich dein Feed nicht mehr nutzen kann! Im TTRSS ist es nicht mehr möglich deinen Feed zu nutzen. Bis vor kurzen ging das noch! ^^
Es kommt der Feed [Unknown]!
Bin auch nicht mal sicher ob es am https liegt aber eventuell meldet sich ja noch jemand wo es auch nicht geht!
Hallo Daniel,
da sich die Änderungen nur auf das Widget und nicht auf irgendwelche Posts beziehen, kann das mit dem Feed eigentlich nichts zu tun haben.
Und wenn Du den Feed von diesem Blog meinst, dann liegt der Fehler in der Tat woanders. Denn hier habe ich nichts geändert. Die Änderungen beziehen sich nur auf mein Regionalmagazin.
Hast Du irgendeine zeitliche Angabe, wie lange das Problem schon besteht? Vielleicht kann ich dann nachvollziehn, was (s)ich geändert hat / habe.
UPDATE: Es könnte auch daran gelegen haben, das ich W3 Total Cache installiert hatte. Das Plugin ist wieder raus, und das Feed-Problem somit hoffentlich auch.
Das Problem hat sich aufgelöst. Der FEED läuft wieder. HAbe ihn eben wieder hinzugefügt klappt wie vorher. Supi danke!
Hallo Daniel!
Freut mich, das es wieder läuft. Dann war es tatsächlich W3 Total Cache. Das Plugin ist, wie erwähnt, wieder rausgeflogen.