Wordpress: Hauptindex-Template (index.php) verbessern
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
abstand
all
anzeige
bild
code
element
frage
funktion
gestalten
grund
http
inhalt
kommentar
navigation
page
platz
probieren
rahmen
url
verwenden
-
Hallihallo,
Ich arbeite mich gerade per lima-city Webspace in Wordpress ein und hab mir ein eigenes Theme von Grund auf neu erstellt.
Das lief bisher alles recht eingängig, aber freilich gab es schon manchmal Fragen, die nicht sofort eingeleuchtet sind.
Ich hab zwar etliche Ansätze verfolgt, ausprobiert und wieder verworfen und selbstverständlich gibt es zu diesem Thema mehr als genug Stuff, den man sich im Internet dazu besorgen kann, aber mir ist die Diskussion lieber.
Was kann man an meinem Template für meine index.php noch verbessern bzw. korrigieren (und dann demzufolge auf page.php, etc. übertragen)
<?php get_header(); ?> <section role="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div class="meta"> <p>am <?php echo get_the_date(); ?> um <?php echo get_the_time(); ?> Uhr von <a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>"><?php the_author(); ?></a></p> </div> <div class="entry"> <?php the_content(); ?> </div> <div class="meta"> <p>Kategorie: <?php the_category(', '); ?> - <?php comments_number( 'keine Kommentare', '1 Kommentar', '% Kommentare' ); ?></p> </div> </article> <?php endwhile; ?> <?php $prev_link = get_previous_posts_link(__('« Neuere Einträge')); $next_link = get_next_posts_link(__('Ältere Einträge »')); if ($prev_link || $next_link) { echo '<p id="post-navigation">'; if ($prev_link){ echo $prev_link; } if ($prev_link && $next_link) { echo ' | '; } if ($next_link){ echo $next_link; } if ($prev_link || $next_link) { echo '</p>'; } } ?> <?php endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
Ich bin mir vor allem hinsichtlich des Loops nicht sicher und ob man nicht das Erstellen der Seitennavigation am Ende einfacher und besser gestalten könnte. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich bin zwar nicht vertraut mit Wordress, aber wie wäre es, wenn Du einen Link zu deinem Template in Aktion posten würdest?
Dann könnte man besser sehen, wie gut/schlecht dein Entwurf ist. -
Oh selbstverfreilich, ich dachte das wäre offensichtlich. Mein Webspace dieses Accounts:
http://cyclobox.lima-city.de/ -
Moin,
erstmal großes Lob, scheinst ja schön auf HTML5 Tour zu sein ;)
Ich habe mich einfach mal Spaßeshalber rangesetzt:
- Schatten hinzugefügt
- mehr Ränder (dezent)
- Farbverläufe im Hintergrund (nur Firefox, habe auf die schnelle jetzt nicht die anderen gefunden.
- CSS3 transition
Du kannst dich ja an dem Bild orientieren und es selber probieren, oder mal mein CSS ausprobieren.
Bild deiner Webseite
mfg Stephan -
cyclobox schrieb:
Ich glaube das post_nav_link die erwünschte Funktion liefern sollte.
Ich bin mir vor allem hinsichtlich des Loops nicht sicher und ob man nicht das Erstellen der Seitennavigation am Ende einfacher und besser gestalten könnte.
Allgemein würde ich dir empfehlen, bei deinen Links das title-Attribut zu verwenden und da du ohnehin auf HTML5 zurückgreifst, würde es sich anbieten, das time-Tag einzusetzen.
Grüße Maik
Beitrag zuletzt geändert: 2.6.2012 22:47:21 von ploco -
@daswing:
Deine Vorschläge schaue ich mir jetzt an. Meine Intention war es zunächst die Seite so zu gestalten, wie sie jeder mindestens zu sehen bekommt, um anschließend optionale CSS3-Spielereien einzubauen. Eben wie Transitions, Gradienten, und alle die schönen Dinge. Aber das Bild sieht schon ziemlich gut aus.
In den Footer soll später eine Art Sitemap bzw. Impressum/Claim/Disclaim und solche Sachen. Die Navigation ist auch momentan noch obligatorisch.
CSS-Gradient in der Navigation. Ich hab noch irgendwie die anderen Gradient-Syntax-Varianten unterzubringen nachgeahmt. Weiterhin hab ich box-shadow beim Wrapper übernommen. Die einzelnen Menüelemente haben jetzt außerdem Transition und Schatten, den aber nur oben.
#wrapper{ width:960px; margin:0 auto; background-color:#fff; box-shadow: 0 0 10px #000; } (...) nav{ background-color:#111; background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#000)); background:-webkit-linear-gradient(top, #333, #000); background:-moz-linear-gradient(50% 80% 90deg, #000000, #333333 100%) repeat scroll 0 0 transparent; background:-ms-linear-gradient(50% 80% 90deg, #000000, #333333 100%) repeat scroll 0 0 transparent; background:-o-linear-gradient(50% 80% 90deg, #000000, #333333 100%) repeat scroll 0 0 transparent; background:linear-gradient(50% 80% 90deg, #000000, #333333 100%) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#000000'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#000000')"; /* IE8+ */ border-bottom:3px solid #e00000; } nav a{ -webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -ms-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out; transition:All 0.3s ease-in-out; display:block; float:left; padding:10px 30px; color:#fff; } nav a:hover{ background-color:#e00000; box-shadow: 0 10px 10px -10px #550000 inset; }
ploco schrieb:
Ich glaube das post_nav_link die erwünschte Funktion liefern sollte.
Allgemein würde ich dir empfehlen, bei deinen Links das title-Attribut zu verwenden und da du ohnehin auf HTML5 zurückgreifst, würde es sich anbieten, das time-Tag einzusetzen.
Grüße Maik
@Maik:
Ich habe mich mit dieser Funktion beschäftigt und herausgefunden, dass diese intern lediglich die selben Funktionen aufrufen wie ich. Ich hab mich jetzt noch ein wenig umgesehen und folgende Lösung implementiert:
Zu beachten ist jetzt, dass ich im Backend pro Seite nur einen Artikel anzeige, damit man sehen kann, wie das Ganze live aussieht.
Auszug aus der index.php
<?php if (show_posts_nav()) : ?> <div id="page-navigation"> <p class="newer-entries"><?php previous_posts_link('« Neuere Einträge'); ?></p> <p class="older-entries"><?php next_posts_link('Ältere Einträge »'); ?></p> <div class="clear"></div> </div> <?php endif; ?>
CSS zum formatieren der Links:
section #page-navigation{ width:50%; margin:3em auto 0; } section #page-navigation .older-entries{ float:right; } section #page-navigation .newer-entries{ float:left; } section #page-navigation a{ color:#e00000; text-decoration:none; } section #page-navigation a:visited{ color:#be0000; } section #page-navigation a:hover{ color:#000; text-decoration:underline; }
Funktion in der functions.php, die nur WAHR zurückliefert, wenn es mehr als 1 Seite gibt:
function show_posts_nav() { global $wp_query; return ($wp_query->max_num_pages > 1); }
Hier noch eine Frage zur Seitenstruktur:
Momentan floate ich sowohl den Contentbereich (umfasst mit dem Element section - float:left), als auch die Sidebar (aside - float:right). Dadurch muss ich eine feste Breite vergeben, damit sie so angezeigt werden, wie gewünscht.
Wenn ich jetzt aber ein Template verwenden will, bei dem die Sidebar garnicht angezeigt werden soll, dann ist section dennoch nur so breit, als wäre noch eine Sidebar da. Klar, weil es ja eine feste Breite hat.
Ergo wäre es sinnvoller, wenn section nicht floatet und somit immer den maximal verfügbaren Platz nimmt. Dann habe ich aber das Problem, dass es zwar den maximal verfügbaren Platz nimmt, bei Anzeige einer Sidebar diese aber auch nach unten verdrängt.
Wie kann ich diese Zwickmühle lösen? Ich möchte ungern die Sidebar vor dem Content rendern lassen.
Und noch eine Frage:
Wenn mein Footer keine fixe Höhe hat, dehnt er sich natürlich gemäß seines Inhalts aus. Allerdings gilt das nicht für margin-bottom, den Kindelemente des Footers eventuell haben (z.B. durch UL). Der Abstand dehnt also die Höhe des Footers nicht weiter aus, sondern sorgt für einen unschönen Abstand am unteren Ende.
Durch probieren habe ich festgestellt, dass ich das lösen kann, in dem ich entweder dem Footer einen border-bottom verpasse oder overflow:hidden zuweise. Warum das allerdings dadurch behoben wird und was das "behoben" wird ist mir unklar. Weiß jemand den Grund?
Die Antwort scheint das Prinzip der "Collapsing Margins" zu sein. Möglich Lösung sind die Vergabe eines Rahmens, 1px-Padding oder overflow-Wert außer visible.
Beitrag zuletzt geändert: 3.6.2012 14:18:33 von cyclobox -
cyclobox schrieb:
Sitemap ist ne gute Idee, aber ein wenig dezenter als du es jetzt hast, Schrift kleiner und Überschriften was das für Links/Teile der Webseite sind. Auch würde ich da eher mit einen dunklen Grau als SChriftfarbe arbeiten was beim :hover in ein helles Grau übergeht. Das Rot ist dann doch schon sehr extrem.
@daswing:
Deine Vorschläge schaue ich mir jetzt an. Meine Intention war es zunächst die Seite so zu gestalten, wie sie jeder mindestens zu sehen bekommt, um anschließend optionale CSS3-Spielereien einzubauen. Eben wie Transitions, Gradienten, und alle die schönen Dinge. Aber das Bild sieht schon ziemlich gut aus.
In den Footer soll später eine Art Sitemap bzw. Impressum/Claim/Disclaim und solche Sachen. Die Navigation ist auch momentan noch obligatorisch.
Hier noch eine Frage zur Seitenstruktur:
Momentan floate ich sowohl den Contentbereich (umfasst mit dem Element section - float:left), als auch die Sidebar (aside - float:right). Dadurch muss ich eine feste Breite vergeben, damit sie so angezeigt werden, wie gewünscht.
Wenn ich jetzt aber ein Template verwenden will, bei dem die Sidebar garnicht angezeigt werden soll, dann ist section dennoch nur so breit, als wäre noch eine Sidebar da. Klar, weil es ja eine feste Breite hat.
Ergo wäre es sinnvoller, wenn section nicht floatet und somit immer den maximal verfügbaren Platz nimmt. Dann habe ich aber das Problem, dass es zwar den maximal verfügbaren Platz nimmt, bei Anzeige einer Sidebar diese aber auch nach unten verdrängt.
Wie kann ich diese Zwickmühle lösen? Ich möchte ungern die Sidebar vor dem Content rendern lassen.
Keine Ahnung ob das jetzt deinen Vorstellungen entspricht:
Erstmal habe ich einen DIV-Container um beide gezogen, so sind die erstmal unabhängig von unten:
<div id="wrapper"> <header> <nav role="navigation"> <div id="main-page"> <aside> <section role="main"> </div> <div class="clear"></div> <footer> </div>
Dazu musst du keine CSS-Formatierung für #main-page treffen nur die der darin liegenden in diese ändern:
#wrapper > main-page > aside { background: none repeat scroll 0 0 #FFFFFF; float: right; font-size: 0.9em; margin-bottom: 30px; padding: 10px; width: 260px; } #wrapper > main-page > section { padding: 10px; }
So ist zumindest dein Content ohne Größe und passt auch ohne die Sidebar(aside) ;)
Hoffe so klappt das.
Und noch eine Frage:
Wenn mein Footer keine fixe Höhe hat, dehnt er sich natürlich gemäß seines Inhalts aus. Allerdings gilt das nicht für margin-bottom, den Kindelemente des Footers eventuell haben (z.B. durch UL). Der Abstand dehnt also die Höhe des Footers nicht weiter aus, sondern sorgt für einen unschönen Abstand am unteren Ende.
Durch probieren habe ich festgestellt, dass ich das lösen kann, in dem ich entweder dem Footer einen border-bottom verpasse oder overflow:hidden zuweise. Warum das allerdings dadurch behoben wird und was das "behoben" wird ist mir unklar. Weiß jemand den Grund?
Die Antwort scheint das Prinzip der "Collapsing Margins" zu sein. Möglich Lösung sind die Vergabe eines Rahmens, 1px-Padding oder overflow-Wert außer visible.
Verstehe nicht ganz was du meinst, aber sei doch froh wenn es so funktioniert.
Ein Tipp noch, grenze bitte die Sidebar mit einen Rahmen rechts von den Content ab, dann sieht es besser aus.
mfg Stephan -
Hallo Stephan,
Mit der Sitemap im Footer hab ich mich nur dahingehend beschäftigt, dass ich nun im Backend das Menü konfigurieren kann und anschließend dem "Menüplatzhalter", also in diesem Fall im Footer, zuweise. Gleiches funktioniert auch mit der Hauptnavigation unterhalb des Headers, welche ich eben fertiggestellt habe. Hover Submenüs, etc. sind dabei. Das kannst du dir ja noch mal anschauen, gefällt mir so aber mittlerweile ganz gut. ;)
Automatische Breite für den Content-Bereich (section):
Das ist die offensichtliche Variante, in der zunächst die Sidebar, der ich problemlos eine fixe Breite geben kann, platziere und rechts floate und anschließend den Content-Bereich anzeigen lasse, welcher dann den freien Platz den die Sidebar übrig lässt, ausnutzt.
Das funktioniert auch. Aber mir wäre es ehrlich gesagt lieber, wenn zuerst der Contentbereich gerendert wird. Das ist vor allem hinsichtlich auf die Suchmaschinenoptimierung bzw. Screenreader relevant. Dort ist die sichtbare Navigation nämlich von zweitrangiger Bedeutung. Da muss ich jetzt wohl mal in mich gehen, was mir wichtiger ist.
Vielleicht kann man bei der Verwendung eines speziellen Templates das section-Element auch mit einer speziellen Klasse/ID rendern, die ich nur verwende, wenn ich keine Sidebar brauche und dann darüber eben 960px (was der Breite von Header bzw. Footer entspricht) festlege.
*edit2:
Ich habe nun folgenden CSS-Code hinzugefügt, da ich durch die Body-Klassentags die section nur dann auswählen kann, fals eine bestimmte Klasse im Body vorhanden ist.
.page-template > #wrapper > section { float:none; min-height:500px; width:940px; /* 960px abzüglich 2x 10px für Padding Links & Rechts */ }
Collapsing Margins:
Jap, dass funktioniert. Es ist allerdings eher ein kleiner Workaround gegen ein meiner Meinung nach nicht ganz intuitives Verhalten.
Wenn ich meinen Header mit Hgroup und je einer H1- und einer H2-Überschrift habe und ich gebe Hgroup etwas margin. Dann soll sich die Hgroup vom Header abstoßen und nicht vom Body bzw. Browser-Viewport.
Sorry, dass ich so kleinlich bin, aber das ist gute Übung für mich und versuche mir grad anzugewöhnen, Dinge nur so zu lösen, wie sie vorgesehen sind, ohne Techniken zu "missbrauchen". Ich bedanke mich aber ausdrücklich für deine Hilfen.
*edit: Zum Thema Sidebar vom Content abgrenzen: Darüber mache ich mir noch Gedanken. Deine Möglichkeit aus dem Bild ist ganz gut, allerdings nur, wenn der Inhalt auch höher ist, als die Sidebar. Na mal sehen.
Beitrag zuletzt geändert: 3.6.2012 19:15:04 von cyclobox -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
