Archiv der Kategorie: PHP

WordPress und die Kategorien: kleine Gruseltour auf der Datenbank

Die Kategorien von WordPress sind ein sehr praktisches und flexibles Werkzeug. Im Prinzip handelt es sich hier um eine 1:n-Beziehung (ein Beitrag kann zu mehreren Kategorien gehören), dazu kommt allerdings noch eine nahezu unbegrenzte Schachtelungstiefe in Unterkategorien, Unter-Unterkategorien und so weiter. Das ist wie gesagt sehr flexibel gelöst, auch wenn ich bezweifle, daß im Normalfall eine Schachtelungstiefe von mehr als drei Kategorie-Ebenen notwendig ist. Die Möglichkeit ist jedenfalls da.

Und wie sieht das auf der Datenbank aus?

WordPress gönnt sich für die Verwaltung der Kategorien drei Tabellen, die alle an einem „term“ im Namen erkennbar sind (warum terms und nicht categories?). Es gibt die wp_terms, in der findet sich recht übersichtlich eine Auslistung aller Kategorien mit term_id und name.

wp_terms

Dann gibt es noch die wp_term_taxonomy, die ist schon weniger durchsichtig. Hier werden über das Feld „parent“ die Zuordnungen zu Unterkategorien verwaltet, und ein Zähler(count) mitgeführt.

wp_term_taxonomy

Und schließlich ist da noch die wp_term_relationships, in der erfolgt letztendlich die Zuordnung der Kategorien (anhand der term_taxonomy_id) zu den Beiträgen (object_id). Um also herauszufinden, welche Kategorien zu einem Beitrag gehören, müßte man einen Join über alle drei Tabellen machen, aber das ersparen wir uns.

wp_term_relationships

Warum so kompliziert? Wegen der unbegrenzten (ich habs nicht ausprobiert) Schachtelungstiefe, und weil WordPress hier noch die Möglichkeit der sogenannten „Custom Taxonomies“ offenläßt. Das sind eigene Gruppierungen, die man erstellen und dann ganz genau so wie Kategorien zur Sortierung und Anzeige der Beiträge verwenden kann. Ich hab das mal für eine Taxonomie „Jahreszeiten“ gemacht, die bestand halt dann nur aus „Frühjahr, Sommer,Herbst,Winter“, war aber für ihren Zweck ganz praktisch.

Stattdessen: get_the_category()

Weil uns aber vor lauter unterschiedlichen ids und terms und taxonomies und was weiß ich noch alles schon der Kopf schwirrt, nehmen wir eine einfachere Lösung. Praktischerweise hat WordPress eine eingebaute Funktion, die uns ein Array aller zu einem Beitrag gehörenden Kategorien liefert. Man holt sich das Array über die ID des aktuellen Beitrags. In unserer foreach-Schleife sieht das dann so aus:

$category = get_the_category($einpost->ID);

Jetzt brauchen wir noch eine kleine foreach-Schleife für die Ausgabe des Ergebnis-Arrays, und wir nehmen mal als Trennzeichen noch ein Komma und ein Leerzeichen:

foreach ($category as $eincat){
                    echo $eincat->cat_name.", ";
                }

Damit können wir eine Ausflistung der Kategorien in unsere Beitragsausgabe mit einbauen, bei mir sieht das dann so aus:

alleposts_mit_kategorien

Kniefiesler werden bemerken, daß das letzte Komma in der Kategorienauflistung überflüssig ist, aber da seh ich mal großzügig darüber hinweg. Ich finde die Beitragsausgabe jetzt eine runde Sache und recht übersichtlich. So man hat, kann man natürlich auch noch das Beitragsbild mit ausgeben, die Anzahl der ausgegeben Beiträge beschränken, ein Order by rand() mit einbauen etc. pp, da kann sich jeder selber spielen wie er mag. Viel Spaß dabei!

Beitragsausgabe: Text vernünftig kürzen

Noch läuft uns ja der ganze Text der Beiträge in die Div, und der Überschuss wird einfach durch das overflow:hidden in der style.css versteckt. Schöner wärs natürlich, man würde den Text irgendwie vernünftig kürzen.

Erster Ansatz: nur die ersten X Zeichen ausgeben

