{"id":2075,"date":"2011-01-10T09:26:00","date_gmt":"2011-01-10T08:26:00","guid":{"rendered":"http:\/\/www.petersplace.net\/wordpress\/2011\/01\/schne-initialen-selber-gebaut\/"},"modified":"2023-06-07T08:38:35","modified_gmt":"2023-06-07T06:38:35","slug":"schne-initialen-selber-gebaut","status":"publish","type":"post","link":"https:\/\/www.nerd-o-mania.de\/wordpress\/2011\/01\/schne-initialen-selber-gebaut\/","title":{"rendered":"Sch\u00f6ne Initialen selber gebaut.."},"content":{"rendered":"<h2>.oder: wenn ein WordPress-Plugin nicht mehr ausreicht, muss man selber ran!<\/h2>\n<p style=\"text-align: justify;\">Wer sich noch an meinen meinen alten Blog erinnert, kann sich vielleicht noch an die Initialen erinnern, die zu Anfang eines Artikels standen. Sie dienten eigentlich nur der Optik, genauso wie ich auch das 2spaltige Text-Layout von Zeitungen nur aus Designgr\u00fcnden \u00fcbernommen habe. Damals habe ich per Screenshots\u00a0 die einzelnen Buchstaben als Grafiken abgespeichert, und Sie an den Anfang einer Tabelle eingesetzt \u2013 mit den Attributen, dass Sie oben links stehen, und der Textfluss drum herum geschehen soll.<\/p>\n<p style=\"text-align: justify;\">Dieses Vorgehen funktionierte auch problemlos (wenn es auch eine ziemliche Arbeit war). Nachdem ich aber am letzten Wochenende s\u00e4mtliche Blog-Beitr\u00e4ge und Kommentare aus meinem fr\u00fcheren \u201cSpace\u201d (der nach der Abkehr von Microsoft von den Live Spaces von WordPress migriert wurde) importiert hatte, stellte ich fest, dass leider s\u00e4mtliche Artikel als Artikelbild die Bilder mit den Initialen \u00fcbernommen hatten.<\/p>\n<p>Nun, das liegt daran, dass WordPress die erste Grafik des Berichtes als Vorschau-Grafik nimmt.<\/p>\n<p style=\"text-align: justify;\">Na, das fand ich dann doch nicht so doll, denn leider waren die anderen in den Artikeln verwendeten Grafiken auf meinem Sky Drive Laufwerk, weshalb ich Sie nicht als Artikelbild einbinden konnte. Und alle Grafiken (die so einige Tausend sind) auf meinen privaten Blog kopieren, um Sie einbinden zu k\u00f6nnen? Also n\u00f6\u00f6, Leute!<\/p>\n<p>Was also tun?<\/p>\n<p style=\"text-align: justify;\">Nach Recherche im Netz fand ich eine Anleitung, wie man mit CSS schicke Initialen formatieren kann \u2013 doch wie das ganze in WordPress einbinden? Meine ersten Versuche schlugen fehl \u2013 nichts zu sehen von den gew\u00fcnschten Initialen. Daf\u00fcr hatte die Fehlerkorrektur des TinyMCE-Editors meinen eingef\u00fcgten Code jedes Mal gel\u00f6scht, da er ihn als falsch bewertete.<\/p>\n<p>Erneut stellte ich mir die Frage: Was tun?<\/p>\n<p style=\"text-align: justify;\">Bei WordPress ist das erste was man in diesem Fall macht, ein Plugin zu suchen, was genau die Funktion bereit stellt, die man ben\u00f6tigt. Also suchte ich durch die Eingabe von den Schl\u00fcsselw\u00f6rtern: WordPress Plugin Initiale bei google\u00a0 nach einem geeignetem Tool. Doch das einzige was ich fand war das Plugin TinyCode, welches zwar Initialen im Text platzieren konnte, die aber trotz angepasster CSS leider nicht so darstellte, wie ich es wollte \u2013 scheinbar interpretierte WordPress den Quelltext anders, oder im Plugin selber war ein Fehler, da es mir den gew\u00fcnschten Buchstaben immer doppelt darstellte.<\/p>\n<p><a href=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-tinymce.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2067\" src=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-tinymce.jpg\" alt=\"\" width=\"128\" height=\"128\" title=\"\" srcset=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-tinymce.jpg 128w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-tinymce-100x100.jpg 100w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-tinymce-66x66.jpg 66w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><\/a><\/p>\n<p><em>(wenn man mal Text etwas anspruchsvoller formatieren will \u2013 dank TinyMCE geht das.)<\/em><\/p>\n<p style=\"text-align: justify;\">So konnte das nat\u00fcrlich nicht bleiben. Also weitersuchen, um eine L\u00f6sung f\u00fcr das Problem zu finden. Die L\u00f6sung fand ich \u2013 mehr durch Zufall \u2013 im TinyMCE. Der bietet n\u00e4mlich \u00fcber dieses Icon die M\u00f6glichkeit Style Sheets zu erstellen:<\/p>\n<p style=\"text-align: justify;\">Mit folgenden Werten baute ich mir eine angepasste Initiale, deren Style ich in einer Text-Datei abspeicherte, und mittels Paste and Copy an die entsprechenden Stellen einf\u00fcge:<\/p>\n<table style=\"width: 480px;\" border=\"0\" cellspacing=\"3\" cellpadding=\"3\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"480\"><a href=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-large wp-image-2069\" src=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1-409x300.jpg\" alt=\"\" width=\"409\" height=\"300\" title=\"\" srcset=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1-409x300.jpg 409w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1-327x240.jpg 327w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1-200x147.jpg 200w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1-400x293.jpg 400w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1.jpg 491w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"480\"><a href=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-large wp-image-2071\" src=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-2-414x300.jpg\" alt=\"\" width=\"414\" height=\"300\" title=\"\" srcset=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-2-414x300.jpg 414w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-2-331x240.jpg 331w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-2-200x145.jpg 200w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-2-400x290.jpg 400w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-2.jpg 493w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"480\"><a href=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-large wp-image-2073\" src=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-3-413x300.jpg\" alt=\"\" width=\"413\" height=\"300\" title=\"\" srcset=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-3-413x300.jpg 413w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-3-330x240.jpg 330w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-3-200x145.jpg 200w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-3-400x291.jpg 400w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-3.jpg 491w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em>\u00a0<\/em><\/p>\n<p style=\"text-align: justify;\">Klar, es gibt sicher elegantere L\u00f6sungen, aber f\u00fcr meinen Zweck ist es v\u00f6llig ausreichend. Das ganze ist in 2 Schritten gemacht, und die Optik gewinnt echt dadurch..<\/p>\n<p><em>Datum letzte \u00c4nderung:\u00a0 10.01.2011 18:27 Uhr<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>.oder: wenn ein WordPress-Plugin nicht mehr ausreicht, muss man selber ran! Wer sich noch an meinen meinen alten Blog erinnert, kann sich vielleicht noch an die Initialen erinnern, die zu Anfang eines Artikels standen. Sie dienten eigentlich nur der Optik, genauso wie ich auch das 2spaltige Text-Layout von Zeitungen nur aus Designgr\u00fcnden \u00fcbernommen habe. Damals &hellip;<\/p>\n","protected":false},"author":11,"featured_media":2069,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_post_was_ever_published":false},"categories":[5],"tags":[223,319,320],"class_list":["post-2075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer","tag-plug-in","tag-wordpress","tag-wordpress-theme"],"jetpack_featured_media_url":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2011\/01\/css-GUI-1.jpg","jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/2075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/comments?post=2075"}],"version-history":[{"count":0,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/2075\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/media\/2069"}],"wp:attachment":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/media?parent=2075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/categories?post=2075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/tags?post=2075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}