WordPress-Buch http://www.wordpress-buch.de Einsteigerseminar und Praxisbuch Sat, 28 Aug 2010 08:10:29 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Subscribe with NewsGatorSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with PageflakesSubscribe with FeedLoungeSubscribe with Mein Yahoo!Add to Any Feed Reader WordPress: Werkzeugleiste im visuellen Editor anzeigen http://www.wordpress-buch.de/2010/08/wordpress-werkzeugleiste-im-visuellen-editor-anzeigen/ http://www.wordpress-buch.de/2010/08/wordpress-werkzeugleiste-im-visuellen-editor-anzeigen/#comments Sat, 28 Aug 2010 08:10:29 +0000 Perun http://www.wordpress-buch.de/?p=348 In den letzten zwei bis drei Wochen haben wir mehrere E-Mails bekommen, in denen uns die Leute fragen, wie man im visuellen Editor (WYSIWYG) die zweite Leiste, die sog. Werkzeugleiste aktiviert? Am besten schaut man sich folgende Abbildung an bzw. klickt auf die Großansicht:

WordPress: Werkzeugleiste ein-/ausblenden

Werkzeugleiste ein-/ausblenden

Einfach auf den "bunten" Button ganz rechts, in der ersten Zeile des Editors klicken oder die Tastenkombination Alt+Shift+Z betätigen.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/08/wordpress-werkzeugleiste-im-visuellen-editor-anzeigen/feed/ 0 WordPress will kein Miniaturbild erstellen http://www.wordpress-buch.de/2010/08/wordpress-will-kein-miniaturbild-erstellen/ http://www.wordpress-buch.de/2010/08/wordpress-will-kein-miniaturbild-erstellen/#comments Thu, 26 Aug 2010 20:45:48 +0000 Sahanya http://www.wordpress-buch.de/?p=346 Das Erstellen von Miniaturbildern mit Hilfe der internen Bildbearbeitungsfunktion von WordPress habe ich im Artikel Die Bildbearbeitungsfunktion von WordPress sinnvoll nutzen schon beschrieben.

Nun hat der ein oder andere dies vielleicht auch schon im eigenen Blog ausprobiert und ist eventuell gescheitert. Gescheitert daran, dass die Ausschnitt-Funktion nicht aktiviert war, wenn der gewünschte Bildbereich ausgewählt war. Es gibt nämlich eine Stolperfalle, bei der ich mir ehrlich gesagt nicht sicher bin, ob sie ein Bug oder Feature ist ;-)

Ausschnittfunktion deaktiviert

Ausschnittfunktion deaktiviert

Der Grund für die nicht aktive Ausschnittfunktion könnte folgender gewesen sein: WordPress nimmt den zugewiesenen Ausschnitt und verkleinert ihn auf die Größe, die für Miniaturbilder in den Einstellungen (Menüpunkt Mediathek) angegeben ist. Ist der Bildausschnitt kleiner oder gleich groß kann man ihn nicht ausschneiden. Deswegen muss der Bildausschnitt min. 1 Pixel größer sein!

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/08/wordpress-will-kein-miniaturbild-erstellen/feed/ 1 WordPress als "klassisches" CMS: ein Beispiel http://www.wordpress-buch.de/2010/08/wordpress-als-klassisches-cms-ein-beispiel/ http://www.wordpress-buch.de/2010/08/wordpress-als-klassisches-cms-ein-beispiel/#comments Wed, 18 Aug 2010 15:43:35 +0000 Perun http://www.wordpress-buch.de/?p=333 Das man mit WordPress sehr gut Weblogs betreiben kann, hat sich denke ich mal nach mehr 7 Jahren der Existenz von WordPress herumgesprochen. :-) Trotz vieler Anleitungen und praktischer Beispiele ist vielen noch nicht wirklich bewusst, dass man mit WordPress sehr gut auch Websites ohne Blogcharakter betreiben kann. Hierbei spricht man dann von "WordPress als 'klassisches' CMS". CMS steht hierbei für Content Management System was als Redaktionssystem übersetzt wird.

WordPress als "klassisches" CMS ist ein alter Hut

Schon vor mehr als fünf Jahren habe ich angefangen, mich mit dem Thema WordPress als "klassisches" CMS zu beschäftigen, und habe im Juni und Juli 2005 zwei Artikel zu diesem Thema auf perun.net verfasst. Diese Artikel habe ich verfasst oder besser gesagt, die beiden Aufträge umgesetzt, als viele der heute in WordPress enthalteten Funktionen noch weit entfernte Zukunftsmusik waren. Mittlerweile habe ich bei mehr als einem Dutzend Kunden-Websites WordPress als CMS eingesetzt.

Warum WordPress?

Aber warum sollte man WordPress als "klassisches" CMS einsetzen? Dafür gibt es viele Gründe. WordPress hat niedrige Anforderungen an einen Server, ist leicht zu installieren und zu pflegen und man kann auch anspruchsvolle Layouts problemlos umsetzen. Wenn Bedarf herrscht, kann man auf eine Fülle frei verfügbarer Plugins zurückgreifen, um benötigte Funktionen einzubauen. Zu guter Letzt hat man die Möglichkeit, noch zusätzlich auf ein sehr gutes Blog-System zurückzugreifen, wenn du dich entscheidest, dein Webprojekt noch um ein Weblog zu erweitern.

Anstatt der Beiträge rücken hier die Seiten (Pages) in den Vordergrund und nach Bedarf kann man sowohl die Feeds wie den Kommentarbereich deaktivieren oder sogar gänzlich entfernen.

Im folgenden Artikel werde ich an Hand meiner alten Portfolio-Website erklären, wie man eine "normale" Website mit WordPress umsetzen kann. Die Seite diente mir in der Zeit von Mitte 2003 bis September 2008, als ich noch ein Einzelunternehmer war. Seit September 2008 führen wir eine GmbH und die Website ist noch deswegen online, weil ich neben meiner gewerblichen auch freiberufliche Tätigkeit als Autor führe

Schauen wir uns zuerst die Website mal an:

Vlad-Design.de

Die Startseite

So weit, so gut. Nun wende ich mich den einzelnen Template-Dateien zu und fange als erstes mit dem Kopfbereich an.

Der Kopfbereich: header.php

Hier zuerst der Code der header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head profile="http://gmpg.org/xfn/11">
<?php if (is_front_page()) { ?>
    <title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
<?php } else { ?>
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
<?php } ?>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="WordPress und WeBuilder" /> <!-- leave this for stats please -->

    <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" media="print" />

    <meta name="author" content="Vladimir Simovic" />
    <meta http-equiv="imagetoolbar" content="no" />

    <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/img/favicon.ico" />
    <?php wp_head(); ?>
</head>

<body>
<div id="rand">

    <span class="unsichtbar"><a href="#text">Zum Inhalt springen</a></span>

    <hr />

    <div id="oben">
        <h1><a href="<?php bloginfo('url'); ?>" title="Zurück zur Startseite">Vladimir Simovic - Webworker (Webdesigner), Blogger, Autor aus Köln</a></h1>
    </div>

    <hr />

    <?php wp_page_menu('sort_menu=menu_order&show_home=Startseite&menu_class=navi-balken'); ?>
<!-- Ende Kopfbereich -->

Da ich davon ausgehe, dass bei dir gute (X)HTML- und CSS- Kenntnisse vorhanden sind, werde ich mich bei der Beschreibung des Codes auf das wesentliche beschränken.

In der fünften Zeile ist dir sicherlich schon <?php if (is_front_page()) { ?> aufgefallen. Mit diesem Conditional-Tag wird die Startseite abgefragt, wenn eine Page als Startseite bestimmt wurde. Im Admin-Bereich unter "Einstellungen" → "Leseeinstellungen" kann man Startseite festlegen:

WordPress: die Startseite festlegen

Eine Seite (Page) als Startseite

Falls du in diesem Bereich nichts geändert hast bzw. weiterhin die Auflistung der letzten Blog-Artikel auf der Startseite erscheinen, dann wird die Startseite mit is_home() angesprochen. Entscheidest du dich dafür eine Page als Startseite zu bestimmen dann kommt is_front_page() zum Einsatz.

Im konkreten Fall wird die Startseite abgefragt, weil ich auf dieser den Seitentitel anders ausgeben möchte als auf den Unterseiten (Zeilen 05–09): 

<?php if (is_front_page()) { ?>
    <title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
<?php } else { ?>
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
<?php } ?>

In den Zeilen 13 und 14 ist folgendes zu sehen:

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" media="print" />

Hiermit wird zum einen das "normale" Stylesheet und die CSS-datei für die Druckausgabe eingebunden. In der Zeile 20 kannst du folgendes sehen: <?php wp_head(); ?>. Es handelt sich hierbei um einen Template-Hook, der den Plugin signalisiert, dass man sich hier im Kopfbereich findet. Diverse Plugins benötigen diese Hooks (Haken) um zu wissen wo sie ihren Code ausgeben bzw. ihre Wirkung entfalten können.

Der Rest der header.php bis zu der vorletzten Zeile ist selbsterklärend. In der vorletzten Zeile sieht man folgendes:

<?php wp_page_menu('sort_menu=menu_order&show_home=Startseite&menu_class=navi-balken'); ?>

Mit dem oberen Code wurde die Hauptnavigation realisiert. Zum Einsatz kommt der Template-Tag wp_page_menu();. Dieser Tag listet alle Pages als Listenelmenete (<li>) auf und verfügt über eine Reihe von Parametern . Für dieses Theme kommen zwei Parameter zum Einsatz: sort_menu, show_home und menu_class.

Mit dem ersten Parameter kann man gezielt entscheiden nach welchen Kriterien, die Pages aufgelistet werden. Ich habe mich für den Wert menu_order entschieden. Hierbei werden die einzelnen Pages nach dem Reihenfolgen-Wert aufgelistet. Mit dem zweiten Parameter gibt man an, ob in der Auflistung der Pages bzw. der Navigation auch ein Link zur Startseite erscheinen soll. Mit dem Wert Startseite wird der Linktext für den Startseiten-Link bestimmt.

Mit dem dritten Parameter bestimmt man, wie das Klassen-Attribut des div-Blocks heißen soll, welches das Menü umgibt. In unsere Fall wird daraus in der Ausgabe: <div class="navi-balken">…</div>.

In der folgenden Abbildung kann man die Auswirkung der header.php sehen:

Vlad-Design.de: der Kopfbereich

Die Auswirkung der header.php

Die index.php und die page.php

Das allgemeine Haupttemplate (index.php) und das Haupttemplate für die Seiten (page.php) sind hier eineiige Zwillinge … der Code der beiden ist identisch:

<?php get_header(); ?>

    <hr />

    <div id="mitte">

    <div id="navi">
        <h2 class="first">Schnellinfo</h2>
        <ul>
            <li>Selbständig seit 2003</li>
            <li>Fachbuchautor und Spezialist für WordPress, XHTML und CSS</li>
            <li>Erfahrung aus mehr als 160 erfolgreich abgeschlossenen Projekten.</li>
        </ul>

        <img src="<?php bloginfo('template_directory'); ?>/img/vlad.jpg" width="125" height="134" alt="Vladimir Simovic" title="Vladimir Simovic" />

        <div id="navi-unten">&nbsp;</div>
    </div>

        <div id="text">

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            	 <h2><?php the_title(); ?></h2>
                <?php the_content('weiterlesen&hellip;'); ?>
                <?php edit_post_link('Bearbeiten', '<p>', '</p>'); ?>

        <?php endwhile; else: ?>
        <p>Diese Seite existiert leider nicht.</p>
        <?php endif; ?>

<?php get_footer(); ?>

Die Auswirkungen der index.php und der page.php sieht man auf der Startseite und hier im Artikel in der ersten Abbildung.

Die verschiedenen Seiten-Templates

Weil die Sidebars der einzelnen Unterseiten verschiedene Inhalte haben sollten, war es notwendig, eine Methode zu wählen, die dies ermöglicht. Man kann wechselnde Inhalte in WordPress z. B. mit if-Abfragen oder mit verschiedenen Seiten-Templates realisieren. Ich habe mich im Falle dieser Seite für mehrere Seiten-Templates entschieden.

Welchen Weg du einschlägst, ist zumindest bei kleineren Websites Jacke wie Hose. Ich konnte keinen Performance-Unterschied erkennen. Wie sich das bei sehr großen Websites auswirken könnte, müsste noch getestet werden.

Die journal.php

Als ich noch jung und voller Tatendrang war, hatte ich den Plan, auch auf meiner geschäftlichen Website ein Weblog zu betreiben, irgendwann durfte ich dann auch an mir selbst erfahren, dass der Spruch – "Der Tag hat nur 24 Stunden" – wirklich stimmt. Daher wurde es notwendig, die Inhalte aus diesem Bereich in meinem eigentlichen Weblog zu integrieren, aber ganz entfernen wollte ich den Bereich nicht. Deswegen bekam er einen Hinweis über die Auslagerung und darunter werden nun die 15 letzten Artikel aus perun.net aufgelistet:

Vlad-Design.de: Journal

Der Journal-Bereich

Und hier der Code dazu:

<?php
/*
Template Name: Journal
*/
?>

<?php get_header(); ?>

    <hr />

    <div id="mitte">

    <div id="navi">

        <h2 class="first">Schnellinfo</h2>
        <ul>
            <li>Selbständig seit 2003</li>
            <li>Fachbuchautor und Spezialist für WordPress, XHTML und CSS</li>
            <li>Erfahrung aus mehr als 160 erfolgreich abgeschlossenen Projekten.</li>
        </ul>

        <img src="<?php bloginfo('template_directory'); ?>/img/vlad.jpg" width="125" height="134" alt="Vladimir Simovic" title="Vladimir Simovic" />

        <div id="navi-unten">&nbsp;</div>
    </div>

        <div id="text">

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            	 <h2><?php the_title(); ?></h2>
                <?php the_content('weiterlesen&hellip;'); ?>

                <?php 	/* Widget für die Ausgabe des Feeds. */
		        if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('journal') ) : ?>
                <!-- Keine Widgets! -->
                <?php endif; ?>

                <?php edit_post_link('Bearbeiten', '<p>', '</p>'); ?>

        <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
        <?php endif; ?>

<?php get_footer(); ?>

Die einzige Besonderheit in dieser Template-Datei ist das Widget (Zeile 34–37), das es mir einerseits ermöglicht, hier den Newsfeed aus perun.net einzubinden und die verlinkten Überschriften der 15 letzten Beiträge aufzulisten. Es bietet mir zudem auch die Möglichkeit, die Ausgabe komfortabel aus dem Admin-Menü heraus ("Design" → "Widgets") zu verwalten:

Vlad-Design.de: Widgets

Externen Feed via Widget einbinden

Die leistungen.php

Die leistungen.php unterscheidet sich von der oben vorgestellten journal.php nur minimal. Das Widget im Inhaltsbereich fehlt und der Inhalt in der Sidebar weicht ab:

<?php
/*
Template Name: Leistungen
*/
?>

<?php get_header(); ?>

    <hr />

    <div id="mitte">

    <div id="navi">

        <h2 class="first">Leistungen</h2>

        <ul>
            <li>(X)HTML & CSS</li>
            <li>WordPress</li>
            <li>Redaktionelle Pflege</li>
            <li>Beratung/Schulung</li>
        </ul>

        <img src="<?php bloginfo('template_directory'); ?>/img/vlad.jpg" width="125" height="134" alt="Vladimir Simovic" title="Vladimir Simovic" />

        <div id="navi-unten">&nbsp;</div>
    </div>

        <div id="text">

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            	 <h2><?php the_title(); ?></h2>
                <?php the_content('weiterlesen&hellip;'); ?>
                <?php edit_post_link('Bearbeiten', '<p>', '</p>'); ?>

        <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
        <?php endif; ?>

<?php get_footer(); ?>

Und hier ein Teil des Bereichs als Abbildung:

Vlad-Design.de: Leistungen

Die Leistungen

Die referenzen.php

Der Referenzen-Bereich besteht aus einer übergeordneten und vier untergeordneten Seiten und diese fünf Seiten bekommen alle die referenzen.php als Seiten-Template zugewiesen.

<?php
/*
Template Name: Referenzen
*/
?>

<?php get_header(); ?>

    <hr />

    <div id="mitte">
        <div id="navi">
        <h2 class="first">Unterpunkte</h2>
        <ul>
            <li><a href="<?php bloginfo('url'); ?>/referenzen/gewerbliche-projekte/"<?php if (is_page('Gewerbliche Projekte')) echo ' class="aktiv"'; ?>>Gewerbliche Projekte</a></li>
            <li><a href="<?php bloginfo('url'); ?>/referenzen/veroeffentlichungen/"<?php if (is_page('veroeffentlichungen')) echo ' class="aktiv"'; ?>>Veröffentlichungen</a></li>
            <li><a href="<?php bloginfo('url'); ?>/referenzen/sonstige-projekte/"<?php if (is_page('sonstige-projekte')) echo ' class="aktiv"'; ?>>Sonstige Projekte</a></li>
            <li><a href="<?php bloginfo('url'); ?>/referenzen/private-projekte/"<?php if (is_page('private-projekte')) echo ' class="aktiv"'; ?>>Private Projekte</a></li>
        </ul>

        <img src="<?php bloginfo('template_directory'); ?>/img/vlad.jpg" width="125" height="134" alt="Vladimir Simovic" title="Vladimir Simovic" />

            <div id="navi-unten">&nbsp;</div>
        </div>

        <div id="text">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            	 <h2><?php the_title(); ?></h2>
                <?php the_content('weiterlesen&hellip;'); ?>
                <?php edit_post_link('Bearbeiten', '<p>', '</p>'); ?>

        <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
        <?php endif; ?>

<?php get_footer(); ?>

Auch bei dieser Template-Datei weicht nur der Inhalt der Sidebar ab. In der Sidebar dieser Datei befinden sich eine manuelle Auflistung der untergeordneten Seiten und jeweils eine if-Abfrage, um festzustellen, auf welcher Unterseite man sich befindet, um ein Klassen-Attribut zuzuweisen. Hier die Abbildung des besagten Bereichs:

Vlad-Design.de: die Referenzen

Der Referenzen-Bereich

Die impressum.php

Hier der Code der impressum.php:

<?php
/*
Template Name: Impressum
*/
?>

<?php get_header(); ?>

    <hr />

    <div id="mitte">
        <div id="navi">
            <h2 class="first">Kontakt</h2>
            <address>
            Vladimir Simovic<br />
            ...
            </address>

            <img src="<?php bloginfo('stylesheet_directory'); ?>/img/vlad.jpg" width="125" height="134" alt="Vladimir Simovic" title="Vladimir Simovic" />

            <h2>Netzwerke</h2>
            <p><a href="http://www.openbc.com/hp/Vladimir_Simovic/" style="border: none;" title="OpenBC/Xing" rel="nofollow"><img src="http://www.xing.com/img/buttons/3_de_btn.gif" width="118" height="23" alt="XING" style="margin: 0;" /></a></p>

            <div id="navi-unten">&nbsp;</div>
        </div>

        <div id="text">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            	 <h2><?php the_title(); ?></h2>
                <?php the_content('weiterlesen&hellip;'); ?>
                <?php edit_post_link('Bearbeiten', '<p>', '</p>'); ?>

        <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
        <?php endif; ?>

<?php get_footer(); ?>

In der Zeile 14 wird dir bestimmt das Element address aufgefallen sein. Genau! Innerhalb dieses HTML-Elementes bringt man die Adressdaten unter. Und hier die Abbildung des Impressums:

Vlad-Design.de: Impressum

Das Impressum und die Kontaktdaten

Wie man sieht, habe ich innerhalb des Impressums auch die Kontaktdaten untergebracht, ohne dafür eine extra Seite zu erstellen. Nicht zuletzt seit der Erscheinung des Buches Website Boosting * weiß man, dass die allermeisten Besucher einer Website mittlerweile wissen, dass sich im Impressum auch die Kontaktdaten und nicht nur rechtliche Hinweise befinden.

Der Fußbereich

Vom Fußbereich der Website (footer.php) gibt es nichts Nennenswertes zu berichten. Hier der Code:

    </div><!--ende Text-->

        <div class="clearer"></div>
    </div><!--/Mitte-->

    <hr />

    <div id="unten">
        <div>&copy; <a href="http://www.vladimir-simovic.de">Vladimir Simovic</a> 2003-2009 &ndash; Alle Rechte vorbehalten &ndash; <a href="http://wordpress.org" title="Diese Website wird mit WordPress betrieben" rel="nofollow">Wordpress</a></div>
    </div>
</div><!--/Rand-->

<?php wp_footer(); ?>

<!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. -->

</body>
</html>

Und hier der Fußbereich im Frontend:

Vlad-Design.de: der Fußbereich

Der Fußbereich (footer.php)

Die Fehlerseite: 404.php

So wie bei eigentlich allen Websites ist es auch bei diesem Projekt sinnvoll, eine Fehlerdatei (404.php) zu erstellen, damit die Besucher, die eine nicht mehr existierende Seite ansteuern, sich nicht verloren fühlen. Hier der Code:

<?php get_header(); ?>

    <hr />

    <div id="mitte">

        <div id="navi">
            <h2 class="first">Schnellinfo</h2>
            <ul>
                <li>Selbständig seit 2003</li>
                <li>Fachbuchautor und Spezialist für WordPress, XHTML und CSS</li>
                <li>Erfahrung aus mehr als 160 erfolgreich abgeschlossenen Projekten.</li>
            </ul>

            <img src="<?php bloginfo('stylesheet_directory'); ?>/img/vlad.jpg" width="125" height="134" alt="Vladimir Simovic" title="Vladimir Simovic" />

            <div id="navi-unten">&nbsp;</div>
        </div>

        <div id="text">
            <h2>404er Fehler</h2>
            <p>Die von Ihnen angeforderte Seite existiert nicht mehr oder liegt an einem anderen Ort. Folgende Seiten geh&ouml;ren zum Umfang dieser Pr&auml;senz:</p>

            <ul class="sitemap">
                <?php wp_list_pages('title_li='); ?>
            </ul>

<?php get_footer(); ?>

Wie du aus dem oberen Code erkennen kannst, habe ich in den Zeilen 23–25 die Sitemap ("Inhaltsverzeichnis") der Website mit Hilfe von wp_list_pages('title_li=') erstellt, um den Besuchern den Wiedereinstieg zu erleichtern. Eine Abbildung spare ich mir, da die Unterschiede zu der Start- oder anderen Seiten marginal sind.

Die functions.php und die Widgets

In der functions.php werden PHP-Funktionen ausgelagert. In diesem Beispiel ist dort lediglich das Widget-Feld untergebracht, das im Journal-Bereich zum Einsatz kommt.

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'journal',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
?>

Alternative Möglichkeiten für die Navigation

In diesem Artikel hast du gesehen, wie ich auf meiner alten Portfolio-Website die primäre und sekundäre Navigation umgesetzt habe. Es geht aber auch anders: durch Plugins und andere Funktionen, wie z. B. durch wp_list_pages oder durch das benutzerdefinierte Menü welches in WordPress 3.0 hinzugekommen ist.

Aktuellen menüpunkt kennzeichnen

Sehr hilfreich ist es, wenn der Besucher erkennt, innerhalb welchen Bereichs er sich befindet. Wenn man die Seiten (Pages) über wp_list_pages() oder wie hier über wp_page_menu() ausgibt, dann bekommt jede Seite, auf der du dich gerade befindest, einen zusätzlichen Klassenwert zugewiesen: 

<li class="page_item page-item-12 current_page_item"><a href="...">

Somit hat man die Möglichkeit, eine zusätzliche CSS-Regel zu erstellen (z. B. .current_page_item {font-weight: bold;}), um das Aussehen des aktiven Menüpunktes zu steuern.

Aktiven Menüpunkt hervorheben

Wo bin ich gerade: Aktiven Menüpunkt hervorheben

Eine zwangsläufige Frage, die dann auftaucht, ist, wie man auch die übergeordnete Seite visuell hervorheben kann, wenn man sich auf der jeweiligen untergeordneten Seite befindet? Die übergeordnete Seite bekommt auch einen zusätzlichen Klassenwert zugewiesen: current_page_parent.

* = Partnerlink

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/08/wordpress-als-klassisches-cms-ein-beispiel/feed/ 11 Daten-Export und -Import mit WordPress http://www.wordpress-buch.de/2010/08/daten-export-und-import-mit-wordpress/ http://www.wordpress-buch.de/2010/08/daten-export-und-import-mit-wordpress/#comments Mon, 16 Aug 2010 12:44:29 +0000 Sahanya http://www.wordpress-buch.de/?p=329 Eine der wichtigsten Handlungen, die man in möglichst regelmäßigen Abständen tun sollte, um im Zweifelsfall einen Nervenzusammenbruch zu vermeiden ist die Erstellung eines Backups der Blog-Inhalte. Um die Export-Datei zu erstellen gibt es im Menü den Punkt "Werkzeuge / Daten exportiern", um dann Inhalte zu importieren findet man auch den Punkt "Werkzeuge / Daten importieren". Beide haben sich seit dem Upgrade auf WordPress 3.0 verändert. Der eine ist umfangreicher geworden, der andere wurde abgespeckt.

Daten exportieren

Der Bereich Daten exportieren, hat sich vergrößert. Während man in vorhergehenden WordPress-Versionen die Backup-Datei auf einzelne Autoren eingrenzen konnte (wie im Screenshot WordPress exportieren zu sehen ist), hat man jetzt die Qual der Wahl.

Daten exportieren

Daten exportieren

  • Startdatum: alles oder ein bestimmter Monat?
  • Enddatum: alles oder bestimmter Monat?
  • Autor: alle oder ein bestimmter Autor?
  • Kategorien: alle oder eine bestimmte Kategorie?
  • Inhaltstyp: alle oder nur Seiten oder nur Artikel?
  • Stauts: alle oder nur Veröffentlichte, nur Geplante, nur Entwürfe, nur zum Review anstehenden oder nur Private?

Allen Unentschlossenen sei an dieser Stelle geraten: alles und jeden zu exportieren, insbesondere dann wenn es sich um eine Backup-Datei handeln soll.

Daten importieren

Der Bereich Daten importieren wurde "verkleinert". Die gelisteten Importer wurden von 14 auf 7 reduziert und auf den zweiten Blick fällt auf: huch, die müssen ja noch installiert werden.

Daten importieren

Daten importieren

Das hat natürlich den Vorteil, dass man in seiner WordPress-Installation keinen unnötigen Importer praktisch "vorinstalliert" hat, aber den – zugegeben kleinen – Nachteil, dass man einen Importer, wenn man ihn denn dann benötigt, vor der ersten Anwendung erst installieren muss.

WordPress Importer installiert

WordPress Importer installiert

Die Installation selber läuft aber gewohnt komfortabel ab. Einfach auf den verlinkten Importer klicken und den Anweisungen folgen. Der gewünschte Importer wird dann als Plugin installiert.

Hat man nun z. B. für das Aufspielen eines Blog-Backups den WordPress-Importer installiert, so verläuft der eigentliche Datenimport wieder wie gewohnt.

Für alle, die beim Import noch etwas Nachhilfe benötigt, empfehle ich Peruns Artikel Mit WordPress umziehen.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/08/daten-export-und-import-mit-wordpress/feed/ 0 WordPress – Das Praxisbuch, 3. Aufl., als E-Book http://www.wordpress-buch.de/2010/08/wordpress-praxisbuch-3-auflage-e-book/ http://www.wordpress-buch.de/2010/08/wordpress-praxisbuch-3-auflage-e-book/#comments Tue, 10 Aug 2010 19:10:41 +0000 Perun http://www.wordpress-buch.de/?p=328 Die 3. Auflage von WordPress – Das Praxisbuch gibt es mittlerweile auch als E-Book. Das E-Book kostet nur knapp 24 Euro und ist somit sechs Euro günstiger als die Print-Ausgabe. So weit mir das vom Verlag mitgeteilt wurde, kann man das E-Book ausdrucken, es ist lediglich nicht möglich das Dokument zu bearbeiten.