Das ist natürlich am einfachsten und läßt sich mit einem substr() ganz einfach realisieren. Ich füge noch eine „weiterlesen“-Marke mit ein ([..]) und lege auch auf die nochmal den Link zum Beitrag. Unser post_content steckt nach wie vor in der Variable $akt_text, und ich kürze ab Position 0 (Null) auf 100 Zeichen, das schreibt sich dann so:

$rest_anfang = substr($akt_text, 0,100);
                echo $rest_anfang."<a href = '".$akt_link."'> [...]</a>";

Das kürzt dann natürlich den Text auch gnadenlos mitten im Wort, läßt sich leider nicht verhindern.

text_kuerzen_substr

Schöner wärs, wenn die Wörter nicht abgeschnitten werden. Dazu fallen mir zwei Ansätze ein.

Kürzen auf den ersten Satz

Es ist halbwegs realistisch anzunehmen daß in meinen Kochrezepten jeder erste Satz eines Rezeptes mit einem Punkt endet. Deswegen kann man hier z.B. mit explode() arbeiten (s. PHP-Manual) und nur den ersten Wert des Arrays ausgeben, dann hat man im Normalfall einen ganzen Satz.

$erster_satz = explode(".",$akt_text);
echo $erster_satz[0]."<a href = '".$akt_link."'> [...]</a>";

Ergebnis:

text_kuerzen_erster_satz

Das gefällt mir jetzt schon viel besser!

Auf die ersten X Wörter kürzen

Ginge auch, muß man dem explode() halt ein Leerzeichen mitgeben und das zurückgegebene Array mit dem Index von 0 bis X ausgeben. Mir gefällt aber die Lösung mit dem „Ausgeben bis zum ersten Punkt“ schon sehr gut, ich laß das jetzt mal so.

Was man jetzt noch machen könnte

Schick wäre es natürlich, wenn man jetzt noch sehen könnte unter welcher Kategorie die Beiträge abgelegt wurden. Dafür wirds wieder Zeit für ein bißchen Fun auf der Datenbank und einen neuen Beitrag.

Was wir mit Bildern können, können wir mit Posts schon lange!

Alle veröffentlichten Beiträge

Es wird wieder Zeit für ein bißchen Spaß auf der Datenbank! Wir gehen wieder zurück zu unserer zentralen Tabelle wp_posts und picken uns diesmal alle veröffentlichten Beiträge heraus. Das haben wir schonmal gemacht, bei der Ausgabe der Beitragsbilder ganz am Anfang, wissen sie noch? Der Select ist supersimpel:

SELECT * from wp_posts where post_status = ‚publish‘ and post_type = ‚post‘

Die könnten wir jetzt einfach mal alle ausgeben so wie sie daherkommen, nämlich einfach nacheinander aufsteigend Datum. Das sähe dann aber der Beitragsseite (nur mit umgekehrter Sortierung) verdammt ähnlich und hätte weiter keinen Närwert, deshalb geben wir die Beiträge jetzt erst mal gekürzt und in Divs gepackt als Übersicht aus. Unser foreach für diesen Zweck ist auch denkbar einfach, ich gebe fürs erste nur den Titel und den Inhalt aus:

foreach ( $alleposts as $einpost ) 
            { 
            echo "<div class = 'post_ausgabe'>";
                echo "<h1>".$einpost->post_title."</h1>";
                echo $einpost->post_content."</br>";
            echo "</div>";    
            }

Ich habe mir eine neue Klasse von Div, die post_ausgabe definiert, weil ich die Formatierung etwas anders als bei der Bilderausgabe gestalten möchte. Der CSS-Eintrag sieht so aus:

.post_ausgabe{
    
    float:left;
    height: 300px;
    width: 30%;
    overflow: hidden;
    border: 1px solid blue;
    margin: 2px;
    padding:2px;    
    
}

Wichtig ist der overflow: hidden; damit die Sache leserlich bleibt. Und die Ausgabe? Ich nehme mal wieder das Inselfisch-Kochbuch, da sind richtig schön viele Beiträge drin, und das sieht jetzt erstmal so aus:

post_ausgabe

Zugegeben, das könnte hübscher sein, aber darum kümmern wir uns später. Falls sie sich wundern, daß hier überrall „Einleitung“ als Untertitel steht: das ist völlig korrekt so, weil bei mir (fast) jedes Rezept mit einer Einleitung beginnt. Erinnern sie sich? Da war was mit der Textstrukturierung wegen der Barrierefreiheit. Deswegen kommt als erster Text im post_content das Wörtchen „Einleitung“, als h2-Überschrift formatiert. Die Ausgabe ist also völlig richtig.

Link auf den Beitrag

Jetzt fehlt natürlich der Link auf den Beitrag, den holen wir uns wieder mal mit get_permalink(ID) und machen einen a href auf die Überschrift daraus. Der foreach folgt sogleich:

foreach ( $alleposts as $einpost ) 
            { 
            $akt_link = get_permalink($einpost->ID);
            
            echo "<div class = 'post_ausgabe'>";
                echo "<a href = '".$akt_link."'><h1>".$einpost->post_title."</h1></a>";
                echo $einpost->post_content."</br>";
            echo "</div>";    
            
            }

Jetzt sitzen die Links auf den Überschriften, wo sie hingehören.

alle_posts_mit_links

Wieder das Spiel mit dem Limit und der Zufallszahl

Man kann natürlich auch hier die Anzahl der auszugebenden Beiträge limitieren, und mit Rand() eine zufällige Auswahl der Beiträge erzeugen, und man kann den ganzen Shortcode natürlich auch wieder ins Text-Widget packen und z.B. in die Seitenleiste verschieben, da kann jeder selber damit spielen.

Was noch nicht schön ist

Der abgeschnittene Text stört mich, und der -zigfache Text Einleitung. Da letzteres aber sozusagen mein Privatvergnügen ist, gibts dafür einen neuen Beitrag.

Mit ’nem kleinen Dreh: Shortcodes mit Parameter

Shortcodes sind eine praktische Sache, wie wir gesehen haben, es lassen sich alle möglichen PHP-Funktionen sauber hineinpacken und an nahezu beliebiger Stelle ausgeben. Jetzt wärs aber doch auch schick, wenn man der Funktion auch noch bestimmte Werte mitgeben könnte, und der alte Programmierer nickt sofort und sagt: au ja, Parameter!

Parameterübergabe an Shortcodes

Ich nehm mir nochmal meinen Hallo-Evi-Shortcode her, und möchte jetzt den Namen als Parameter übergeben, so daß die Funktion dann „Hallo liebe xyz“ ausgibt. Im Shortcode-Aufruf sieht das so aus:

[mhs name = „Evi Silvia“]

Die eckigen Klammern weisen WordPress an, nach einer passenden Funktion zu suchen, das mhs ist der Shortcode der Funktion, die wir in der functions.php definiert haben. name ist der Bezeichner unseres Parameters, und der Wert des Parameters wird mit = zugewiesen. Parameter sind in WordPress-Shortcodes immer Strings, deswegen in Gäsefüßchen „Evi Silvia“.

Damit unsere Funktion jetzt den Parameter auch entgegennimmt, müssen wir den Funktionskopf ändern, das sieht jetzt so aus:

function mein_hallo_shortcode($param)

Dabei ist $param ein beliebiger PHP-Variablenname. Wer hat hier gesagt: echo „Hallo liebe $param“?
Nicht ganz, wenn man es so macht, kommt nämlich Folgendes heraus:

Hallo liebe Array

Parameter als Array

Die Parameter des Shortcodes werden nämlich als Array übergeben. Dabei bildet jede Zeile ein Wertepaar aus Bezeichner und Wert ab. In unserem Fall ist das nur eine Zeile, weil wir ja nur einen Parameter ausgeben. Um jetzt an den Wert des Parameters heranzukommen, muß man das Array auslesen, und das geht so:

function mein_hallo_shortcode($param) {

$aktName = $param[’name‘];
echo „<h1>Hallo liebe „.$aktName.“</h1>“;
}

Das $param[’name‘] liest den Wert („Evi Silvia“) zum Bezeichner name aus. Auch nicht so schlimm, man muß es nur wissen. Der Vorteil bei dieser Methode ist, daß man beim Aufruf eines Shortcodes eine ganze Latte von Parametern mitgeben kann und über die Bezeichner freien Zugriff darauf hat, die Reihenfolge der Parameter ist dabei prinzipiell egal.

Mehrere Parameter übergeben

Der Funktionsaufruf sähe dann z.B. so aus:

[mhs vorname = „Evi“ nachname = „Leu“]

Ensprechend wird die Funktion angepaßt:

$aktVorname =  $param['vorname'];
$aktNachname =  $param['nachname'];


echo "Hallo liebe".$aktVorname." ".$aktNachname;

Ausgabe: Hallo liebe Evi Leu

Alles klar? Wenn man weiß wie, ist die Parameterübergabe eine nützliche und flexible Angelegenheit.

Spiel&Spaß mit Shortcodes

Haben sie sich die Bilderausgabe auch schon in einen Shortcode gepackt? Ja fein, dann wirds Zeit für ein bißchen Spielerei am Sonntag Nachmittag

Anzahl der Bilder limitieren und Zufallszahl einbauen

Man will ja vielleicht nicht immer gleich alle Bilder ausgeben, sondern nur eine kleine Auswahl. Das ist ganz simpel, wir ergänzen das SQL-Statement einfach um eine LIMIT-Anweisung. Und damit nicht immer die selben Bilder herauskommen, ergänzen wir die Sache um die Zufallsfunktion RAND(). Das kommt ans Ende des SQL, vor den letzten schließenden Gänsefüßchen:

…ORDER BY RAND() LIMIT 6″ );

Ergebnis:

6_bilder_screenshot

Ab in die Seitenleiste

Und damit man die Bilderausgabe auch mal an anderer Stelle unterbringt, setzen wir den Shortcode ins Text-Widget und ziehen dieses in die rechte Seitenleiste. Sieht auch sauber aus:

6_bilder_seitenleiste

Ich hab auch mal das Inhaltsverzeichnis in die Seitenleiset gepackt, das sieht dann so aus:

ivz_in_der_seitenleiste

Wie und wo die Platzierung des Shortcodes Sinn macht, hängt natürlich vom verwendeten Theme und von der Art der Ausgabe ab, aber ich denke sie haben jetzt die Möglichkeiten ein bißchen gesehen. Nur zu, viel Spaß beim rumprobieren! Es darf naturlich auch noch ein wenig am CSS geschraubt werden, ich rücke hier mal die Bilder näher zusammen (den Margin einfach rausnehmen):

6_bilder _ohne_margin

Also, viel Vergnügen beim Ausprobieren!

Nützlicher Helfer: der Shortcode

Verlieren sie auch allmählich den Überblick bei den ganzen PHP-Code-Snippets? Mir gehts immer so, wenn sich mehr als ein Dutzend Snippets in PHP Code for Posts angesammelt habe, muß ich aufräumen. Dann überlege ich mir, welche echt nur zum Testen da waren, und welche Funktionalitäten ich wirklich weiterverwenden möchte. Aus letzteren baue ich mir dann Shortcodes mit aussagekräftigen Namen, und bunkere sie in meiner Archiv-Bibliothek.

Was ist ein Shortcode?

Kennen wir doch schon!

shortcode

Das ist das Kürzel, das an dieser Stelle den PHP-Code von Snippet Nr. 7 ausführt. Kann an beliebiger Stelle in einen Beitrag oder auf einer Seite eingesetzt werden. Sogar in das Text-Widget kann der Shortcode eingesetzt werden (wo es Sinn macht), und führt auch hier z.B. in der Sidebar seine Funktion aus.

Wie baue ich einen Shortcode?

Das ist keine schwierige Sache. Zu einem Shortcode gehören essentiell zwei Dinge:

ein Kürzel
eine PHP-Funktion

Das wars schon. Es gibt auch Shortcodes mit Parameter und umschließende Shortcodes, aber wir wollen es mal bei der minimalistischen Version belassen. Kürzel und zugehörige Funktion kommen in die functions.php ihres Child-Themes, das sieht im einfachsten Fall so aus:

hallo_evi_shortcode

Zuerst kommt die Funktion, die tut hier im Beispiel nichts weiter als einen Text mit echo ausgeben. Dann definiert man das Kürzel mit add_shortcode und gibt ihm den Funktionsnamen mit. Das wars schon. Jetzt an beliebiger Stelle einsetzen, z.B. in einen neuen Beitrag, einfach das Kürzel in eckigen Klammern, und voilá die Ausgabe (hier im Inselfisch-Kochbuch), brav als h1 formatiert:

mhs_ausgabe

Nahezu unbegrenzte Möglichkeiten

So eine Shortcode-Funktion kann aber noch viel mehr als nur echo-Ausgaben! Sie können zum Beispiel den gesamten Code für die Bilderausgabe in die Funktion packen, oder das Inhaltsverzeichnis, oder was immer sie wollen. Jeder valide PHP-Code ist möglich!

Wichtig ist nur, daß sie wirklich auf der functions.php ihres Child-Themes arbeiten, sonst sind beim nächsten Theme-Update unter Umständen ihre gesammelten Shortcodes futsch! Dabei sind die doch so vielseitig verwendbar – mehr dazu im nächsten Beitrag.

Barrierefreiheit für den Hausgebrauch: ein Inhaltsverzeichnis V.01

Wozu ein Inhaltsverzeichnis?

Aber ich darf doch mal bitten, ein ordentliches Kochbuch braucht ein Inhaltsverzeichnis, in dem alle Rezepte alphabetisch aufgelistet zu finden sind! Wo man fix etwas nachschlagen kann wenn man ein bestimmtes Rezept sucht, wie zum Beispiel Lasagne unter Buchstabe L. Oder wo man auch mehrere Rezepte unter einem Begriff wie K wie Kartoffel… -suppe, -knödel, usw.findet.

Das brauchte ich auch für mein Inselfisch-Kochbuch, und hab logo schnell mal was programmiert. Meine Rezepte sind natürlich als Beiträge abgelegt, also ein beherzter Griff in die Tabelle wp_posts, und alle mit dem post_type „post“ und davon natürlich nur die veröffentlichten Beiträge, also post_status „publish“ rausgeholt. Alphabetisch sortiert nach Titel, von A wie Apfelkücherl bis Z wie Zwetschgenknödel, das war jetzt echt nicht weiter schwierig.

Das SQL-Statement

Das war wie gesagt ganz simpel:

SELECT * from wp_posts where post_status = ‚publish‘ and post_type = ‚post‘ order by post_title

Schon alles, mehr brauchen wir nicht.

Die foreach-Schleife

Die Ausgabe geht dann wieder mit einer foreach-Schleife, die sah am Anfang einfach so aus:

foreach ( $alleposts as $einpost ) 
{ 
 
  $url = get_permalink($einpost->ID);
  echo "<a href='".$url."'>", $einpost->post_title, '</a></br>';
}

Das mit dem get_permalink hatten wir schon, das holt uns die komplette URL zur ID des aktuellen Datensatzes. Daraus hab ich mit dem <a href…> und dem Beitragstitel flugs den Link zum Rezept gebastelt, und fertig war mein alphabetisches Inhaltsverzeichnis! Ich benamste es in IVZ kompakt, machte ein Plugin draus und fand es ganz toll.

ivz_B

Tscha, und dann kamen die netten Herren von der Pfennigparade und fanden das IVZkompakt prinzipiell eine gute Idee, aber sie hatten einige Verbesserungsvorschläge. Stellen sie sich einfach vor, sie müßten sich eine unstrukturierte (wenn auch alphabetische) Liste von über 200 Rezepten am Stück vorlesen lassen, dann können sie sich denken daß das nicht im Sinne der Barrierefreiheit ist. Also mußte eine Untergliederung nach Buchstaben her, und entsprechend Zwischenüberschriften. Als „nice to have“ wurde noch gewünscht, zu jedem Buchstaben auch die Anzahl der vorhandenen Rezepte sehen zu können, damit man selbst entscheiden konnte ob man da jetzt durch alle durchgehen oder lieber zum nächsten Buchstaben springen wollte.

Der Wunsch der netten Jungs war mir Befehl, ich habe das IVZ komplett umgestrickt, aber dafür gibts einen neuen Beitrag.

Bilder ausgeben: nochmal mit sauberem Code und Präfix

Nachbesserung, zähneknirschend 😉

Meine wohlmeinenden Erstkritiker waren hartnäckig, jetzt muß ich noch mal nachbessern. Ich geb ja zu, es war nicht ganz fein von mir, den SQL für die Ausgabe aller Bilder mit absolut doofen Tabellennamen (iii_wpposts, iii_wppostmeta) in den Beitrag zu setzen. Und auch das nur als Screenshot, so daß man sich das Ding noch nicht mal kopieren konnte. Also gut, ich lege nach. Aber bevor ich mich hier wieder mit dem visuellen Editor anlege, gibts den aktuellsten Code als Zip-Datei.

Gezipptes PHP-Skript

Hier klicken für den Zip-Download: join_posts_und_postmeta_mit_wpdbprefix

Was hat sich geändert?

Jetzt aber trotzdem nochmal ein Screenshot, damit man auf einen Blick sehen kann, was sich geändert hat.

prefix_auf_variable

Ich habe zwei Variable für die Tabellennnamen angelegt, und diese sauber mit

$wpdb->prefix."tabellenname"

befüllt. Jetzt muß man nur noch im Select die hart codierten Tabellennamen gegen die Variablen austauschen, d.h. überall wo vorher stand iii_wpposts steht jetzt „.$meine_posts.“, und statt iii_wppostmeta steht jetzt „.$meine_postmeta.“. Das wars schon, ansonsten hat sich an dem Select rein gar nichts geändert!

Das ist mit den vielen Gänsefüßchen und Punkten zwar nicht mehr besonders gut zu lesen, aber letztendlich kommt es auch der Funktionalität zugute, das Skript sollte jetzt eigentlich auf jeder halbwegs normalen WordPress-Installation laufen. Ich habs auf drei verschiedenen Testinstanzen getestet, bei mir tut es genau das was es soll, nämlich alle Bilder als Übersicht im Thumbnail-Format ausgeben. Und das mit ca. 20 Zeilen Code 😉

Nicht vergessen: der Eintrag in der style.css

Da muß man je nach installiertem Theme vielleicht noch ein bißchen Feintuning machen, aber der Eintrag in der style.css des Child Themes für die div ist auch der gleiche geblieben, der sieht immer noch so aus:

.evisdiv{
    
    float: left;
    height: auto;
    width: 20%;
    overflow: hidden;
    border: 1px solid blue;
    margin: 10px;
    padding: 10px;
    box-shadow: 5px 5px 3px #888
  
}

Den overflow könnte man rausschmeissen, weil ja jetzt die quadratierten kleinen Thumbnails verwendet werden, und den Rest kann sich jeder nach persönlicher Vorliebe stylen – have fun mit CSS! 🙂

Bildausgabe: noch ein paar Spielereien

Das selbe nochmal mit Vorschaubildern

Also gut, meine Bildausgabe sah zugegeben nicht besonders ordentlich aus, weil die Bildformate im Inselfisch-Kochbuch so höllisch unterschiedlich sind. Dann nehmen wir halt in Gottes Namen mal die quadratischen Vorschaubilder. Und die Beschriftungen und Beschreibungen lassen wir ganz weg, weil da eh nichts Gescheits drinsteht. So besser?

join_mit_thumbnails

Was hab ich gemacht? Mir das quadratische Vorschaubild mit der Funktion wp_get_attachment_thumb_url($att_id)
geholt. Davor muß man allerdings den Select erweitern und sich noch die ID des Bild-Datensatzes für die Funktion mit dazunehmen, ich hab das mal so gemacht:

SELECT wp_posts.ID as ‚BildID‘,…

Der Rest des Select bleibt absolut gleich. Die foreach-Schleife sieht jetzt so aus:

bild_ausgabe_thumb

Die echos für die jetzt überflüssigen Felder sind rausgeflogen, und in den img src-Tag kommt jetzt eben die URL des Thumbnails und nicht die des Originalbildes. Ausserdem habe ich die width-Angabe rausgenommen, weil die Thumbnails in meinem Theme eh bloß 150x150px groß sind.

