1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Eigenes Template in Wordpress Theme umwandeln

Dieses Thema im Forum "Design" wurde erstellt von CapoPM, 6. April 2017.

  1. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Guten Tag,

    ich habe mehrere Monate damit verbracht mir ein eigenes Template zu erstellen. Dafür habe ich html und css gelernt. Ich bin in beiden Bereichen immer noch Anfänger, habe es aber geschafft mit Hilfe von google, viel lesen und ausprobieren ein Template zu erstellen, dass genau meinen Vorstellungen entspricht.

    Ich habe dies in der Abischt erstellt, damit meinen eigenen Blog zu starten. Was ich nicht bedacht habe ist, dass ich einen Wordpress Blog starten wollte. Ich möchte gerne die Funktionen wie Widgets und Plugins von Wordpress nutzen und habe keine Ahnung was ich als nächstes tun könnte, damit das Design erhalten bleibt, aber eben für einen Wordpress Blog.

    Ich habe also eine html und eine css Seite. Soweit ich weiß benötige ich aber eine php Seite. PHP kenne ich noch nicht, werde aber auch hier die nötigen Grundlagen erlernen, wenn dies erforderlich ist. Ich habe bisher viel Zeit und Energie und bin gewillt auch weitere Zeit und Energie zu investieren. Allerdings wäre ich wirklich sehr dankbar für nützliche Tipps oder eine Art Leitfaden, was ich jetzt machen könnte, um mein Template/Design auch für meinen Blog zu realisieren.

    Ich habe schon etwas über Widget Areas gelesen, muss mich aber noch mehr mit der Materie auseinander setzen.

    Meine Fragen an euch sind:

    - Was ist der Unterschied zwischen einer html und einer php Datei?
    - Muss ich zwingend php lernen, um meinen Wunsch zu realisieren? Wenn ja, reichen Grundlagen, wie fange ich am Besten an?
    - Wie realisiere ich letzt endlich, dass ich auf alle Funktionen (Widgets, Plugins) von wordpress zugreifen kann und dabei mein eigenes Design erhalten bleibt?


    Grüße aus Berlin
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Man muss das HTML-Template in sog. WordPress Theme-Dateien aufteilen. Dafür mal nach "WordPress Theme erstellen" o.ä. suchen. PHP-Kenntnisse sind Voraussetzung.
     
  3. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Ohne dich entmutigen zu wollen: Da hast du dir als Anfänger einiges vorgenommen.

    In der Regel ist es als Anfänger besser/einfacher, ein bestehendes Theme zu nehmen und mit HTML/CSS/PHP so anzupassen, dass es wie gewünscht aussieht.

    Es ist natürlich auch möglich, aus einer vorhanden HTML und CSS Datei ein Wordpress-Theme zu "machen". Das erfordert aber relativ gutes Verständnis, wie Wordpress und Wordpress-Themes funktionieren.

    PHP ist in dem Fall Pflicht.

    Wie @b3317133 schon sagt, musst die die einzelnen Teile deiner HTML Datei aufteilen und an die Template-Hierarchie anpassen.

    Dazu ist es sinnvoll, dass du dir mal ein oder zwei Themes anschaust (Twentysixteen und/oder Twentyseventeen bieten sich da als "Stadard"-Theme z.B. an) und parallel mal einen Blick auf den Codex wirfst, vor allem die Theme-Hierarchie: https://developer.wordpress.org/themes/basics/template-hierarchy/

    Vielleicht wird dann vieles schon (etwas) klarer.
     
  4. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Danke euch zwei für die Antworten!

    @danielgoehr Wenn ich eine Standard Theme nehme und diese dann so anpasse, dass es wie mein Design aussieht, dann wäre das absolut in Ordnung. Dann war die Erstellung dees Templates halt ein Lernprozess für html und css.

    Ich werde mir die beiden genannten Standard Themes mal genauer anschauen und versuchen sie an meine Vorstellungen anzupassen.

    Ich werde mit ziemlicher Sicherheit nochmal hier reinschreiben und wäre über eure Hilfe sehr dankbar.
     
  5. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Würde für eigene Studien als weniger komplexes Theme evtl. auch "Twenty Twelve" empfehlen.
     
  6. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Hatte Twentytwelve nicht das Problem, dass es noch nicht (voll) responsive war? Oder bringe ich das gerade durcheinander?


    Edit: Sorry, mein Fehler. Gerade kurz die Demos angeschaut. Das war Twentyeleven.
     
  7. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Ok also ich habe jetzt twenty twelve mal aktiviert. Aber der stylesheet Text hat soviele Begriffe bzw. Befehle, die mir gar nichts sagen :(.

    Vielleicht könntet ihr mir ganz kurz zum Einstieg helfen: Als erstes würde ich gerne die Suchleiste von der sidebar rechts oben in den Header rechts einfügen. Bei widgets kann ich im header aber nur ein Bild zufügen, sonst stehen keine Optionen zu Verfügung. Wenn ihr mir sagen könntet, wie ich die Suchleiste im stylesheets Text/Code ändere, um sie von der sidebar in den header zu bekommen, dann hilft mir das vielleicht schon sehr viel weiter.
     
  8. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    "Twenty Twelve" hat im Header keinen Widget-Bereich.

    Die Theme Beispiele sind dafür gedacht, dass Du anhand der Themes und der WordPress Template Hierarchy die Zusammenhänge und die Verzahnung von HTML und PHP verstehen lernst.

    Wie Widgetbereiche erstellt werden geht aus functions.php (nach widgets_init suchen) hervor, wie man sie einbauen kann aus sidebar.php, bei anderen Themes ggf. zusätzlich auch footer.php usw.

    Damit versteht man dann Tutorials (wie oben verlinkt) oder auch das ganze Theme-Handbuch ggf. besser.
     
    #8 b3317133, 6. April 2017
    Zuletzt bearbeitet: 6. April 2017
  9. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
    Es gibt von dem Rheinwerk Verlag das Training "WordPress-Themes entwickeln und gestalten "

    Das Training hat eine Gesamtspielzeit von 12 Stunden. Dieses Video-Training ist lauffähig ohne Installation auf folgenden Systemen: - Windows - Mac - Linux Für das Betrachten der Videos empfehlen wir eine Monitorauflösung von mindestens 1024 x 768 Pixel. Das Training wird auf einer DVD-ROM ausgeliefert.

    Galileo Press heißt jetzt Rheinwerk Verlag.


    Danach sollte man ein Theme für WordPress erstellen können - denke ich.
     
  10. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Ich will nicht nerven, ich merke dass ich mich einfach mehr mit der Materie auseinander setzen muss.

    Aber eine letzte Frage bevor ich Tutorials lese/anschaue: Kann ich nicht einfach meine Werte aus meiner css Datei auf die Elemente einer wordpress Theme (z.B. twenty twelve oder twenty seventeen) anwenden/übernehmen. Wenn ich jetzt z.B. die Werte height, color, width usw. von einem div Element meines Templates einfach übertrage auf die div Elemente im Theme z.B. vom header, müsste das nicht funktionieren?
     
  11. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Teste es doch einfach,dann weißt du mehr .
     
  12. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Also ich konnte einige Sachen mit css definieren. Komm jetzt gerade aber nicht weiter...

    Ich würde gerne die weißen Ränder rechts und links weg haben. Außerdem soll mein Blog nicht zentriert sein und die gesamte verfügbare Breite nutzen. In meinem template habe ich einfach body margin und padding auf 0 gesetzt. Bei twenty twelve sind aber ebenfalls alle body Werte bei margin und padding auf 0. Weiß jemand woran das liegt und kann mir helfen?
     
  13. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Bei mir gibt es keine weißen Ränder links und rechts. Oder meinst du den innenabstand von .site? Dann "hängt" der Content/Text aber komplett an den Rändern.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Verwendest du die Entwicklertools? Beides ist damit eigentlich sehr einfach herauszufinden...
     
  14. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Ja ich nutze Chrome. Hab die Ursache aber bisher nicht rausfinden können.

    Und Danke für den Code!
     
  15. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Offtopic: Wie kann ich meine Beiträge editieren? Finde den Button nicht.

    Auf jeden Fall habe ich es hinbekommen: Hinter margin: 0 und padding: 0 habe ich jeweils ein !important angefügt. Damit funktioniert es.

    Jetzt mache ich erstmal weiter... Danke nochmals für eure Antworten, dass hilft mir echt weiter.
     
  16. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Links neben dem "Antworten"-Button sollte der "Bearbeiten"-Button sein.
    Der "Bearbeiten"-Button ist aber nur für eine begrenzte Zeit verfügbar (15 Minuten, glaube ich).
     
  17. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Ich würde gerne ein weiteres div Element einbauen. Das Element soll neben dem Hauptfenster platziert werden. Könnt ihr mir da weiter helfen?
     
  18. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Das ist jetzt nicht böse gemeint, aber wenn wir dir jede einzelne HTML und CSS Änderung erklären, wird das hier ein sehr langer Thread.

    Hast du dir die Theme-Dateien und die Hierarchie mal angeschaut? Probier das Div doch einfach mal einzufügen und schau dann, wo es erscheint ...

    In welche Datei das Div gehört, hängt von unterschiedlichen Dingen ab.
    Z.B.:

    Soll es immer links erscheinen? Dann vermutlich header.php
    Soll es immer rechts erscheinen? Dann vermutlich footer.php
    Soll es nur auf Seiten erscheinen? Dann page.php
    Nur auf Beitragsseiten? Dann single.php

    usw...
     
  19. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Danke dir, in der header.php hats geklappt.
     
  20. CapoPM

    CapoPM Active Member

    Registriert seit:
    6. April 2017
    Beiträge:
    31
    Zustimmungen:
    0
    Hallo nochmal,

    ich bin jetzt schon sehr weit vor ran gekommen. Ich konnte das Theme twenty twelve so anpassen, dass fast alles so aussieht, wie in meinem Design. Jetzt habe ich aber das Problem, dass um den body ein Rahmen oder Schatten ist. Seit 3 Stunden habe ich alles versucht, um den weg zu kriegen.

    Ich habe es mit border:none und box-shadow:none in der style.css Datei versucht unter body, site, wrapper aber ich finde einfach nicht den Grund warum dort dieser Rahmen/Schatten ist. Die Sache ist, man sieht diesen gar nicht, wenn der Browser die gesamte Breite nutzt. Weil ich aber die max-width begrenzen möchte, ist es so, dass auf der Rechten Seite immer dieser "Rahmen/Schatten" da ist, wenn die Auflösung höher als die Limitierung ist. Als Beispiel: Ich stelle max-width auf 1680px (ist nur ein Beispiel) und meine Auflösung (Breite) ist auf 1900, dann ist immer dieser Rahmen/Schatten vorhanden.

    Ich würde wirklich nicht hier schreiben, wenn ich nicht selbst lange gesucht und gegoogelt hätte. Ich finde die Ursache einfach nicht
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden