Linkit sidebar:issa

[moonwoff]

Minulla on toimiva ”current page item” header-valikossa, nyt haluaisin sen myös Dante-sivuille sidebarissa. Elikkä että valikko sidebarissa tulisi ”bold” kun ollaan sillä tietyllä sivulla.

Miten sen tehdään? PHP:lla tai CSS:lla?

Tiedän että olen melkein sama kysysmys jo kysynyt, mutta kun käytän Widget Logic en tiedä miten tämän tehtäisi.

Kiitos etukäteen!

[Mikko Saari]

Tarvitaan PHP:ta ja CSS:ää, eli PHP:lla pitää lisätä valikkoon aktiivisen sivun kohtaan sopiva CSS-luokka, joka korostuksen tekee.

Tarvitset siis sivupalkkiin jonkin widgetin, johon voit laittaa PHP-koodia, loppu on aika yksinkertainen juttu.

[moonwoff]

Joo, vähän sitä ajattelin että oli php-koodia…
Mulla on jo widget logic käytössä.
Mikä php-koodia tarvitaan?

[Mikko Saari]

Siihen, että saat korostuksen tekevän CSS-luokan vain siihen linkkiin, joka vastaa nykyistä sivua. Ihan sama juttu siis kuin ylävalikossakin.

[moonwoff]

En tiedä miten sen tekisin. Sen takia kysyin. =o(

Tämä on se valikko widgetissä:

<ul>
<li><a href="http://bluechalo.com/wp2/info" title="Info">Info</a></li>

<li><a href="http://bluechalo.com/wp2/valpkull" title="Valpkull 2.0">Valpkull</a></li>

<li><a href="http://bluechalo.com/wp2/gora" title="Va gör jag?">Va gör jag?</a></li>
</ul>

Tässä on nykyinen header-valikko php-koodi.

<li class="page_item <?php if (is_home()) echo "current_page_item"; ?>">
<a href="<?php echo get_settings('home'); ?>/" title="Hem">Hem</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&exclude=50,54,58,85');?>

Ja css-koodi header-valikkoon.

#nav {
	float: right;
	width: 230px;
	padding-right: 10px;
	padding-top: 25px;
}
#nav li {
	display: inline;
}

#nav .current_page_item a, #nav .current_page_item a:visited{
	color: #000000;
	text-decoration: none;
}

#nav .page_item a{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px; text-align: center;
	padding: 15px 6px 20px 6px;
	color: #fff;
	text-decoration: none;
	float:left;
}

#nav .page_item a:hover {
	background: url(img/myarrow2.gif) no-repeat center top;
	color: #fff;
	text-decoration: none;
}

[moonwoff]

Asiahan on niin että en ymmärrä php, ja en tiedä miten saan se is_home muutettu niihin sivuihin (ehkä is_page:illä) mitä haluan siihen sidebar:iin ja vain tietyillä sivuilla…

[Mikko Saari]

Siis näin:

<ul>
<li><a <?php if is_page('Info') echo 'class="current"'; ?> href="http://bluechalo.com/wp2/info" title="Info">Info</a></li>

<li><a <?php if is_page('Valpkull 2.0') echo 'class="current"'; ?> href="http://bluechalo.com/wp2/valpkull" title="Valpkull 2.0">Valpkull</a></li>

<li><a <?php if is_page('Va gör jag?') echo 'class="current"'; ?> href="http://bluechalo.com/wp2/gora" title="Va gör jag?">Va gör jag?</a></li>
</ul>

Tämä lisää aktiivisen sivun linkkiin luokan ”current”, johon voit sitten CSS:ssä laittaa haluamasi muotoilut.

Ongelma tässä on se, että tavallinen Text-widgetti ei suorita PHP-koodia, joten tarvitset widgetin, jossa PHP-koodi toimii. Sellainen on esimerkiksi Samsarin PHP Widget.

[moonwoff]

Kiitos! oki. olen nyt latannut samasarin php widgetin ja laittanut sun koodi sinne. Ei toimii. Tulee tällainen teksti.

