WordPress bietet mit dem wp_nav_menu eine tolle Möglichkeit Navigationselemente unkompliziert über das Dashboard anzulegen und zu verwalten. Normalerweise verlinkt man statische Seiten oder Kategorien innerhalb von WordPress, doch ab und zu möchte man auch externe Seiten mit in die Navigation aufnehmen, in einem neuen Fenster öffnen und vielleicht sogar mit einem entsprechenden Icon kennzeichnen.
WordPress bietet von Haus aus die Möglichkeit Links mit einer Klasse, einem Linkziel, einer Beschreibung und einem XML-Attribut auszuzeichnen. Da die Funktion jedoch standardmäßig nicht aktiviert ist, und ich sogar schon Anleitungen gesehen habe die Features mit JavaScript nachzurüsten, möchte ich euch kurz zeigen wo ihr sie einschaltet.

Menü-Optionen

Im WordPress-Backend seht ihr oben rechts den Button "Optionen einblenden". Auffällig ist, dass sich unter diesem Link je nach aufgerufener Seite unterschiedliche Optionen verstecken. Es lohnt sich also häufiger mal die Optionen zu besuchen.
Wenn ihr euch im Bereich "Design → Menüs" befindet, könnt Ihr in den Optionen die oben beschriebenen Punkte aktivieren.

Anschließend stehen euch für jeden Menüpunkt die erweiterten Einstellungsmöglichkeiten zur Verfügung.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Seiten-Templates (page templates) werden in WordPress häufig dazu benutzt zusätzliche Inhalte in eine bestimmte Unterseite zu integrieren. Über ein Page-Template wird häufig ein Kontaktformular, eine Bildergalerie oder ein individueller Loop geladen. In einigen Fällen wird sogar der gesamte Inhalt dieser Seite ausgetauscht, was den WYSIWYG-Editor dann für diese spezielle Seite überflüssig macht und den Kunden daher häufig verwirrt. Mit dem folgenden Snippet könnt ihr den Editor für bestimmte Seiten-Templates über die functions.php des Themes deaktivieren.

function.php

Fügt folgenden Code in die functions.php eures Themes ein und passt den Namen des Templates in Zeile 6 entsprechend an. Sobald das Template einer Seite zugewiesen und gespeichert wurde, ist der Editor nicht mehr sichtbar.

add_action( 'admin_init', 'hide_editor' );
function hide_editor() {
	$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
	if( !isset( $post_id ) ) return;
	$template_file = get_post_meta($post_id, '_wp_page_template', true);
    if($template_file == 'test-page.php'){ // Hier den Dateinamen anpassen!
    	remove_post_type_support('page', 'editor');
    }
}

Der folgende Screenshot zeigt den fehlenden Editor für die das aktive Template "Beispiel-Template".

via wpsnipp

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In WordPress ist es mit Bordmitteln, etwa einem Template Tag, leider nicht möglich die Anzahl der Kommentare und die der Trackbacks getrennt von einander darzustellen. In der Datenbank unterscheidet WordPress hingegen beide Typen, und markiert echte Kommentare in einem zusätzlichen Feld. Mit einer entsprechenden Funktion kann geprüft werden ob das Feld ausgefüllt ist, wodurch sich beide Arten von Kommentaren einzeln anzeigen lassen.

Anzahl an Kommentaren darstellen

Der folgende Code gehört üblicherweise in die functions.php. Er kann jedoch auch im gleichen Template eingesetzt werden.
Die Funktion prüft ob Kommentare vorhanden sind und gibt (sofern das Ergebnis nicht Null ist) die Anzahl aus.

function comment_count() { global $post;
$thePostID = $post->ID; global $wpdb;
$count = "SELECT COUNT(*) FROM $wpdb->comments WHERE comment_type = ' '
AND comment_post_ID = $thePostID"; $co_number = $wpdb->get_var($count);
if ($co_number == 0) {} else {echo $co_number;}
}

Mit folgenden Snippet wird die Anzahl der Kommentare an einer beliebigen Stelle des Themens dargestellt.

<?php comment_count(); ?>

Anzahl der Trackbacks darstellen

Der Code für die Darstellung der Trackbacks funktioniert auf die gleiche Art und Weise. Folgendes Snippet gehört in die functions.php.

function trackback_count()
{ global $post;
$thePostID = $post->ID;
global $wpdb;
$count = "SELECT COUNT(*) FROM $wpdb->comments
WHERE comment_type != ' '
AND comment_post_ID = $thePostID"; $tb_number = $wpdb->get_var($count);
if ($tb_number == 0) {} else {echo $tb_number;} }

Mit diesem Snippet wird die Anzahl der Trackbacks ausgegeben.

<?php trackback_count(); ?>

Credits

Dieses Snippet habe ich auf denkvirtuose.de gefunden und unverändert übernommen. Es funktioniert einwandfrei und ist auch auf diesem Blog im Einsatz. Vielen Dank dafür!

• denkvirtuose.de/wordpress/die-anzahl-der-kommentare-und-trackbacks-getrennt-anzeigen.html

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ab und zu möchte man den RSS-Feed seines WordPress Blogs auf einer anderen Seite einbinden, um dort beispielsweise die neuesten fünf Beiträge zu bewerben. Der RSS-Feed ist schnell ausgelesen, ein Problem sind häufig die Post-Thumbnails der Artikel.
Die Artikelbilder werden von WordPress nicht in den Feed übertragen. Um die Post-Thumbnails dennoch im Feed anzuzeigen, wird häufig in der functions.php ein Snippet eingefügt das die Bilder in den Inhaltsbereich des Feeds lädt. Da sich die Bilder dann allerdings zusammen mit dem Text und anderen Bildern in einem Feed-Element befinden, ist schwierig sie gezielt auszulesen.

Element mit PHP preg_match identifizieren

Das Artikelbild wird im Feed als img direkt vor dem eigentlichen Inhalt des Beitrags eingebunden. Semantisch betrachtet befindet es sich aber ebenso wie der Beitrag selbst innerhalb des Elements "<description>". Mit preg_match lasst sich das Artikelbild über die Dateiendung identifizieren und in einem Array speichern. Anschließend zeigen wir immer nur das erste Bild des Array.

Alles was ihr benötigt, ist eine Variabel bzw. ein Array in der ihr den Feed-Inhalt (description) verfügbar habt. Sollte das nicht der Fall sein, schaut euch bitte noch einmal diesen Artikel an: RSS-Feed von WordPress auslesen.

Im folgenden Beispiel-Code wird $quelle nach Bildern durchsucht, und diese der Reihe nach in $ziel abgespeichert.

preg_match("/src=[\"\']?([^\"\']?.*(png|jpg|gif))[\"\']?/i", $quelle, $ziel); // Bilder werden aus $quelle ausgelesen und in $ziel gespeichert.

Anschließend könnt ihr mit folgendem Code das erste Elemente des Array auslesen und in einem img-Tag einbinden.

<img <?php print_r($ziel[0]); ?> height="100" width="100" alt=""/>

Mit diesem "regulären Ausdruck" ist es möglich die Post-Thumbnails von WordPress aus dem Feed zu extrahieren und in Kombination mit anderen ausgelesenen Feed-Elementen auf einer externen Website darzustellen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn ihr WordPress für Kundenprojekte einsetzt, werdet ihr schnell merken, dass einige Kunden Schwierigkeiten mit dem WordPress-Editor haben. Insbesondere wenn ein komplexer Inhaltsbereich gefüllt werden soll – beispielsweise ein mehrspaltiges Layout – sind viele Kunden überfordert. Und wir wollen den Kunden ja auch nicht mit der HTML-Variante quälen.
Ihr könnt den Editor ganz einfach mit Standard-Inhalten füllen und mit einer eigenen CSS-Datei stylen. Und das sogar für verschiedene post_types individuell. Es bietet sich u.U. also an, vorab eine HTML-Struktur festzulegen und für den Kunden benutzerfreundlich darzustellen.

WordPress-Editor mit Standard-Inhalten füllen

Über die functions.php des Themes könnt ihr den Editor mit Default-Content füllen. Häufig wird als Einsatzbeispiel ein wiederkehrender Absatz am Ende von Artikeln genannt den ich persönlich allerdings direkt ins Template schreiben würde.
Ich möchte in diesem Beispiel ein HTML-Grundgerüst für verschiedene Seitentypen anlegen, und anschließend so gestalten, dass der Kunde sich leicht zurechtfindet. Aber beginnen wir erst einmal mit der grundsätzlichen Funktionsweise.

Folgender Code gehört in die functions.php und fügt Standard-Inhalt in den Editor verschiedener Beitragstypen ein. Zunächst erstellen wir den Inhalt für statische Seiten und Custom Post Types. Anschließend den Inhalt für alle verbliebenen Beitragstypen wie die Artikel.

// Standard-Inhalte für verschiedene Beitragstypen
function kb_custom_editor_content( $kb_default_content ) {
   global $current_screen;

   // Für statische Seiten
   if ( $current_screen->post_type == 'page') {
	  $kb_default_content = 'Dieser Inhalt erscheint bei statischen Seiten.';
   }

   // Für Custom Post Types
   elseif ( $current_screen->post_type == 'POSTTYPE') /* POSTTYPE durch den Namen des Post Types ersetzen! */ {
	  $kb_default_content = 'Dieser Inhalt erscheint bei Custom post Types.';
   }

   // Alle weiteren Beitragstypen wie Artikel etc.
   else {
	  $kb_default_content = 'Dieser Inhalt erscheint bei Artikeln und allen Beitragsarten, die nicht zuvor definiert wurden.';
   }

   return $kb_default_content;
 }

 add_filter( 'default_content', 'kb_custom_editor_content' );

Wenn ihr anschließend einen neuen Inhalt erstellt, wird automatisch der Default-Content eingefügt. Auf bereits erstellte Beiträge hat die Funktion keinerlei Auswirkungen.

Der hier abgebildete Code lädt nur eine Textzeile in den entsprechenden Editor. Ihr könnt auch komplexe HTML-Strukturen festlegen. Wie das funktioniert und welche Vorteile es hat zeige ich später.

Ein eigenes Stylesheet für den Editor: editor-style.css

Ihr habt den Editor mit Default-Content gefüllt, jetzt fehlt noch eine CSS-Datei um die Inhalte des Editors – sei es nun Default-Content oder nachträglich erstelle Elemente – ansprechend zu gestalten.

Fügt den nachfolgenden Code in die functions.php eures Themes ein. Anschließend sucht der WordPress-Editor im Stammordner des Themes (dort wo auch die style.css abgelegt ist), nach einem CSS-Dokument namens editor-style.css. Mit diesem Stylesheet könnt ihr den Inhalt des Editors dann gestalten.

// Individuelles Stylesheet für den Editor
function kb_custom_editor_stylesheet() {
   add_editor_style(
	   array('editor-style.css')
   );
}

add_action( 'admin_head', 'kb_custom_editor_stylesheet' );

Eigene Stylesheets für Custom Post Types

Das zuvor gezeigte Snippet gilt immer für alle Editor-Bereiche und für alle Arten von Inhalten. Wenn ihr allerdings mit Custom Post Types arbeitet, kann es Sinn machen für verschiedene Custom Post Types verschiedene Stylesheets anzulegen.
Das folgende Snippet ist eine kleine Erweiterung des vorherigen. Nun wird für jeden Custom Post Type nach einem eigenen Dokument gesucht. Die Namenstruktur ist immer editor-style-NAME DES POST TYPES.css.

// Individuelle Stylesheets für den Editor (je nach Post Type)
function kb_custom_editor_stylesheet() {
   global $current_screen;

   add_editor_style(
	   array(
		  'editor-style.css',
		  'editor-style-'.$current_screen->post_type.'.css'
		)
   );
 }

 add_action( 'admin_head', 'kb_custom_editor_stylesheet' );

Und so sieht’s in der Praxis aus

Ihr habt nun alle Basics gelernt, um den Editor für eure Kunden ansprechend zu gestalten. Ich möchte euch mit einem einfachen Praxisbeispiel noch zeigen, wie das Ganze dann aussehen könnte.

Über den Default-Content wurden nur div-Container erstellt. Der beschreibende Text über den Textbereichen wird über das Pseudoelement :before per CSS generiert. Der Vorteil an :before ist, dass der Inhalt nur im Editor – nicht aber im Frontend sichtbar ist.

In der functions.php habe ich folgenden Inhalt voreingestellt.

[...]

$kb_default_content = '
  	  <div class="entry"></div>
	  <div class="contentMain"></div>
	  <div class="contentAside"> </div>
	  ';
[...]

Die editor-styles.css habe ich anschließend mit diesem Inhalt gefüllt.

* {font-family:Arial, Helvetica, sans-serif;}

.wp-editor {width:800px;}

.entry:before {
	content:'Einleitungstext';
	color:silver;
	font-size:11px;
	position:absolute;
	top:-20px;
	left:0;
}

.entry,
.contentMain,
.contentAside {
	float:left;
	padding:15px;
	margin:30px 10px 10px 10px;
	border:1px dashed silver;
	position:relative;
}

.contentMain:before {
	clear:both;
	float:none;
}

.entry {width:750px;}

.contentMain {width:550px;}

.contentMain:before {
	content:'Haupt-Inhalt';
	color:silver;
	font-size:11px;
	position:absolute;
	top:-20px;
	left:0;
}

.contentAside {width:150px; margin-right:0;}

.contentAside:before {
	content:'Ergänzender Inhalt';
	color:silver;
	font-size:11px;
	position:absolute;
	top:-20px;
	left:0;
}

Ich habe übrigens bewusst mit festen Pixelgrößen gearbeitet, damit der Kunde besser einschätzen kann wo später auf der Website ein Zeilenumbruch entsteht. Das ist zwar meist ein wenig Gefummel bis es wirklich so klappt wie auf der Website, dann ist es allerdings ein echter Mehrwert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Komplexe und hochwertige WordPress-Themes verfügen in der Regel über eine so genannte "Theme Options Page" - eine zusätzliche Seite im Dashboard anhand der ein Benutzer das Theme über die normalen Möglichkeiten hinaus anpassen kann. Das TwentyEleven-Theme von WordPress wird beispielsweise mit einer solchen Options-Page ausgeliefert. Hier könnt ihr u.a. auswählen ob das Theme schwarz oder weiß sein soll, in welcher Farbe Verlinkungen auf der Website dargestellt werden und ob ihr eine Sidebar anzeigen möchtet.
In diesem Beitrag möchte ich euch zeigen wie ihr selbst eine Theme-Options-Page erstellt. Anhand eines leicht verständlichen Beispiels werdet ihr das Prinzip sicher schnell auf eure eigenen Projekte übertragen können.

WordPress Theme-Options-Pages

Ich möchte einmal kurz zusammenfassen was wir jetzt vorhaben. Wir erstellen eine Theme Options Page für ein beliebiges WordPress-Theme auf der wir zwei Eingabefelder platzieren. Das erste Eingabefeld dient dazu das Copyright-Datum im Footer des Themes anzupassen, in das zweite Feld kann der Benutzer seinen Google Analytics Tracking Code eintragen. Beide Anpassungen sind normalerweise nur möglich indem der Code der Website bearbeitet und anschließend hochgeladen wird.

Wir arbeiten mit der functions.php des Themes, mit dem WordPress-Dashboard und mit der footer.php. Zunächst erstellen wir über die functions.php die Options-Seite mit allen Inhalten. Über das Dashboard können dann die Daten eingetragen werden. Die Eingabewerte werden in der Options-Tabelle der Datenbank abgelegt. Im letzten Schritt lesen wir die eingetragenen Werte in der footer.php des Themes wieder aus.

Das klingt kompliziert? Ist es aber nicht. 2x Copy & Paste und alles läuft.

functions.php - Theme Options Page anlegen

Der folgende Code gehört in die functions.php eures Themes. Ich habe euch die einzelnen Bereiche der Datei im Code kommentiert.

/* ------------------ */
/* theme options page */
/* ------------------ */

add_action( 'admin_init', 'theme_options_init' );
add_action( 'admin_menu', 'theme_options_add_page' );

// Einstellungen registrieren (http://codex.wordpress.org/Function_Reference/register_setting)
function theme_options_init(){
	register_setting( 'kb_options', 'kb_theme_options', 'kb_validate_options' );
}

// Seite in der Dashboard-Navigation erstellen
function theme_options_add_page() {
	add_theme_page('Optionen', 'Optionen', 'edit_theme_options', 'theme-optionen', 'kb_theme_options_page' ); // Seitentitel, Titel in der Navi, Berechtigung zum Editieren (http://codex.wordpress.org/Roles_and_Capabilities) , Slug, Funktion
}

// Optionen-Seite erstellen
function kb_theme_options_page() {
global $select_options, $radio_options;
if ( ! isset( $_REQUEST['settings-updated'] ) )
	$_REQUEST['settings-updated'] = false; ?>

<div class="wrap">
<?php screen_icon(); ?><h2>Theme-Optionen für <?php bloginfo('name'); ?></h2> 

<?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
<div class="updated fade">
	<p><strong>Einstellungen gespeichert!</strong></p>
</div>
<?php endif; ?>

  <form method="post" action="options.php">
	<?php settings_fields( 'kb_options' ); ?>
    <?php $options = get_option( 'kb_theme_options' ); ?>

    <table class="form-table">
      <tr valign="top">
        <th scope="row">Copyright</th>
        <td><input id="kb_theme_options[copyright]" class="regular-text" type="text" name="kb_theme_options[copyright]" value="<?php esc_attr_e( $options['copyright'] ); ?>" /></td>
      </tr>
      <tr valign="top">
        <th scope="row">Google Analytics</th>
        <td><textarea id="kb_theme_options[analytics]" class="large-text" cols="50" rows="10" name="kb_theme_options[analytics]"><?php echo esc_textarea( $options['analytics'] ); ?></textarea></td>
      </tr>
    </table>

    <!-- submit -->
    <p class="submit"><input type="submit" class="button-primary" value="Einstellungen speichern" /></p>
  </form>
</div>
<?php }

// Strip HTML-Code:
// Hier kann definiert werden, ob HTML-Code in einem Eingabefeld
// automatisch entfernt werden soll. Soll beispielsweise im
// Copyright-Feld KEIN HTML-Code erlaubt werden, kommentiert die Zeile
// unten wieder ein. http://codex.wordpress.org/Function_Reference/wp_filter_nohtml_kses
function kb_validate_options( $input ) {
	// $input['copyright'] = wp_filter_nohtml_kses( $input['copyright'] );
	return $input;
}

Es besteht natürlich auch die Möglichkeit die Theme-Options-Page in einer eigenen Datei anzulegen und diese dann in die functions.php zu laden. Das macht vor allem dann Sinn, wenn die Options-Seite sehr umfangreich ist. Mit diesem Snippet ladet ihr eine externe Datei in die functions.php. Die Datei muss im gleichen Verzeichnis wie die functions.php abgelegt werden.

require_once ( get_stylesheet_directory() . '/theme-options-page.php' );

Theme-Options-Page im Dashboard

Im WordPress-Backend findet ihr die Theme-Options-Page nun im Bereich "Design".

Tragt in beide Felder nun einen Testinhalt ein und speichert die Änderung. Im letzten Schritt übertragen wir die Eingabe in das entsprechende Template.

footer.php - Eingaben im Template anzeigen

Alles was noch fehlt ist das Snippet um die gespeicherten Daten im Theme auszugeben. Für dieses Beispiel benutzt ihr dazu die footer.php.

Zunächst ruft ihr mit get_options (codex.wordpress.org/Function_Reference/get_option) die entsprechenden Werte aus der Datenbank ab. Anschließend stellt ihr die Inhalte über echo dar.

Das folgende Snippet gibt beide Inhalte direkt untereinander aus.

<?php
 $options = get_option('kb_theme_options');
 echo $options['copyright'];
 echo $options['analytics'];
?>

Das wars auch schon.

Weitere Links zum Thema

Wenn ihr euch eingehender mit der Erstellung von Theme-Options-Pages befassen wollt, schaut euch auch folgende empfehlenswerte Artikel und Tutorials an.

• net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel
• wpshout.com/create-an-advanced-options-page-in-wordpress
• smashingwall.com/wordpress/theme-options-page-resources

Außerordentlich lohnenswert ist auch diese Basis-Theme-Options-Page. Hier sind alle Arten von Eingabefeldern (Input, Select, Radio, Checkbox etc.) enthalten.

• themeshaper.com/2010/06/03/sample-theme-options/

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Normalerweise ist es in WordPress möglich, Artikel auf "sticky" zu setzen und somit im Loop oben zu halten. In der deutschen Version nennt sich die Funktion "auf der Startseite halten" und wird im Editor in der rechten Seitenleiste im Bereich "Status" angezeigt.
Wenn ihr allerdings WordPress um Custom Post Types erweitert habt, fehlt dort die Sticky-Funktion. Es gibt verschiedene Wege, sie nachzurüsten.

Sticky Custom Post Types Plugin

Die einfachste Lösung um die Sticky-Funktion auch für Custom Post Types nachzuinstallieren, ist die Verwendung des gleichnamigen Plugins. Das Plugin hat vor allem den Vorteil, dass es einfach wieder deinstalliert werden kann, sobald das Feature in der offiziellen WordPress-Installation integriert wurde. Wann das passiert, ist allerdings nicht klar - ein Report mit wechselndem Status zu diesem Feature existiert jedoch bereits. core.trac.wordpress.org/ticket/12702

Das Plugin funktioniert wunderbar, kann allerdings zu Problemen führen, wenn ihr andere Plugins im Einsatz habt, die ebenfalls von Custom Post Types Gebrauch machen. Das bekannte Meteor Slideshow-Plugin hat bei mir beispielsweise plötzlich nichtmehr wie gewünscht gearbeitet.

• Sticky Custom Post Types Plugin

Nachdem Ihr das Plugin installiert und aktiviert habt, findet ihr die Einstellungen dazu übrigens unter "Einstellungen → Lesen".

Benutzerdefinierte Felder verwenden

Je nachdem wie ihr geplant habt die Sticky-Funktion zu verwenden, bietet es sich auch an, Benutzerdefinierte Felder einzusetzen. Ein mögliches Beispiel: Mal angenommen ihr möchtet ein Portfolio aufbauen und dort bestimmte "Top-Referenzen" immer vor allen anderen anzeigen. Zu diesem Zweck könnt ihr ein Benutzerdefiniertes Feld, im Idealfall eine Checkbox, namens "Top" anlegen und anschließend abfragen ob der Wert dieses Feldes true oder false ist.
Im Template gebt ihr dann zwei Custom Loops hintereinander aus. Der erste zeigt nur Top-Refenzen, der zweite alle Referenzen die nicht "Top" sind. Dazu könnt ihr die Benutzerdefinierten Felder im Query auslesen.

Das folgende Beispiel zeigt einen Query in dem der Custom Post Type "Referenzen" mit dem Benutzerdefinierten Feld "Top" und den Value "Ja" berücksichtigt wird.

<?php
$args = array(
  'post_type' => 'referenzen',
  'posts_per_page' => -1, // = alle Beiträge anzeigen
  'meta_key' => 'top',
  'meta_value' => 'Ja'
);

query_posts( $args );
while ( have_posts() ) : the_post();

// Inhalt des Loops

endwhile;
wp_reset_query();
?>

Um Benutzerdefinierte Felder zu verwalten lohnt sich übrigens ein Blick auf das Plugin "More Fields".

• More-Fields-Plugin für WordPress
• Benutzerdefinierte Felder nur dann anzeigen wenn auch Werte eingetragen wurden

Natürlich besteht auch die Möglichkeit den WordPress-Core zu "hacken" um die Funktion zu ermöglichen. Da ihr WordPress dann jedoch nicht mehr ohne Weiteres updaten könnt, halte ich diese Variante für unbrauchbar.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich habe im vorausgegangenen Beitrag das Snippet zum Austausch des Login-Screen-Logos vorgestellt, nun möchte ich euch zeigen wie ihr das Logo innerhalb des WordPress-Dashboards ersetzen könnt.
Diese kleine Anpassung kann ebenfalls dazu beitragen, dass sich ein Kunde in WordPress wohler fühlt und das Gesamtprojekt (noch) positiver wahrnimmt. Auch dieses Snippet ist daher fester Bestandteil meines Basis-Themes das ich für alle WordPress-Projekte als technische Grundlage nutze und ständig weiterentwickle.

Logografik

Das Icon im WordPress-Dashboard hat die Abmessungen 16 x 16 Pixel. Erstellt also ein eigenes Logo mit diesen Abmessungen und speichert es im Theme-Ordner (../wp-content/themes/name-des-themes/img/logo-dashboard.png) ab. Ihr könnt auch einen anderen Speicherort wählen, das folgende Snippet sucht jedoch im oben genannten Ordner nach der Grafik.

functions.php

Kopiert folgendes Snippet in die functions.php eures Themes und passt ggf. den Pfad zum Bild an.

// replace dashboard logo
function kb_dashboard_logo() {
	echo '<style type="text/css">#header-logo { background-image: url('.get_bloginfo('template_directory').'/img/logo-dashboard.png) !important; }</style>';
}

add_action('admin_head', 'kb_dashboard_logo');

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn ihr WordPress für Kundenprojekte einsetzt, macht es Sinn den Administrationsbereich optisch an das bestehende Corporate Design des Kunden anzupassen. Dieser sieht nämlich in der Regel das eigene Logo lieber als das von WordPress, und eine individualisierte Installation wirkt natürlich auch technisch hochwertiger.
Der erste Kontaktpunkt zwischen Anwender und WordPress-Backend ist der Login-Bereich. Mit wenigen Zeilen Code tauscht ihr hier das WordPress-Logo gegen das des Kunden aus. Ein Snippet das unbedingt in die Theme-Vorlage wandern sollte.

Logografik erstellen

Das Standard-WordPress-Logo hat die Abmessungen 326 x 67 Pixel. Am einfachsten ist es daher, wenn ihr euer Logo ebenfalls im Rahmen dieser Abmessungen anlegt.
Das nachfolgende Snippet sucht innerhalb des Theme-Ordners (../wp-content/themes/name-des-themes/img/logo-login.png) nach der Grafik. Achtet also darauf, dass ihr das Bild auch an der richtigen Stelle ablegt.

functions.php

Kopiert folgenden Code in die functions.php des Themes. Es werden drei Elemente des Login-Screens verändert.
Zunächst wird das Logo gegen die von euch erstellte Grafik ausgetauscht. Anschließend wird die Verlinkung des Logos von wordpress.com auf die Startseite eurer Website umgeschrieben bloginfo('url') und der Titel durch den Namen eures Blogs get_option('blogname') ersetzt.

/* ----------------------- */
/* customized login-screen */
/* ----------------------- */

// logo
function kb_login_logo() {
  echo '<style type="text/css"> h1 a {background-image:url('.get_bloginfo('template_directory').'/img/logo-login.png)  !important;} </style>';
}

add_action('login_head',  'kb_login_logo');

// link
function kb_login_link() {
  echo bloginfo('url');
}

add_filter('login_headerurl', 'kb_login_link'); 

// link-title
function kb_login_linktitle() {
  echo get_option('blogname');
}

add_filter('login_headertitle', 'kb_login_linktitle');

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Um möglichst viele Besucher auf heiß diskutierte Beiträge des Blogs aufmerksam zu machen, lohnt es sich einen Bereich mit "beliebten Artikeln" einzubinden. Mit den Custom Queries von WordPress ist es möglich Beiträge nach der Anzahl der abgegebenen Kommentare zu sortieren und in ihrer Anzahl zu begrenzen. Mit dieser Technik werden jedoch auch veraltete, aber viel kommentierte Artikel berücksichtigt. Um nur aktuelle Trends abzubilden muss daher ein Zeitfenster definiert werden.

Code-Snippet

Mit dem folgenden Code-Snippet ist es möglich zunächst nur die Beiträge der letzten 30 Tage auszulesen und anschließend nach der Anzahl der abgegebenen Kommentare zu sortieren. Die Anzahl der dargestellten Beiträge wird auf 5 beschränkt.
Im letzten Schritt wird der WordPress-Loop gestartet und die Beiträge inkl. Beitragsbild, Titel und Verlinkung innerhalb einer ungeordneten Liste ausgegeben.

<ul>
<?php
function filter_where($where = '') {
    $where .= " AND post_date > '" . date('Y-m-d', strtotime('-30 days')) . "'"; // Zeitfenster auf 30 Tage begrenzen
    return $where;
}

