Archiv der Kategorie: PHP

Frisches Styling für unsere olle Datenbankausgabe: ein wenig CSS

Kleiner Exkurs über WordPress und CSS

CSS ist für WordPress das, was ein volles Beauty&Wellnessprogramm für reifere Schönheiten bedeutet, nämlich eine Generalüberholung der angejahrten Basis, ein komplettes Facelifting, eine neue Frisur und auch noch die passenden Designerklamotten, so daß alles wieder jugendfrisch erstrahlt. Das Beste daran ist, daß man das Schönheitsprogramm noch nicht mal selbst codieren muß, dafür gibts Zillionen von großartigen Themes, man sucht sich einfach eins raus das einem zusagt, und das ganze Stylingpaket wird schon fertig mitgeliefert.

Ich halte gar nichts davon, selber groß in der style.css rumzupfuschen, man macht die Layouts damit meist nicht besser. Schließlich haben sich die Theme Designer grosse Mühe gegeben, Schriften, Farben und Seitenlayouts aufeinander abzustimmen, und wenn jetzt eine einfache Programmiererin da im Design rumpfuscht, das wird nix, das lassen wir lieber. Dann sucht man sich lieber gleich ein anderes Theme, das mehr dem eigenen Geschmack entspricht. Es spricht nichts dagegen, mal ein paar Farben anzupassen und kleine „Glitches“ (Fehlerchen) zu korrigieren. Zum Beispiel ist es mir schon in vielen Themes begegnet, daß die Umrandungen von Formularfeldern so gut wie unsichtbar sind. Da hilft dann tatsächlich nur ein mikrochirurgischer Eingriff in der style.css – aber bitte in der unseres Child Themes, nicht in der Originaldatei. Aber dabei sollte man es dann auch belassen, von Laien selbstgestylte Seiten sehen in den meisten Fällen eher peinlich und stümperhaft aus. Neenee, wir lassen der Lady WordPress ihre Designerklamotten, und konzentrieren uns auf andere Aufgaben. Zum Beispiel:

Das neue Styling unserer Datenbankausgabe

Alle alten Programmierer lieben Tabellenausgaben, aber wir verabschieden und jetzt mal von den vielen <tr><td> Tags und setzen auf eine schlichte <div>. Nur so als Erinnerung: eine div oder Division ist ein HTML-Container, der eine Reihe von Eigenschaften hat, auf der Seite positioniert werden kann und Inhalte (Text, Links, Bilder…) umschließt. Divs können beliebig geschachtelt werden, aber da sollte man ein bißchen vorsichtig sein, sonst kommt es zur berüchtigten Div-Suppe, und das Seitenlayout läuft komplett aus dem Ruder 🙂

Jetzt wird erstmal geputzt

Alle für den Programmierer so immens wichtigen Datenbankfelder wie ID, post_type, post_status und so weiter interessieren den Besucher unserer Webseiten null die Bohne und stiften nur Verwirrung, die fliegen jetzt raus. Wir behalten nur den Beitragstitel, den Link zum Beitrag und das Beitragsbild, und packen diese in eine Div, die wir nachher beliebig stylen können. Unser Select bleibt gleich, die Ausgaben in der foreach-Schleife werden deutlich verschlankt. Die Div bekommt noch eine Klasse zugewiesen, der wir einen Namen geben, an dem wir erkennen, daß die von uns selber stammt, mit der gehen wir dann in die style.css. Jetzt aber erstmal unsere geliftete Datenbankausgabe… holà, heute nicht mehr! Zeit zum Abendessen. Mehr dazu morgen, und dann gibts auch wieder Codeschnipsel, versprochen 😉

Beitragsbild in unserer Tabelle mit ausgeben

Nachdem wir jetzt ja erschöpfend geklärt haben, was ein Beitragsbild eigentlich ist, gehts jetzt an die spaßige Seite, nämlich die Ausgabe der Beitragsbilder in unserer eigenen Datenbankabfrage. Wir haben immer noch den selben alten Select:

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

Und wir haben immer noch die selbe foreach-Schleife mit der Formatierung als HTML-Tabelle. Jetzt geht es ein bißchen von hinten durch die Brust ins Auge weiter.

2 WordPress-Funktionen für Beitragsbilder

Wir holen uns zuerst über die ID des aktuellen Beitrags die ID des Beitragsbilds=Thumbnails, das geht mit der WordPress-eigenen Funktion get_post_thumbnail_id(), und zwar machen wir das so:

get_post_thumbnail_id($einpost->ID)

(Kleine Erinnerung: genauere Details zu den WordPress-Funktionen im Codex nachschauen!)
Mit der Thumbnail-ID holen wir uns mit der Funktion wp_get_attachment_url() die URL des Beitragsbildes:

wp_get_attachment_url(get_post_thumbnail_id($einpost->ID))

Ich liebe diese sprechenden Funktionsnamen! 🙂
Das Ganze legen wir dann noch auf eine Variable, und dann sieht die neue Zeile in unserer foreach-Schleife so aus:

$artikelbild_url = wp_get_attachment_url(get_post_thumbnail_id($einpost->ID));

Sie können sich ja spaßeshalber erstmal die Variable $artikelbild_url so wie sie ist mit echo ausgeben, oder wir packen das Ergebnis der ganzen Prozedur gleich in einen img-Tag. Ich hab versprochen, mehr Codeschnipsel, also bitte, nochmal die komplette foreach-Schleife:

thumbnail_url_holen

thumbnail_url_holen

Und? Rumms, da kommen doch die Bilder gleich in voller Größe auf den Bildschirm gerauscht, das ist jetzt genauso häßlich wie im Theme Twenty Fourteen. Abhilfe schafft eine width-Angabe im img-Tag:

echo „<td><img src ='“.$artikelbild_url.“‚width = ‚100px‘></td>“;

Statt 100px können sie natürlich einen beliebigen Wert eingeben, aber ich wollte ungefähr Paßfotogröße, das sieht bei mir jetzt so aus:

passfotos

passfotos

Schon deutlich hübscher, nicht wahr? Und jetzt wollen wir mal die ganzen inzwischen überflüssigen Felder wie ID usw. ausblenden und der Sache per CSS ein pfiffigeres Styling verpassen, aber dazu gibt es einen neuen Beitrag.

HTML Tabelle mit Tablesorter reloaded

Ich gelobte Besserung. Ich schieb hier nochmal nach, wie unsere HTML-Tabelle aussehen muß, nämlich mit thead und tbody Tags, damit sie vom Table Sorter Plugin auch sortiert wird.

alle_posts_mit_perm_und_tablesorter

alle_posts_mit_perm_und_tablesorter

Das ist jetzt mal ein Screenshot aus dem Notepad++, meinem Lieblings-Editor für alle Zwecke. Ich denke, man kanns lesen… und da seh ich prompt schon einen Fehler, bei dem schließenden thead Tag fehlt der / (Schrägstrich). Tablesorter hats trotzdem gesorted, ich lass das jetzt mal so stehen.

Der Knackpunkt ist hier wie gesagt die Zuweisung:

echo „<table id=’meineTabelle‘ class=’tablesorter‘>“;

Damit weiß der Tablesorter, daß jetzt Action angesagt ist, und er auf diese Tabelle losgehen soll. Mehr ist nicht dabei. Wie schon gesagt, der Tablesorter bietet noch wesentlich mehr Möglichkeiten, aber da darf sich jeder selber einlesen, Doku gibts bei Tante Google.

 

 

 

Inhaltsverzeichnis mit Links oder auch: darf ich vorstellen, der Permalink

Wozu ein Inhaltsverzeichnis?

Wieso nicht? Ich möchte schließlich meinen Lesern einen schönen Überblick über meine Beiträge liefern, in Kurzform und so ähnlich übersichtlich wie ich das im Dashboard unter „Alle Beiträge“ vorfinde.

Jaaa dafür gibt es Sitemap-Plugins, die alle Beiträge nach allen möglichen Kriterien auflisten – aber das fand ich dann doch mit Kanonen auf Spatzen geschossen. Ich brauchte für mein Inselfisch-Kochbuch eine simple Liste aller Rezepte, alphabetisch bitteschön, nach Buchstaben geordnet. Und weil ich kein Plugin gefunden habe, das genau meinen Zweck erfüllte, hab ich mir eins selber geschrieben.

Damit ich mein Publikum nicht verwirre: wir haben ja schon eine Liste aller Beiträge! Ja, aber noch nicht mit Link zum Draufklicken, der direkt zum Beitrag führt, und das machen wir jetzt. Das sieht im Inselfisch-Kochbuch life so aus: Inhaltsverzeichnis A-Z

Gestatten: der Permalink

Was ist eigentlich ein Permalink? Darüber haben die Kollegen vom Elbnetz einen hervorragenden Beitrag „Was sind eigentlich Permalinks„verfaßt, den ich ihnen zur ausführlichen Information ans Herz legen möchte. Ganz kurz und knapp gesagt, Permalinks sind aussagekräftige URLs, die sind sie wahrscheinlich von ihrem WordPress sowieso gewohnt. Wenn sie einen Beitrag in ihrem Urlaubsfotoblog anschauen und mal einen Blick in die Titelleiste ihres Browsers werfen, steht da zum Beispiel sowas wie:

meineseite.de/urlaubsbilder/2017/01/25/gardasee/

Das ist ein sogenannter „sprechender“ Permalink. Das läßt sich schön im Klartext lesen, das ist suchmaschinenfreundlich und sogar für Menschen mit Handicap im Sinne der Barrierefreiheit wunderbar zu lesen. Wie ihr WordPress diese Permalinks anlegt ist unter Einstellungen/Permalinks festgelegt, wahrscheinlich ist dort die Option „Tag und Name“ angewählt. Damit erhält jeder Beitrag so einen aussagekräftigen Permalink, und über den können wir ihn auch aufrufen. Dafür brauchen wir:

Die WordPress-Funktion get_permalink(  )

Im einfachsten Fall ruft man diese Funktion nur mit der ID des gewünschten Beitrags auf. Das sieht zum Beispiel so aus:

$perm= get_permalink( $einpost->ID );

Die Variable $perm bekommt damit den Permalink des aktuellen Beitrags, der über die ID ja eindeutig identifiziert ist. Das bauen wir in unsere foreach-Schleife mit ein, und schon haben wir die Permalinks unserer Beiträge mit in der Ausgabe! Das sieht jetzt fein aufgelistet so aus:

tabelle_mit_permalinks

tabelle_mit_permalinks

Links aus Permalinks

Jetzt brauchen wir nur noch einen <a href> um den Permalink herumzubasteln, und wir haben unseren Link zum Beitrag. Sieht im einfachsten Fall so aus:

links_in_aktion

links_in_aktion

Ist noch nicht richtig schön, aber es funktioniert, und es eröffnet jede Menge Spielmöglichkeiten!

HTML Tabellenausgabe als Beispiel

Wir waren gestern bei der Ausgabe eines Select* auf die wp_posts stehengeblieben. Wie man so etwas mit ein wenig HTML hübscher formatiert sollte eigentlich bekannt sein, aber ich zeigs hier mal als grundlegendes Beispiel ohne grosse Erklärungen.

echo "<table>";    
    
    // Titelzeile ausgeben
    echo "<tr><td>ID<td/><td>post_status</td><td>post type</td></tr>";
    
    //Eine Zeile pro Datensatz ausgeben
    foreach ( $alleposts as $einpost ) {     
        
        echo "<tr><td>".$einpost->ID."<td/>";
        echo "<td>".$einpost->post_status."</td>";
        echo "<td>".$einpost->post_type."</td>";
        echo "</tr>";
    }
echo "</table>";

Die thead und tbody Tags sind hier nicht dabei, aber die brauchen wir später noch, ich hab sie mal vorauseilend mit dazu erwähnt.
Das Ergebnis sollte jetzt in etwa so aussehen:

html_tabelle

html_tabelle

Wie die Tabelle letztendlich genau gestylt wird, hängt von ihrem Theme ab, aber wir lassen es jetzt mal bei der schlichten Darstellung, OK?

Sie können mit unserem SQL-Statement ruhig ein bißchen rumschussern, ein „ORDER BY post_title“ sortiert die Ausgabe natürlich alphabetisch nach Titel, ein „ORDER BY post_date “ nach Datum und so weiter. Es ist auch gestattet noch mehr Felder hinzuzunehmen, das geht in unserem Beispiel immer mit $einpost->’feldname‘, spielen sie hier ruhig auch ein bißchen rum. Für den besseren Überblick empfehle ich, die Titelzeile der HTML-Tabelle ebenfalls immer entsprechend anzupassen.

Und wenn sie mit ihrer Ausgabe zufrieden sind, spendiere ich ein hübsches Plugin, aber erst im nächsten Artikel.

Das erste Plugin: PHP Code for Posts

Meine erste Wahl

Ich hab lang überlegt, welches der Zillionen Plugins für  WordPress ich als erstes vorstelle, aber irgendwie ist mir die Auswahl am Ende dann nicht besonders schwer gefallen. Als alter Programmierer will man halt auch was programmieren, nicht bloß Plugins zusammenkleistern. Und die einfachste Möglichkeit, WordPress eigenen PHP-Code unterzujubeln geht über dieses (oder ein Ähnliches) Plugin. Ich hätte auch zuerst erklären können, wie man einen Shortcode anlegt oder wie man ein eigenes Plugin schreibt, aber ich geh gern den einfachsten Weg, und PHP Code for Posts ist so schön straight, das wärmt mein altes Programmiererherz richtig. KISS – keep it short and simple, so nannten wir das früher immer.

Installieren

Also, ran an die Plugin-Installation (ich gehe davon aus daß das nichts Unbekanntes ist), suchen nach „PHP Code for Posts“ und das geniale kleine Plugin von Jamie Fraser installieren und gleich aktivieren.

screenshot_phpcodeforposts

screenshot_phpcodeforposts

Hier kommt noch der Link zur offiziellen Plugin-Seite, der Vollständigkeit halber.

Nach der Installation haben sie am unteren Ende des Admin Menüs einen neuen Eintrag „PHP Code“, das wird jetzt unser Arbeitspferd.

adminmenu_phpcode

adminmenu_phpcode

Das erste Code-Snippet: Hallo Welt! – was sonst?

Ich erkläre das jetzt dieses eine Mal etwas genauer,  schließlich wird PHP Code for Posts jetzt unsere wichtigste Arbeitsgrundlage, das soll schon funktionieren.  Eigentlich ist es ja selbsterklärend… aaaber ich will ja auch die Anfänger und Hobbyprogrammierer hier mitziehen, also, los gehts:

  1.  Den Menüpunkt PHP Code anwählen, den blauen Button „New Snippet“ anklicken.
  2. Einen Namen für das Code Snippet und eine kurze Beschreibung eingeben
  3. Da wo steht „CODE HERE“ die berühmte Hallo-Welt-Zeile eintragen.
hallowelt

hallowelt

Jetzt noch „Save Code Snippet“ nicht vergessen, und sie kriegen oben den Shortcode für das Snippet angezeigt.

snippet1

snippet1

Den Shortcode kopieren sie sich, inklusive der eckigen Klammern.

Jetzt brauchen wir noch eine Testseite, also Neu/Seite, und die betiteln wir mal mit einem schönen Namen, z. B. „Testseite“ 🙂 und fügen den Shortcode ein.

testseite

testseite

Seite veröffentlichen, angucken und Voila! Unser erstes PHP Snippet für WordPress ist gelungen!

hallowelt_ausgabe

hallowelt_ausgabe

