Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WordPress: Display a widget with tabs. The tab contents depends on the current category
<?php
class Category_Widget extends WP_Widget {
public function __construct() {
$widget_ops = array(
'classname' => __CLASS__,
'description' => 'Displaying content depending on the current category',
);
$control_ops = array();
$this->WP_Widget(
'category-widget', 'Category Widget',
$widget_ops,
$control_ops
);
$this->_register( __CLASS__ );
$this->enqueue_scripts();
}
public function enqueue_scripts() {
if ( ! is_admin() ) {
wp_enqueue_script( 'jquery-ui-tabs' );
// Oh uuups. Das Stylesheet sollte natuerlich lokal gespeichert werden und nicht
// von den jQuery-Seiten geladen werden. Ist ja auch nur ein Beispiel-Script ;)
wp_enqueue_style( 'jquery-ui-tabs-style-main', 'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css' );
}
}
public function form( $instance ) {
$title = ( ! empty( $instance['title'] ) ) ?
$instance['title'] : 'Default Title';
echo '<label for="cat-widget">Title: </label>';
printf(
'<input type="text" size="30" value="%1$s" id="%2$s" name="%2$s" />',
$title,
esc_attr( $this->get_field_name( 'title' ) )
);
}
public function update( $new, $old ) {
$new['title'] = strip_tags( $new['title'] );
return $new;
}
public function widget( $args, $instance ) {
// Hier schliessen wir alle seiten aus auf denen das widget NICHT angezeigt werden soll.
// Also z.B. home (is_home()), Archiv (is_archive), usw.
// Entweder wir geben etwas anderes als die Tabs aus, oder machen nichts
// und gehen mit 'return' einfach wieder zurück.
if ( is_home() ) {
echo '<div id="category-widget-main">Sorry Dave, I\'m afraid I couldn not display this...</div>';
return;
}
// An diesen Punkt wird es spannend. Hier werden die Tabs erzeugt und ausgegeben!
// Wir angeln uns die Kategorie heraus. Ist dies nicht moeglich ($cat ist leer
// oder enthält einen Fehler) wird abgebrochen und ohne Ergebnis zurueck gegangen.
if ( is_single() ) {
global $post;
$cat_post = get_the_category( $post->ID );
// bei einem einzelnen Post (Single-Ansicht), nehmen wir einfach die erste Kategorie daher. Punkt.
$cat = $cat_post[0];
} else {
$cat = get_category( get_query_var( 'cat' ), false );
}
if ( empty( $cat ) || isset( $cat->errors ) )
return;
// Ein Widget mit Titel sieht besser aus, also geben wir einen aus.
$title = ( isset( $instance['title'] ) && ! empty( $instance['title'] ) ) ?
$instance['title'] : 'Category Widget';
printf( '<h3>%s</h3>', $title );
// Ein paar Daten aus dem Kategorie-Objekt angeln
$name = ( ! empty( $cat->name ) ) ?
$cat->name : 'Kein Name vorhanden';
$description = ( ! empty( $cat->description ) ) ?
$cat->description : 'Keine Beschreibung vorhanden';
$term_id = ( isset( $cat->term_id ) ) ?
$cat->term_id : 0;
// Den auszugebenden Inhalt vorbereiten
$content = array();
$content[0] = sprintf( 'Du befindest dich in Kategorie %s', $name );
$content[1] = sprintf( 'Beschreibung der Kategorie: %s', $description );
$content[2] = $this->get_more_from_this_cat( $term_id );
/*
* Inline-JavaScript ist boese, boese, boese. Aber was will man machen wenn man dynamischen Content hat?
* Schliesslich koennen ja auch mehr als nur ein Widget in der Sidebar auftauchen und dann haben wir aber
* sowas von Aerger mit den IDs. Also erzeugen wir uns eine Zufallsnummer und haengen diese an die ID (cat-
* widget-) an. Schon haben wir eine unique ID.
* Nun muss aber unser jQuery ja auf eben diese unique ID reagieren. Also packen wir das JS inline mit rein
* und haengen auch im JS die Zufallsnummer an die ID an.
*
* Heredoc und Nowdoc sind uebrigens eine prima Erfindung wenn man, so wie ich zum Beispiel, die Template-
* Syntax von PHP zum erbrechen unuebersichtlich findet.
*/
$random = rand( 1, 999 );
// Dies ist Heredoc ( http://www.php.net/manual/de/language.types.string.php#language.types.string.syntax.heredoc )
// Die Daten die wir oben vorbereitet haben, werden einfach eingesetzt.
$frame = <<<FRAME
<div id="cat-widget-{$random}" class="category-widget-main">
<ul class="cat-widget-tab-header">
<li><a href="#tabs-1-{$random}">Name</a></li>
<li><a href="#tabs-2-{$random}">Beschreibung</a></li>
<li><a href="#tabs-3-{$random}">Weitere Artikel</a></li>
</ul>
<div id="tabs-1-{$random}" class="cat-widget-tab">{$content[0]}</div>
<div id="tabs-2-{$random}" class="cat-widget-tab">{$content[1]}</div>
<div id="tabs-3-{$random}" class="cat-widget-tab">{$content[2]}</div>
</div>
<script type="text/javascript">
jQuery( document ).ready(
function($) {
$( "#cat-widget-{$random}" ).tabs();
}
);
</script>
FRAME;
// Taadaaaaa. Das komplette Ergebnis ausgeben.
echo $frame;
}
/**
* Get more post from the given term
*
* @param number $term_id
* @return boolean|string
*/
protected function get_more_from_this_cat( $term_id = 0 ) {
global $post;
// In der Single-Ansicht wollen wir ja den gerade angezeigten Post
// nicht noch mal auflisten. Also schliessen wir ihn einfach aus.
$this_post_id = ( isset( $post->ID ) && ! empty( $post->ID ) && is_single() ) ?
$post->ID : 0;
$return = '';
if ( 0 == $term_id )
return false;
$cat_posts = get_posts( array( 'cat' => $term_id ) );
if ( ! empty( $cat_posts ) ) {
$return .= '<ul>';
foreach ( $cat_posts as $cat_post ) {
// Den gerade angezeigten Post (sofern wir in der Single-Ansicht sind)
// ausschliessen
if ( $cat_post->ID == $this_post_id )
continue;
$return .= sprintf(
'<li><a href="%s">%s</a></li>',
esc_attr( get_permalink( $cat_post->ID ) ),
esc_html( $cat_post->post_title )
);
}
$return .= '</ul>';
}
return $return;
}
}
add_action(
'init',
function() {
//register_widget( 'Category_Widget' );
new Category_Widget();
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.