add_filter('posts_where', 'filter_where');

// WordPress Query
	$args = array(
		'posts_per_page' => 5,
		'order'    => 'DESC',
		'orderby' => 'comment_count'
	);
	query_posts( $args );

// WordPress-Loop
while (have_posts()): the_post(); ?>

<li>
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumbnail' ); ?><?php the_title (); ?></a>
</li>

<?php endwhile;
	wp_reset_query();
?>
</ul>

Das Snippet ist bei mir im Einsatz und zeigt in der Sidebar die aktuellen Trends an.

Der Code in diesem Artikel basiert auf einem Beitrag von wpmu.org

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Bei der Erstellung eines WordPress-Themes kommt es häufiger vor, dass man nur den Titel einer übergeordneten Seite anzeigen möchte. Zum Beispiel um für eine Metanavigation in der Sidebar eine Überschrift auszugeben.
Besonders interessant ist in diesem Zusammenhang der Titel einer Eltern-Seite auf oberster Verschachtelungsebene.

Bei einer Verschachtelungstiefe ab zwei, besteht ein Unterschied zwischen dem direkten Vorfahren einer Seite und dem Vorfahren auf oberster Ebene. Das folgende Beispiel zeigt eine Beispiel-Verschachtelung:

• Geografie
  • Städte
    • Berlin
    • Köln
  • Flüsse
    • Spree
    • Rhein

Übergeordnete Seite auf oberster Ebene ausgeben

Nehmen wir nun an wir befinden uns auf der Seite "Berlin". Mit dem folgenden Snippet geben wir den Vorfahren auf oberster Ebene aus. In unsererm Beispiel also "Geografie".

Dieses Snippet gehört entweder global in die functions.php oder ebenfalls in die Template-Datei.

<?php

function get_top_level_parent_title() {

global $post;
  if ( empty($post->post_parent) )
	{ the_title(); }
  else {
	$ancestors = get_post_ancestors($post->ID);
	end($ancestors);
	  echo get_the_title(end($ancestors));
  }
}

?>

Um den Titel im Theme auszugeben verwendet ihr folgendes Snippet:

<?php get_top_level_parent_title() ?>

Direkten Vorfahren ausgeben

Wenn wir nun auf Basis des gleichen Beispiels den direkten Vorfahren (Städte) auslesen wollten, muss das Snippet leicht modifiziert werden.

Code für die functions.php.

<?php

function get_ancestor_title() {

global $post;
  if ( empty($post->post_parent) )
	{ the_title(); }
  else {
	$ancestors = get_post_ancestors($post->ID);
	end($ancestors);
	  echo get_the_title($ancestors[0]);
  }
}

?>

Um den Titel im Theme auszugeben verwendet ihr folgendes Snippet:

<?php get_ancestor_title() ?>

via

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In einem WordPress-Themes müssen häufig untergeordnete Seiten ausgegeben werden. Ich benötige diese Funktion regelmäßig um in der Sidebar die themenverwandten Seiten zur aktuell aufgerufenen Seite aufzulisten. In Kombination mit dem Snippet für den Titel der Eltern-Seite lässt sich hier sehr schnell eine individuelle Navigation erstellen.
Mit Standard-Funktionen von WordPress können alle, oder nur ausgewählte Seiten eingeblendet werden.

Alle untergeordneten Seiten ausgeben

Der folgende Code zeigt immer alle untergeordneten Seiten zur aktuell aufgerufenen Seite an. Auch Kinder von Kindern etc.

<ul>
  <?php wp_list_pages("title_li=&child_of=".$post->ID); ?>
</ul>

Verschachtelungstiefe begrenzen

Wenn ihr die Tiefe beschränken wollt, erreicht ihr das mit dem Parameter "depth".
"0" Entspricht hierbei allen Seiten. Mit "1", "2", "3" etc. legt ihr die Tiefe fest. Sollen also nur die direkten Nachkommen angezeigt werden - so benutzt folgenden Code:

<ul>
  <?php wp_list_pages("depth=1&title_li=&child_of=".$post->ID); ?>
</ul>

Bei der hier beschriebenen Technik handelt es sich um eine WordPress-Standard-Funktion. Mehr dazu findet ihr hier: codex.wordpress.org/Function_Reference/wp_list_pages

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Der Begriff des "Responsive Webdesign" beschreibt die Technik über CSS3 Media Queries eine Website für verschiedene Displaygrößen oder Bildschirmauflösungen zu optimieren. Wie das im Detail funktioniert habe ich bereits in einem Tutorial ausführlich erklärt. Leider unterstützt der Internet Explorer 6-8 keine Media Queries; folglich wird die optimierte Version der Website auch nicht angezeigt wenn der Besucher mit einem veralteten Internet Explorer unterwegs ist.
Nun könnte man einwenden, dass Media Queries in erster Linie für die Optimierung auf Smartphones genutzt werden und die Optimierung auf Desktop-Rechnern nicht so wichtig ist. Sicher ist die Optimierung für Handys und Tablets wichtiger - aber auch Desktop-Rechner und Notebooks unterscheiden sich in der Displaygröße mittlerweile deutlich und sollten bei der Konzeption entsprechend beachtet werden. Ein kleines JavaScript namens "respond.js" rüstet die fehlende Interpretation von Media Queries im Internet Explorer nach.

respond.js

Das Script liegt in der Quellversion sowie in einer komprimierten Version auf GitHub bereit. Darüber hinaus existiert auch ein WordPress-Plugin das ich der Vollständigkeit halber auch erwähnen möchte. Ob es sinnvoll ist eine solche Funktion per Plugin nachzurüsten sollte jeder selbst entscheiden. Ich bin der Meinung die Funktion gehört direkt ins Theme.

• respond.js - unkomprimierte Quelldatei
• respond.js - komprimierte Version
• respond.js - WordPress-Plugin

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Wie wurde getestet?

Ich habe mir für meinen Test drei prominente Dienste ausgesucht: JPEGmini, PunyPNG und Yahoo Smush.it. Bei allen Diensten habe ich mir die Standard-Funktionalität ohne Benutzeraccount angeschaut. Es ging mir in erster Linie darum, die Dateigröße der optimierten Grafik zu beurteilen. Erweitere Funktionen wie die Verwaltung von Alben, der Upload zu Online-Bilddatenbanken etc. waren für mich nebensächlich.

Ich habe für meinen Test vier JPG-Dateien und drei PNGs erstellt und bei allen Diensten hochgeladen. Bei diesen Dateien handelt es sich um typische Grafiken die ich im Web verwende. GIF-Dateien kommen aufgrund ihrer schlechten Kompression generell nicht in Frage.

Das Ergebnis: JPEGmini für JPGs, Smush.it als Allrounder

Das Ergebnis hat mich ehrlich gesagt selbst überrascht. JPEGmini erzeugte bei JPG-Grafiken die mit Abstand kleinsten Dateien. Allerdings muss erwähnt werden, dass bei JPEGmini sehr geringe optische Unterschiede erkennbar sind. Diese sichtbare Kompression ist vor allem bei scharfen Kanten erkennbar - kann meiner Meinung nach allerdings vernachlässig werden.
PunyPNG und Smush.it erzeugten bei der JPG-Kompression etwa gleich große Dateien. Ein großer Nachteil von PunyPNG ist jedoch die Upload-Begrenzung auf 150KB. Mit einem Pro-Account kann die erlaubte Dateigröße auf 500KB erhöht werden.

Bei der Kompression von PNG-Files scheidet JPEGmini aus. Hier können nur JPG-Dateien komprimiert werden. PunyPNG und Smush.it erlauben die Kompression von PNG und erzeugten erneut vergleichbare Ergebnisse. Ärgerlich ist allerdings auch hier der geringe Upload von PunyPNG.

Benutzerfreundlichkeit

Neben der reinen Qualität der Ergebnisse spielt auch die Benutzerfreundlichkeit eines Dienstes eine große Rolle.

Bei PunyPNG und bei Smush.it können auch ohne Benutzeraccount mehrere Dateien parallel hochgeladen und komprimiert werden. PunyPNG begrenzt diese Zahl jedoch auf 15 Dateien. JPEGmini erlaubt ohne Account nur den Upload von einzelnen Dateien, was den Workflow durchaus behindert.

Der Download der komprimierten Dateien sieht ebenfalls sehr unterschiedlich aus. Sofern nur eine Datei hochgeladen wird, stellt PunyPNG die Datei unter dem Original-Dateinamen zur Verfügung. Die Ursprungsdateien können also einfach überschrieben werden. Smush.it stellt immer ein ZIP-Dokument zur Verfügung und JPEGmini ergänzt den Dateinamen um den Suffix "_mini". Insbesondere der Suffix ist natürlich sehr unpraktisch, da die Dokumente manuell umbenannt werden müssen.

Fazit

Tja - welcher Dienst soll es nun sein? PunyPNG scheidet für mich ganz klar aus. Zwar war ich bisher ein großer Fan dieses Dienstes, habe aber jetzt die Grenzen kennengelernt. PunyPNG schränkt den Benutzer einfach an zu vielen Stellen ein: Maximal 15 Dateien im Upload bei maximal 150 KB Dateigröße sind zu schwach. Vor allem, da die optimierten Dateien ähnlich groß sind wie bei Smush.it.

