WordPress Dashboard / Plug-Anzeige

Hier eine einfache Darstellung der Plug-Ins anzeigen

Ich habe mich für eine Darstellung mit Beschreibung (Description) und Autor Link (LinkedAuthor) entschieden, aber ohne Versionsnummer.
Umgesetzt auf meiner Plug-In Seite

Der Code für den Aufruf auf der Seite: (Code in eckige Klammern setzen)

plugins_list cache=24 format="#LinkedTitle#<br />
<small>#Description#<br />
#LinkedAuthor#</small><hr>"

Da die Ausgabe mit der Beschreibung sehr lang ist, habe ich die Anzeige in einen div-Container gepackt und scrollbar gemacht.
Styling Angaben hierzu: anzeigen

vorherige Lösung mit Script von AndresSW

Interessant ist hierbei besonders die praktische Sortierfunktion der einzelnen Spalten. Dazu in der obersten Zeile auf die Begriffe Name, Größe, Jahrgang klicken.

Siehe auch meine Professor Van Dusen Hörspiel Tabelle.

Umstieg und Import

Der Umstieg von WP-Table Reloaded zu TablePress wird hier beschrieben und klappte bei mir problemlos.

Alle Programme sind Freeware bzw. Open Source

Internet-Software

• Firefox Internet-Browser
  ganz klar für mich das erste Programm das auf den Rechner muß
• Firefox-Erweiterungen Add-Ons anzeigen
  • Fire FTP für Zugang zum Server
  • FireBug Das Webseiten-Tool
  • Deutsches Wörterbuch Rechtschreibprüfung
  • Foxy Tunes zur Kontrolle des mp3-Players
  • Roomy Bookmarks Toolbar minimierte Leiste (nur Favicons)
  • zuvor hatte ich noch ySlow u.a. die werde ich nach Bedarf installieren

• Live Disk Connector für den direkten Zugang zum Server

mp3, Audio, Video

• zum Thema mp3 siehe Spezial-Beitrag
• Free-Audio-Editor
  Alternative zu den teuren Programmen wie SoundForge und WaveLab
• VLC Media-Player
  unterstützt zahlreiche Formate und Codecs

Grafik-Anwendungen

• XN-View Bildbetrachter mit Editierfunktionen
• Gimp Bildbearbeitungs-Progamm
• Porta Fotoalben-Generator siehe Fotos-Sets hier im Blog

Büro-Programme

• Da auf meinem Rechner kein MS-Office-Paket enthalten ist:
  Die Alternative: Open Office
• Viewer für Excell und Powerpoint-Dateien
• pdf-Dateien erstellen [Foxit] und ansehen [pdf-Creator]
• Font Viewer
  zum verwalten der installierten Schriften

Tools

• 7-Zip Programm zum komprimieren
• Notepad++ Editor (und Ersatz für Windows-Notepad)
• WinSnap zum Screenshot erstellen
  Die ältere Freeware-Version (v1.1) installiert

Wartung

• Belarc Tolles kl. Systemanalyseprogramm
  das Ergebnis wird als html-Datei angezeigt
• Avira Anti-Virus Software

Das Plug-In zeigt Wetterinformationen von AccuWeather.com und alternativ WeatherBug auf WordPress Blog Seiten an.

Hinweis: Der Beitrag wird immer an die aktuelle Version angepasst.

Damit das Wetter nicht auf jeder Seite erscheint, habe ich eine if-Abfrage in der Sidebar eingebaut:

<?php if (is_single(6390) || is_page(5300)) { ?>
<?php if(function_exists(wp_forecast)) {
wp_forecast( "C" );
} ?>
<?php } ?>

Somit erscheint das Wetter für den Ort C (Hamburg) nur auf dem Beitrag ID=6390 (dieser Beitrag) und der Seite ID=5300.
Es kann für mehrere Orte ein Wetterbericht angelegt werden.
Ich verwende es noch für Cassis (Südfrankreich) und die Insel-Sylt

