[PHP][CSS]Podświetlenie aktualnie wybranej strony Opcje

[bartex9]

Witam,
Jestem bardzo początkującym webamsterem. Pracuję nad swoją stroną internetową w Wordpressie. Już jest prawie skończona. Mam jeszcze jeden problem. Jak wejdziecie na moją stronę(www.otwartezagrody.org) to zauważycie że w przypadku menu poziomego, aktywna strona jest podświetlona na zielono. To samo jednak nie występuje w przypadku menu bocznego. Myślę że ma to związek z tym, że menu boczne obecne jest przy pomocy odpowiedniej wtyczki. Mój plik style.css wygląda tak: http://wklej.org/id/270316/
A tutaj plik wtyczki (cała wtyczka ma tylko jeden plik): http://wklej.org/id/272431/

Byłbym wdzięczny gdybyście mi napisali jak najprościej jak mogę to zrobić. Z góry dzięki.

[emtiej]

funkcja is_page() w szablonie twojej strony załatwi sprawę, moim zdaniem to będzie mało elegancki sposób, ale da radę heh Ta funkcja sprawdza, czy aktualnie jest wyświetlana dana strona, jeżeli tak zwraca TRUE, a jeżeli nie to FALSE. Nie wiem dokładnie jak to się stosuje, bo dopiero wczoraj miałem pierwszą styczność z wordpress-em.

W dokumentacji znalazłem:

A PAGE Page

This section refers to WordPress Pages, not any generic webpage from your blog.

is_page()
When any Page is being displayed.
is_page('42')
When Page 42 (ID) is being displayed.
is_page('About Me And Joe')
When the Page with a post_title of "About Me And Joe" is being displayed.
is_page('about-me')
When the Page with a post_name (slug) of "about-me" is being displayed.
is_page(array(42,'about-me','About Me And Joe'))
Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title "About Me And Joe". Note: the array ability was added at Version 2.5.

Czyli zrób coś takiego:

[PHP] pobierz, plaintext 
<li class="page_item page-item-42"><a href="http://otwartezagrody.org/?page_id=42" title="O PROJEKCIE" <?php if(is_page(42)){echo "class=\"TU_KLASA_KTORA_BEDZIE_KOLOROWAŁA_TEKST\"";} ?>>O PROJEKCIE</a></li>
<li class="page_item page-item-48"><a href="http://otwartezagrody.org/?page_id=48" title="CELE" <?php if(is_page(48)){echo "class=\"TU_KLASA_KTORA_BEDZIE_KOLOROWAŁA_TEKST\"";} ?>>CELE</a></li>
<li class="page_item page-item-44"><a href="http://otwartezagrody.org/?page_id=44" title="METODA" <?php if(is_page(44)){echo "class=\"TU_KLASA_KTORA_BEDZIE_KOLOROWAŁA_TEKST\"";} ?>>METODA</a></li>
.
.
.
.
// i tak dalej ze wszystkimi linkami
		</ul>
 
[PHP] pobierz, plaintext 

Jeżeli będziesz na stronie z id 44 to zostanie dodana klasa do linku, potem w css definiujesz ją i nadajesz linkom kolor jaki ustawisz.

[bartex9]

Nie za skomplikowane to trochę? Może jest jakiś prostszy sposób bo nie za bardzo wyobrażam sobie wdrożenie tego

[emtiej]

Prostszy?

Skoro trudne jest dla Ciebie otworzenie 2 plików na ftp i dopisanie kilka linijek kodu, no to ja Ci nie pomogę... i jedno jeszcze powiem prostszego sposobu chyba nie ma.
Pozdrawiam.

[bartex9]

No ok tylko jak pisałem nie za bardzo znam się na tym i nie wiem gdzie to mam dokładnie wstawić. Po za tym przyjrzałem chyba wszystkie pliki Wordpressa i czegoś takiego jak mi Ty napisałeś nie znalazłem...

[emtiej]

Najpierw sprawdź jaki masz zainstalowany theme. Folder ze wszystkimi plikami theme znajdziesz w katalogu

Kod

/wp-content/theme/TU_NAZWA_TWOJEGO_THEMA

Każdy theme masz podzielony na sekcje między innymi: head, footer, archive... wszystko z rozszerzeniami PHP. W tych plikach musisz znaleźć plik z swoim lewym menu(prawdopodobnie będzie to plik sidebar.php)

Otwierasz go i wyszukujesz listy ze swoimi linkami. Jak już znajdziesz to dopisujesz taki kod jaki podałem ci wyżej, czyli:

[PHP] pobierz, plaintext 
<?php if(is_home()){echo "class=\"activ\"";} ?>
[PHP] pobierz, plaintext 

W tym przypadku funkcja is_home() sprawdza, czy internauta przegląda stronęgłówną, jeżeli tak, to dopisywana jest klasa CSS pod nazwą "activ", is_home stosujesz do odnościka strony głównej, do reszty stosujesz funkcję is_page(TU_ID_PAGE), dla przykładu:

[PHP] pobierz, plaintext 
<li class="li2"><li class="page_item page-item-48"><a href="http://otwartezagrody.org/?page_id=48" title="CELE" <?php if(is_page(48)){echo "class=\"activ\"";} ?>>CELE</a></li>
[PHP] pobierz, plaintext 

Nie wiem, czy nie będziesz musiał tego id strony podawać w cudzysłowach, ja na swoim blogu wpisuje słowne nazwy podstron. Na koniec otwierasz plik css stylu i gdzieś pod końcem dopisujesz:

[CSS] pobierz, plaintext 
.activ{color: green;}
[CSS] pobierz, plaintext 

Naturalnie tam gdzie green możesz podać dokładniejszy kolorek, jaki tylko sobie zapragniesz.

Dla przykładu podaję kod ze swojej strony, ja robiłem to inaczej, bo dopisywałem _activ do klasy jeżeli strona była aktywna:

[PHP] pobierz, plaintext 
    <div id="nawigacja">
        <div class="navstart"></div>
        <a href="<?PHP bloginfo('home') ?>" class="glowna<?php if(is_home()){echo "_activ";} ?>"></a>
        <a href="<?PHP bloginfo('home') ?>/kategorie/" class="kategorie<?php if(is_category()){echo "_activ";} ?>"></a>
        <a href="<?PHP bloginfo('home') ?>/omnie/" class="omnie<?php if(is_page('omnie')){echo "_activ";} ?>"></a>
        <a href="<?PHP bloginfo('home') ?>/portfolio/" class="portfolio<?php if(is_page('portfolio')){echo "_activ";} ?>"></a>
        <a href="<?PHP bloginfo('home') ?>/kontakt/" class="kontakt<?php if(is_page('kontakt')){echo "_activ";} ?>"></a>
        <a href="<?PHP bloginfo('home') ?>/download/" class="download<?php if(is_page('download')){echo "_activ";} ?>"></a>
        <div class="navend"></div>
    </div>
[PHP] pobierz, plaintext 

Efekt możesz zobaczyć na www.raciniewski.eu (działają tylko strona główna i portfolio z tego względu, że reszty jeszcze nie utworzyłem)

Mam nadzieje, że dasz sobie radę.

Ten post edytował emtiej 9.02.2010, 19:18:52

[bartex9]

Tylko że u mnie sidebar.php wygląda tak:

<div id="sidebar" class="secondary">

<?php th_sidebar(); // The magical sidebar hook ?>
<?php $wp_the_query->current_post--; setup_postdata($wp_query->next_post()); // Reset post data for comments ?>

</div>

Gdzie mam więc to wstawić dokładnie?

[emtiej]

Jak już powiedziałem odnajdź plik w którym masz to menu lewe... Nie wiem nie mam pojęcia w jakim pliku może to być, bo każdy theme jest inaczej podzielone itp. Poszukaj, czy to duży problem przejrzeć wszystkie pliki w folderze z twoim themem?
Możliwe że to menu wyświetlane jest jakąś funkcją, wtedy będzie ona w functions.php

Szukaj kodu podobnego do tego:

[HTML] pobierz, plaintext 
 <div id="pages-3" class="widget widget_pages"><h3>Strony</h3>		<ul>
			<li class="page_item page-item-42"><a href="http://otwartezagrody.org/?page_id=42" title="O PROJEKCIE">O PROJEKCIE</a></li>
 
<li class="page_item page-item-48"><a href="http://otwartezagrody.org/?page_id=48" title="CELE">CELE</a></li>
<li class="page_item page-item-44"><a href="http://otwartezagrody.org/?page_id=44" title="METODA">METODA</a></li>
<li class="page_item page-item-50"><a href="http://otwartezagrody.org/?page_id=50" title="WSPÓŁPRACA">WSPÓŁPRACA</a></li>
<li class="page_item page-item-52"><a href="http://otwartezagrody.org/?page_id=52" title="WSIE PARTNERSKIE">WSIE PARTNERSKIE</a></li>
<li class="page_item page-item-514"><a href="http://otwartezagrody.org/?page_id=514" title="BIBLIOTEKA ONLINE">BIBLIOTEKA ONLINE</a></li>
<li class="page_item page-item-223"><a href="http://otwartezagrody.org/?page_id=223" title="OTWARTE OGRODY">OTWARTE OGRODY</a></li>
<li class="page_item page-item-754"><a href="http://otwartezagrody.org/?page_id=754" title="POLECAMY">POLECAMY</a></li>
		</ul>
		</div>		
 
[HTML] pobierz, plaintext 

Jeżeli te linki wyświetlane są jakąś funkcją, np get_pages() albo coś w podobie, to wiadomo że będzie inaczej wyglądać. Jak naprawdę nie masz pojęcia gdzie tego szukać, to spakuj mi ten theme do winrara i wrzuć go na forum/upload plików/ftp i rzucę okiem.