Nuförtiden är det mycket populärt att ha en maxad sidfot på sin sajt sprängfylld med länkar till de senaste sociala sajterna, copyright-sidor, kontakta-oss sidor, blogg-listor, mina kompisar-listor osv.
Tanken är att besökare skall klicka sig vidare när de kommit längst ner på en sida, men om man inte beaktar funktionaliteten så ser det väldigt profsigt ut att ha en maxad sidfot full med information.
Det finns också massor med plugins för detta, ibland kan det dock vara bra att göra det själv.
Del 1:
Sök upp filen footer.php i mappen till ditt Wordpress-tema. Chansen är stor att du kör standard-temat för Wordpress vilket i dagsläget är temat Twentyten som är ett utmärkt tema att använda som grund om man vill bygga ett helt eget tema.
Filen footer.php ligger i denna mapp under Wordpress-roten: wp-content\themes\twentyten\footer.php
Del 2:
Redigera filen genom att öppna den i en textredigerare. Wordpress är uppbyggt genom att olika sidor består av olika filer som inkluderas. Detta är väl egentligen inte cutting edge om vi pratar webbteknik, men det funkar bra och är lätt att sätta sig in i.
Lägg märke till </body> taggen i filen footer.php, innan denna tagg kan vi lägga till vår kod för kolumnerna. Jag har valt att ha en container som är 900 pixlar bred, i denna har jag lagt in tre stycken behållare med 290 pixlars bredd, det ger 10 pixlars mellanrum mellan behållarna.
Lägg in nedanstående kod innan </body> taggen.
<div>
<div class="col first">
<h3>First Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
<div class="col">
<h3>Second Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
<div class="col">
<h3>Third Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
</div> <!-- stäng footer-col-container -->
<div style="clear:both"> </div>
Del 3:
Dags att knyta ihop detta med lite CSS-kod. Vi har en CSS-klass, .col och sedan ett CSS-ID #footer-col-container.
Ja, sen har vi en till klass, .first – så att vi kan ha koll på första kolumnen.
CSS-kod ser ut så här:
#footer-col-container {
width:900px;
height: 400px;
padding:1em 0 0 0;
margin-left: auto ;
margin-right: auto ;
}
.col {
float:left;
width:290px;
margin-right:10px;
}
Koden går in i style.css som finns i “wp-content/themes/twentyten/”
Tips på optimeringar:
Konvertera CSS till shorthand-CSS.
Lägg in möjlighet att redigera kolumnerna ifrån administrations-sidorna
Recent Comments