Jetzt noch ein paar Anpassungen in der style.css, die height für evisdiv auf auto gesetzt, das Orange im Background rausgenommen und den border radius rausgeschmissen. Jetzt kann echt keiner mehr meckern:

inner_join_ergebnis_style

Es sieht jetzt wirklich auf den ersten Blick ordentlicher aus, aber die abgeschnittenen Bilder finde ich nach wie vor nicht schön. Na ja, wer’s mag…

Alle Bilder: jetzt gehts an die Ausgabe

Jetzt kommt die Schlamperei auf

Wenn alles geklappt hat, dürfte der phpmyadmin jetzt nur noch die fünf mit dem „as“ benamsten Felder ausgeben. Und wenns euch genauso geht wie mir und ihr beim Bilder hochladen geschlampert habt, steht im alt-Text und im Titel genau das gleiche drin, und die Beschreibung ist in vielen Fällen leer, einfach weil man beim Hochladen nichts angegeben hat. Ich war sogar noch etwas mehr gschlampert: bei mir haben die Felder Bildtitel, Bildbeschreibung und Bild_alttext den selben Wert, weil ich hier einfach mit Copy&Paste gearbeitet habe.

Wo bleibt da die Barrierefreiheit?

Ganz einfach, ich komme damit durch, weil es sich bei meinen Beiträgen um schlichte Kochrezepte handelt. Wenn da als alt-Text „lasagne“ oder „huhn-mit-prosecco“ steht, ist das voll OK weil sich im Kontext „Online-Kochbuch“ jeder etwas darunter vorstellen kann.

Das PHP-Skript

Ich hab da erstmal eine tabellarische Ausgabe gemacht:

join_posts_und_postmeta

Das Wichtigste ist eigentlich, daß in der foreach-Schleife die Felder aus dem Join jetzt mit dem Alias angesprochen werden, den wir jeweils mit dem „as“ angelegt haben. Sonst ist der Aufbau analog zu dem, was wir schon mit den Beiträgen und den Beitragsbildern gemacht haben, erinnern sie sich?

Ich geh mal jetzt ein bißchen in den Schnelldurchgang, das haben wir ja schließlich alles schon mal gehabt. Tabellentags raus, img src rein, div um die foreach-Schleife gelegt, ein wenig CSS Styling.

Die neue foreach-Schleife

Die sieht jetzt so aus:

join_post_und_postmeta_ausgabe

Wenn man jetzt beim Hochladen der Bilder aussagekräftige Inhalte für Bildbeschreibung, -beschriftung -titel und alt-Text eingegeben hätte, bekäme man auch was Ordentliches zu sehen. Probieren sie es aus, laden sie mal ein paar neue Bilder hoch und machen sie sich die Mühe, alle Felder vernünftig auszufüllen. Dazu hätte ich noch einige Anmerkungen, aber jetzt schauen wir uns erstmal unsere Ausgabe aller Bilder an. Bei mir sieht man gleich, daß ich geschummelt habe und in der Bildbeschreibung das selbe drinsteht wie in der Bildbeschriftung, und daß meine Bildchen sehr unterschiedliche Formate haben:

neu_join_screenshot

Wenn man übrigens mit der Maus über eines der Bilder fährt, poppt der title-Text auf – hübscher Effekt, finde ich 🙂

WordPress macht das allerdings von selber nicht, im img src-Tag im post_content wird der Bildtitel nicht mit eingetragen, der entschwindet irgendwo im Nirvana 🙁

Das Problem mit den Hoch- und Querformaten

Tscha, da haben wir es wieder. Natürlich kommen die Querformate hier wieder zu klein raus, weil die Breite ja mit der width-Anweisung im img src Tag festgelegt ist. Aber ich hab lieber das GANZE Bild in der Anzeige, als ein zugeschnittenes Quadratchen mit x-beliebigem Bildausschnitt. Meine persönliche Meinung.

Was fehlt noch?

Jetzt wäre es natürlich schick, wenn man zu jedem Bild auch einen Link auf den zugehörigen Beitrag oder die zugehörige Seite hätte. Was hab ich da wispern gehört – parent_id? Genau! Aber dafür gibts einen neuen Beitrag.