• Bei dem Dialog “WordPress Übertragungsmethode auswählen” habe ich “default” angegeben.
• Wetterdienst ist bei mir immer Accuweather.
• Wenn man sich das aktuelle Wetter anzeigen lässt, sollte man nicht zusätzlich das Wetter von Tag 1 aktivieren. Sonst erscheint Abends das aktuelle Wetter und die Vorschau für den vergangenen Nachmittag.

Einige Änderungen der Wetteranzeige:

1. Sprachdatei Änderungen
   Im Ordner /lang befindet sich die deutsche Sprachdatei wp-forecast_de_DE-de_DE.po
   Zum Verändern der Datei benötigt man z. B. den po-Editor (freeware)
   • barr statt “aktueller Luftdruck”, steht nur “Luftdruck”
   • flik statt “Gefühlte Temperatur” – “gefühlte Temp.”
   • Forecast statt “Vorhersage” einfach nur ein “am”
   • More forecast… statt “mehr” steht “+ Vorhersagen”
     Das ist der Textlink für den aufklappbaren Bereich

   Nach dem Abspeichern muss sowohl die bearbeite .po Datei als auch die dazugehörige .mo ausgetauscht bzw. überschrieben werden.

2. Styling-Angaben
   Die Datei wp-forecast-default.css öffnen und neu abspeichern unter: wp-forecast.css. Somit wird das eigene Styling nach einem Update nicht mehr überschrieben.
   • Eventuell ist hier noch etwas anzupassen.
     Zum Beispiel die Größe der Icons, Schriftgrößen, Ausrichtung von Texten u.a.
   • Schriften angepasst.
     Keine small-caps / Kapitälchen-Schriften
     in dem Bereich: div.wp-forecast-curr-right
   • Es empfiehlt sich an einigen Stellen clear: both einzubauen.
     z. B. falls man den “Aufklapper” verwendet:

     div.wp-forecast-fc {
clear: both;
}

     und selbiges hier:

     div.wpff_nav {
clear: both;
}

     Dadurch erscheint der Button garantiert unterhalb der Wetteranzeige und nicht daneben.

   • Der Button lässt sich auch noch etwas “pimpen”:

     div.wpff_nav {
clear:both;
background: #fff;
font-size: 1.1em;
border: 1px solid #ccc;
padding: 3px;
text-align:center;
float: left;
}

3. Ausgabe Datum (funclib.php)
   • Datum Anzeige geändert:
     Original:

     $av['fc_date_format']=get_option("date_format");

     Geändert in:

     $av['fc_date_format']=("D., d.m.y");

     dadurch erscheint jetzt der Tag. (Mo., Di., Mi.)

4. Ausgabe Accuweather (func_accu.php)
   • Copyright-Zeile geändert: $weather_arr['copyright']='...';
     Original:

     © '.date("Y").' AccuWeather, Inc.
     © 2012 AccuWeather, Inc.

     Geändert in:

     © AccuWeather
     © AccuWeather

     Die Zeile lässt sich in den Plug-In Einstellung aber auch komplett ausblenden.

5. Wettersymbole (Icons)
   • Wer mit den vorhandenen Symbolen nicht zufrieden ist, kann sich bei Barbaras Testblog nach anderen Icon-Sets umschauen.
     (Ich verwende die Standard-Symbole)

Die “Wetterstationen” werden gespeichert.
Bei einem automatischem Update verliert man hingegen die oben genannten Änderungen.
Deshalb die betreffenden Dateien sichern:

1. Sprachdateien de_DE.po und de_DE.mo
2. Ausgabe funclib.php
3. Ausgabe func_accu.php
4. ggf. Icons

Die wp-forecast.css wird ab v2.4 nicht mehr überschrieben.

Fündig wurde ich bei Supersaas.
Ein externer Dienst, der sich – anders als bei anderen Anbietern – sehr elegant in die eigene Website einbinden lässt. (rein URL-technisch gesehen)