Parse error: syntax error, unexpected T_STRING, expecting '(' in /customers/bluechalo.com/bluechalo.com/httpd.www/wp2/wp-content/plugins/samsarin-php-widget/samsarin-php-widget.php(97) : eval()'d code on line 2

Mitä tarkoittaa? Mitä meni väärin?

[moonwoff]

Huomasin myös että php-koodilla ei ole se teksti ruutu mitä Widget logicilla on missä olen laittanut: is_page(array('dante','info','valpkull','gora'))

Mihin se koodi nyt tulee?

[Mikko Saari]

Äh, siis näin:

<ul>
<li><a <?php if (is_page('Info')) echo 'class="current"'; ?> href="http://bluechalo.com/wp2/info" title="Info">Info</a></li>

<li><a <?php if (is_page('Valpkull 2.0')) echo 'class="current"'; ?> href="http://bluechalo.com/wp2/valpkull" title="Valpkull 2.0">Valpkull</a></li>

<li><a <?php if (is_page('Va gör jag?')) echo 'class="current"'; ?> href="http://bluechalo.com/wp2/gora" title="Va gör jag?">Va gör jag?</a></li>
</ul>

En tiedä Widget Logicista mitään, joten en osaa sanoa jälkimmäiseen kysymykseesi.

[moonwoff]

Ei vieläkään saan sen css toimimaan (mullahan oli sama ongelma päävalikon kanssa). Olen yrittänyt vain .current ja myös .current a, .current a:visited, .current a:hover.