Beziehen kann man das E-Book auf der Website des Verlags.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/08/wordpress-praxisbuch-3-auflage-e-book/feed/ 8 Die Bildbearbeitungsfunktion von WordPress sinnvoll nutzen http://www.wordpress-buch.de/2010/07/die-bildbearbeitungsfunktion-von-wordpress-sinnvoll-nutzen/ http://www.wordpress-buch.de/2010/07/die-bildbearbeitungsfunktion-von-wordpress-sinnvoll-nutzen/#comments Sat, 24 Jul 2010 12:45:48 +0000 Sahanya http://www.wordpress-buch.de/?p=318 Miniaturbild unbearbeitet

Miniaturbild unbearbeitet

Seit der Version 2.9 bietet WordPress dem Benutzer die Möglichkeit unmittelbar nach dem Hochladen eines Bildes dieses rudimentär zu bearbeiten. "Rudimentär" deswegen, weil die Bearbeitungsmöglichkeiten bei weitem nicht an die von durchschnittlichen Bildbearbeitungsprogrammen heran reichen. Man kann das Bild hier lediglich skalieren, beschneiden, drehen oder kippen bzw. spiegeln.

Es empfiehlt sich also – falls man größere Änderungen vornehmen möchten (Effekte, Tonwertkorrektur etc.) – ein "richtiges" Bildbearbeitungsprogramm zu nutzen.

Es gibt allerdings einen guten Grund die interne Bildbearbeitungsfunktion zu nutzen: WordPress gibt einem damit nämlich die Möglichkeit ein hochgeladenes Bild so zu bearbeiten, dass das Vorschaubild einen Ausschnitt des eigentlichen Bildes darstellt. Was ich damit meine?

Man möchte einem Artikel ein Bild beifügen, allerdings nur als verlinktes Miniaturbild. Das Originalbild, also das große Bild wirkt allerdings in einer einfachen Verkleinerung als Miniaturbild überhaupt nicht bzw. kein Mensch kann etwas darauf erkennen. Besser wäre es einen Ausschnitt zu wählen, der repräsentativ für das gesamte Foto da stehen soll. Klickt der Besucher dann auf dieses Miniaturbild, so öffnet sich das unbeschnittene, also das komplette Bild.

Um das zu erreichen muss man wie folgt vorgehen:

Ein Miniaturbild erstellen

Ein Miniaturbild erstellen

Das gewünschte Bild hochladen und unter dem Bild auf den Button "Bild bearbeiten" klicken. Es öffnet sich ein neues Fenster. Hier klickt man einfach direkt auf das Bild, hält die Maustaste gedrückt und zieht mit der Maus, so dass ein Rechteck aufgezogen wird.

Man kann die Größe des Ausschnitts auch pixelgenau bearbeiten, indem man die Werte im Bereich "Bildausschnitt" (rechts) ändert. Hier hat man zudem die Möglichkeit das Format festzulegen, z. B. 1 :2 oder 3 : 4.

Ein sinnvoller Bildausschnitt

Ein sinnvoller Bildausschnitt

Um diese Auswahl zu bestätigen muss man auf den linken oberen Button "Ausschnitt" klicken. Keine Sorge das große (Originalbild) zeigt nun auch nur den Ausschnitt an, obwohl es ja eigentlich erhalten bleiben soll. Wichtig ist dafür, dass man vor (!!!) dem Speichern der Änderung im Bereich "Miniaturbild-Einstellungen" den Punkt "Miniaturbild" auswählt. Standardmäßig ist hier die Option "Alle Bildgrößen" ausgewählt. Somit gilt die Beschneidung nur für das Miniaturbild.

Nach dem Einfügen in den Artikel erhält man so ein Miniatur- bzw. Vorschaubild, das den gewählten Ausschnitt anzeigt.

Achtung Stolperfalle:

Man muss das Bild natürlich auch als Miniaturbild in den Artikel einfügen und die Verlinkung muss auf die Datei-URL verweisen.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/07/die-bildbearbeitungsfunktion-von-wordpress-sinnvoll-nutzen/feed/ 3 Workshop: WordPress für Redakteure http://www.wordpress-buch.de/2010/07/workshop-wordpress-fuer-redakteure/ http://www.wordpress-buch.de/2010/07/workshop-wordpress-fuer-redakteure/#comments Tue, 13 Jul 2010 10:09:34 +0000 Perun http://www.wordpress-buch.de/?p=317 Ab dem 03. bis zum 23. August leiten meine bessere Hälfte und ich den Workshop WordPress für Redakteure auf akademie.de.

In dem dreiwöchigen Workshop wird den angehenden Redakteuren, die Arbeit mit dem Backend und den externen Tools erklärt. Weitere Infos zum Workshop gibt es auf der Info-Seite zum Workshop.

Neben den beiden anderen Workshops – Einfach zur professionellen Website mit WordPress als CMS und Individuelles Layout mit einem eigenen WordPress Theme – die im September bis November zum wiederholten Mal stattfinden, ist dies der dritte WordPress-Workshop, den wir auf akademie.de anbieten.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/07/workshop-wordpress-fuer-redakteure/feed/ 0 WordPress 3.0: blaues Farbschema für bessere Sicht im Admin-Bereich http://www.wordpress-buch.de/2010/06/wordpress-3-0-blaues-farbschema-fuer-bessere-sicht-im-admin-bereich/ http://www.wordpress-buch.de/2010/06/wordpress-3-0-blaues-farbschema-fuer-bessere-sicht-im-admin-bereich/#comments Mon, 21 Jun 2010 11:22:52 +0000 Perun http://www.wordpress-buch.de/?p=313 Ich bin glaube ich nicht der einzige, der mit der Standard-Farbgebung des Admin-Bereichs (Backend) nicht zufrieden ist. Schon in den vorherigen WordPress-Versionen fand ich das graue Farbschema, nicht wirklich gelungen.

WordPress: graues Farbschema

Graues Farbschema im Backend

Jetzt haben die Entwickler das graue Schema noch mal blasser und kontrastärmer gemacht. Doch Gott sei Dank bietet WordPress in der Standardausführung ein alternatives, blaues Farbschema. Einfach im Backend unter Benutzer → Dein Profil → Farbschema verwalten das blaue Schema auswählen:

WordPress: das blaue Farbschema auswählen

Das blaue Farbschema auswählen

Das abspeichern nicht vergessen und schon erscheint das Backend in blauen Farben, was nicht nur Augenfreundlicher sondern auch besser für das Gemüt ist.

WordPress: das blaue Farbschema

Blaues Farbschema: freundlicher zum Auge und zum Gemüt

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/06/wordpress-3-0-blaues-farbschema-fuer-bessere-sicht-im-admin-bereich/feed/ 0 Templates für Seiten (Pages) in WordPress http://www.wordpress-buch.de/2010/06/templates-fuer-seiten-pages-in-wordpress/ http://www.wordpress-buch.de/2010/06/templates-fuer-seiten-pages-in-wordpress/#comments Sat, 12 Jun 2010 21:10:36 +0000 Perun http://www.wordpress-buch.de/?p=309 Seit der Version 1.5 gibt es in WordPress auch die Seiten (englisch: Pages). Ursprünglich waren die Seiten dafür gedacht, dass man dort statische Komponenten eines Weblogs, wie zum Beispiel das Impressum, Informationen über die Autoren, rechtliche Hinweise etc. unterbringt.

Sehr schnell hat man aber die Funktion der Seiten dafür eingesetzt, wenn es darum ging mit WordPress auch Projekte ohne Blogcharakter zu betreiben: WordPress als "klassisches" CMS.

So weit so gut. Aber man kann mit den Seiten viel mehr anstellen. Zum Beispiel kann man erreichen, dass auf verschiedenen Seiten entweder unterschiedliche Inhalte und/oder verschiedene Layoutelemente auftauchen. Nehmen wir mal an du möchtest auf bestimmten Unterseiten in der Sidebar unterschiedliche Elemente haben oder einige Seiten sollen kommentierbar sein und andere wiederum nicht.

Man kann so etwas via if-else-Konstrukte realisieren, ich persönlich bevorzuge Seiten-Templates.

Wie erstelle ich ein Seiten-Template?

Am einfachsten geht es wenn du die bestehende page.php kopierst und in sagen wir mal impressum.php umbenennst. Dann öffnest du diese Datei in einem Code-Editor (bitte nicht Office oder Ähnliches) und fügst ganz am Anfang folgenden PHP-Kommentar:

<?php
/*
Template Name: Impressum
*/
?>

Dieser Kommentar signalisiert WordPress, dass es sich bei dieser Datei um ein Seitentemplate mit dem Namen "Impressum" handelt.

Anschließend führst du die Anpassungen durch, die diese Datei von der Standarddatei page.php unterscheidet. Dann lädst du diese neue Datei in das Themes-Verzeichnis hoch.

Wenn du ab jetzt eine neue Seite erstellst oder eine bestehende bearbeitest, dann hast du rechts im Modul "Attribute" die Möglichkeit, der Seite das passende Template zuzuweisen:

WordPress: Seitentemplate auswählen

Das passende Seitentemplate auswählen

Die Zuweisung eines Seitentemplates kann man natürlich auch in Nachhinein machen oder die Aktion rückgängig machen: einfach das Standardtemplate auswählen.

Die Seitentemplates sind schnell und einfach zu realisieren, bieten aber anderseits dem Betreiber ein mächtiges Werkzeug um seine Website flexibler und individueller zu gestalten.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/06/templates-fuer-seiten-pages-in-wordpress/feed/ 4 Suchmaschinenoptimierung (SEO) einer WordPress-Installation (2) http://www.wordpress-buch.de/2010/06/suchmaschinenoptimierung-seo-einer-wordpress-installation-2/ http://www.wordpress-buch.de/2010/06/suchmaschinenoptimierung-seo-einer-wordpress-installation-2/#comments Fri, 11 Jun 2010 08:10:41 +0000 Perun http://www.wordpress-buch.de/?p=307 Gestern habe ich den ersten Teil dieser zweiteiligen Reihe veröffentlicht. Im ersten Teil ging es um sprechende Permalinks, der Optimierung des Seitentitels und dem Einsatz der Überschriften und Zwischenüberschriften.

In diesem Artikel widme ich mich den Schlüsselwörtern in der Verlinkung, der Benennung von Dateien, dem alt-Attribut, dem Duplicate Content und dem WordPress-Plugin wpSEO.

Schlüsselwörter (Keywords) in der Verlinkung unterbringen

Viele Webmaster verlinken innerhalb der eigenen Website (interne Links) zu wenig und/oder nicht optimal. Verlinke innerhalb eigener Website überall dort, wo es den Besuchern helfen könnte.

Betreibst du ein WordPress-Weblog, dann sende auf jeden Fall einen Track-/Pingback vom neuen auf den alten Beitrag: in meisten Fällen, sendet WordPress automatisch einen Pingback wenn du dich auf den alten Artikel beziehst. Aber manchmal "klemmt" das System und da muss man nachhelfen in dem man ein Trackback abschickt.

Der Leser des neuen Beitrags weiß dann, dass es einen älteren Beitrag zu dem Thema gibt und der Leser des alten Beitrages sieht in den Kommentaren den Pingback und weiß, dass es zu dem Thema auch einen aktuellen Beitrag gibt.

Mit dieser Maßnahme hilfst du sowohl dem Besucher als auch der Suchmaschine den Beitrag zu finden.

Achte bei der Verlinkung außerdem darauf, wichtige Keywords (Schlüsselbegriffe) direkt in den Linktext aufzunehmen. Hier ein sehr unglückliches Beispiel, welches man leider viel zu häufig sieht:

Um den neuen Artikel zum Thema Aktien vs. Bundesanleihen zu lesen, klicken Sie hier.

Viel besser ist folgendes:

Lesen Sie den neuen Artikel zum Thema Aktien vs. Bundesanleihen.

Diese Verlinkung ist für den Leser viel logischer und in punkto Suchmaschinenoptimierung ist es viel besser, da die Suchmaschinen es sehr hoch bewerten, wenn die relevanten Schlüsselwörter (Keywords) im Link-Text auftauchen. Allerdings solltest du hier, wie in allen Bereichen von SEO, maßvoll vorgehen. Wenn du hier nach dem Motto "viel hilft viel" handelst, dann könnte dich der Zorn der Tante Guugel erwischen.

Benennung von Dateien

Auch Dateien – sowohl Bilder als auch z. B. PDF-Dateien – kann man mit sprechenden Namen beglücken. Folgende Namen:

  • wordpress-seminar.pdf
  • max-mustermann.jpg
  • wordpress-buch.png

sind auf jeden Fall leserlicher und aussagekräftiger als:

  • neue-datei1.pdf
  • bild123.jpg
  • neues-bild.png

und zwar nicht nur für den Besucher, sondern auch für die Suchmaschinen. Bedenke, dass zumindest Google die PDF-Dateien indexiert und dass alle gängigen Suchmaschinen auch die Möglichkeit anbieten, nach Bildern (z. B. die Bilder-Suche von Google und Bing) zu suchen. Dafür sind aussagekräftige Namen sehr wichtig.

Das alt-Attribut bei den Bildern

Ich würde hier gerne einen kleinen zusätzlichen Hinweis bezüglich der Bilder abgeben. An vielen Stellen ist da etwas von einem "alt-Tag" zu lesen. Das ist einfach falsch! Es gibt weder in HTML noch in XHTML einen alt-Tag, es gibt lediglich ein alt-Attribut. So ist ein Bild-Element aufgebaut:

<img src="bild.png" alt="Ein Foto von mir" title="Meine Kumpels und ich feiern" />

Das ganze im oberen Beispiel ist ein (X)HTML-Element, img ist der Element-Name, alt und title sind Attribute (oder genauer gesagt Attributschlüssel, aber wir wollen ja hier nicht pingelig sein) und innerhalb der Anführungszeichen befinden sich die Attributwerte. Schematisch ist ein (X)HTML-Element folgendermaßen aufgebaut:

<Element-Name Attribut(-schlüssel)="Wert"> Inhalt des Elements</Element-Name>

<Element-Name Attribut="Wert"> ist hierbei der Start-Tag und </Element-Name> ist der End-Tag. Wobei zu erwähnen ist, dass manche Elemente – <br /> für Zeilenumbruch, <img /> für Bilder, <hr /> für die horizontale Trennlinie etc. – nur aus einem Tag bestehen.

title als Element und als Attribut

Es gibt übrigens neben dem title-Attribut (Tooltips beim Mouseover) auch einen title-Tag oder besser gesagt ein title-Element, dieser befindet sich im Kopfbereich (<head></head>) des Dokuments und sein Inhalt bildet den Seitentitel.

Dies alles nur am Rande, damit du beim nächsten Stammtisch mit tiefer gehendem Insider-Wissen glänzen kannst :-) .

Übrigens: der geschätzte Webworker-Kollege Peter Kröner, hat zu diesem Thema unter Element, Tag, Attribut. Ein für allemal. eine schicke Zeichnung abgeliefert.

Und bevor ich es vergesse, der Inhalt bzw. der Wert des alt-Attributs ist sehr wichtig. Dieser erscheint, wenn das Bild aus diversen Gründen nicht geladen wird und bei "Programmen", die keine Bilder anzeigen können: Textbrowser, Screenreader und Suchmaschinen. Daher ist der Inhalt dieses Attributs sehr wichtig. Allerdings würde ich Ihnen nicht empfehlen, dort Kurzgeschichten unterzubringen oder mit Keywords zu spamen … das kann nach hinten losgehen. Ein kurzer, aussagekräftiger Satz über das Bild ist ausreichend.

Duplicate Content verhindern bzw. eindämmen

Unter Duplicate Content versteht man, wenn identischer Inhalt unter verschiedenen URLs erscheint. Das kann dann passieren, wenn man als Autor den gleichen Inhalt auf zwei verschiedenen Websites veröffentlicht, wenn jemand den Inhalt Ihrer Website klaut und als eigenen veröffentlicht oder auch einfach innerhalb des eigenen Weblogs.

Dies passiert in Weblogs und anderen dynamischen Websites sehr schnell. Zum Beispiel taucht ein Blog-Artikel sowohl auf der Startseite, als auch unter dem eigenen Permalink, als auch in weiteren Übersichten auf: Kategorie-Übersicht, Suchergebnisse etc.

Das Problem an der ganzen Sache ist: Wenn ein identischer Inhalt auf mehreren Adressen auftaucht, müssen die Suchmaschinen entscheiden, welche URL sie indizieren und welche Adressen sie als Dubletten ignorieren sollen. Daher könnte es unter Umständen sein, dass ein Artikel von Ihnen nicht unter seinem Permalink, sondern mit der URL der Kategorieübersicht indiziert wird.

Was kann man also gegen das Problem von Duplicate Content (DC) unternehmen? Hier gibt es mehrere unterschiedliche Vorgehensweisen. Zum einen steht dem WordPress-Nutzer eine Reihe von SEO-Plugins zur Verfügung, wie z. B. wpSEO oder izioSEO. Diese Plugins werden einmal konfiguriert und verrichten ihre Arbeit dann automatisch. Sie teilen u. a. den Suchmaschinen mit, welche URL eines Inhaltes die relevante Adresse ist.

Aufteilung des Artikels

Allerdings kann man auch mit ganz einfachen Mittel das Problem entschärfen. Speziell bei längeren Artikeln empfiehlt es sich, den Beitrag zu trennen und zwar in einen einleitenden Teil und den Rest. Auf den Übersichtsseiten wird lediglich der einleitende Teil gezeigt, zum Rest gelangt man durch das Anklicken des weiterlesen…-Links.

Mit dieser einfachen Maßnahme hast du zwei Sachen erreicht. Zum einen ist die DC-Problematik etwas entschärft – unterschiedlicher Inhalt auf den Übersichten und der Einzelansicht – und zum anderen kommt das den Lesern zu Gute wenn nicht der komplette Artikel von beispielsweise neun DIN-A4-Seiten in der Übersicht auftaucht.

Keine Indizierung der Archiv-Seiten

Eine weitere einfache Maßnahme kann man mit Hilfe von Conditional Tags erreichen. Hier der Code, welchen man im Kopfbereich (<head></head>) einfügen muss. In den allermeisten WordPress-Themes wäre dies in der header.php.