Smush.it lässt sich hingegen optimal in meinen Workflow integrieren. Es können beliebige Grafikformate hochgeladen werden, es existiert keine wirkliche Begrenzung in der Upload-Größe und es ist auch möglich mehrere Dateien parallel hochzuladen. Die Ausgabe erfolgt zwar als ZIP-Archiv, innerhalb des Archivs werden allerdings die ursprünglichen Dateinamen beibehalten. Für Smush.it existiert sogar ein WordPress-Plugin das Dokumente beim Upload in die Mediathek automatisch komprimiert. Praktischer geht es kaum noch.
JPEGmini hat mich überrascht. Zwar ist das Tool nicht besonders komfortabel, die Dateigröße ist allerdings unschlagbar gering. Ich werde mit Sicherheit in Zukunft meine JPG-Layout-Grafiken mit JPEGmini manuell komprimieren.

• JPEGmini
• PunyPNG
• Smush.it

Update: Fehlerhafte Skalierung im Responsive Webdesign

Ich habe noch einen schweren Bug im mobilen Safari entdeckt. Nachdem ich die Hintergrundgrafik meiner Seite mit JPEGmini komprimiert hatte, wurde die dem body zugewiesene Grafik auf dem iPad falsch skaliert. Ich gehe davon aus, dass es mit dem nach der Kompression fehlenden Datei-Header und dem im Responsive Design festgelegten Skalierungsfaktor zu tun hat. Ihr solltet diesen Fehler im Hinterkopf behalten und nach einer Optimierung kontrollieren. Bei Elementen mit einer zugewiesenen Breite (wie dem Footer-div) trat dieses Problem nicht auf.

Artikelbild von iconfinder.com/icondetails/9040/128/compressed_image_svg%2Bxml_icon

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/09/maximale-bildkompression-jpegmini-vs-smush-it-vs-vs-punypng/feed/ 13 http://kulturbanause.de/2011/09/wordpress-widgetized-sidebars-mit-beschreibung/ http://kulturbanause.de/2011/09/wordpress-widgetized-sidebars-mit-beschreibung/#comments Tue, 06 Sep 2011 06:28:37 +0000 Jonas Hellwig http://kulturbanause.de/?p=6241 Um in WordPress Widgets verwalten zu können, benötigt ihr mindestens eine widgetized Sidebar. Sobald eine solche Sidebar vorhanden ist, kann der User im WordPress-Backend Widgets per Drag & Drop in diesen Bereichen anordnen. Insbesondere für Kunden ist es jedoch häufig schwierig zu verstehen welche Sidebar für welche Website-Inhalte vorgesehen ist bzw. an welcher Stelle im …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Um in WordPress Widgets verwalten zu können, benötigt ihr mindestens eine widgetized Sidebar.
Sobald eine solche Sidebar vorhanden ist, kann der User im WordPress-Backend Widgets per Drag & Drop in diesen Bereichen anordnen. Insbesondere für Kunden ist es jedoch häufig schwierig zu verstehen welche Sidebar für welche Website-Inhalte vorgesehen ist bzw. an welcher Stelle im Theme die Widgets erscheinen. Mit einer Beschreibung könnt ihr es euren Kunden etwas leichter machen.

Sidebar in der functions.php definieren

Kopiert folgendes Code-Snippet in die functions.php um eine neue Sidebar zu definieren. Das folgende Beispiel integriert eine Sidebar mit Namen, Beschreibung und den Code-Snippets die vor- bzw. nach Widgets und Überschriften eingebunden werden.

<?php

// widgetized sidebar
if ( function_exists('register_sidebar') )
  register_sidebar(array(
    'name' => 'Sidebar', // Name der Sidebar
    'description' => __('Hier steht die Beschreibung der Sidebar'), // Beschreibung der Sidebar
    'before_widget' => '<div class="widget">', // Code der vor Widgets ausgegeben wird
    'after_widget' => '</div>', // Code der nach Widgets ausgegeben wird
    'before_title' => '<h2>', // Code der vor dem Titel ausgegeben wird
    'after_title' => '</h2>', // Code der nach dem Titel ausgegeben wird
));

?>

Die Beschreibung der Sidebar erscheint im Backend unter "Design → Widgets".

Sidebar im Theme einbinden

Der Vollständigkeit halber möchte ich auch noch den Code abbilden, der benötigt wird um die Sidebar im Theme auszugeben. Achtet darauf den Namen der Sidebar !dynamic_sidebar("Sidebar") anzupassen.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) : ?>
<!-- Hier werden die Widgets ausgegeben -->
<?php endif; ?>

• codex.wordpress.org/Widgetizing_Themes

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/09/wordpress-widgetized-sidebars-mit-beschreibung/feed/ 0 http://kulturbanause.de/2011/09/grundgerust-fur-wordpress-widgets/ http://kulturbanause.de/2011/09/grundgerust-fur-wordpress-widgets/#comments Mon, 05 Sep 2011 06:52:29 +0000 Jonas Hellwig http://kulturbanause.de/?p=6225 WordPress bietet durch Widgets die Möglichkeit Seiteninhalte intuitiv zu verändern. Insbesondere für Kunden ohne Programmierkenntnisse sind Widgets besonders gut geeignet um eine Website zu pflegen und über die gewöhnliche Artikelansicht hinaus zu verändern. Um Widgets in einer WordPress-Installation verwenden zu können, muss das Theme über eine so genannte "widgetized Sidebar" verfügen. Anschließend steht diese Sidebar …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

WordPress bietet durch Widgets die Möglichkeit Seiteninhalte intuitiv zu verändern. Insbesondere für Kunden ohne Programmierkenntnisse sind Widgets besonders gut geeignet um eine Website zu pflegen und über die gewöhnliche Artikelansicht hinaus zu verändern.
Um Widgets in einer WordPress-Installation verwenden zu können, muss das Theme über eine so genannte "widgetized Sidebar" verfügen. Anschließend steht diese Sidebar im Backend zur Verfügung und kann mit Widgets bestückt werden. WordPress bietet von Haus aus diverse Standard-Widgets an. Wem das nicht reicht, der kann die Plugin-Directory nach weiteren Widgets durchsuchen.
Je nach Projekt ist es jedoch notwendig ein eigenes Widget zu erstellen. Wie das funktioniert möchte ich in diesem Beitrag anhand eines Basis-Snippets zeigen.

Code für das Beispiel-Widget

Ein Widget funktioniert wie ein WordPress-Plugin und muss auch im Plugin-Verzeichnis abgelegt werden. Der nachfolgende Code erstellt ein Beispiel-Widget mit einem exemplarischen Inhalt und auf ein Minimum reduzierten Funktionen.

Zu Beginn werden einige Informationen über das Widget festgelegt. Diese Infos findet ihr später in der Plugin-Übersicht wieder. Anschließend folgt die Ausgabe des Widgets inkl. der $before_widget , $after_widget-Variablen die beim Anlegen der widgetized Sidebar definiert werden können.

<?php
/*
Plugin Name: Widget Grundgerüst
Description: Dies ist ein leeres Beispiel-Widget.
Version: 1.0
Plugin URI: http://kulturbanause.de/
Author: Jonas Hellwig
Author URI: http://kulturbanause.de/
*/

function beispiel_widget_display($args) {
extract($args);
	echo $before_widget; /* Wird im Theme definiert */
	echo "<p>Hier steht der Inhalt des Widgets.</p>";
	echo $after_widget; /* Wird im Theme definiert */
}

wp_register_sidebar_widget(
    'beispielwidget_1',        		// ID
    'Beispielwidget',          		// Name des Widgets im Backend
    'beispiel_widget_display',  	// callback
    array(                  		// Optionen
        'description' => 'Hier steht eine Beschreibung des Widgets. Dieser Text ist in der Widget-Übersicht sichtbar.'
    )
);

?>

Widget installieren und aktivieren

Speichert das Widget als PHP-Dokument ab und verschiebt es in das Plugin-Verzeichnis (../wp-content/plugins) der WordPress-Installation. Anschließend steht das Widget innerhalb von WordPress als Plugin zur Aktivierung bereit.

Hier findet ihr nun auch die Informationen aus dem Kopf des Widget-Codes wieder.

Widget im Theme einsetzen

Nachdem das Widget startklar ist, steht es unter "Design → Widgets" in der Widget-Übersicht zur Verfügung. Die Beschreibung und der Titel des Widgets wurden innerhalb von wp_register_sidebar_widget festgelegt.

Per Drag & Drop kann es nun einer Sidebar hinzugefügt werden und ist anschließend sofort im Frontend sichtbar. Da dieses Beispiel-Widget keine Einstellungen erlaubt, wird der Inhalt ausgegeben, der innerhalb der Funktion beispiel_widget_display festgelegt wurde.

• codex.wordpress.org/Function_Reference/wp_register_sidebar_widget

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/09/grundgerust-fur-wordpress-widgets/feed/ 1 http://kulturbanause.de/2011/09/wordpress-prufen-ob-eine-seite-child-pages-besitzt-oder-nicht/ http://kulturbanause.de/2011/09/wordpress-prufen-ob-eine-seite-child-pages-besitzt-oder-nicht/#comments Thu, 01 Sep 2011 06:20:55 +0000 Jonas Hellwig http://kulturbanause.de/?p=6184 Wenn ihr überprüfen möchtet ob eine Seite untergeordnete Seiten (Child-Pages) besitzt, schaut euch folgendes Snippet einmal an. Durch diesen Code lässt sich beispielsweise eine Subnavi nur dann einblenden, wenn überhaupt Child-Elemente vorhanden sind. Wenn ihr hingegen testen wollt ob es sich bei der aktuellen Seite selbst um eine untergeordnete Seite handelt, werft einen Blick auf …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Wenn ihr überprüfen möchtet ob eine Seite untergeordnete Seiten (Child-Pages) besitzt, schaut euch folgendes Snippet einmal an. Durch diesen Code lässt sich beispielsweise eine Subnavi nur dann einblenden, wenn überhaupt Child-Elemente vorhanden sind. Wenn ihr hingegen testen wollt ob es sich bei der aktuellen Seite selbst um eine untergeordnete Seite handelt, werft einen Blick auf diesen Artikel: Prüfen ob die aktuelle Seite Parent- oder Child-Page ist