Inhoan sitä kun en osaa php:ta, muuten laitaisin koko sidebaria php koodilla ja ei widgetillä. =o(

Sitten huomasin että samalla kun olen asentanut sitä php-widgetiä niin footer on hävinnyt. En ymmärrä miksi sitä ei näe enää…?

[Mikko Saari]

Ehdottomasti kannattaa tehdä widgeteillä, se on useimmissa tapauksissa hyvin käytännöllinen tapa järjestellä sidebar. Ainoa isompi hankaluus on se, jos haluaa eri sivuille erilaiset sidebarit.

Kyllä tuon pitäisi toimia – ihan oikeat CSS-määrittelyt siellä on ja koodikin toimii nyt oikein, eli current-luokka tulee sinne minne pitääkin.

Vika on nyt siinä, ettei CSS-tiedostosi jostain syystä oikein toimi… sama vika aiheuttaa footerin katoamisen. Ajoin tuon CSS Validatorilla ja vika löytyi: sulta puuttuu sieltä yksi kaarisulku, jonka vuoksi tiedoston loppuosaa ei suoriteta. Ennen kohtaa .current a puuttuu sen #sidebar ul li -kohdan sulkeva kaarisulku. Lisää se, niin footerit ja muut toimivat.

Korjaa CSS-tiedostostasi lisäksi tämä:

img {
 border: 0;
 vertical-align: bottom;
 max-width: 100%;
 width: expression(this.width > 460 ? 460: true);
 height: 100%;
}

Nuo max-width: 100% ja height: 100% aiheuttavat vakavia ulkonäköongelmia ainakin Safarilla. Lisäksi tuo expression-juttu ei ole validia CSS:ää, se on IE:n erikoisominaisuus. En suosittele. Poistaisin nuo kaikki kolme.

[moonwoff]

Nyt footer tuli takaisin, en edes ajatellut katso validator:illa missä vika on. Mutta en saa niitä ”Info, Valpkull, Va gör jag?” linkit toimimaan. Ne ei ole ”bold” kun on on sillä ”current” sivulla (ei ainakaan mun tietokoneellani). Missähän se vika on?

Onko sulla sitten joku vastaava ratkaisu siihen img-koodin mitä ehdotit että ottaisin pois? (Kun toi oli se ainoa mitä on toiminnut ja tekee niin että uploaded kuvat ”postiin” on pienennetty automaatisesti tietyyn width:iin. En halua käyttää niitä wp omia, ja ongelma tulee sitten jos laittaa esim 500px (width) kuvan postiin ja sitten muutan #left-divin leveämmäksi–> on pakko kuvaohjelmalla taas muuttaa samat kuvien leveyttä…) En tiedä jos ymmärrät mitä haluan…

Nyt jäi se ongelma miten saan sen php-widgetiä piilotettu tietyllä sivulla… ;o) Ja tietysti sitten ne kuvat…

[Mikko Saari]

No nyt ei tule current-luokkia, mutta oletkin muuttanut sivujen nimiä. Koodi hakee ”Valpkull 2.0”-nimistä sivua, mutta sivun nimi onkin nyt ”Valpkull”. Fiksaa siis nimet kohdalleen, tai käytä sivujen ID-numeroita (näkyy mm. editointisivulla osoitteessa), jotka toimivat nimistä riippumatta.

Mitä kuvakoodiin tulee, se ei ole mikään ratkaisu alunperinkään, koska se ei toimi kuin IE:llä. Safarilla esimerkiksi tuloksena on täysin katselukelvoton sivu.

Ymmärrän mitä haet, eikä tuohon mitään hirveän hyvää ratkaisua ole. Säädä sisältödivin leveys sopivaksi ja hyväksy se, että jos myöhemmin muutat, niin kuvat eivät ole justiinsa oikean levyisiä? Tuskin muutat sisältödivin leveyttä yhtenään, toisaalta kuvien ei tarvitse välttämättä olla koko divin levyisiä. Keskitä kuvat, niin näyttävät nätimmiltä…

Tai tee kuvista alunperin vähän isompia (jos div on vaikka 500px, laita kuvan leveydeksi 650px) ja kavenna ne sitten oikeaan kokoon määräämällä html-koodissa leveys 500 pisteeseen. Näin kuvassa on levennysvaraa, jos tulee tarvetta.

[moonwoff]

No nyt ei tule current-luokkia, mutta oletkin muuttanut sivujen nimiä. Koodi hakee "Valpkull 2.0"-nimistä sivua, mutta sivun nimi onkin nyt "Valpkull". Fiksaa siis nimet kohdalleen, tai käytä sivujen ID-numeroita (näkyy mm. editointisivulla osoitteessa), jotka toimivat nimistä riippumatta.

Vaikka muutin nimet ID-numeroiksi, en saa silti ainakin mun molemmissa tietokoneessani ei näy vieläkään linkit ”bold:ina”. Gaaah, vaikka vaikuttaa niin helppo juttu niin en saa sitä. Nolottaa.

Mitä kuvakoodiin tulee, se ei ole mikään ratkaisu alunperinkään, koska se ei toimi kuin IE:llä. Safarilla esimerkiksi tuloksena on täysin katselukelvoton sivu.

Olet oikeassa. En käyttää sitä enää. Kiitos vinkistä! Ehkäpä teen sitä (keskitä kuvat). Missä voi muuten katsoa kotisivut Safarilla? Mulla on IE:lle IETester.

Tai tee kuvista alunperin vähän isompia (jos div on vaikka 500px, laita kuvan leveydeksi 650px) ja kavenna ne sitten oikeaan kokoon määräämällä html-koodissa leveys 500 pisteeseen. Näin kuvassa on levennysvaraa, jos tulee tarvetta.

Eh, en ihan nyt ymmärrä mitä voisin tehdä html:llä (kun idea kuulostaa hyvältä)?

[Mikko Saari]

Nyt on luokat oikein, joten vika on CSS-koodissa.

Kokeilepa vaihtaa ”.current a” muotoon ”a.current”.

Safarilla voi testata asentamalla sen koneelleen, sen saa Windowsillekin.

WordPressissä voit määritellä kuvan leveyden kuvaa laittaessasi, jolloin kuvaan lisätään width-määre (voit lisätä sen itsekin koodi-näkymästä). Siis näin:

<img src="..." width="500" />

Nyt kuva skaalautuu 500 pisteen levyiseksi. Jos joskus haluat kuvan leveämmäksi, käyt muuttamassa tuon widthin isommaksi (mutta korkeintaan siihen asti, mikä on kuvan oikea leveys, sen yli skaalaaminen ei kannata).

Vaivalloista vaihtaa, mutta oikeasti – kuinka usein sille on ylipäätään tarvetta?