Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS]Podświetlenie aktualnie wybranej strony
Forum PHP.pl > Forum > Przedszkole
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 smile.gif 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:

Cytat
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:

  1. <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>
  2. <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>
  3. <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>
  4. .
  5. .
  6. .
  7. .
  8. // i tak dalej ze wszystkimi linkami
  9. </ul>
  10.  


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 smile.gif
emtiej
Prostszy? blinksmiley.gif

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:

  1. <?php if(is_home()){echo "class=\"activ\"";} ?>

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:

  1. <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>


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:
  1. .activ{color: green;}
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:
  1. <div id="nawigacja">
  2. <div class="navstart"></div>
  3. <a href="<?PHP bloginfo('home') ?>" class="glowna<?php if(is_home()){echo "_activ";} ?>"></a>
  4. <a href="<?PHP bloginfo('home') ?>/kategorie/" class="kategorie<?php if(is_category()){echo "_activ";} ?>"></a>
  5. <a href="<?PHP bloginfo('home') ?>/omnie/" class="omnie<?php if(is_page('omnie')){echo "_activ";} ?>"></a>
  6. <a href="<?PHP bloginfo('home') ?>/portfolio/" class="portfolio<?php if(is_page('portfolio')){echo "_activ";} ?>"></a>
  7. <a href="<?PHP bloginfo('home') ?>/kontakt/" class="kontakt<?php if(is_page('kontakt')){echo "_activ";} ?>"></a>
  8. <a href="<?PHP bloginfo('home') ?>/download/" class="download<?php if(is_page('download')){echo "_activ";} ?>"></a>
  9. <div class="navend"></div>
  10. </div>


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ę.
bartex9
Tylko że u mnie sidebar.php wygląda tak:

Cytat
<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:

  1. <div id="pages-3" class="widget widget_pages"><h3>Strony</h3> <ul>
  2. <li class="page_item page-item-42"><a href="http://otwartezagrody.org/?page_id=42" title="O PROJEKCIE">O PROJEKCIE</a></li>
  3.  
  4. <li class="page_item page-item-48"><a href="http://otwartezagrody.org/?page_id=48" title="CELE">CELE</a></li>
  5. <li class="page_item page-item-44"><a href="http://otwartezagrody.org/?page_id=44" title="METODA">METODA</a></li>
  6. <li class="page_item page-item-50"><a href="http://otwartezagrody.org/?page_id=50" title="WSPÓŁPRACA">WSPÓŁPRACA</a></li>
  7. <li class="page_item page-item-52"><a href="http://otwartezagrody.org/?page_id=52" title="WSIE PARTNERSKIE">WSIE PARTNERSKIE</a></li>
  8. <li class="page_item page-item-514"><a href="http://otwartezagrody.org/?page_id=514" title="BIBLIOTEKA ONLINE">BIBLIOTEKA ONLINE</a></li>
  9. <li class="page_item page-item-223"><a href="http://otwartezagrody.org/?page_id=223" title="OTWARTE OGRODY">OTWARTE OGRODY</a></li>
  10. <li class="page_item page-item-754"><a href="http://otwartezagrody.org/?page_id=754" title="POLECAMY">POLECAMY</a></li>
  11. </ul>
  12. </div>
  13.  


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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.