Snippet für die Template-Datei

Fügt den nachfolgenden Code dort ein, wo die Ausgabe im Theme erfolgen soll.

<?php

$children = get_pages('child_of='.$post->ID);
if( count( $children ) != 0 ) { 

  echo "Diese Seite besitzt Child-Pages";

}

else { 

  echo "Diese Seite besitzt keine Child-Pages";

}

?>

Wenn ihr innerhalb der Ausgabe HTML-Code schreiben wollt, passt das Snippet wie folgt an.

<?php

$children = get_pages('child_of='.$post->ID);
if( count( $children ) != 0 ) { ?>

  <p>Diese Seite besitzt Child-Pages</p>

<?php  }

else { ?>

  <p>Diese Seite besitzt keine Child-Pages</p>

<?php  }

?>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/09/wordpress-prufen-ob-eine-seite-child-pages-besitzt-oder-nicht/feed/ 1 http://kulturbanause.de/2011/08/wordpress-prufen-ob-die-aktuelle-seite-parent-oder-child-page-ist/ http://kulturbanause.de/2011/08/wordpress-prufen-ob-die-aktuelle-seite-parent-oder-child-page-ist/#comments Tue, 30 Aug 2011 18:29:32 +0000 Jonas Hellwig http://kulturbanause.de/?p=6173 Ab und zu muss man bei der Erstellung eines WordPress-Themes prüfen ob die aktuelle Seite ein Parent- oder eine Child-Page ist. Mal angenommen ihr möchtet in der Sidebar immer alle, der aktuellen Seite untergeordneten Seiten anzeigen lassen. Zusätzlich möchtet ihr diesen Bereich so aufwändig gestalten, dass ein umschließendes Container-Element notwendig ist. Wenn nun keine Child-Pages …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Ab und zu muss man bei der Erstellung eines WordPress-Themes prüfen ob die aktuelle Seite ein Parent- oder eine Child-Page ist. Mal angenommen ihr möchtet in der Sidebar immer alle, der aktuellen Seite untergeordneten Seiten anzeigen lassen. Zusätzlich möchtet ihr diesen Bereich so aufwändig gestalten, dass ein umschließendes Container-Element notwendig ist. Wenn nun keine Child-Pages mehr existieren sollte natürlich auch das Container-Element verschwinden, sonst ist der Bereich leer. Genau für einen solchen Zweck habe ich seinerzeit das nachfolgende Snippet benutzt.

If-Else-Abfrage

Das nachfolgende Snippet zeigt an, ob die aktuell aufgerufene Seite ein Parent-Page ist oder ob es sich um eine Child-Page handelt. Parent bedeutet in diesem Fall, dass die Seite keine übergeordnete Seite besitzt. Eine Child-Page ist es sobald eine eine übergeordnete Seite existiert.

Eine Seite kann sowohl Child als auch Parent sein. Dieses Snippet gibt in einem solchen Fall immer "Child" aus. Es wird keine doppelte Ausgabe erstellt.

<?php
global $wp_query;
 if ( empty($wp_query->post->post_parent) )
 { ?> 

 <p>Ich bin eine "Parent-Page"</p>

 <?php }
 else { ?> 

 <p>Ich bin eine "Child-Page"</p>

 <?php 

} ?>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/wordpress-prufen-ob-die-aktuelle-seite-parent-oder-child-page-ist/feed/ 1 http://kulturbanause.de/2011/08/wordpress-prufen-ob-sich-ein-user-in-kategorie-x-parent-category-oder-in-einer-untergeordneten-kategorie-von-x-child-category-befindet/ http://kulturbanause.de/2011/08/wordpress-prufen-ob-sich-ein-user-in-kategorie-x-parent-category-oder-in-einer-untergeordneten-kategorie-von-x-child-category-befindet/#comments Mon, 29 Aug 2011 19:10:05 +0000 Jonas Hellwig http://kulturbanause.de/?p=6156 Manchmal möchten wir Inhalte in einem WordPress-Theme nur dann ausgeben, wenn sich der Besucher in einer bestimmten Kategorie bzw. in einer untergeordneten Kategorie befindet. Wenn es sich um ein Kundenprojekt handelt, kann der Kunde natürlich selbst neue Unterkategorien (Child-Categories) anlegen die wir bei der Erstellung des Themes noch nicht kennen und folglich auch nicht berücksichtigen …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Manchmal möchten wir Inhalte in einem WordPress-Theme nur dann ausgeben, wenn sich der Besucher in einer bestimmten Kategorie bzw. in einer untergeordneten Kategorie befindet. Wenn es sich um ein Kundenprojekt handelt, kann der Kunde natürlich selbst neue Unterkategorien (Child-Categories) anlegen die wir bei der Erstellung des Themes noch nicht kennen und folglich auch nicht berücksichtigen können. Das Snippet muss also auf der ID, bzw. dem Namen der Hauptkategorie (Parent-Category) basieren. Gerade wenn ihr mit Custom Post Types arbeitet kann ein solcher Fall schnell auftreten.

Snippet für die functions.php/Template-File

Das folgende Snippet könnt ihr global in der functions.php verwalten oder direkt in das gewünschte Template (z.B. sidebar.php) kopieren.

<?php
function post_is_in_descendant_category( $cats, $_post = null )
{
	foreach ( (array) $cats as $cat ) {
		$descendants = get_term_children( (int) $cat, 'category');
		if ( $descendants && in_category( $descendants, $_post ) )
			return true;
	}
	return false;
}
?>

Ausgabe im Theme

Um den gewünschten Inhalt nun auszugeben, kopiert ihr das nachfolgende Snippet an die Stelle an der die Ausgabe erfolgen soll. Achtet darauf die IDs durch die in Eurem Theme verwendeten IDs zu ersetzen.

<?php if (is_category('3') || post_is_in_descendant_category( 3 )) { ?>

<p>Dieser Text ist sichtbar, wenn die Kategorie mit der ID 3 bzw. eine untergeordnete Kategorie aufgerufen ist. </p>

<?php } ?>

codex.wordpress.org/Function_Reference/in_category

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/wordpress-prufen-ob-sich-ein-user-in-kategorie-x-parent-category-oder-in-einer-untergeordneten-kategorie-von-x-child-category-befindet/feed/ 1 http://kulturbanause.de/2011/08/wordpress-breadcrumb-navigation-ohne-plugin/ http://kulturbanause.de/2011/08/wordpress-breadcrumb-navigation-ohne-plugin/#comments Wed, 24 Aug 2011 05:21:30 +0000 Jonas Hellwig http://kulturbanause.de/?p=6129 Breadcrumb-Navigationen sind in komplexen Websites ein wichtiges Navigations- und Orientierungselement. Sobald Ihr WordPress als "echtes" CMS einsetzt, werdet ihr allerdings merken, dass viele Plugins und Snippets zu sehr auf den Einsatz in Blogs ausgerichtet sind. Sobald diverse statische und hierarchisch verschachtelte Seiten und Custom Post Types im Spiel sind, stößt so manche Breadcrumb an ihre …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Breadcrumb-Navigationen sind in komplexen Websites ein wichtiges Navigations- und Orientierungselement. Sobald Ihr WordPress als "echtes" CMS einsetzt, werdet ihr allerdings merken, dass viele Plugins und Snippets zu sehr auf den Einsatz in Blogs ausgerichtet sind. Sobald diverse statische und hierarchisch verschachtelte Seiten und Custom Post Types im Spiel sind, stößt so manche Breadcrumb an ihre Grenzen.
Das folgende Snippet berücksichtigt alle Anforderungen die ich bisher an eine Breadcrumb gestellt habe. Da ich meinen Blog auch selbst als Archiv nutze, lege ich den entsprechenden Code hier ab. Sicher wird das Snippet euch auch mal weiterhelfen.

Code für die functions.php

Den folgenden Code fügt Ihr in die functions.php eures WordPress-Themes ein.

// breadcrumb
function nav_breadcrumb() {

  $delimiter = '»';
  $home = 'Home';
  $before = '<span class="current">';
  $after = '</span>'; 

  if ( !is_home() && !is_front_page() || is_paged() ) {

    echo '<div id="breadcrumb">';

    global $post;
    $homeLink = get_bloginfo('url');
    echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';

    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $before . single_cat_title('', false) . $after;

    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $before . get_the_time('d') . $after;

    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo $before . get_the_time('F') . $after;

    } elseif ( is_year() ) {
      echo $before . get_the_time('Y') . $after;

    } elseif ( is_single() && !is_attachment() ) {
      if ( get_post_type() != 'post' ) {
        $post_type = get_post_type_object(get_post_type());
        $slug = $post_type->rewrite;
        echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
        echo $before . get_the_title() . $after;
      } else {
        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        echo $before . get_the_title() . $after;
      }

    } elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
      $post_type = get_post_type_object(get_post_type());
      echo $before . $post_type->labels->singular_name . $after;

    } elseif ( is_attachment() ) {
      $parent = get_post($post->post_parent);
      $cat = get_the_category($parent->ID); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;

    } elseif ( is_page() && !$post->post_parent ) {
      echo $before . get_the_title() . $after;

    } elseif ( is_page() && $post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;

    } elseif ( is_search() ) {
      echo $before . 'Ergebnisse für Ihre Suche nach "' . get_search_query() . '"' . $after;

    } elseif ( is_tag() ) {
      echo $before . 'Beiträge mit dem Schlagwort "' . single_tag_title('', false) . '"' . $after;

    } elseif ( is_author() ) {
       global $author;
      $userdata = get_userdata($author);
      echo $before . 'Beiträge veröffentlicht von ' . $userdata->display_name . $after;

    } elseif ( is_404() ) {
      echo $before . 'Fehler 404' . $after;
    }

    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo __('Page') . ' ' . get_query_var('paged');
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }

    echo '</div>';

  }
}

Breadcrumb im Theme aufrufen

Mit diesem Snippet bindet Ihr die Breadcrumb im Theme ein. Dabei ist es irrelevant ob sich die Navi innerhalb oder außerhalb des WordPress-Loops befindet.

<?php if (function_exists('nav_breadcrumb')) nav_breadcrumb(); ?>

Je nachdem, auf welcher Unterseite des Projektes Ihr euch befindet, wird nun die Breadcrumb dargestellt. Im Gegensatz zu vielen anderen Lösungen die ich kenne, arbeitet diese Breadcrumb einwandfrei mit Archiven, Seiten und Kategorien. Auch Custom Post Types werden berücksichtigt.

Der Code wurde ursprünglich unter dimox.net/wordpress-breadcrumbs-without-a-plugin veröffentlicht. Ich habe ihn nur meinen Anforderungen entsprechend leicht abgewandelt und die Begriffe übersetzt.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/wordpress-breadcrumb-navigation-ohne-plugin/feed/ 18 http://kulturbanause.de/2011/08/wordpress-benutzerdefinierte-felder-nur-dann-ausgeben-wenn-werte-eingetragen-wurden/ http://kulturbanause.de/2011/08/wordpress-benutzerdefinierte-felder-nur-dann-ausgeben-wenn-werte-eingetragen-wurden/#comments Thu, 18 Aug 2011 06:31:10 +0000 Jonas Hellwig http://kulturbanause.de/?p=6096 In WordPress besteht die Möglichkeit Beiträge durch Zusatzinformationen zu ergänzen. Das geschieht unter anderem über die so genannten Benutzerdefinierten Felder. Hierbei wird zunächst einmal ein Name (auch Schlüssel genannt) festgelegt. Diesem Namen können anschließend verschiedene Werte zugewiesen werden, die dann wiederum im Theme ausgegeben werden können. Nun kann es vorkommen, dass dieser Wert in ein …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

In WordPress besteht die Möglichkeit Beiträge durch Zusatzinformationen zu ergänzen. Das geschieht unter anderem über die so genannten Benutzerdefinierten Felder. Hierbei wird zunächst einmal ein Name (auch Schlüssel genannt) festgelegt. Diesem Namen können anschließend verschiedene Werte zugewiesen werden, die dann wiederum im Theme ausgegeben werden können. Nun kann es vorkommen, dass dieser Wert in ein weiteres Code-Snippet - z.B. einen img- oder a-Tag eingebunden werden soll. Wird nun das Benutzerdefinierte Feld nicht ausgefüllt, so kommt es zu Fehldarstellungen auf der Seite. Wie Ihr dieses Problem umgeht und Eingabefehler verhindert, möchte ich in diesem Beitrag kurz erläutern.

Beispiel

Ich erkläre die Funktion am besten einmal an einem konkreten Beispiel: Für einen Blog mit Buchrezensionen habe ich ein Benutzerdefiniertes Feld für die ISBN-Nummer angelegt. Der "Name" war in diesem Fall "ISBN" und als "Wert" konnte der Kunde die individuelle ISBN-Nummer des rezensierten Buches angeben.

Im Theme habe ich nun den "Wert", also die eingetragene ISBN-Nummer ausgelesen und in den vorgegebenen String eines Shop-Links integriert. Somit konnte unter jeder Buchrezension ein Link zum Online-Shop integriert werden. Das Produkt wurde dann über die ISBN-Nummer eindeutig identifiziert.

Nun kann es aber vorkommen, dass der Kunde vergisst die ISBN-Nummer einzutragen. Oder aber der Artikel ist im Shop nicht vorhanden. In einem solchen Fall muss sichergestellt werden, dass der Button zum Online-Shop nur dann angezeigt wird, wenn innerhalb von WordPress das Benutzerdefinierte Feld auch einen Wert erhalten hat. Anderenfalls hätten wir einen toten Link.

Wert des Feldes in Variable speichern und ausgeben

Mit dem folgenden Code löst ihr dieses Problem. Zunächst speichert ihr den "Wert" des Benutzerdefinierten Feldes in eine beliebige Variable.

<?php $beliebige_variable = get_post_meta($post->ID, 'name_des_benutzerdefinierten_feldes', true); ?>

Anschließend kann der Inhalt im Theme ausgegeben werden.

<?php echo $beliebige_variable; ?>

Abfragen ob das Feld ausgefüllt wurde

Um den Wert nur dann auszugeben wenn auch etwas eingetragen wurde, prüfen wir ob der Inhalt ungleich "leer" ist. Sofern das der Fall ist wird die Ausgabe ausgeführt. Anderenfalls passiert in diesem Beispiel nichts.

<?php $beliebige_variable = get_post_meta($post->ID, 'name_des_benutzerdefinierten_feldes', true); ?>

<?php if(get_post_meta($post->ID, 'name_des_benutzerdefinierten_feldes', true) != '') : ?>
  <?php echo $beliebige_variable; ?>
<?php endif; ?>

Der Code inkl. echter Werte sah in meine Fall etwa so aus:

<?php $isbn = get_post_meta($post->ID, 'ISBN', true); ?>

<?php if(get_post_meta($post->ID, 'ISBN', true) != '') : ?>
  <a href="http://www.url-des-shops.com/products/<?php echo $isbn; ?>/details/" target="_blank" class="button">Artikel kaufen</a>
<?php endif; ?>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/wordpress-benutzerdefinierte-felder-nur-dann-ausgeben-wenn-werte-eingetragen-wurden/feed/ 6 http://kulturbanause.de/2011/08/google-profilbild-in-die-google-suchergebnisse-integrieren/ http://kulturbanause.de/2011/08/google-profilbild-in-die-google-suchergebnisse-integrieren/#comments Mon, 15 Aug 2011 06:25:10 +0000 Jonas Hellwig http://kulturbanause.de/?p=5977 Seit Google+ ins Leben gerufen wurde, integriert Google das Projekt nach und nach in alle bestehenden Dienste. Eine der neuen Integrationsmöglichkeiten ist die Verknüpfung eines Blogs (oder einer Website) sowie eines oder mehrerer Google+ Profile mit der Ergebnisliste von Google. Wenn alles richtig eingestellt wurde, erscheint in der Google-Suche das Profilbild des Autors neben dem …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Seit Google+ ins Leben gerufen wurde, integriert Google das Projekt nach und nach in alle bestehenden Dienste. Eine der neuen Integrationsmöglichkeiten ist die Verknüpfung eines Blogs (oder einer Website) sowie eines oder mehrerer Google+ Profile mit der Ergebnisliste von Google. Wenn alles richtig eingestellt wurde, erscheint in der Google-Suche das Profilbild des Autors neben dem entsprechenden Treffer in den Suchergebnissen. Das sieht dann so aus.

Google setzt auf Parameter zur Identifikation

Das Prinzip ist im Grunde genommen sehr einfach. Zunächst müsst ihr von eurer Website oder eurem Blog einen Link auf euer Google+ Profil setzen. Dieser Link wird dann einem Parameter (?rel=author) angereichert um die Beziehung zwischen Website und Google+ zu übertragen. Der entsprechende Link ist dann wie folgt aufgebaut:

<a href="[profile_url]?rel=author">Google+</a>

Ein funktionierendes Beispiel für mein Profil sieht so aus:

<a href="https://plus.google.com/106537592401126010838?rel=author">Google+</a>

Wichtig! Der Link-Text muss unbedingt mit + beginnen oder aufhören! Ein praktisches Tool zur Erzeugung eines Links inkl. G+-Logo bietet Google natürlich auch: google.com/webmasters/profilebutton

Inhalte testen und verifizieren

Sobald ihr die Verlinkung hinzugefügt und hochgeladen habt, solltet ihr einmal testen ob auch alles korrekt eingestellt wurde. Zu diesem Zweck hat Google eine entsprechendes Rich-Snippet-Testing-Tool ins Leben gerufen:

• Rich-Snippet-Testing-Tool

Wenn das Tool keine Fehler angezeigt, müsst ihr nun eine Verlinkungen von eurem Google+ Profil zu eurer Website bzw. zu einzelnen Beiträgen setzen. Das funktioniert innerhalb von Google+ über "Profil bearbeiten → Links". Damit verifiziert ihr den Content und euer Profil gegenüber Google.

Achtet zudem darauf, dass euer Profilbild ein Foto eurer Person zeigt. Ansonsten wird Google die Integration womöglich verweigern.

Your profile picture must be a photograph of yourself and of high quality in order to be eligible for be shown as a thumbnail in search results.

Als letztes müsst ihr dieses Formular ausfüllen und somit den entsprechenden Antrag bei Google stellen:

• Authorship request

Das war's auch schon. Jetzt heißt es abwarten und hoffen, dass Google die Seite in die Suchergebnisse integriert. Ich hatte bisher keinen Erfolg - was aber auch an der Wahl meines Profilbildes oder am Standort Deutschland liegen kann. Wie gewohnt wird Google die Funktion vorerst nur in den USA testen und anschließend ausweiten. Ich werde die Sache auf jeden Fall im Auge behalten.

WordPress-Theme erweitern