Beispiel:
Für den Konferenzraum habe ich folgende (Test-)Adresse angelegt:

• http://termin.hh-architekt.de/

Die Adresse – hier mit der Subdomain ‘termin’ – kann sich jeder Nutzer leicht merken. Bei der Eingabe der Adresse wird man weitergeleitet zu dem Kalender. Hierbei handelt es sich aber nicht um einen gewöhnlichen Link, denn die Original Domain bleibt erhalten.

Um die URL persönlich einzurichten bietet Supersaas ein gutes Tutorial: Terminkalender Website Domäne

Einrichtung beim Hoster

Hier mein Beispiel für die Einrichtung bei domainFactory
dürfte auch für andere Hoster anwendbar sein:
(Zunächst muss man sich natürlich bei Supersaas anmelden und ein Konto / Kalender einrichten.)

1. Einwahl beim Hoster (hier domainFactory)
2. Dort in dem Bereich “Für Profis” den Unterpunkt “Nameserver Einstellungen” anklicken.
3. Einen Nameserver Eintrag anlegen. Typ: CNAME
4. weitere Angaben:
   • Hostname: termin
     Das ist der Name der später als Subdomain erscheint.
     Eine Subdomain “termin” muss/darf vorher nicht angelegt werden.
   • Ziel: www.supersaas.com
     den Eintrag nicht verändern -kein direktes Ziel und auch kein http:// eintragen.

Screenshots:
zu 2.)

zu 3.)

zu 4.)

Das waren schon alle notwendigen Eintragungen beim Webhoster.
Jetzt muss der Kalender bei Supersaas noch verknüpft werden mit dieser URL.

Einrichtung der URL bei Supersaas

1. Einwahl bei Supersaas
2. In der rechten Spalte unter Einstellungen den Menu-Punkt “Layouteinstellungen” anklicken.
3. Dort “Erweiterte Einstellungen” anklicken. (Steht etwas unauffällig im Bereich “Aussehen”)
4. Hier die Verlinkung mit der Subdomain eintragen

Screenshots:
zu 2.)

zu 4.) [klick auf das Bild zum Vergrössern]

Es lassen sich noch zahlreiche Anpassungen der Optik durchführen, die aber recht selbsterklärend sind.
Auf der Website vom Anbieter gibt es auch einige Demos, die die Funktionalität besser zeigen.

Die Beispiele erscheinen als einzelne Seiten (html-Datei + css-Datei) somit lässt sich leichter der Quellcode einsehen. (rechte Maustaste: Seitenquelltext anzeigen)

Intro: Der Hover-Effekt

Die einfachste Form des Hover Effekts ist vermutlich ein Link.
Geht man mit der Maus auf den Link, so ändert sich die Farbe.
Beispiel: Link (Die Farbe ändert sich von blau zu rot.)
Die Styling-Angaben dazu:
a {color: blue;}
a:hover {color: red;}

Der einfache Hover

Startbild:
Ampel Aus

Hover-Bild:
Ampel auf Rot

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Der einfache Hover für einen Teilbereich

Während bei dem vorherigen Beispiel der Bilderwechsel bei dem kompletten Bild wirksam wird, so lässt sich ein Wechsel auch in einem Teilbereich des Bildes erreichen.
Der Bildwechsel soll z. B. erfolgen sobald der Rot-Bereich mit der Maus überfahren wird:
Dieser Effekt ist etwas aufwendiger von den Styling-Angaben, da das Ampel-Bild unterteilt werden muss.
Hierzu wird in der css-Datei eine Größenangabe des Bereiches erforderlich. Dieser Bereich wird verlinkt und erzeugt einen Bildwechsel.

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Der dreifache Hover

Startbild:
Ampel Aus

Hover-Bild:
Ampel bunt

Hier die Umsetzung mit zwei Bildern.

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Wer sich dieses Beispiel genau anguckt hat, wird vielleicht bemerkt haben, dass sich beim überfahren mit der Maus (hovern) das Bild verruscht erscheint. Warum?
Für den dreifachen-Hover müssen die Bilder unbedingt die gleiche Größe haben. Das hover-Bild (bunte Ampelsignale) hat eine leicht abweichende Größe und verspringt somit.
Die Styling-Angaben verstehen: anzeigen

Für komplizierte Anwendungsfälle kann es sinnvoll sein für jedes Ampelsignal ein eigenes Bild zu verwenden.
Hier die Umsetzung mit vier Bildern:

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Der beste und eleganteste Weg ist die Bilder als eine Bild zusammenzufügen.
Stichwort: css-Spirtes

Anwendungsbeispiele aus der Praxis:

• Adventskalender-Blog (einfacher Hover im Kalendertürchen)
• claheiten.de (dreifacher Hover in der Sidebar)

Hilfreiche Links:

• 1-facher Hover-Effekt mit einer Grafik
• css4you Übersicht über Hover und weitere “Pseudo-Klassen”

<?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

Bei der get_avatar Zeile den default-Bereich gelöscht. Somit erscheint das in dem Blog festgelegte Standard-Symbol. [Einstellungen/Diskussion]
Zum Beispiel:
Das Avatar mit der Autor-Website verknüpft (falls Website vorhanden) und eigene style-class angegeben.
Geändert:

<div class="gravatar">
<?php if ($comment->comment_author_url != '') : ?>
<a href="<?php comment_author_url(); ?>"><?php echo get_avatar($comment,$size='36'); ?></a>
<?php else : ?>
<?php echo get_avatar($comment,$size='36'); ?>
<?php endif; ?>
</div>

Autor-Anzeige
Original:

<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>

Im Original sieht es so aus: funkygog says:
Das hat mir nicht gefallen, habe das “says” gelöscht und eine style-Klasse hinzugefügt.
Geändert:

<?php printf(__('<p class="commentauthor"><span class="fn">%s</span></p>'), get_comment_author_link()) ?>

Meta-Angaben (Datum, Uhrzeit)
Original:

<?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?>

Die Anzeige der Uhrzeit habe ich gelöscht. Muss ja nicht jeder wissen, wer während der Arbeitszeit kommentiert hat :-)
Bei der Datum-Angabe habe ich den Wochentag hinzugefügt.
Geändert:

<?php printf(__('%1$s'), get_comment_date('D., d.m.y')) ?>

Pings-und Trackbacks
Bei Kommentaren ist die Standard Anzeige von Alt nach Neu.
Bei den Pings habe ich in der comments.php die Reihenfolge umgedreht, somit erscheinen die Neuesten zuerst. (reverse_top_level)

<ul class="pinglist">
<?php wp_list_comments('type=pings&reverse_top_level=DESC&callback=list_pings'); ?>
</ul>

Damit Pings nicht im Ausdruck erscheinen habe ich die style-class “pinglist” in der print.css wie folgt eingetragen:

.pinglist {
display: none;
}

Nummerierung von Kommentaren
siehe Anleitung David Naber
Habe die Nummern noch zusätzlich verlinkt

<a href="#comment-<?php comment_ID() ?>" title="">
<?php
echo '<p class="commentcount">'.$comment_counter.'';
?>
</a>

Eigene Kommentare
Um eigene Kommentare anders zu gestalten, in der style.css folgendes einfügen: li.bypostauthor und mit border, background usw. versehen. Ich verwende font-style: italic;

style-Klassen
Für bessere Gestaltungsmöglichkeiten empfiehlt es sich, weitere style-Klassen einzufügen.
Zum Beispiel <div class="commenttext"> um bei den Kommentaren-Texten die Schriftgröße, Farbe und dergleichen festzulegen

weitere Infos:

• Viele Tipps gibt es bei Elmastudio.de.
  Zum Beispiel über verschachtelte Kommentare
• Anzeige der letzten Kommentare (Code für die Sidebar u.a.)

Was ist LiveDisk und wie aktiviert man es?

