Wordpress Blog: Layout-, Validitäts- und Kompabilitätscheck

japanworm · #1 (**permalink**) 30.10.2011, 10:36

Hallo.

Nachdem ich nun seit Mitte Juni als Neuling daran gebastelt habe, bin ich ENDLICH mehr oder weniger fertig mit meiner Webseite.
Es ist nicht mein erster Blog, aber mein erster selbstgehosteter und damit stehen einem ja auch in Sachen Design ganz plötzlich neue Möglichkeiten offen.

Ich habe in den letzten 4 Monaten sehr viel Neues dazugelernt, dennoch bin ich mir darüber im Klaren, dass meine Webseite wohl aus der Sicht von "Profis" oder zumindest Leuten, die mehr Ahnung haben als ich, noch sehr fehlerhaft sein dürfte.

Einige Seiten sind komplett validiert, andere nicht (so ziemlich alle, die die Sidebar mit drin haben, da der nicht valide Code daher kommt). Leider scheint der nicht valide Code von Plugins verursacht zu werden und daher ist es ein wenig schwierig, das zu korrigieren. Bei dem Rest verstehe ich die Anweisungen nicht ganz (bzw. verstehe nicht, was genau falsch ist und kann es daher nicht korrigieren).

Mein CSS ist nicht valide, das wird auch so bleiben, weil ich auf gewisse Effekte (Gradient, Textschatten usw.) nicht verzichten möchte.

Getestet habe ich die Seite leider nur mit Windows XP und 7 in allen neuen Browserversionen von IE (8&9), Chrome, Opera, Safari und Firefox (bis rauf zu Version7) - und auch in einigen älteren Versionen der genannten Browser.
Wirkliche Probleme konnte ich nur im IE7 feststellen. Absolutes Layoutchaos.

Ich bin mir nicht sicher, ob es sich lohnt, das zu korrigieren (zumal ich nicht weiß, wie). Zumindest laut einer meiner aktuellen Umfragen benutzt nur ein geringer Bruchteil meiner Leser den IE7.

Da ich ein Neuling bin, weiß ich auch nicht, worauf ich evtl. sonst noch achten muss, also wäre ich für konstruktive Kritik und Tipps wirklich dankbar!

Ich hätte auch noch eine generelle Frage zum Validieren. Muss man das in regelmäßigen Abständen immer wieder machen? Auch wenn die Layout Dateien valide sind, so können doch die Blogeinträge zu Problemen führen, wenn sie nicht valide sind, oder?
Ich hatte das Problem zumindest schon mit den statischen Seiten (page.php).

Hier die verschiedenen Ansichten, geordnet nach Wichtigkeit (vermutlich künftiger Aufrufhäufigkeit von Besuchern):
Blog (Neueste Beiträge - Übersicht)
Einzelner Blogeintrag
Hauptseite
Kontakt (da rutscht das "Send Message" beim Klicken auf die Textarea der Message nach oben im Firefox)
Archiv
Statische Seite: FAQ (haut das Design im IE7 zusammen)

P.S.: Nicht wundern, der Blog ist momentan noch nicht "öffentlich" daher gibt es auch noch keine echten Einträge. Die jetzigen Einträge sind nur zu Testzwecken erstellt worden.

Vielen Dank im Voraus.

K.Roland · #2 (**permalink**) 30.10.2011, 16:58

Validire

- deine Webseiten alle erstmal hier: The W3C Markup Validation Service es dürfen keine Fehler drinstecken valide muß sein.

__________
Gruß,
Roland

japanworm · #3 (**permalink**) 30.10.2011, 17:13

Hallo!

Vielen Dank für deine Antwort.
Validieren ist - wie geschrieben - durchaus auch in meinem Sinn, aber das, was jetzt noch übrig ist, habe ich leider nicht verstanden und konnte daher auch nicht validieren.

Wäre es okay, hier reinzuposten, mit was ich Probleme hatte, damit ich vollständig validieren kann?

LG aus Japan (und gleichzeitig Gute Nacht)

take_a_7 · #4 (**permalink**) 30.10.2011, 18:00

Moin,

mal die Fehler von zoomingjapan.com/blog/ auseinandergenommen:

Line 505, Column 83: document type does not allow element "a" here; assuming missing "li" start-tag:
-> Das steht bei mir in der Quelltextansicht (Google Chrome) zwar in Zeile 506, aber egal: du befindest dich hier in einer Liste (ul) und es taucht ein Link auf (a). Der darf aber innerhalb eines ul-Elements nicht vorkommen, nur innerhalb eines li-Elements in dem ul-Element. Den fehlenden Start-Tag für dieses li-Element kreidet der Validator hier an.
Line 506, Column 5: end tag for "li" omitted, but OMITTAG NO was specified:
-> Wieder eine Zeile zu hoch der Validator, irgendwie komisch... Das durch dein a-Element (siehe vorigen Punkt) implizit geöffnete li-Element wird nicht geschlossen bevor das übergeordnete ul-Element geschlossen wird.
Line 550, Column 40: there is no attribute "class":
-> script-Elemente haben kein Attribut "class", du gibst diesem aber eins. Was willst du damit erreichen?

Hoffe ich konnte helfen

