Die Datenreisenden – Neues aus dem Web

Ab WordPress 2.8 darf man seine Widgets auch als schöne Klasse zusammenbauen. Daher folgend mal ein kleines, aber praktisches Beispiel anhand eines Kundenwunsches.

Der Kunde meinte, er hätte gerne auf der Startseite zwei sich überlappende Fotos aus einem Verzeichnis, welches sich ebenfalls in dieser WordPress-Installation befindet (siehe hierzu auch WordPress als CMS: Tipps & Tricks #3).

Erst dachte ich: Na gut, da muss wohl wieder was hart kodiert werden. Dann aber kam die Erleuchtung: Machen wir das doch einfach als Widget – dann kann man das einerseits besser via CSS + JS ansteuern, andererseits auch vielleicht sogar an unterschiedlichen Stellen auf der Website platzieren (z.B. wenn dem Kunden die Anzeige auf der Startseite mal zuviel wird). Außerdem brauchte ich nen halbwegs sinnvollen Grund, mal die neue objekt-orientierte Widget-Variante auszuprobieren

Soviel zur Vorgeschichte, nun ran an’s Eingemachte – und danach wird gestückelt: Ich habe mir dazu einfach den Beispielcode aus dem Codex rauskopiert und angepasst – für meine Zwecke völlig ausreichend.

class frontpageImageWidget extends WP_Widget {
        function frontpageImageWidget() {
                parent::WP_Widget(false, $name = 'Frontpage Image Widget');
        }

        /** @see WP_Widget::widget */
        function widget($args, $instance) {
                global $themehelper;
                extract( $args );

                $personOne = get_post($instance['my_theme_person_one_page_id']);
                $personTwo = get_post($instance['my_theme_person_two_page_id']);

                $personOneImageList = $themehelper->getImageList($personOne->post_content);
                $personTwoImageList = $themehelper->getImageList($personTwo->post_content);

                echo $before_widget; ?>
        <div class="frontpage-image-widget">
                <ul>
                        <li class="frontpage-image-widget-person-one"><a href="<?php echo get_permalink($personOne->ID); ?>"><img src="<?php echo THEME_URL; ?>/includes/tools/timthumb.php?src=<?php echo str_replace(HOME_URL, '', $personOneImageList[0]->src); ?>" alt="<?php echo $personOne->post_title; ?>" title="<?php echo $personOne->post_title; ?>" /></a></li>
                        <li class="frontpage-image-widget-person-two"><a href="<?php echo get_permalink($personTwo->ID); ?>"><img src="<?php echo THEME_URL; ?>/includes/tools/timthumb.php?src=<?php echo str_replace(HOME_URL, '', $personTwoImageList[0]->src); ?>" alt="<?php echo $personTwo->post_title; ?>" title="<?php echo $personTwo->post_title; ?>" /></a></li>
                </ul>
        </div>
<?php         echo $after_widget;
        }

        /** @see WP_Widget::update */
        function update($new_instance, $old_instance) {
                return $new_instance;
        }

        /** @see WP_Widget::form */
        function form($instance) {
                $pageList = get_pages();

                ?>
                        <p><label for="<?php echo $this->get_field_id('my_theme_person_one_page_id'); ?>">Person #1</label> <select id="<?php echo $this->get_field_id('my_theme_person_one_page_id'); ?>" name="<?php echo $this->get_field_name('my_theme_person_one_page_id'); ?>">

                        <?php foreach($pageList as $pageData) { ?>
                                <option value="<?php echo $pageData->ID; ?>"<?php
                                if($instance['my_theme_person_one_page_id'] == $pageData->ID) {
                                        echo ' selected="selected"';
                                }
                                ?>><?php echo $pageData->post_title; ?></option>
                        <?php } ?>
                        </select></p>

                        <p><label for="<?php echo $this->get_field_id('my_theme_person_two_page_id'); ?>">Person #2</label> <select id="<?php echo $this->get_field_id('my_theme_person_two_page_id'); ?>" name="<?php echo $this->get_field_name('my_theme_person_two_page_id'); ?>">

                        <?php foreach($pageList as $pageData) { ?>
                                <option value="<?php echo $pageData->ID; ?>"<?php
                                if($instance['my_theme_person_two_page_id'] == $pageData->ID) {
                                        echo ' selected="selected"';
                                }
                                ?>><?php echo $pageData->post_title; ?></option>
                        <?php } ?>
                        </select></p>
                <?php
        }

}

add_action('widgets_init', create_function('', 'return register_widget("frontpageImageWidget");'));

Zur näheren Erläuterung (Kenntnisse der OOP in PHP vorausgesetzt):

function frontpageImageWidget() {…} sollte klar sein. function widget($args, $instance) { … } enthält das eigentliche Widget, an welches über $instance die benötigen Optionsfelder übergeben werden – welche im Admin-Teil mit Daten befüllt werden, d.h. mit den IDs der jeweiligen Verzeichnisseiten, aus denen das Bild extrahiert werden soll.

function form($instance) { … } stellt den anpassbaren Teil des Widgets dar, den wir unter “Design Widgets” zu sehen bekommen.

Zum Schluß wird alles noch hübsch initialisiert. (Zitat Function Reference: Hooks a function on to a specific action. )

Und damit ist’s an sich schon getan