<?php
if (is_search() or is_archive()) {
  echo "<meta name=\"robots\" content=\"noindex, follow\" />\n";
}
?>

Befindet man sich auf einer Übersichtsseite – Kategorie-Übersicht oder Suchergebnis-Seite – dann wird folgender Angabe eingefügt:

<meta name="robots" content="noindex, follow" />

Das signalisiert den Suchmaschinen: "folge bitte allen Links auf dieser Seite, indiziere aber bitte nicht den Inhalt dieser Seite".

Das rel="canonical"

Der Wert canonical des Attributs rel ist ein Teil des link-Elements und wurde eingeführt um den Suchmaschinen zu signalisieren, welches die originale URL eines Inhaltes ist, z. B.:

<link rel="canonical" href="http://www.perun.net/2009/12/03/wordpress-duplicate-content-vermeiden/" />

Ab der Version 2.9 kennzeichnet WordPress alle Artikel in der Einzelansicht automatisch mit dem entsprechenden rel="canonical". Bis dahin musste man entweder Plugins oder folgende Konstrukte in der header.php bemühen:

<?php if ( is_singular() ) echo '<link rel="canonical" href="' . get_permalink() . '" />'; ?>

Komfortable Optimierung mit dem WordPress-Plugin wpSEO

Fall dir die SEO-Arbeit im Code bzw. an den Template-Dateien nicht zusagt oder du es einfach komfortabler haben möchtest dann kann ich dir das WordPress-Plugin wpSEO von Sergej Müller empfehlen. Keine Sorge, ich bekomme kein Geld von Sergej, dass ich sein Plugin hier erwähne.

Dieses Plugin ist nicht im offiziellen Verzeichnis hinterlegt, weil es kostenpflichtig ist und daher muss man es sich von der Plugin-Website herunterladen und das entpackte Paket nach /wp-content/plugins/ hochladen: entweder über das FTP-Programm oder über die WordPress-Funktion.

Kostenlos testen

Der Autor bietet die Möglichkeit, das Plugin zehn Tage lang kostenlos zu testen.

Auf der Optionen-Seite der Erweiterung (Einstellungen / wpSEO) hast du die Möglichkeit, sehr viele Einstellungen zu tätigen, unter anderem:

  • den Aufbau des Seitentitels für Artikel, Seiten, Archive etc. steuern,
  • die Seiten-Beschreibungen und Seiten-Keywords steuern,
  • steuern, welche Seiten des Weblogs indiziert werden sollen und welche nicht, um so genannten Duplicate Content (identischer Inhalt auf mehreren URLs) zu verhindern
  • und vieles mehr.
wpSEO im Einsatz

wpSEO: DC-Problematik lösen

Die Funktionalität des Plugins ist enorm und auf alle Punkte einzugehen, wäre zu viel des Guten, zumal es auf der Website des Autors unter Dokumentation eine sehr ausführliche Anleitung gibt.

Wer es gerne komplett kostenlos haben will, kann sich die kostenlose Version des Plugins All in One SEO Pack anschauen. Es handelt sich hierbei um ein Plugin, welches einen ähnlichen Funktionsumfang wie wpSEO zu bieten hat.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/06/suchmaschinenoptimierung-seo-einer-wordpress-installation-2/feed/ 7 Suchmaschinenoptimierung (SEO) einer WordPress-Installation (1) http://www.wordpress-buch.de/2010/06/suchmaschinenoptimierung-seo-einer-wordpress-installation-1/ http://www.wordpress-buch.de/2010/06/suchmaschinenoptimierung-seo-einer-wordpress-installation-1/#comments Thu, 10 Jun 2010 09:49:28 +0000 Perun http://www.wordpress-buch.de/?p=299 Im Prinzip gibt es zwei Arten von Suchmaschinenoptimierung (SEO): On-Page- und Off-Page-Optimierung. Die erste beschäftigt sich mit Maßnahmen, die die Website bzw. deren Aufbau und Struktur betreffen.

Die zweite Art der Optimierung beschäftigt sich mit Maßnahmen jenseits der Website. Hierbei geht es hauptsächlich um die Erhöhung der Linkpopularität bzw. die Erhöhung der Anzahl der eingehenden Links.

Ich werde mich im in der folgenden zweiteiligen Artikelserie mit der On-Page-Optimierung beschäftigen und hierbei gilt für WordPress-Websites logischerweise das gleiche wie für andere Websites auch.

WordPress ist in Bezug auf SEO sehr gut aufgestellt. Folgendes Statement von Matt Cutts (Google) bestätigt dies:

WordPress takes care of 80-90 percent of (the mechanics of) Search Engine Optimization (SEO).

Aber auch, wenn WordPress in Bezug auf Suchmaschinen schon im Standardumfang das meiste richtig macht, so bleiben dennoch einige wichtige Aspekte, die man optimieren sollte. Einigen dieser Aspekte werde ich mich hier widmen.

Die "sprechenden" Permalinks

Standardmäßig ist die Funktion der "sprechenden" URLs deaktiviert. Die URLs zu den einzelnen Artikeln und Seiten sind folgendermaßen aufgebaut:

  • www.wordpress-buch.de/?p=123
  • www.wordpress-buch.de/?page_id=2
Permalink-Vorauswahl

Ausschnitt: Vorauswahl an Permalink-Strukturen

Falls du dich für die sprechenden URLs entscheidest, dann hast du die Auswahl zwischen drei Voreinstellungen. Einem Permalink, der das Datum und den Namen des jeweiligen Artikels wiedergibt, einer Einstellung, die der ersten ähnelt, wobei aber nur der Monat und das Jahr ausgegeben werden und einer numerischen URL-Struktur:

  • www.wordpress-buch.de/2009/12/14/artikel-name/
  • www.wordpress-buch.de/2009/012/artikel-name/
  • www.wordpress-buch.de/archives/123

Welchen Vorteil haben die "sprechenden" URLs?

Der erste und der wichtigste Vorteil dieser URLs liegt darin, dass der Mensch, also der Besucher der Website, mit solchen Adressen viel mehr anfangen kann als mit Adressen, die aus einer Nummernkombination bestehen.

Der andere Vorteil liegt in der Optimierung der Website für die Suchmaschinen. Dadurch, dass in der URL die Überschrift und somit die Keywords (Suchwörter) ausgegeben werden, kann die Suchmaschine solche Unterseiten besser "sortieren" und über kurz oder lang rentiert sich eine solche Permalink-Struktur durch eine bessere Positionierung in den Suchmaschinen: Dies ist für Weblogs genauso wie für "klassische" Websites von Interesse.

Du kannst den Aufbau der Permalink-Struktur in deiner WordPress-Installation aber auch ganz individuell gestalten. In der offiziellen Dokumentation findest du jede Menge Tags, mit denen du die Permalink-Struktur individualisieren kannst. Hier ein mögliches Beispiel: /%postname%/.

Dieser Permalink-Tag würde bewirken, dass in der URL lediglich der Name (Titel) der Seite bzw. des Blog-Artikels auftaucht, zum Beispiel:
www.wordpress-buch.de/ein-test-artikel/.

Technische Voraussetzungen

Um die Permalink-Struktur aus dem Admin-Bereich heraus zu aktualisieren, müsst du den Zugriff auf die .htaccess-Datei haben. Diese Datei muss sich im Hauptordner (wo üblicherweise auch die wp-config.php ist) von WordPress befinden.

Damit die Änderungen auch aktiv werden, muss die .htaccess-Datei beschreibbar (CHMOD 666) sein. Zusätzlich dazu muss das Apache-Modul mod_rewrite aktiv sein.

Welche Permalink-Struktur soll ich nehmen?

Auch wenn viele Kollegen mittlerweile die Permalinkstruktur auf das nötigste reduzieren, um noch den letzten SEO-Tropfen aus dem Projekt herauszuholen, bevorzuge ich in meinen neueren Projekten die Struktur, in der noch das Jahr und der Monat vorkommen (/%year%/%monthnum%/%postname%/). Bei all dem Optimierungswahn darf man die Besucher aus Fleisch und Blut nicht vergessen. Die Datumsangabe in der URL hilft sowohl bei der Orientierung innerhalb der Website als auch bei der Ausgabe der Suchergebnisse in Suchmaschinen, denn sie informiert über die Aktualität eines Artikels.

Google-Suche und Datum

Datum als wichtiger faktor bei der Suche

Zum Thema Permalinks und Datum habe ich auf perun.net unter Die richtige Permalinkstruktur meine Meinung zu diesem Thema geäußert.

Den Seitentitel optimieren

Den Seitentitel zu optimieren ist eine sehr wichtige Maßnahme, wenn es darum geht, die Website für die Suchmaschinen zu optimieren und daneben hilft diese Maßnahme auch den Besuchern. Es wird sich immer wieder zeigen, dass sehr viele Maßnahmen in Bezug auf SEO auch in direkter oder indirekter Weise den Besuchern der Website zur Gute kommen.

Die Suchmaschinen bewerten im Seitentitel lediglich die ersten 60-65 Zeichen. Daher ist es wichtig, die Überschrift bzw. den Titel des einzelnen Blog-Artikels an den Anfang zu rücken, damit auch die relevanten Begriffe des Artikels auf jeden Fall in die Bewertung kommen.

