free download button

Child Theme für das elmastudio Yoko Theme

| 19 Kommentare

Ich wurde in der letzten Zeit öfters (auch aus dem Ausland!) wegen meines Yoko Child Themes angeschrieben und um Hilfe gebeten. Kurz zur Erklärung, ich nutze das Yoko Theme von elmas­tudio. Das Theme ist wirk­lich gut ausges­tattet, hatte aber einen großen Makel: drei Spalten (zwei Side­bars). Leider konnte man das auch nicht ändern, ohne selber Hand an zu legen. Daher habe ich mir ein eigenes Child Theme gebastelt. Dabei war mir nicht bewußt, dass anscheinend so viele daran inter­essiert sind.

Aber erstmal möchte ich die Idee von Child Themes kurz erläutern. Ab Word­Press 3.0 wurde die Funk­tion der Child Themes integriert. Child Themes sind beson­ders prak­tisch, wenn man ein spe­zi­elles Theme an die eigenen Bedürfnisse anpassen möchte ohne das eigentliche Theme zu verän­dern. Bei einem Update des Haupt­themes (Parent Themes) können nämlich so die eigenen Anpas­sungen nicht ver­loren gehen. Ein eigenes Child Theme anzu­legen ist eigent­lich über­haupt nicht kom­pli­ziert. Elmas­tudio hat zur genauen Einrich­tung eine gute Anleitung veröf­fentlicht, die ich jedem nur empfehlen kann. Mit einem Child Theme kann man komplett eigene Ideen umsetzen. Egal wie umfan­greich, das eigentliche Theme bleibt unange­tastet und kann unbeschadet ein Update erfahren. Dabei spielt es keine Rolle, ob man nur das Aussehen (style.css) oder auch andere Funk­tionen (z.B. functions.php) verän­dern bzw. ergänzen möchte.

Ich möchte hier mein persön­liches Child Theme vorstellen und allen zur Verfü­gung stellen (kann aber natür­lich keine Garantie für den reibungslosen Einbau übernehmen). Ich habe drei Dateien angepasst, die ich hier kurz vorstellen möchte:

style.css

Mein elschy Child Theme hat haupt­säch­lich Änderungen im Layout (style.css) erhalten. Die sicht­barste Verän­derung zum Orig­inal ist die (in meinen Augen) unnötige kleine Sidebar in der Mitte. Ich habe jetzt nur noch zwei Side­bars. Daher ist die Sidebar 1 unter Design/Widgets nicht mehr zu benutzen. Alle Widgets müssen bei meinem Child Theme in der Sidebar 2 einge­setzt werden. Ich denke, dass die Meisten genau auf diese Änderung warten. Jedoch habe ich noch weitere kleinere Änderungen vorgenommen. Ich habe die Navi­ga­tion etwas verän­dert (aktuelle Seite wird grau hinter­legt und Schrift­farbe ändert sich) und die Posi­tion verän­dert. Der Trennstrich zwis­chen Head und Content wurde entfernt. Außerdem habe ich das Aussehen meiner Face­book Fanpage in der Sidebar verän­dert, da ich das normale. Diese Änderungen sind natür­lich nur für diejenigen von Bedeu­tung, die in der Sidebar eine Verlinkung zu einer Face­book Fanpage vornehmen. Wenn hier noch mehr Bedarf ist Erläuterung aufkommt, einfach in den Kommentaren melden.

functions.php

Ich empfand das Header Bild als zu groß. Daher habe ich die Höhe von 350 px auf 260 px verringert. Des weit­eren hat mich die Verlinkung des “more tags” gestört. Mit dieser Funk­tion können Blogein­träge so gekürzt werden, dass nur der erste Teil eines Artikels auf der Start- oder Archiv­seite angezeigt wird. Dabei wird direkt unter dem Auszug ein Link platziert, der den Leser zur Vollan­sicht deines Artikels verweist. Und genau hier ist das Problem, die Verlinkung springt nicht zum Anfang des gesamtes Artikels (wie ich es präferiere), sondern zum Ort des “more tags”.

footer.php

Mich haben die ganzen Meta Widgets nie überzeugt. Das Einloggen in der Sidebar sieht nicht toll aus, daher habe ich die Anmel­dung in den Footer geschoben.

Jetzt nochmal alle Änderungen und Funk­tionen meines Child Themes im Überblick:

  • Sidebar 1 wird nicht mehr angezeigt
  • Navi­ga­tion (aktuelle Seite: grau hinter­legt, Schrift­farbe geän­dert) und Posi­tion verän­dert
  • Aussehen der Face­book Fanpage verän­dert
  • Header Bilder auf 1024 px x 260 px verkleinert
  • Trennstrich zwis­chen Head und Content entfernt
  • Verlinkung des “more tags” geän­dert
  • Word­Press Anmel­dung (Meta) in der Fußzeile

kurze Instal­la­tion­san­leitung:

  • Child Theme herrun­ter­laden
  • im Word­Press Backend instal­lieren (entweder als zip über Design/Theme/Themes instal­lieren oder entpacken und z.B. über ftp in den Ordner wp-content/themes schieben) Wichtig!! Yoko Theme muss instal­liert sein!
  • Yoko Child kann unter Design/Themes aktiviert werden
  • done!
Toll, mein YOKO Child Theme wird jetzt auch in Japan genutzt! Kann zwar keiner lesen, aber der elsch ist eindeutig.


Kategorien: in eigener Sache | | Schlagwörter: , , , , , , , , , , , , , , , , | Permalink

  • suzanne

    I’m having a problem with the sidebar(s)
    It’s not totally visible… How do I fix this?

    http://fortunadames.iblogger.org/

    • suzanne

      never­mind… just moved all my widgets in sidebar 1 to sidebar 2, problem solved…

  • Pingback: (m)ein eigenes WordPress – Theme, Teil I – die richtige Anzahl Spalten | Oh nein!

  • fabian

    Vielen Dank für die tollen Änderungen! Ich kämpfe noch mit einem Problem. Vielle­icht kannst du mir dafür einen Tipp geben? In der Übersicht meiner Kate­gorien erscheint anstatt einem “mehr” oder “weit­er­lesen” nur ein [...] ohne Verlinkung auf den ganzen Post. Auf der Start­seite hingegen funk­tion­iert es tadellos.

  • illo

    hey elschy, erstmal danke dafür. könntest du mir bitte verraten in welcher zeile bzw wo man im .css file heraus­findet, wo man den trennstrich zwis­chen header und content bear­beiten kann. und wo kann man danach das submenu im abstand verän­dern? (da ja der trennstrich wegfällt, um paar pixel). vielen dank schon mal! lg

  • http://twitter.com/themenfreund themen­freund

    Kannst Du mal erklären, welche Änderungen Du vorgenommen hast, um die kleine Sidebar zu entfernen?

    • elschy

      Klar, geht auch recht schnell. Ich habe in der “style.css” in der Zeile 95 die Breite (width) der Sidebar (secondary) auf 0% gesetzt und den Haupt­teil (main) und die andere Sidebar (tertiary) entsprechend angepasst. Dadurch wird diese Sidebar nicht mehr angezeigt. Ich empfehle immer bei Prozen­tangaben zu bleiben und keine Pixel­w­erte zu definieren, da man sonst das Respon­sive Design verliert (hier passt sich das Theme automa­tisch an die Bild­schir­m­größe an).

  • http://www.keiichi.st/ Keiichi SHIGA

    Wooooooooooooooow!!
    I just noticed this article.
    Thank you for an intro­duc­tion. :)

  • Kelly

    I am new at the Yoko theme, and have no clue of what CSS is, or how to change the codes. Anyhow, I have a few ques­tions. I do not have a Yoko child theme.

    Q#1: How do I insert the custom box (for comments in posts) in the bottom of my posts? I see the button in the toolbar when I am writing. It inserts a code into my post, but the custom box does not show up at the bottom of my posts. Do I need to paste this code in some­where else?

    Q#2: I am having diffi­cul­ties adding videos to my posts. I name them and then they just show up as the text. I cant seem to have a video thumb­nail inside the post itself. How do I do that?

    Q#3: I cannot seem to write text under any of the pictures I insert into my posts, How do I remedy that? Right now I am still writing posts on my old google blog and pasting them into the Yoko post format. It is the only way I can seem to put writing under each indi­vidual picture.

    I have a million more, but that will get us started : ) Thank you sooo very much!

  • Caro­line

    Oh and one more thing, when ever I put in a text widget with an image, the text of all widgets changes, smaller fonts, and the footer moves to the sidebar… very weird…

    • Caro­line

      Never mind the above comment, it is fixed :D

      • elschy

        Okay, I will answer your previous ques­tion about borders tomorrow. Thanks for your further infor­ma­tion, now I under­stand your issue.

  • Constan­tine

    Hallo,

    ich arbeite auch gerade mit dem Yoko Theme für eine neue Website. Ich möchte allerd­ings nur die Banner­höhe ändern. Ich habe diese von “auto” auf 120px im style.css mit Hilfe des editors geän­dert.

    Wenn ich jetzt allerd­ings ein Header­bild uploade habe ich das Problem, dass die Grafik immer verz­errt wird. Die Grafik ist von Haus aus mit dem Format des Header (also 1024x120px) erstellt und exportiert. Irgen­deine Ahnung warum mir das passiert?

    Grüße

    • michael

      Hallo,

      wenn ich dich richtig verstanden habe, liegt der Fehler darin, dass du nicht die functions.php verän­dert hast. Du musst folgende Zeilen in der php Datei ändern oder ergänzen, je nachdem, ob du mit einem Child Theme arbeitest oder nicht.

      define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘yoko_header_image_width’, 1024 ) );
      define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘yoko_header_image_height’, 120 ) );

      Ich hoffe ich konnte helfen?

  • Caro­line

    Thank you very much for the hard work. Great job!

    Could you please help me out? I need the sidebar to show banners of 300px wide. And I would also like the posts and widgets to have borders.
    I’ve tried and tried to no avail…

    • elschy

      Thanks for your appre­ci­a­tion!

      Let me try to help you. You have to change two numbers.
      Under “Design” and “Editor” you have to open the style.css. Then you change the percent­ages into pixels. In detail you replace 79% with 802px (#main) and 21% with 300px (#tertiary). For a better under­standing, I made two screen­shots.

      Screen­shot 1
      Screen­shot 1

      Honestly, I do not under­stand your second problem, because I have borders between post and also widgets. So please describe your problem again, so I can prob­ably help. ;-)

      I hope I could help you? Let me know, when there is any problem left.

      • Caro­line

        Thank you very much for solving my “width” problem and taking the time to make screen­shots :D Much appre­ci­ated!

        What I mean is that I would like the posts and the widgets to be bordered all around seper­atly. So every post is borderd and every widget. Not just a border at the bottom. I hope this is more under­stand­able.

        Thanks in advance!

        • elschy

          Now your answer, the solu­tion is easy, but has little draw­backs. You have to change the style.css in “design”, “editor”. In line 319 (#content .post) delete bottom in “border-bottom” and the same in line 958 (aside.widget). You will see in my screen­shot, that now the text is very close to the border, so you have to make more adjust­ments, which I sadly can not provide here, because of time prob­lems.

          I hope, I could help?

          Screen­shot

          • Caro­line

            Thank you a 1000 times!
            Works like a charm. I also changed the padding so the text wouldn’t be so close to the borders :D
            It is perfect now :D