gruß,
take

japanworm · #5 (**permalink**) 31.10.2011, 03:41

Hallo und vielen Dank

Das ist eines meiner Plugins (wie bereits erwähnt). Keine Ahnung, warum der Plugin-Programmierer das so gemacht hat. Wenn ich es aus dem Plugin-Code herausnehme, funktioniert das Plugin nicht mehr.

Und zu dem anderen. Das ist eine Nummer zu groß für mich. Leider sprechen wir ja nicht von einer einfachen Webseite, wo alles schön in einem Dokument aufgereiht ist, sondern von Wordpress, wo sich alles auf viele verschiedene Dokumente verteilt und durch andere Codes noch modifiziert wird. So auch hier:
Der Code, der den Fehler produziert sieht so aus:

Code:

 <ul class="side-cat-img"> 
<?php $args = array();
$args['show_last_updated'] = true;
$args['show_count'] = true;
$args['title_li'] = '';
$args['walker'] = new CategoryThumbnail_Walker;

wp_list_categories($args); ?>
</ul>

Die entsprechende Funktion dazu:

Code:

class CategoryThumbnail_Walker extends Walker_Category {

    // A new element has been stumbled upon and has ended
    function end_el( &$output, $category, $depth, $args ) {
        // Output the standard link ending
        parent::end_el( &$output, $category, $depth, $args );

        // Get one post
        $posts = get_posts( array(
            // ...from this category
            'category' => $category->cat_ID,
            'numberposts' => 10
        ) );

        // we'll record the seen images here
        if ( !isset($this->images_seen) ) $this->images_seen = array();

        foreach ( $posts as $post ) {
            // Get its thumbnail and append it to the output
            $featured = get_the_post_thumbnail( $post->ID, 'latestpost-thumb', null );
            // have we already seen this image?
            if ( in_array($featured, $this->images_seen) ) continue;
            else {
                $this->images_seen []= $featured;
 $post_cats = get_the_category($post->ID);
$output .= '<a href="http://www.zoomingjapan.com/category/'.$post_cats[0]->slug.'" title="Category Name">'.$featured.'</a>';
                break;
            }
        }
    }
}

Der Code bewirkt, dass Kategorien als Text angezeigt werden mit einem dazugehörigen Screenshot.
Im Quellcode dann steht nur die Kategorie innerhalb von "li", der Thumbnail (der auch als Link zur Kategorie dient, daher das "a") steht allerdings außerhalb von "li".

Ich habe leider nur keine Ahnung, wie ich den obenstehenden Code in der Funktion ändern muss, dass das richtig gestellt wird. Das ist wirklich ne Nummer zu groß für mich.

StefanK · #6 (**permalink**) 31.10.2011, 09:22

Zitat:

$output .= '<li><a href="http://www.zoomingjapan.com/category/'.$post_cats[0]->slug.'" title="Category Name">'.$featured.'</a></li>';

Wenn ichs richtig verstanden habe.

japanworm · #7 (**permalink**) 31.10.2011, 16:56

Hallo Stefan.
Danke, auf die Idee bin ich auch schon gekommen, leider ändert das an der Fehlermeldung nichts.

Ist halt schon schwierig mit "dynamischem Inhalt".

japanworm · #8 (**permalink**) 15.11.2011, 03:45

Ich wäre nach wie vor dankbar für Tipps und Feedback, danke.
Arbeite derzeit an der Speedoptimierung (image compression etc.).

David · #9 (**permalink**) 15.11.2011, 10:40

Die Methode end_el der Elternklasse sieht wie folgt aus:

PHP-Code:


			
    /**

     * @see Walker::end_el()

     * @since 2.1.0

     *

     * @param string $output Passed by reference. Used to append additional content.

     * @param object $page Not used.

     * @param int $depth Depth of category. Not used.

     * @param array $args Only uses 'list' for whether should append to output.

     */

    function end_el(&$output, $page, $depth, $args) {

        if ( 'list' != $args['style'] )

            return;



        $output .= "</li>\n";

    }

Hier wird also das schließende li-Tag gesetzt, wenn das Agrument 'style' eine Liste wünscht.
Der Plugin-autor hat also einen Denkfehler, bzw. nicht damit gerechnet, dass man auch Listen verwenden könnte.
Der Aufruf der Elternfunktion muss ans ENDE der neudefinierten Methode, nicht an den Anfang. Dann müsste der Listenpunkt auch die übrigen Links einschließen.

Was ist das eigentlich für ein Plugin?

S. Franke · #10 (**permalink**) 15.11.2011, 14:05

Also dafür dass du Neuling bist, finde ich die Seite schon sehr gelungen!

Einen Kritikpunkt habe ich allerdings: Der individuelle Mauszeiger nervt mich ein wenig.

Aber sonst echt TOP!!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
artikelbereich in wordpress layout verbreitern	deffen	CSS	2	20.11.2009 15:33
wordpress layout linksbündig machen	deffen	CSS	2	20.11.2009 14:15
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Wordpress - Anmeldefeld von Layout umgeben	timexx	Serveradministration und serverseitige Scripte	0	11.09.2008 19:32
IE7 + WordPress Blog Template	DonCano	CSS	3	22.05.2007 15:49