Wróciłeś z urlopu? Zostaw w internecie ślad. Napisz komentarz. Zdradzam tajemnicę pisania rewelacyjnych tekstów


WordPress – podstawy tworzenia szablonów cz.4


31 lipca 2014, 23:30 | 4 komentarze | 5 272

Dzięki za motywujące komentarze. Bez Was nie byłoby tak szybko kolejnej części tego kursu. W poprzedniej części „zepsuliśmy” standardowy szablon. W tym może trochę zaczniemy naprawiać. Pokażę Wam jak przygotować nagłówek strony oraz belkę menu. Zaczynajmy!

Dla przypomnienia skończyliśmy na stronie, która wygląda w ten sposób. Zanim zaczniesz edytować header musicie dowiedzieć się o pewnym niepotrzebnym skomplikowaniu motywu Stalkers. Otóż nagłówek i stopka są podzielone na 2 części (w sumie cztery pliki) i umieszczone w katalogu /parts/shared. Ponieważ są schowane w katalogu, dlatego nie możesz wchodząc do części Wygląd -> Edytor skorzystać z edytora on-line by je modyfikować. Zainstaluj FileZillę lub WinSCP i po zalogowaniu się wejdź do katalogu /wp-content/themes/starkers-master/parts/shared/. Znajdziesz tam 4 pliki:

  • footer.php
  • header.php
  • html-footer.php
  • html-header.php

Dziś będą Cię interesować tylko te, które dotyczą części „header”.

html-header.php

Plik html-header.php zawiera deklarację DOCTYPE w wersji uproszczonej, część <head> zawierającą znaczniki title, meta odpowiadające za kodowanie strony, ścieżkę do favicony. Znajdziesz tam także znacznik:

 

Pod żadnym pozorem nie usuwaj tego znacznika z szablonu. Odpowiada on za wywołanie linijki kodu dotyczącego widoczności strony w wyszukiwarkach, a także szeregu poleceń, które służą wywołaniu plików .css, .js i .xml obsługujących szablon. Jest też, o ile nie została ukryta, informacja o wersji zainstalowanego WordPressa oraz kilka linijek zewnętrznego arkusza stylów css opuszczającego stronę o 32 piksele w momencie kiedy użytkownik jest zalogowany i widzi górny pasek WordPressa (WP admin bar).

header.php

Najbardziej będzie nas interesować plik header.php. Tam znajdziemy sekcję <header> na której edycji nam zależy. Tak więc do dzieła.

 

Poniższa linijka odpowiada za wyświetlanie linka do strony. Wszystko to w znaczniku <h1> celem lepszego pozycjonowania witryny.  Pomysł z tytułem strony będącym jednocześnie tekstem w najważniejszym dla Google nagłówku to nie głupi pomysł, jednak najczęściej witryny mają w tym miejscu logo (a nieliczne wykorzystują h1 jako logo). Spróbujmy zrobić coś, co sprawi, że wilk będzie syty i owca cała. Wrzuć na serwer logo które chcesz umieścić na górze strony i poniżej elementu h1 dopisz:

 

Oczywiście ścieżkę musisz zmienić na taką, która będzie wskazywała Twoje logo (możesz po jego umieszczeniu pobrać dokładną ścieżkę z sekcji Media). Podawać ścieżki do WP możesz na dziesiątki sposobów, ten jest najprostszy ale niedoskonały, ponieważ po zmianie domeny elementy, które zapisaliśmy w ten sposób (na sztywno) nie będą się wyświetlały. Nie chcę się zagłębiać szczegółowo w lokalizowanie szablonu, jeśli chcesz to poczytaj dokumentację WordPressa albo podejrzyj jak są wywoływane pliki w innych szablonach.

Po poprawnym wpisaniu naszego elementu <a> z klasą „logo” możemy sprawdzić czy logo się wyświetla poprawnie. Dodatkowo sugeruję żebyśmy usunęli z pola widzenia znacznik h1. Moglibyśmy go co prawda usunąć, ale zastosuję nieco inne rozwiązanie.

Dopisz do pliku style.css:

 

Linijka którą dopisałeś wysyła znacznik h1 „w kosmos” (zwróć uwagę na to, że nazwałem go „title”, pamiętaj o tym żeby nazwać go w header.php). Dzięki temu tytuł nie pojawia się i nie szpeci naszej strony, a jednocześnie jest widoczny w wyszukiwarce Google (zdania dotyczące używania text-indent są podzielone, ale z moich obserwacji wynika, że nie szkodzi to pozycji strony).

W dalszej kolejności znajdziesz w znacznikach php polecenie bloginfo( ‚description’ ); które odpowiada za wyświetlenie opisu strony podanego w części Ustawienia -> Ogólne. Jeśli nie modyfikowałeś tych ustawień to standardowo pojawi się tekst „Kolejna witryna oparta na WordPressie”. Moja rada – usuń polecenie albo wejdź do ogólnych ustawień i usuń opis. Jeśli pozostawisz ten element na stronie, będzie to czytelny sygnał świadczący o niedopracowaniu witryny.

Kolejny znacznik w php get_search_form(); odpowiada za wyświetlenie wyszukiwarki. Jeśli planujesz ją umieścić w innym miejscu, nie krępuj się. Dostosuj kod do swoich potrzeb.

 

Ostatni element jaki najprawdopodobniej znajdziemy przed zamknięciem sekcji header to wp_nav_menu. Jest to typowy sposób na wyświetlenie menu. Menu wyświetlane jest w formie listy nieuporządkowanej posiadającej następującą postać:

 

Żeby utrudnić nieco sprawę to każde &#60li&#62 zawiera link więc ma w rzeczywistości postać:

 

Mam nadzieję, że do tej pory wszystko jest jasne. Jeśli czegoś nie rozumiesz to pisz w komentarzach, chętnie wyjaśnię wszystkie wątpliwości.

Co robimy z naszym menu, żeby wyglądało lepiej? Proponuję dodać tło, a także przekształcić nasze menu pionowe w poziomą, jednoliniową, estetycznie wyglądającą nawigacje witryny. Aby to zrobić w kodzie CSS (plik style.css) dodajemy następujące linijki kodu:

 

Jeśli wszystko dobrze pójdzie to pod logo powinieneś zobaczyć niebieską belkę i białe pozycje w menu widoczne na niej w 40 pikselowych odstępach.

Na dziś to wszystko. Kolejnej części kursu niestety nie będzie na tym blogu. Wiedzą na temat WordPressa aktualnie dzielę się poprzez serwis 500sekund.pl.

500-sekund-fb-logo

Będzie mi niezmiernie miło, jeśli dołączysz do mnie na Facebooku!

Kamil Lipiński – przedsiębiorca, bloger, projektant stron www, założyciel Mocnej Grupy Blogerów oraz człowiek, który ma wielką nadzieję na to, że można się czegoś sensownego o WordPressie dowiedzieć w 500 sekund.
Wierzący (bynajmniej nie w technologię) geek.

Subscribe without commenting




Instagram

Spelling error report

The following text will be sent to our editors: