Zakładki do sidebara – podpinamy | Vivee - wordpress, webmastering, grafika i fotografia

data publikacji: 02.09.2008
Zakładki do sidebara – podpinamy
kategoria: Wordpress autor: palmiak
W poprzedniej części przygotowaliśmy sobie zakładki. Teraz fajnie by było zastosować je w praktyce i podpiąć pod WordPressa.

Wstęp

Ten opis nie jest w 100% uniwersalny. Jest wiele skór do WP, wiele możliwości umieszczenia tych zakładek oraz pewnie jeszcze kilka dodatkowych niespodzianek. Jeżeli będziecie mieć, więc jakieś kłopoty nie zapomnijcie podać na jakiej skórze próbowaliście to zainstalować.

Ja będę korzystał z lekko zmodyfikowanej skóry Fields of Gold.

Nim zaczniecie czytać ten tutorial zalecam przeczytanie poprzedniej części.

header.php

Nim zabierzemy się za sidebar.php musimy zmodyfikować header.php (czy inny plik w którym znajduje się znacznik <head>). Musimy dodać link do jQuery oraz do naszego skryptu tags.js. Nim to zrobimy warto rozejrzeć się czy któraś z naszych wtyczek nie linkuje do jQuery (robi to np. NextGen Gallery). Jeżeli jesteśmy pewni, że nie to do katalogu z naszą skórą wgrywamy jquery.js oraz tags.js.

Pozostaje nam już tylko umieścić gdzieś w <head> następujący kod:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/tab.js"></script>

sidebar.php

... lub inny plik w którym chcemy umieścić zakładki. W moim przypadku mogłem szczęśliwie "zaorać" wszystko i wstawić same zakładki. I pozostało mi do wstawienia tylko

<div id="sidebar-wrapper">
<div id="sidebar">
<div id="zakladki">
<h2><a href="#o_mnie">O mnie</a></h2>
<h2><a href="#archiwum">Archiwum</a></h2>
<h2><a href="#linki">Przyjaciele</a></h2>
<div id="o_mnie" class="sideblock">
<h3>O mnie</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius viverra mi. Maecenas mattis metus sit amet nibh. Aliquam aliquet, diam at semper tristique</div>
<div id="archiwum" class="sideblock">
<h3>Archiwum</h3>
<ul>
<?php wp_get_archives('type=monthly&limit=8'); ?>
</ul>
</div>
<div id="linki" class="sideblock">
<h3>Linki</h3>
<ul>
<?php wp_list_bookmarks('title_li=&limit=8&orderby=rand'); ?>
</ul>
</div>
</div>
</div>
</div>

O template tagach napiszę kapkę później.

Ważniejsze jest to, że jeżeli porównacie ten kod z poprzednikiem zauważycie drobną różnicę w nazwach divów. Skąd to? Ano stąd, ze skóra miała już w swoim stylu #about i #links i powodowało to drobne konflikty natury estetycznej.

style.css

To już tylko kwestia dostosowania, żeby wyglądało to jak człowiek. W moim przypadku było to szczęśliwie niewiele roboty i ograniczyło się do dopisania do stylu:

#zakladki h2 {
display:inline;
font-size:1em;
margin:0 2px 0 0;
border: 1px solid #E2E2E2;
border-bottom:0px;
}

#zakladki h2 a {
background:#F7F7F7;
padding:5px 5px 2px 5px;
text-decoration:none;
color:black;
}

#zakladki h2 a:hover, #zakladki h2 a.active {
background:#C20000;
color:white;
}

Wróćmy do template tagów

Jeżeli chcemy umieścić w naszych zakładkach np. listę kategorii, archiwum czy inne musimy posłużyć się tzw. template tagami. Są to po prostu funkcje php, które wplatamy w kod i naprawdę nie należy na widok słowa php uciekać twierdząc, że się nie umie programować.

Żeby wyświetlić archiwum wystarczyło wkleić <?php wp_get_archives('type=monthly&limit=8'); ?>. Za pomocą parametrów ustalamy, że ma być to archiwum miesięczne oraz, że ma pokazać maksymalnie 8 pozycji.

Następnie wyświetliliśmy linki za pomocą <?php wp_list_bookmarks('title_li=&limit=8&orderby=rand'); ?&gt. Tutaj mamy troszkę więcej parametrów. Za pomocą title_li= ustalamy brak tytułu (spróbujcie coś tam napisać to zobaczycie efekt), limit=8 ogranicza nam ilość linków do 8, orderby=rand powoduje, że za każdym razem wyświetlane są losowe linki.

Jeżeli macie jakieś wątpliwości to zapraszam na codex.wordpress.com. Na tej stronie znajdziecie dokładne informacje o wszystkich tagach.

Podsumowanie

Tym oto sposobem tematyka zakładkowa została rozszerzona, ale oczywiście to jeszcze nie koniec. Będziemy to jeszcze rozwijać i rozbudowywać.

Póki co jednak popróbujcie zaimplementować zakładki w różnych skórach i poeksperymentujcie z Template Tagami.

Jak już wspominałem, jeżeli macie jakiś problem z doprowadzeniem do współpracy zakładek z Waszą skórą dokładnie podajcie jakiej skóry używacie.
Udostępnij ten artykuł:
Zobacz podobne wpisy:

None Found
1436 ResponsesZak%C5%82adki+do+sidebara+-+podpinamy2008-09-02+21%3A31%3A33palmiakhttp%3A%2F%2Fvivee.info%2F%3Fp%3D143 to “Zakładki do sidebara – podpinamy”
1. Arkadiusz pisze:
  
  3 09 2008 o 00:34
  
  Dzięki za wszystko Jednak jesteście najlepsi
  I to mówię na serio
  
  Odpowiedz
2. Arkadiusz pisze:
  
  3 09 2008 o 00:39
  
  zapomniałem moglibyście dać opis do najbardziej popularnych template tagów bo nieraz by się przydał taki spis po polsku
  
  Odpowiedz
3. Arkadiusz pisze:
  
  3 09 2008 o 01:09
  
  Sorka że 3 komentarze pod sobą ale mi nie działa :/
  Oto adres to skina http://arkadiusz.pdg.pl/themes-pl-wpcandy/
  
  Odpowiedz
4. BoDeK pisze:
  
  20 11 2008 o 13:09
  
  Mi też nie działa, próbowałem na kilku motywach graficznych i niestety lipa…
  
  Odpowiedz
5. palmiak pisze:
  
  20 11 2008 o 13:15
  
  BoDeK, jaka skóra i jakie wtyczki (bardziej to drugie coś mi się widzi). Jeżeli jakaś z wtyczek używa biblioteki innej niż jQuery warto się zaintersować tym co m1chu napisał na http://m1chu.eu/wordpress/kolizje-wspoldzialania-bibliotek-javascript-na-podstawie-wtyczek-wordpress .
  
  Odpowiedz
6. Pablo Artist pisze:
  
  30 03 2010 o 11:29
  
  Wszystko cacy, ale jak dodałem drugą grupę zakładek, to się w niej nie pokazuje treść. Widać tylko to, co jest w pierwszej zakładce, aktywnej. Chodzi o zakładki na http://www.gosiunia.pl w sidebarze – te dolne nie działają. Proszę o pomoc.
  
  Odpowiedz
Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Powiadom mnie o nowym komentarzu do tego artykułu.

Top 10

CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
Skrypty client-side
Skrypty server-side
Tutoriale
Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
Wieczór z Open Source
Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Polecane strony

No bookmarks avaliable.

Artykuły: