kaxigt.com

De som inte använder någon bloggplattform utan istället kör sina dokument med simpel php-include vet att sidtiteln blir statisk. Använder du däremot body-class eller ett dynamiskt php-script underlättar du inte bara för dina besökare att bokmärka vissa sidor, sökmotorerna blir också glada.

Mest gladast blir nog du!

Vi ska här kika på tre olika alternativ att skapa en dynamisk titel. Vi ska också kika på hur vi med php kan koppla detta till body-class och navigeringen.

Alternativ 1 – $title

Det här är den enklaste varianten och kräver inga speciella förkunskaper i php. Du börjar med att öppna det dokument som kallar på header.php – alltså det ska INTE vara själva header.php utan till exempel index.php. Du skriver följande kod högst upp:

<!--?php $title = "Min sida om mig själv"; ?-->

Öppna sedan din header.php och byt ut dina titletaggar till följande:

Spara båda dokumenten. Klart! Vad du hädanefter måste tänka på är att i varje nytt dokument som du skapar så ska du skriva in sidtiteln i koden som ligger högst upp i dokumentet – det vill säga du ändrar i denna kod:

<!--?php $title = "Ny titel för varje nytt dokument";?-->

Koderna i header.php rör du aldrig. Enkelt – eller hur?

Alternativ 2 – echo ’<title>’;

Det här serverscriptet är inte heller så avancerat men det medföljer en if/else-sats om du skulle glömma att skriva in titeln. Vi använder oss av samma procedur som i föregående exempel. Öppna ett dokument, exempelvis index.php – inte header.php – och skriv in nedanstående kod.

OBS! Granska koden noga, som du ser så ligger den inom samma php-snutt som kallar på header.php. Tag därför bort din gamla include('header.php');.

<!--?php $title = 'Design till salu | Decorama Design &amp; Layout'; include('header.php'); ?-->

Du byter ut min titel till din egen beroende på vad sidan innehåller och vilken titel du vill ha. Spara! Därefter är det dags att öppna header.php. Vi ska nu byta ut htmltaggen till följande:

<!--?php 
echo '&lt;title&gt;';
if(isset($title)) echo $title;
else echo 'Decorama Design &amp; Layout | Professionell Webbyr&amp;aring; med funktionella lösningar'; 
echo '&lt;/title&gt;';
?-->

Denna kod fungerar så här:

echo '';

Här skriver du alltså in en alternativ titel. Spara! Klart!

Alternativ 3 – $pageTitle och $pageId

Nu börjar vi närma oss lite mer avancerad programmering – men fortfarande är det lätt att förstå funktionerna. Detta moment tar vi lite långsammare eftersom vi också ska infoga body-class och sist koppla allt till en navigering. Börja med att öppna upp index.php.

Lägg nedanstående kod innan – gärna högst upp på sidan:

<!--?php $pageTitle = "Min sida om mig själv"; $pageId = "me"; ?-->

$pageTitle = "Min sida om mig själv"; – här ändrar du till den titeln som sidan ska ha.

$pageId = "me"; är däremot en ny kod och det är den som kallar på din body-class, det vill säga det ID som varje specifika dokument kommer att ha.

Varje ID använder vi sedan för att koppla respektive sida till navigeringen. Du väljer ett namn på din ID som relaterar till sidans innehåll. Spara!

Därefter öppnar du header.php. Vi börjar med att byta ut title-taggen mot denna:

Därefter letar du dig ned till body-taggen. Infoga nästa php-kod så det blir så här:

&lt;body<!--?php if(isset($pageId)) echo " id='$pageId' "; ?-->&gt;

Spara!

Koppla body-class, ID och title till navigeringen

Nu har vi fixat till titeln så den är dynamisk.

Nästa steg är att koppla detta till en navigering. Här kommer vi att arbeta utifrån alternativ 3. Börja med att öppna din stilmall och infoga följande deklarationer (du kan styla om dem sen):

body#me a#me-,
body#design a#design-,
body#guide a#guide-,
body#kontakt a#kontakt- {background:#333;border:2px solid #666;} 

Som du ser så anges samma deklaration två gånger – body#me a#me-,

Den första deklarationen relaterar till body-class body#me, det vill säga den som kallas från $pageId = "me";. Här är det därför viktigt att du anger samma ID som du har i dokumentet.

Andra deklarationen a#me- är länkens ID i navigeringen som kallar på body-class #me.

Denna deklaration ska ha ett bindestreck sist. Mellan varje ny deklaration ska lägga du in ett kommatecken. Tag dig en stund och granska koderna så ser du mönstret.

HTML-koden.
I sin enklaste form ser länkarna ut så här:

<a id="me-" title="Me" href="me.php">Me</a>
<a id="design-" title="design" href="design.php">Min design</a>
<a id="guide-" title="Guider" href="guide.php">Guider</a> 
<a id="kontakt-" title="Kontakt" href="kontakt.php">Kontakt</a> 

Exempelkod på horisontell navigering

Du kan givetvis använda oordnade listor om du vill. Här är i alla fall csskoderna för en enkel horisontell navigering med active (current) kopplat till body-class ID:

nav.navmenu { display: block;padding: 10px; margin:0; background: #000;font-weight:bold;}
nav.navmenu a {padding:10px;color: #fff;font-family: Tahoma, Geneva, sans-serif;text-decoration:none;}
nav.navmenu a:link    {  color: #ccc;}
nav.navmenu a:visited {  color: #ccc; }
nav.navmenu a:hover   { color: #fff; background: #333;}
nav.navmenu a:active  {  color: #ccc; } 

Lägg in följande htmlkoder där du vill ha din navigering:

Lycka till!