LiveDisk® ist die WebDAV-Lösung von domainFACTORY und eine Art “aufgebohrter ftp-Zugang”.
Das Feature ist (je nach Tarif) im Kundenmenü “FTP-Accounts/LiveDisk®” aktivierbar.

Vorarbeit: Einrichten beim Webhoster

Zunächst richtet man im Kundenmenü einen ftp-Zugang (Account) zum Theme ein.
Accounteinstellungen

• Username: 125553-Mein_Theme
• Passwort: Mein Passwort
• Pfad: /webseiten/funkygog/wordpress/wp-content/themes/funkygog-Theme

Anschliessend aktiviert man den LiveDisk®-Zugang.
Somit ist die Funktionalität beim Webhoster eingestellt.

Installation: Einrichten auf dem Computer

Um die Laufwerke im Computer einzurichten bietet domainFactory ein Installationsprogramm für Windows-Rechner.

• dF LiveDisk® Connector

Die Installation geht leicht von Hand. Bei mir musste ich noch etwas in den Diensten der Systemsteuerung ändern, aber das wurde vom Programm gut erklärt.
Somit ist die Funktionalität im Betriebssystem eingestellt.

Einrichten: Verbindung zum Account herstellen

Beide Seiten (Betriebssytem und Webspace) müssen jetzt noch miteinander verbunden werden.
Um eine Laufwerk herzustellen legt man in der Software eine neue Verbindung an.

1. Programm starten und bei Verbindungen auf “neu” klicken
2. Verbindungsnamen angeben. (z. B. “Mein Theme”)
3. Laufwerksbuchstaben aussuchen
4. Benutzername und Kennwort eingeben.
   Diese Angaben vom eingerichteten ftp-Zugang übernehmen
   User: 125553-Mein_Theme | Passwort: Mein Passwort
5. Verbindung testen und speichern

Weitere Informationen:

• domainFactory FAQ
• dF-Blog Beitrag

Es lassen sich beliebig viele Verbindungen herstellen. Hat man erstmal das Prinzip verstanden ist es ein leichtes neue Laufwerke zu erstellen.

• Facebook Share Button ohne Javascript und W3C valide
• So wird der Tweet Button W3C valide

Die beiden sehr hilfreichen Tipps habe ich hier im Blog umgesetzt (in der single.php).
Zusätzlich habe ich unterhalb des Titels noch ein klitzekleines Bild eingebaut um schon mal auf die Funktion von Facebook und Twitter hinzuweisen. Leute die damit hantieren dürften die Symbole erkennen.
Die Grafik ist intern verlinkt zu den Buttons unterhalb des Beitrags. (Stichwort: Textanker).
Einbau-Code anzeigen

Der Code unter dem Beitrag (die Buttons) entspricht weitestgehend den Angaben von Crazytoast.
Habe lediglich dem Bereich noch eine id gegeben damit der Textanker funktioniert und dem Facebook-Link eine class, damit ich den Bereich stylen kann.
Einbau-Code anzeigen

Das beim Klick auf das obige Icon die Buttons kurzzeitig farbig unterlegt sind, liegt an dem yellowfade-Script, das ich hier verwende.
Für das sanfte dahingleiten (“Please Scroll soft with me”) ist ein kleines Script verantwortlich welches ich bei ElmaStudio gefunden habe.

Damit das mit Twitter auch Sinn macht, habe ich mir extra einen Twitter-Account zugelegt. Geht fix von der Hand, auch wenn ich sicherlich dort nur selten etwas schreiben werde.
Detlef hat mir noch den Tipp gegeben, das WP-Plug-In WordTwit zu installieren, dadurch erscheinen neue Beiträge automatisch bei Twitter.

WordPress 2 iPhone:
Damit der Blog auch bequem über ein iPhone (und anderen Smartphones) lesbar ist, habe ich folgenden Tipp umgesetzt:

• Mobile Web-Version bei Nicht-spurlos

Das Plug-In WPtouch macht seine Sache sehr gut! Es empfiehlt sich in den Plug-In Einstellungen unter user-agents noch weitere Mobile-Hersteller einzutragen.
So hat Caschy folgendes eingetragen:

nokia, iemobile, symbian, opera mini, opera mobi, windows ce, samsung, wap, symbian, wml, pda, ericsson, sonyericsson

Um zu Testen wie der Blog auf einem Smart-Phone aussieht, kann man den Opera Mobile Emulator installieren.
Speziell für iPad und iPhone gibt es die Freeware iBB Demo.
Hinweis zur Installation und Bedienung von iBB anzeigen

weitere Infos:

• Die Anzahl der Facebook Freunde anzeigen ohne Widget: Perun.net
• Wer Facebook-Share mit Zähler verwenden möchte:
  Anleitung vom admartinator

Je nach Permalink-Struktur kann es leicht zu Fehlern kommen.

Hier vier URL-Beispiele anzeigen

Folgendes Szenario:
Ich schreibe jetzt einen Beitrag der Heiligabend erscheinen soll.
Während ich den Beitrag mit dem Titel “Heiligabend” (vor)schreibe ist der 11. Dezember.

Zunächst – was passiert wenn ich einen Artikel schreibe?
Ich gebe einen Titel ein und kurz darauf wird mir unterhalb des Titels der Artikel-Link angezeigt.

Der so entstandene Artikel-Link entspricht meiner voreingestellten Link-Struktur.
Und hier gilt es aufzupassen ob der Link auch noch am 24. Dez. funktioniert!

1. http://beispiel-blog.de/?p=3623/
   kein Problem, stimmt immer!
2. http://beispiel-blog.de/heiligabend/
   auch unproblematisch
3. http://beispiel-blog.de/2010/12/heiligabend/
   solange ich mich im selben Monat bewege unproblematisch, ansonsten ändert sich der Monat im Link.
4. http://beispiel-blog.de/2010/12/11/heiligabend/
   Falsch! Den Beitrag schreibe ich zwar am 11. Dez. er soll aber erscheinen am 24. Dez.
   Die Linkadresse wird sich ändern sobald ich den Artikel vordatiere.

Bei einem einfachen Titel lässt sich die URL schon erahnen, aber wie lautet der URL bei einem längeren und komplizierteren Titel?
Beispiel-Titel:
“Das 24. Türchen im Adventskalender (Auflösung)”
Bei mir würde folgende URL entstehen:
http://beispiel-blog.de/2010/12/das-24-tuerchen-im-adventskalender-aufloesung/
Ganz sicher ist man nur, wenn man die URL von WordPress abgreift.

Springen wir nun zur Arikel-Übersicht, auf der auch die geplanten Beiträge erscheinen.
Wie kann ich in der Artikel-Übersicht die URL eines Beitrags kopieren?

Solange ich noch am Artikel schreibe, also dieser weder veröffentlicht, noch als Schedule (Geplant) markiert wurde, erscheint dieser als Entwurf in der Artikel-Übersicht. [Bild]
Dieser Entwurf hat folgende temporäre URL:

Diese Link-Adresse ist zur Weitergabe ungeeignet.

Sobald ich den Beitrag als geplant eingestellt habe (Schedule) ändert sich dieser in der Artikel-Übersicht. Beim dem Artikel steht jetzt nicht mehr Entwurf und unterhalb des Titels steht jetzt Ansehen statt Vorschau

Gehe ich jetzt mit der Maus auf Ansehen (ohne klick) so kann ich die Link-Adresse bequem mit der rechten Maustaste kopieren und weitergeben.

Unten in der Statusleiste sieht man auch die URL:

Fazit:
Die URL (Link-Adresse) eines zukünftigen Beitrags sollte erst weitergegeben werden nachdem dieser fertiggestellt ist.
Selbstverständlich lässt sich dann der Beitrag immer noch editieren. Anfangs muss eigentlich nur der Titel feststehen, der eigentliche Inhalt kann dann folgen.