Wenn ihr WordPress benutzt und vielleicht sogar mit mehreren Autoren an der Seite arbeitet, müsst ihr das Theme -bzw. die Benutzterprofile innerhalb des WordPress-Backends entsprechend modifizieren.
Es sollte jeder Autor die Möglichkeit haben innerhalb des eigenen Profils den Link zum Google-Profil anzugeben. Dafür muss das Profil erweitert werden. Wie das funktioniert habe ich bereits in einem anderen Artikel ausführlich erklärt:

• WordPress-Benutzerprofil um Google+, Facebook, Twitter und andere Felder erweitern

Alternative Methode mit Microformaten

Die oben gezeigte Variante ist die neuere Möglichkeit Google+ in die Suchergebnisse zu integrieren. Eine alternative - jedoch überholte - Methode ist die Integration des rel="author"-Attributs in den Link. Wenn ihr diese Struktur bereits verwendet habt, so braucht ihr euch keine Sorgen zu machen. Laut Google wird auch dieses Format nach wie vor unterstützt.
Mehr Infos dazu findet ihr hier: google.com/support/webmasters/bin/answer.py?answer=1229920

Video

Google hat auch ein ausführliches Video zu diesem Thema veröffentlicht. Besonders schnell zur Sache kommen die Herren allerdings nicht.

Ausführliche Informationen zu diesem Thema findet ihr auch hier:

• google.com/support/webmasters/bin/answer.py?answer=1408986

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/google-profilbild-in-die-google-suchergebnisse-integrieren/feed/ 2 http://kulturbanause.de/2011/08/wordpress-benutzerprofil-um-google-facebook-twitter-und-andere-felder-erweitern/ http://kulturbanause.de/2011/08/wordpress-benutzerprofil-um-google-facebook-twitter-und-andere-felder-erweitern/#comments Thu, 04 Aug 2011 06:40:55 +0000 Jonas Hellwig http://kulturbanause.de/?p=5952 Die WordPress-Benutzerprofile bieten die Möglichkeit verschiedene Meta-Informationen zu einem Benutzer anzugeben und anschließend mittels Template-Tag im Theme darzustellen. Allerdings sind insbesondere die Angaben der Social Media/IM-Dienste völlig veraltet: Jabber, AIM und Yahoo IM brauche ich nun wirklich nicht mehr. Dafür fehlen aktuelle Eingabefelder für Google+, Facebook und Twitter. Mit ein paar Zeilen Code könnt ihr …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Die WordPress-Benutzerprofile bieten die Möglichkeit verschiedene Meta-Informationen zu einem Benutzer anzugeben und anschließend mittels Template-Tag im Theme darzustellen. Allerdings sind insbesondere die Angaben der Social Media/IM-Dienste völlig veraltet: Jabber, AIM und Yahoo IM brauche ich nun wirklich nicht mehr. Dafür fehlen aktuelle Eingabefelder für Google+, Facebook und Twitter.
Mit ein paar Zeilen Code könnt ihr euer Profil um die fehlenden Angaben ergänzen und die überflüssigen Eingabefelder entfernen.

functions.php anpassen

Der folgende Code muss in die functions.php kopiert werden. Ich habe die Bereiche entsprechend kommentiert.

// Zusätzliche Felder im Benutzerprofil
function contactInfo($user_contactmethods) {

	// Google+, Facebook, Twitter hinzufügen
	$user_contactmethods['googleplus'] = 'GooglePlus';
	$user_contactmethods['facebook'] = 'Facebook';
	$user_contactmethods['twitter'] = 'Twitter';

	// Yahoo, Jabber, AOL entfernen
	unset($user_contactmethods['yim']);
	unset($user_contactmethods['jabber']);
	unset($user_contactmethods['aim']);

	return $user_contactmethods;
}

add_filter('user_contactmethods','contactInfo');

Innerhalb von WordPress sieht das Benutzerprofil dann in etwa so aus:

Werte im Theme ausgeben

Um die Werte im Theme auszugeben verwendet ihr folgenden Code. Das Beispiel zeigt die allgemeine Ausgabe des Google+-Profils.

<?php the_author_meta('googleplus');?>

Wenn ihr mit mehrere Autoren an einer Seite arbeitet kann es vorkommen, dass nicht alle Benutzer alle Profile angeben können oder wollen. Um den entsprechenden Wert nur dann auszugeben, wenn das Feld im Backend auch ausgefüllt wurde reicht folgender Code. Das Beispiel zeigt ebenfalls die Ausgabe von Google+.

<?php if( get_the_author_meta('googleplus') ) { ?>
   <a href="<?php the_author_meta('googleplus');?>">Google+</a>
<?php } ?>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/08/wordpress-benutzerprofil-um-google-facebook-twitter-und-andere-felder-erweitern/feed/ 8 http://kulturbanause.de/2011/06/wordpress-dashboard-individuelle-widgets-hinzufugen-standard-widgets-loschen/ http://kulturbanause.de/2011/06/wordpress-dashboard-individuelle-widgets-hinzufugen-standard-widgets-loschen/#comments Fri, 24 Jun 2011 05:50:59 +0000 Jonas Hellwig http://kulturbanause.de/?p=5520 Das WordPress-Dashboard zeigt dem Benutzer eine Übersicht verschiedener, häufig verwendeter WordPress-Funktionen. Neben einer kurzen Statistik finden sich hier unter anderem die letzten Beitragsentwürfe, eingehende Links fremder Websites und die letzten Kommentare. Für Kundenprojekte ist diese Übersicht häufig nicht brauchbar: es werden zu viele unverständliche bzw. überflüssige Informationen dargestellt. Statt dessen fehlt ein individuelles Widget um …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Das WordPress-Dashboard zeigt dem Benutzer eine Übersicht verschiedener, häufig verwendeter WordPress-Funktionen. Neben einer kurzen Statistik finden sich hier unter anderem die letzten Beitragsentwürfe, eingehende Links fremder Websites und die letzten Kommentare. Für Kundenprojekte ist diese Übersicht häufig nicht brauchbar: es werden zu viele unverständliche bzw. überflüssige Informationen dargestellt. Statt dessen fehlt ein individuelles Widget um den Kunden in der Administrationsoberfläche willkommen zu heißen.

Individuelles Widget hinzufügen

Zunächst möchten wir ein individuelles Widget hinzufügen. Hier bietet es sich an, den Kunden zu begrüßen, oder ihm Hilfe bei der Benutzung von WordPress anzubieten.
Kopiert folgenden Code in die functions.php eurer WordPress-Installation und passt die gewünschten Textstellen an.

// add individual dashboard-widget
function kb_dashboard_widget() {
	echo "Hier steht der Inhalt des Widgets";
} 

function kb_add_dashboard_widget() {
	wp_add_dashboard_widget('kb_dashboard_widget', 'Widget-&Uumlberschrift', 'kb_dashboard_widget');
}

add_action('wp_dashboard_setup', 'kb_add_dashboard_widget' );

Als Ergebnis wird dem WordPress-Dashboard ein neues Widget mit Überschrift und Inhalt hinzugefügt.

Standard-Widgets entfernen

Nun sollen die Standard-Widgets von WordPress ausgeblendet werden. Folgender Code muss ebenfalls in der functions.php eingebunden werden. Anschließend sind alle Standard-Widgets verschwunden und können auch nicht vom Benutzer wieder aktiviert werden.

// remove standard dashboard-widgets
function remove_dashboard_widgets() {
  global $wp_meta_boxes;
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
} 

add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );

via: hankis.me, wp-snippets.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/06/wordpress-dashboard-individuelle-widgets-hinzufugen-standard-widgets-loschen/feed/ 9 http://kulturbanause.de/2011/06/text-im-footer-des-wordpress-backends-anpassen/ http://kulturbanause.de/2011/06/text-im-footer-des-wordpress-backends-anpassen/#comments Wed, 15 Jun 2011 05:30:07 +0000 Jonas Hellwig http://kulturbanause.de/?p=5511 Im Footer der WordPress-Administrationsoberfläche, dem so genannten Dashboard, wird normalerweise folgender Standard-Text angezeigt: "Danke, dass du WordPress benutzt. | WordPress Deutschland | Dokumentation (en) | Feedback (en)". Je nach Projekt mach es Sinn diesen Text zu entfernen, oder durch einen eigenen Text zu ersetzen. Insbesondere bei Kunden-Projekten möchte man als Webdesigner hier vielleicht eine Copyright-Information …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Im Footer der WordPress-Administrationsoberfläche, dem so genannten Dashboard, wird normalerweise folgender Standard-Text angezeigt: "Danke, dass du WordPress benutzt. | WordPress Deutschland | Dokumentation (en) | Feedback (en)".
Je nach Projekt mach es Sinn diesen Text zu entfernen, oder durch einen eigenen Text zu ersetzen. Insbesondere bei Kunden-Projekten möchte man als Webdesigner hier vielleicht eine Copyright-Information oder eine Verlinkung zur eigenen Hilfe-Seite integrieren. Ein paar Zeilen in der functions.php reichen dafür aus.

functions.php anpassen

Öffnet die function.php, fügt folgenden PHP-Code ein und passt den Text entsprechend euren Vorstellungen an.

// change backend-footer
function kb_backend_footer () {
    echo "Webdesign- und Entwicklung: <a href='http://kulturbanause.de' target='_blank'>kulturbanause.de</a>";
} 

add_filter('admin_footer_text', 'kb_backend_footer');

Die Änderungen wirken sich folgendermaßen auf die Darstellung im WordPress-Dashboard aus.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://kulturbanause.de/2011/06/text-im-footer-des-wordpress-backends-anpassen/feed/ 4