Przystosowanie elementów graficznych na bloga (wordpress)

Jeśli samodzielnie ozdabiacie swojego bloga i tworzycie grafiki, lub poszczególne jego elementy musicie wiedzieć jaką mają mieć wielkość. Bardzo prosto możecie to sprawdzić

[heart_this]

Wystarczy kliknąć na wybrany element strony prawym przyciskiem myszy i wybrać opcję > Zbadaj element (lub po prostu wcisnąć skrót klawiszowy ctrl + shift + i).

Z prawej strony pojawi Wam się narzędzie, za pomocą którego odnajdziecie w kodzie poszczególne elementy strony, w tym ich wymiary. Przemieszczając się po poszczególnych linijkach kodu zauważycie, że podświetlają Wam się odpowiadające im elementy strony. Później wystarczy rozwinąć daną linijkę i wczytać się w szczegóły. Czasami wymiary podawane są bezpośrednio przy elemencie na podglądzie strony.

Kiedy stworzycie grafikę, w przypadku wordpressa ładujecie ją do mediów i kopiujecie link bezpośredni. W edytorze szablonu (opcja niedostępna niestety na blog.pl, w pełnej wersji wordpressa owszem) wklejacie link w odpowiednie miejsce kodu.

Jeśli tworzycie sobie po prostu strony statyczne, chcecie stworzyć header lub jakiś przycisk do sidebara lub ozdabiacie sobie po prostu wpis, dobrze byłoby także stworzyć sobie obrazek „pod wymiar”.

W przypadku nagłówków / headerów, lub często nawet tła strony wordpress daje nam do tego gotowe narzędzia. W przypadku każdego motywu (a jest ich naprawdę sporo) mogą one znajdować się w innym miejscu. Jeśli nagłówek jest częścią charakterystyczną bloga, cechą dominującą po którym odszukaliśmy go wśród motywów bardzo często taka opcja będzie dostępna od razu w personalizacji motywu. Najczęściej jednak opcje te pojawiają się w:

• Wygląd > Personalizacja
• Wygląd > Nagłówek
• Narzędziach,
• Ustawieniach.

W przypadku wstawiania obrazków do sidebara, możemy skorzystać z narzędzia: Wygląd > Widgety i tam odnaleźć widget o nazwie tekst.

Przeciągamy widget do odpowiedniego sidebara, lub stopki (czasem są dwa sidebary) i wklejamy w nim kod dzięki któremu pojawi nam się w nim obrazek. W kodzie w miejscu image source (img src) wklejamy bezpośredni link do obrazka. W miejscu tekst zastępczy warto wpisać cokolwiek lub spację w przypadku, gdyby taki obrazek nie chciał się załadować.

<img src=”adres do obrazka” alt=”tekst zastępczy” />

Jeśli dany obrazek ma być linkiem / buttonem / przyciskiem (zwał jak zwał) to tworzymy z niego link w ten sposób:

<a href=”adres strony docelowej”><img src=”adres do obrazka” alt=”tekst zastępczy” /></a>

W tym wypadku warto jednak wpisać coś w polu tekst zastępczy ponieważ jeśli obrazek nam się nie załaduje, pojawi się przynajmniej tekst będący odnośnikiem.

Jeśli chodzi o sidebary i stopki ja wszystko bym wycentrowała za pomocą <center> … </center>. Jednak jest to oczywiście kwestią gustu.

Do kolejnej linijki jak pamiętacie przechodzimy za pomocą <br>.