Wie, mehr nicht? Gemach, gemach. Wir haben ja auch nur eine einzige echo-Anweisung programmiert, und genau das macht unser Code Snippet, eine simple Textausgabe. Sie können aber in PHP Code Snippets jeden beliebigen PHP Code eingeben, und der wird treu und brav ausgeführt – alles, aber wirklich alles ! Auch SQL-Statements mit DELETE oder UPDATE auf der Datenbank, dabei ist also ein bißchen Vorsicht geboten. Unser Arbeitspferd steht bereit und aufgezäumt da, jetzt kanns losgehen.

Kleiner Tipp am Rande

Ich mache mir immer zwei Browserfenster auf, in einem lasse ich das PHP Code Editfenster anzeigen, im zweiten mache ich meine Beispielseite auf. Code ändern, Save Code Snippet nicht vergessen, auf die Beispielseite gehen und einmal F5 drücken, und sie sehen sofort was ihr geänderter Code macht. Meistens hab ich noch ein drittes Fenster mit dem phpmyadmin offen, da guckt man mal schnell auf die Datenbank, ob die Abfrageergebnisse auch plausibel sind.

Alles klar? Bereit für ein bißchen PHP auf der Datenbank? Gut, im nächsten Beitrag starten wir durch.

Für wen ist dieser Blog gedacht?

Ist ernstgemeint: für alte Programmierer. Das ist jetzt nicht unbedingt für Tattergreise gedacht, sondern für technisch interessierte Leute, die schon ein paar Jahre Erfahrung in der IT auf dem Buckel haben. Dazu zähle ich auch ausdrücklich die alten Hobby-Programmierer, denn von denen gibt es viele sehr gute da draussen, die womöglich ihre erste Datenbank noch anno Dunnerkeil mit dBase geschrieben haben und die sich mit Excel, Word und Access schon unter DOS auskannten.

Also für Dinosaurier?  Ausdrücklich JA! Ich liebe Dinos, vermutlich weil ich selber mittlerweile einer bin 😉

Und mit diesen Dinosauriern möchte ich mich gerne über WordPress unterhalten, die erfolgreichste Blog-Software aller Zeiten. Ich selber nutze Wordpess seit einigen Jahren als Frontend für die Erstellung kleiner und mittlerer Webseiten, und bin eigentlich ein begeisterter Fan,  es ist so schön einfach zu bedienen, es ermöglicht auf einfachste Weise wunderbare Layouts und ist unendlich erweiterbar.

Warum „eigentlich“ ein Fan?

Weil ich nicht alles an WordPress gut finde.  Es gibt auch Sachen, die mich echt nerven, oder wo ich nicht verstehe warum man Dinge unnötig kompliziert macht. Ich möchte hier aber keinesfalls verbiesterte Kritik üben, mir geht es um eine eher lockere, ich würde fast sagen spielerische Herangehensweise, denn WordPress kann auch richtig Spaß machen.

Was ich voraussetze

Einige allgemeine Grundlagen der Programmierung (Sie sollten schon wissen wie man ein if..then..else und sowas konstruiert), solide SQL-Grundkenntnisse und ein allgemeines Verständnis des relationalen Datenbankmodells, dazu noch für den optischen Zuckerguß Erfahrung mit HTML und CSS, und ein bißchen PHP und MySQL kann auch nichts schaden. Und natürlich zumindest erste Erfahrungen mit WordPress, wenigstens ihre Urlaubsfotos sollen sie schonmal damit veröffentlich haben 😉

Was  ich nicht machen werde

Ich werde hier keine Sammlung von fix und fertigen Code Snippets zum Rauskopieren aufstellen, dafür fehlt mir einfach die Geduld. Einige beispielhafte Codeschnipsel hier und da müssen genügen, sie können ja selber tippen, und alte Programmierer lassen sich von verschachtelten Klammerungen und der allgemeinen Gänsefüßchenwut nicht abschrecken. Mir geht es darum, daß sie meine Codebeispiele nach vollziehen können, weil sie sie verstanden haben. Hier wird es also keinen  Copy&Paste-Laden geben, sondern eher eine lockere Plauderei über Konzepte mit eingestreuten Programmierbeispielen, die sie selber ausbauen und aufhübschen können. Sie werden sehen, wir werden jede Menge Spaß damit haben!