Und wie erreicht man dieses Ergebnis? Eine Möglichkeit ist, sich mit einem Code-Editor zu bewaffnen und folgendes in der header.php einzufügen:

<?php if (is_home()) { ?>
  <title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
<?php } else { ?>
  <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
<?php } ?>

Was bewirkt dieser Code? Dieser Code besteht aus einem if-else-Konstrukt. Es wird abgefragt, ob man sich auf der Startseite befindet. Wenn ja, dann wird der Name des Blogs (<?php bloginfo('name'); ?>) gefolgt von dem Blog-Slogan (<?php bloginfo('description'); ?>) angezeigt, hier die passende Abbildung:

WordPress: Blogtitel und Slogan

Seitentitel der Startseite bestehend aus Blogtitel und Slogan

Befindet man sich allerdings nicht auf der Startseite, sondern auf einer Unterseite, soll zuerst der Titel (wp-title();), gefolgt von einem Trennzeichen und dem Blog-Titel erscheinen:

WordPress: Seitentitel auf der Unterseite

Seitentitel auf Unterseite bestehend aus dem Artikel- und dem Blogtitel

Durch die Anpassung des Seitentitels in der header.php wird der Seitentitel nach dem gleichen Prinzip auch auf anderen Unterseiten (Pages, Archiv etc.) so angezeigt, wie in den letzten beiden Abbildungen.

WordPress: Seitentitel der Kategorie

Seitentitel einer Kategorie-Übersicht

Kommen wir noch einmal kurz zu dem neuen Code, speziell dem in der Zeile 10: wp_title('»', true, 'right');. Der Template-Tag wp-title(); hat seit der Version 2.5 drei Parameter. Der erste ist für das Trennzeichen, der zweite Parameter bestimmt, ob der Titel ausgegeben wird und mit dem dritten Parameter positioniert man das Trennzeichen (rechts oder links vom Titel).

Die Überschriften und Zwischenüberschriften sinnvoll einsetzen

So wie man in einem Office-Dokument die einzelnen Bereiche durch Überschriften einleitet bzw. einen Text strukturiert, so kann und so sollte man es auch in einem (X)HTML-Dokument tun … und WordPress nutzt HTML-Dokumente. Es nimmt die Inhalte – Texte, Bilder, Links etc. – aus der Datenbank und generiert dynamisch eine (X)HTML-Seite.

WordPress: Üeberschriften-Auswahl

Auswahl an Überschriften im WYSIWYG-Editor

Für die Überschriften sind in (X)HTML die Elemente h1-h6 zuständig. Wobei h1 die Überschrift mit höchster und h6 mit der niedrigsten Ordnung ist. Verwende die Überschriften semantisch richtig. Das heißt, du solltest eine bestimmte Überschrift genau dort verwenden, wo sie hingehört, also nicht h2 wählen, wo h3 richtig wäre, weil dir die große und fette Schrift von h2 gefällt.

(X)HTML ist entgegen anders lautender Gerüchte keine Programmiersprache (das ist z. B. C++), keine Seitenbeschreibungssprache (das ist z. B. PDF) und auch keine Textverarbeitung (dies versucht MS Word zu sein). (X)HTML ist eine Auszeichnungssprache: Sie zeichnen einzelne Bereiche aus und geben somit dem gesamten Dokument eine Struktur und dem Inhalt die Bedeutung. Wie das dann aussieht ist (X)HTML schnurz-piep-egal. Um das visuelle – Layout und Design – kümmert sich CSS. (X)HTML und CSS sind gute Teamplayer und erledigen ihre Bereiche sehr gut, daher ist es nicht sinnvoll, (X)HTML die Aufgaben von CSS zu übertragen.

Wenn dir also die Schriftgröße von h3 zu klein ist, zeichne bitte die entsprechende Überschrift nicht mit h2 aus. Lass h3 dort stehen und füge in der CSS-Datei z. B. folgendes ein: h3 {font-size: 120%;}.

Überschriften als Gliederungshilfe

Bei längeren Texten – egal ob in einem Blog-Beitrag oder auf einer Page (Seite) – ist es sinnvoll, den Text mit Zwischenüberschriften zu gliedern. Das hilft dem Leser und ist gut für die Suchmaschinenoptimierung.

Allerdings gilt es zu beachten, dass zum Beispiel das Standard-Theme ab WordPress 3.0 die Überschrift erster Ordnung (h1) bereits für die Überschriften der Blog-Artikel und als Überschrift der einzelnen Seiten "reserviert" hat". Somit stehen dir h2-h6 zur Verfügung, aber die fünf Arten von Überschriften sind mehr als ausreichend um den Inhalt eines Beitrages oder einer Seite logisch und hieararchisch zu strukturieren.

Diese Struktur kann allerdings von Theme zu Theme abweichen, daher lohnt es sich, in den Template-Dateien nachzusehen, welche Überschriften bereits "reserviert" sind.

Es gab vor knapp zwei Jahren Anzeichen dafür, dass Google den Überschriften zweiter und dritter Ordnung (h2 und h3) einen recht hohen Wert beigemessen hat und sie zum Teil besser abgeschnitten haben als die Überschrift erster Ordnung (h1). Was an sich nur logisch wäre, da man die h2 und h3 eher im relevanten Teil, als Zwischenüberschrift, des Inhaltes einsetzt.

Morgen geht es weiter mit dem zweiten Teil. Dort werde ich dann auf folgende Themen eingehen: die Benennung von Dateien, dem alt-Attribut, Duplicate Content und dem WordPress-Plugin wpSEO.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/06/suchmaschinenoptimierung-seo-einer-wordpress-installation-1/feed/ 4 Newsletter-Plugin für statische WordPress-Website http://www.wordpress-buch.de/2010/05/newsletter-plugin-fuer-statische-wordpress-website/ http://www.wordpress-buch.de/2010/05/newsletter-plugin-fuer-statische-wordpress-website/#comments Wed, 19 May 2010 12:56:37 +0000 Sahanya http://www.wordpress-buch.de/?p=289 Möchte man einen Newsletter mit seinem Blog verschicken, um so auch Abonnenten zu erreichen, die keine Feeds, sondern eben lieber Newsletter abonnieren, zu erreichen, so kommt man im deutschsprachigen Raum wohl nicht um das Plugin Post Notification herum. Ein weiteres interessantes Plugin ist zudem der G-Lock Double Opt-in Manager.

Aber was tun, wenn man WordPress als "reines" CMS ohne Blog-Funktion betreibt und trotzdem einen Newsletter versenden möchte? Die beiden oben genannten Plugins zielen nämlich darauf ab, die letzten Postings bzw. Artikel als Newsletter zu versenden.

Wenn man also einen statischen Webauftritt mit WordPress betreibt und ein Plugin mit Double Opt-in-Funktion haben möchte, sei an dieser Stelle auf das Plugin Newsletter hingewiesen. Hinter diesem schlichten und vor allen Dingen treffenden Namen verbirgt sich ein Newsletter-Plugin, dass in seiner Individualisierbarkeit kaum übertroffen werden kann.

Nach der Installation hat das Plugin einen eigenen Menüpunkt (Newsletter) mit mehreren Unterpunkten und so beginnt das große Konfigurieren:

Einstellungen

Damit alles wie gewünscht funktioniert müssen im Bereich Subscription einige Textfelder gefüllt werden.

Absender (Sender)

Im obersten Abschnitt müssen die Angaben für den Absender gemacht werden: E-Mail-Adresse und Name, der bei den Abonnenten als Absender erscheint. Außerdem muss hier angegeben werden, auf welcher Seite das Newsletter-Skript eingebaut ist. Der Einbau selber erfolgt einfach, indem man Shortcode [newsletter] auf einer Seite als Text veröffentlicht. Das kann eine separate Seite sein, aber auch auf einer bereits bestehenden, die anderen Inhalt (Kontaktformular o. ä.) enthält. Als untersten Punkt kann man hier aus einer Drop-Down-Liste auswählen welches Template – falls man eigene kreiert hat – man für die E-Mails verwenden möchte.

Anmelden (Subscription)

In diesem Bereich können zum einen auswählen, ob die Abonnenten E-Mail und Name beim Anmelden angeben sollen, oder ob lediglich die Angabe einer E-Mail-Adresse reicht (Häkchen machen). Im oberen Textfeld können Sie nun einen Text eingeben, der auf der Anmelden-Seite über dem Formular zum Anmelden erscheint. Im unteren Textfeld geben Sie eine Nachricht ein, die erscheint nachdem ein Besucher seine Daten angegeben hat. In der Regel sollte hier auch die Information erfolgen, dass die Anmeldung zum Newsletter noch bestätigt werden muss.

In den Textboxen können zudem verschiedene Variablen eingesetzt werden, z. B. {name}, um die Nachrichten etwas zu personalisieren.

Bestätigung (Confirmation)

Im nächsten Bereich können Sie festlegen, ob die Funktion double opt-in aktiviert sein soll. Gemeint ist damit, dass der Abonnent seine Anmeldung zum Newsletter mit einem zweiten Klick bestätigen muss, damit diese wirksam wird. Mehr zu diesem Verfahren kann man auch bei Wikipedia: Optin-in erfahren.

In dem Textfeld dieses Abschnittes können Sie einen Text verfassen, der dem Abonnenten erläutert, dass er die Anmeldung mit einem Klick auf den Link bestätigen muss.

Willkommen (Welcome)

