Tutorial- Titel optisch verschönern

Tja, ich habe es wieder getan. Ich habe meine Blogtitel wieder optisch aufgehübscht. Wie das funktioniert, will ich hier mal ausführlich verraten.

Als erstes braucht man das Plugin „TTFTitles“ von Templature. Dieses, wie jedes Plugin, entpacken und in den Pluginordner hochladen. Wenn der Ordner fertig hochgeladen wurde, muss ein Ordner mit Namen „cache“ angelegt werden und dieser, genau wie der „fonts“-Ordner, bekommt die Berechtigung 777.

Nun muss das Plugin im Adminbereich freigeschalten werden und dann kann das Einstellen losgehen.

Die Einstellungen für die Titel findet man unter Themes. Da bekommt man schon mal einen kleinen Überblick wie die Titel mit ein paar Beispielschriftarten aussehen könnten.

Aleitung schönere Blogtitel - Übersicht Adminbereich

Die kannst du bearbeiten wenn du keine andere Schriftart verwenden willst. Einfach unter „Edit“ deine Einstellungen eingeben. Es gibt u.a. die Möglichkeit die Schrift mit einem Schatten zu versehen, oder als 3D Optik oder ganz ohne Effekte. Und natürlich gibt es noch sowas wie Größe, Hintergrund und Schriftfarbe.

Wenn man aber lieber eine andere Schriftart nehmen will, eine die man auf dem PC auch verwendet, dann geh unter „Fonts“ und lade sie da hoch. Nun zurück auf „Styles“ und dann auf „Add New Style“. Hier ist es wichtig bei „Font Name“ auch die hochgeladene Schriftart auszusuchen und unter „Style Name“ einen Titel einzugeben. Der muss aber nicht zu lang und zu ausgeschmückt sein. Den Rest halt wieder wie gewünscht.

Jetzt muss der Code, damit die Titel auch wie gewollt aussehen, noch ins Theme eingebaut werden. Je nach dem wo man die Titel verschönert haben will, sollte sich die passende Datei rausgesucht werden. Ich habe z.B. Single.php, Archive.php und Index.php. Hier suchst du dann den Code der den Titel ausgibt (php the_title) Nach dem Code gibst du diesen ein:

<?php the_ttftitle ($before = "", $after = "", $echo = true, $style = "Stylename", $overrides = ""); ?>

Bei „style“ muss dann der Name rein dem du einer Schriftart beim Anlegen gegeben hast. Abspeichern und bevor du dann die alle Dateien abänderst, schaue lieber vorher auf deinen Blog ob dir das Ergebnis gefällt.

Ich hatte zuerst die Single.php geändert das es nicht gleich auffällt und dann noch mal einiges geändert, wie z.B. Schriftgröße, Art und Farbe. Manche Fonts sehen auch nicht besonders schön aus wenn man sie so im Blog sieht, daher lieber erst testen bevor alles angepasst wird 😉

PS: Wenn Fragen sind oder ein Fehler auffällt, dann kannst du die gerne in den Kommentaren stellen/berichtigen. 🙂

71 Gedanken zu „Tutorial- Titel optisch verschönern

  1. Hallo Cindy,
    danke für den Link und die Beschreibung. Ich bastel gerade an einem neuen Theme (PinBoard), zu dem dieses Plugin perfekt passt.

    Cheers,
    Chris

  2. An sich eine klasse Sache, für mein Theme aber nicht geeignet.

    Du solltest aber auch noch die page.php anpassen, damit die Title der Seiten auch entsprechend angezeigt werden.

  3. Oh super, das Tutorial kommt mir wie gerufen 🙂
    Werd es testen wenn ich wieder daheim bin:)

  4. @Markus: ja, wäre noch ne Idee 🙂

    @k9leader: ich bin gespannt obs mit dem Tutorial klappt 😉

  5. Pingback: Die Welt der WupperPiraten

  6. Moin Cindy!
    Dein Tutorial ist toll, nur hab ich da ein blödes Problem.Ich habe die Permissions auf 777 umgestellt, trotzdem ist der Cache-Ordner angeblich nicht beschreibbar.O-Ton:
    Cache directory „/home/pixellab/public_html/wp-content/plugins/ttftitles/cache“ is not writable.
    Weiß du vielleicht Rat? :hmm:

  7. oh mensch ich hab nun so komische fragezeichen davor und dahinter… typisch, irgendwas klappt ja nie :boese: habs bei page.php & single.php… vielleicht weißt du ja rat Cindy?

  8. jaaa nun klappts- hab den code etwas verändert :blink:
    meine theme mag es eben anders 😛

  9. ist nen klasse Plugin… und etwas funzt es auch schon… aber
    habe trotzdem nen kleines Problem.
    Der ursprüngliche Text von der Überschrift ist auch noch zusehen..
    also ich habe da jetzt die Überschrift 2 mal stehen

    Aber natürlich erst in meinem Tesblog.. *gg*

    Weisst Du da Rat?.. ich bin etwas doof was die php-Dateien angeht *zwinker*

    Danke schon mal..

    LG.. Kirsten

  10. Hmm, hast du den Code vielleicht nicht richtig eingebunden?
    Hast du den Code von mir oben genommen?

  11. Juhuuu Cindy
    Jau.. so habe ich es gemacht gehabt.. nach dem Code… den anderen Code eingegeben.
    Sodele..jetzt habe ich mal den code :
    rausgenommen… und nur deinen Code genommen … jetzt geht es.
    Jetzt sehe ich nur noch die Überschrift die ich haben will *ggg* (Die Schrift gefällt mir allerdings so noch net.. aber das ist ja nun ein leichtes *zwinker*)
    Hoffentlich kann man das so machen?!

    *knuddääls*.. Kirsten

  12. Ich hab da so ein kleines Problem mit dem Plugin. Es funzt ja schon ganz gut, aber Umlaute werden nicht dargestellt. Das ist schon etwas blöde, wenn man viele Beiträge mit „Ankündigung“ und „Vertragsverlängerung“ im Titel hat 🙁 Hast du das Problem auch? Die Schrift beherrscht Umlaute definitiv. Bin grade ein wenig ratlos, tippe aber drauf, dass das Plugin hier etwas mit der Codierung durcheinanderwirft.

    Kannst ja in meiner Sandkiste mal einen Blick drauf werden. Auch wenn ich z.B. „& uuml;“ (ohne Leerzeichen) im Titel verwende, bringt mich das nicht voran. Das wird dann nämlich 1A so dargestellt.

    Hilfe! 😉

  13. Und schon wieder ich. Aber das könnte auch für andere interessant sein:

    Das Plugin kann nicht (!) mit OpenType (also .otf) Schriftarten umgehen. Ich habe mit einer Demo-Version von TransType meine Schriftart in .ttf umgewandelt und nun werden Umlaute angezeigt.

    Allerdings habe ich nun das Logo des Herstellers in einigen Buchstaben…

    Kennt jemand ein Tool, mit dem man kostenfrei .otf-Files in .ttf-Files umbasteln kann? Oder hat womöglich jemand so ein Programm und würde meine Schrift damit ummodeln? Wäre dankbar 🙂

  14. Also ich hatte mit Umlauten auch Probleme bis ich aber die Schriftart gewechselt habe.

    Kennt jemand ein Tool, mit dem man kostenfrei .otf-Files in .ttf-Files umbasteln kann?

    Ich kann mir nicht vorstellen das es sowas kostenlos gibt, da meist Grafikagenturen solche Programme brauchen. Also höchsten mal so eine Agentur anschreiben und fragen 😉 Aber ich denke dann lieber die Schrift wechseln 😉

    Vielleicht mal Blogger anschreiben wie Manuela Hoffmann oder DrWeb.

  15. So, hab’s geschafft. Jetzt erstrahlt meine Testseite schon einmal mit der richtigen Schriftart und auch die Umlaute funktionieren jetzt. Lag tatsächlich an dem .otf-File. Hab es in .ttf umgewandelt bekommen und nun klappt’s 😀

  16. Ich habe das Plugin gestern auch installiert und einige Zeit mit dem Code verbracht. Wie viele hier schon schrieben hatte auch ich Probleme mit den „Gänsefüßen“ Problem bei mir war, dass er diese Anführungszeichen wie im Code dargestellt “” nicht mochte, ich habe daraus einfach „“ gemacht und vola es geht.
    Cindy danke für die tolle Beschreibung :love:

  17. Ach mensch siehste, das wollte ich ja noch anpassen. Danke für die Erinnerung 🙂

  18. .. wenn jemand TTFTitles mit echter Transparenz benötigt, einfach kurz melden. Ich kann euch dann erklären, wo was zu ändern ist bzw. euch auch gerne das geänderte Plugin zuschicken.

    Cheers,
    Chris

    PS.: Das geänderte Plugin erstellt die Grafiken generell mit transparentem Hintergrund, ein farbiger Hintergrund in der Grafik ist nicht mehr möglich. Hatte irgendwie keine Lust, dass so richtig richtig einzubauen 😉

  19. Jetzt muss ich doch hierr mal fragen.. Also ich hatte das Plugin auch installiert und es lief einwandfrei. Hab einen neuen style erstellt und es lief immer noch. Dann gefiel mir dieser Style (Schrift) doch nicht so, also hab ich einen weiteren Style erstellt, vorher noch Schrift hochgeladen. Aufeinmal hat er mir die ganzen Styles nicht mehr angezeigt, nur noch einen, den von mir grad erstellten, aber ohne Vorschaubild. Darüber kam eine Fehlermeldung:
    Fatal error: Maximum execution time of 30 seconds exceeded in /mnt/web2/22/50/5778950/htdocs/wordpress/wp-content/plugins/ttftitles/ttftitles.php on line 585
    Also hab ich das Plugin deaktiviert und komplett vom Server gelöscht, weil ich davon ausgegangen bin, dass ich was falsch gemacht habe.
    Wenn ich es nun aber neu installiere bekomme ich immer die gleiche Fehlermeldung und auch dieser eine Style (den ich ja damals selbst erstellt habe) wird angezeigt, nichts weiter….
    Wie kann das sein und was könnte hier das Problem sein? :hmm:

  20. Hmm, also wenn du schon in der Datenbank alles gelöscht hattest, dann könnte es vielleicht noch an der Schriftart liegen. Hast das mal getestet?

  21. Hallo Cindy, danke für das Tutorial. Soweit hat alles geklappt, aber habe jetzt hier auch 2 Überschriften 😡 Liegt das eventuell am Code?
    Sind das nun wirklich „Gänsefüßchen“ oder ’nur so‘
    Habe erstmal wieder alles rückgängig gemacht.
    LG Ute

  22. Also der Code oben stimmt, mit den Gänsefüsschen. Kann es sen das du den Code vielleicht 2x drin hast? Oder ist eine normale Überschrift und eine in der neuen? Also das es die alten Titel nicht ausblendet.

  23. Also ich sehe die alte Überschrift und die neue, die alten Titel werden nicht ausgeblendet.
    Habe den Code auch so genommen mit den Gänsefüßchen, eigentlich alles prima, aber funzt trotzdem nicht. 😡 Steh jetzt vollkommen auf dem Schlauch.
    LG Ute

  24. Wenn er 2 anzeigt, funktioniert es ja, nur eben doppelt 😉 Hast du den Code nach dem oben angegeben eingefügt?
    Da wo du den Code eingefügt hast, steht das 2 x „“ drin?

  25. Ja, ja es funktioniert, aber will meine alten Titel raushaben. Steht nur einmal da “”

  26. Kommando zurück, steht wirklich zweimal da, vor lauter gucken gar nicht gesehen, ich probiers nochmal.

  27. Eins müsstest durch den Code ersetzen.
    Sonst schick mir mal die single.php wenns nicht geht.

  28. Es klappt jetzt, super, danke für den Tipp, habe jetzt nur ein Prpblem mit den Umlauten 😡
    Habe aber eine von den vorgegebenen genommen.

  29. Ja, nicht alle True Type Fonts können Umlaute und nicht jeder Font der Umlaute auf deinem PC darstellt ist auch ein True Type Font, auch wenn der auf ttf endet kann es sein dass es ein otf ist. Im Windows Font Ordner erkennst du sie daran dass sie ein O als Icon haben statt einem TT.
    TTF Titles kann Umlaute in OTF nicht darstellen. Musst dir ein TTF mit Umlauten suchen. Hab einfach MS Trebuchet genommen, die funktioniert.

    @Cindy
    Das 042-clean-umlauts ersetzt nur Umlaute in den Permalinks durch ae, oe, ue und ss statt sie einfach wegzulassen. Das hat nichts mit dem Titel zu tun.

  30. Nicht ganz so tragisch mit den Umlauten, bin schon am ändern, muß man halt aufpassen beim Titel schreiben.
    Wünsche noch einen schönen Abend!
    LG Ute

  31. @Cindy: Wie meinst du das mit der Schriftart. Ich hatte ja alles gelöscht was ich hochgeladen hatte, weil ich mir auch dachte, es liegt an der Schriftart….

  32. @anja: hast du auch mal in der Datenbank geschaut ob da noch Dateien rumhängen von dem Plugin? vielleicht die mal löschen. Und dann mal eine andere Schriftart probieren als die die du nehmen wolltest.

    @Puh: ah ok.

  33. liebe cindy 🙂
    durch meine verzweifelte suche nach einem tut zu diesem tollen plugin bin ich auf deine seite gekommen und möcht dir erst mal herzlich danken für diese tolle erklärung.das plugin funkt super!!!das einzige: wenn ich zb auf ne kategorie geh werden die überschriften standard noch gezeigt.ixh trau mich natürlich nicht den code noch woanders einzufügen außer bei der single php und page.php und der index.leider hab ich noch nicht gerafft welche php was anzeigt aber da werd ich noch experimentieren 🙂
    Herzlihes Dankeschön Cindy!!
    glg aus Wien von Babsi die sich den bloglink nun abgespeichert hat freu

  34. also

    single.php = der einzelne Beitrag
    page.php = die Unterseite
    index.php = die Startseite

    wenn du es noch woanders ändern willst dann wäre das die

    search.php = Suchergebnisseite
    archiv.php = für die Archivseiten (wenn man auf Monate und Kategorien geht)

    Vielleicht hilft dir das weiter 😉

  35. huhu cindy 🙂
    wooow du bist ja supischnell

    danke für den tipp mit der archive php.mir ist dieses php noch etwas fremd.

    hab noch einen schönen abend 🙂

  36. Himmel, Arsch und….

    Bei mir geht es nicht.
    Hab es korrekt in die single.php eingebaut, der cache wird auch mit PNG´s gefüllt.
    Wenn ich den title mit der rechten Maus anklicke, steht da auch cache/9r5949.png

    Nur im Adminbereich zeigt er mir bei den Styles alles in grau an – nicht wie bei Dir in grün mit Beispielschriftart.

    Hmpf. 🙁

  37. also im Admin zeigt es das bei mir auch nicht mehr grün. Da das oben schon ne Weile her ist, weiss ich auch nimmer wo das aufgenommen wurde. Jedenfalls ist bei mir auch alles grau.

    Und was geht bei dir nicht?

  38. Naja. Es verändert sich nichts.
    Ich habe als Test den basic bzw. Demo Schriftsatz hinterlegt und aktiviert.

    Tut sich nix 🙁

    Wenn Du mit der rechten Maustaste auf den title einer Single-Page klickst, siehst Du aber, dass er den Schriftzug bereits im Cache speichert….daran liegt es also nicht.

  39. AHHHHH. Man muss den Hauptordner auch mit 777er Rechten versehen.
    Sag das doch mal jemand 😀

    Danke Cindy…das wars! 🙂

  40. Och, wennst mir ein Eis ausgibst wenn ich in der Nähe bin, reicht das 😉 Ich muss sie ja auch noch in Gif umwandeln, fällt mir grad ein :nervoes:

  41. So. Fertig. Schriftart und Farbe passt 🙂

    Eis bei mir in der Nähe?
    Bei den aktuellen Temperaturen wäre ich mehr für nen Tee zu haben 😀 😉

  42. Huhu,

    vielen dank für das turorial,hat mir super geholfen und erklärt ist es auch noch klasse 🙂

  43. Das Umlaut-Problem hat mir auch Sorgen bereitet bzw. tut es noch immer: Ich möchte die Typo3-Schriftart Share benutzen, da sollten die Umlaute/Sonderzeichen auch funktionieren, weil es eine .ttf ist. Allerdings werden sie nur bei Kleinbuchstaben angezeigt, ein großes Ü wird z.B. nicht dargestellt.

    Hat irgendwer eine Idee?

    Danke, Michael

  44. Huhu cindy,
    danke für diese Beschreibung, aber kann das sein, dass der Plugin nicht in allen Themes läuft. Ich habe mich genau an deine Anleitung gehalten, habe überall den Code gändert, aber leider erscheint bei mir die Überschrift nicht in einer anderen Schriftart.
    Oder fällt dir etwas ein, was ich evtl. falsch gemacht habe?
    Muss der Code bei beiden „php the_title“ eingetragen werden oder nru einmal? beim ersten oder zweiten?
    Danke für die Hilfe

    LG
    JULIA

  45. ich habe jetzt mal nach diesem Tutorial gearbeitet – danke dafür. 🙂 Jedoch steht jetzt immer noch der „normale“ Titel da, als Link. Der neue Titel, mit diesem Plugin, wird nicht als Link dargestellt. Hab ich was falsch gemacht oder muss ich noch was beachten?

  46. Huhuu Cindy,

    auch ich möchte meinen Blog ein wenig verschönern 😉 und wollte mir dieses TTFtitles gerade mal laden – nur leider funktioniert der Download-Link nicht mehr 🙁 gibt es noch eine andere Möglichkeit dieses schöne Plugin zu bekommen??

    Ganz liebe Grüße
    Steffi

  47. @Verena: da wirst wohl noch den Code vergessen haben zu löschen. Du hast den Code nur in einer Datei geändert oder?

    @Steffi: scheinbar wurde es vom Netzt genommen. Auch bei WordPress in der Datenbank ist es gelöscht :ohh:

    Entweder ist es nicht mehr kompatibel mit den neueren WordPress-Versionen oder es gibt noch einen anderen Grund. Ich könnte dir anbieten meinen Download per email zu schicken. Ich kann aber für nichts garantieren das es funktioniert 😉

  48. Cindy, das wäre total lieb von Dir! Ich habe auch nicht die neuste Version von WP(2.6) und es sollte doch eigentlich funktionieren… :smug: Muss mich sowieso erst mal „einarbeiten“ 😀 ist nämlich mein erster WP Blog…

    Vielen lieben Dank für Deine Hilfe und herzliche Grüße
    Steffi

  49. Huhuu Cindy,
    wollte nur kurz Bescheid sagen, das alles läuft :mrblob: sieht richtig klasse aus!! Vielen lieben Dank noch mal :*

    Ganz liebe Grüße
    Steffi

  50. Huhu Cindy,
    mensch… Ganz, ganz liebes Dankeschön für diess tolle Tut! Endlich hab ich es geschafft das bei mir auch anzupassen. Hab das schonmal versucht, kam aber nicht weiter. Am Ordner „cache“ haperte es *fg*
    Dankeschöööön :*
    Viele liebe Grüße
    Tanja

  51. na ich hab das plug in runtergeladen
    hab die datein mit 777 gemacht
    hab meinen font hochgeladen und auch unter style kreiirt und hochgeladen

    dann deinen code reinkopiert und bei stylenamen meinen namen eingegeben

    aber es ändert sich nix

  52. wenn ich das jetzt auf die schnelle richtig gesehen habe dann setzt dein plugin die überschrift ins alt-attribut der grafik .

    Schön wäre es wenn es sich einer ImageReplacement-Technik bedienen würde damit man die Überschrift noch als klartext hat.
    gruss axel

  53. Pingback: Leben 2.0 » Blog-Archiv » Neuerungen am Blog: Plugins und CSS/PHP sei Dank!

  54. Hallo,

    ich habe das Plugin runtergeladen, komme jetzt aber nicht weiter. Den Ordner „cache“ wohin muß ich den bitte hochladen, wo gehört er denn hin?
    Dankeschön

  55. Pingback: funkelwunder.de » eigene schriftart im titel

  56. ich habe eine ganz ganz dringende frage, hoffentlich liest das jemand 🙂 ich bin totaler wordpress neuling und wolte fragen wo genau ich den ordner „cache“ anlegen muss…?!

    liebe grüße & tolle seite 🙂

  57. also hab das hochgeladen aber ich weiß jetzt bicht wo die 777 hinkommen…bzw wie ich das genau installiere .. kannst du mir vielleicht weiter helfen? das wäre total lieb 🙂

    liebe grüße

  58. Habe ewig danach gesucht, wie ich den Link aus den Titeln bekomme. Mit deinem Code klappt es – vielen Dank! 🙂

Kommentare sind geschlossen.