Dieser Abschnitt enthält drei Textfelder. Als erstes die Willkommensnachricht, die auf der Seite erscheint bei einer erfolgreichen Anmeldung bzw. der Bestätigung einer Anmeldung, als zweites ein Textfeld, das nur interessant ist, wenn man das kostenpflichtige Plugin Newsletter Extras installiert hat. Für den normalen Gebrauch des hier beschriebenen Plugins ist es nicht von Bedeutung. Das dritte Textfeld enthält den Text für die Willkommens-E-Mail und sollte gleich – der Höflichkeit wegen – einen Link zum Abmelden des Newsletters enthalten {unsubscription_url}.

Abmelden (Unsubscription)

In diesem Abschnitt geht es um das Abmelden vom Newsletter. In das oberste Textfeld gehört der Text zum Abmelden von dem Newsletter, in das mittlere Feld eine Bestätigung der Abmeldung und im untersten Feld der Abschiedstext für die E-Mail an den ehemaligen Abonnenten. Vielleicht auch direkt mit einem Link zum erneuten Anmelden.

Fortgeschrittene (Advanced)

Am Ende dieser Seite findet sich noch eine einfache Eingabe für das Deaktivieren des Visuellen Editors. Benutzer, die sich mit HTML auskennen können diesen deaktivieren und die Texte in einfachen Texteditor-Feldern verfassen.

Speichern, speichern, speichern

Unter jedem der oben beschriebenen Abschnitte befindet sich übrigens ein "Speichern"-Button. Wenn man also Änderungen vornimmt, sollte man das Speichern nicht vergessen.

Den Newsletter verfassen

Nun kann es also endlich losgehen. Im Untermenü Composer findet man das Textfeld, in das man den eigentlichen Inhalt des Newsletters eingibt. Der Clou hierbei ist die Auswahl des Themes. Wählt man "Blank", also "leer", so kann man einen komplett eigenen Text verfassen und dann als Newsletter verschicken. Wählt man hingegen "Default" oder "With Picture", so werden auch hier automatisch die letzten Artikel in den Newsletter eingefügt. Diese kann man anschließend jedoch auch noch mit eigenem Text ergänzen.

Am Ende eines Newsletters sollte übrigens nie der Hinweis mit dem Link zum Abmelden fehlen.

Auf der gleichen Seite (weiter unten) befinden sich zudem Textfelder für E-Mail-Adressen, die Test-Newsletter erhalten. Das ist sehr interessant wenn man am Anfang mit dem Newsletter herum experimentiert. So kann man diese Test-Mails gleich an mehrere Empfänger schicken, um eine bessere Resonanz zu erhalten.

Die Abonnenten

Zu einem Newsletter-Plugin gehört selbstverständlich auch die Verwaltung der Abonnenten. Dies geschieht hier über den Menüpunkt Subscribers, auf der alle Abonnenten aufgelistet werden. Achtung: eine Auflistung erfolgt erst, wenn Sie kein Suchkriterium eingeben und dann auf den Button "Search" klicken.

Bei den Menüpunkten Import und Export können Sie alle Abonnenten importieren bzw. exportieren, um die Liste aus bzw. in anderen Anwendungen nutzen zu können.

Galerie

Absender Anmelden Bestätigung Willkommen Abmelden Newsletter

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/05/newsletter-plugin-fuer-statische-wordpress-website/feed/ 6 Bilder in einer Galerie sortieren http://www.wordpress-buch.de/2010/05/bilder-in-einer-galerie-sortieren/ http://www.wordpress-buch.de/2010/05/bilder-in-einer-galerie-sortieren/#comments Fri, 07 May 2010 08:02:00 +0000 Sahanya http://www.wordpress-buch.de/?p=288 Die Ausgabe der Galeriebilder, die man mit der include-Methode, die ich vor einiger Zeit hier beschrieben habe eingefügt hat, kann man auch sortieren. Die Möglichkeiten sind zwar stark eingeschränkt, aber vorhanden. Man muss dafür den Gallery-Shortcode erweitern.

Folgende Möglichkeiten stehen dabei u. a. zur Verfügung:

Sortierung nach ID des Bildes, aufsteigend (ascending) oder absteigend (descending)

[gallery include= "134, 71, 116" orderby="ID" order="ASC"]
[gallery include= "134, 71, 116" orderby="ID" order="DESC"]

Sortierung nach Name des Bildes, aufsteigend (ascending) oder absteigend (descending)

[gallery include= "134, 71, 116" orderby="title" order="asc"]
[gallery include= "134, 71, 116" orderby="title" order="desc"]

Zufällige (random) Ausgabe

[gallery include= "134, 71, 116" orderby="rand"]

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/05/bilder-in-einer-galerie-sortieren/feed/ 3 Eine Galerie erneut verwenden http://www.wordpress-buch.de/2010/05/eine-galerie-erneut-verwenden/ http://www.wordpress-buch.de/2010/05/eine-galerie-erneut-verwenden/#comments Tue, 04 May 2010 13:43:37 +0000 Sahanya http://www.wordpress-buch.de/?p=286 Wie man Bilder in eine Galerie integriert, die bereits in einem anderen Artikel verwendet werden, habe ich mit der include-Methode im Artikel Bilder aus der Mediathek in eine Galerie einfügen bereits erklärt. Manchmal möchte man vielleicht aber auch eine komplette Galerie noch einmal verwenden. Dies ist auf ähnliche Weise möglich.

Dafür ergänzt man den Shortcode der Galerie () umd die ID des Artikels, in dem sich die Galerie befindet. Die ID erfährt man, wenn man in der Artikelübersicht (Artikel / Bearbeiten) mit der Maus über den Titel eines Artikels fährt.

Den folgenden Shortcode müsste man dann in einen Artikel einfügen, um die Galerie aus dem Artikel mit der ID 454 anzeigen zu lassen:

[gallery id="454"]

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/05/eine-galerie-erneut-verwenden/feed/ 1 Bilder aus der Mediathek in eine Galerie einfügen http://www.wordpress-buch.de/2010/05/bilder-aus-der-mediathek-in-eine-galerie-einfuegen/ http://www.wordpress-buch.de/2010/05/bilder-aus-der-mediathek-in-eine-galerie-einfuegen/#comments Mon, 03 May 2010 09:48:56 +0000 Sahanya http://www.wordpress-buch.de/?p=283 Es gibt zwei Möglichkeiten Bilder aus der Mediathek in eine Galerie einzubinden. Entweder man bindet sie über die ID einzelner Bilder ein oder man ordnet sie dem gewünschten Artikel zu. Welche Methode man verwendet ist schlussendlich Geschmackssache. Bilder, die schon in anderen Artikeln eingefügt wurden, müssen über die iclude-Methode eingefügt werden, Bilder, die noch nicht einem Artikel zugeordnet sind, können auch mit der Verwenden-Methode in eine Galerie eingefügt werden.

ID eines Bildes

ID eines Bildes

include-Methode

Jedes in WordPress hochgeladene Bild verfügt über eine eigene ID. Diese erfährt man, wenn man in der Mediathek mit der Maus über das Bild fährt. Die ID wird dann als Teil der URL in der Statusleiste angezeigt.

Hat man die IDs der gewünschten Bilder, so muss man im Artikel den Galerie-Shortcode einfügen und um die Angabe der IDs der Bilder ergänzen. Mit den Ergänzungen legt man fest, welche Bilder in einer Galerie enthalten (include) sein sollen. Als Parameter müssen die IDs der Bilder angegeben werden.

[gallery include="468, 469, 470, 480, 481, 482, 483, 484, 485"]

Achtung

Standardmäßig sind Bilder einer Galerie auf eine Anhang-Seite verlinkt. Wenn man die include-Methode verwendet, ohne dass die Bilder an einer anderen Stelle einem Artikel "zugeordnet" sind, so läuft diese Verlinkung ins Leere. Man muss in dem Fall die Verlinkung auf die Bilddatei vornehmen und ihren Shortcode um die Anweisung link="file" ergänzen.

Werden die Bilder schon an anderer Stelle verwendet, so führt die Standard-Verlinkung zur dortigen Bild-Seite. Die Ergänzung link="file" wird sich also in den meisten Fällen anbieten, da man eine Verlinkung auf den anderen Artikel wahrscheinlich nicht möchte.

Bild verwenden/zuordnen

Bild verwenden/zuordnen

Verwenden-Methode

In der Mediathek erscheint in der Spalte "Verwendet in" der Hinweis "nicht eingebunden", falls ein Bild über die Mediathek hochgeladen wurde, aber noch in keinem Artikel eingebunden wurde. Über den Link Verwenden kann man eine Zuordnung vornehmen, so dass die gewünschten Bilder Teil einer Galerie werden können.

Durch einen Klick auf den Link Verwenden öffnet sich ein Fenster mit einem Suchen-Feld. Dort gibt man den Namen des Artikels ein, dem man das Bild zuordnen möchte und klickt dann auf den Button Suchen. Im Feld darunter wird nun die gesuchte Seite aufgelistet. Die gewünschte auswählen und dann auf -Wähle- klicken.

Hat man so mehrere Bilder einem Artikel zugeordnet, kann man in den Bearbeitungsmodus des Artikels wechseln. Im Galerie-Reiter erscheinen nun alle zugeordneten Bilder, so dass man die Galerie einfügen kann.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

]]> http://www.wordpress-buch.de/2010/05/bilder-aus-der-mediathek-in-eine-galerie-einfuegen/feed/ 5