Forum portalu Fan-Strefa.pl

Dla webmastera => Kodowanie => Wątek zaczęty przez: Drew w 03 Maj 2014, 15:43:20

Tytuł: Tytuł postu na ikonie wpisu
Wiadomość wysłana przez: Drew w 03 Maj 2014, 15:43:20
Otwórz mam taki mały problem. Nie wychodzi mi zakodowanie tytułu postu na ikonie wpisu. Są momenty kiedy ten tytuł jest na ikonie ale gdy dodaję wartość dla odstępu między wierszami to cały div przesuwa mi się w dół o tą wartość. Nie mam pojęcia jak to zrobić aby było dobrze.
Tytuł: Odp: Tytuł postu na ikonie wpisu
Wiadomość wysłana przez: PA_BLO w 03 Maj 2014, 19:36:03
To ja Ci podam na przykładzie, gdzie niedawno sam tak zrobiłem na nadchodzący szablon na mojej stronie.
Otóż divowi z ikoną wpisu nadajesz wartość z-index: 1; zaś divowi w którym umieścisz tytuł dajesz wartość z-index: 2;

Oto CSS:
div#posts-thumb{
width: ...px;
height: ...px;
background-image: ...;
background-repeat: no-repeat;
z-index: 1;
position: relative;
}

div.post-caption{
z-index: 2;
width: ...px;
height: ...px;
background-color: transparent;
bottom: 45px;
position: absolute;
}

Oczywiście wartość bottom możesz sobie zmienić, ja podałem akurat 45px aby tytuły były 45px od dolnej krawędzi ikony.

A kod HTML wygląda tak:
<div id="posts-thumb">
<div class="post-caption">
TU DAJESZ TYTUŁ POSTU
</div>
<?php
if ( has_post_thumbnail() ) {
 
set_post_thumbnail_sizeSZEROKOŚĆWYSOKOŚĆ );
 
the_post_thumbnail();
}
?>

</div>

Korzystam z takiego kodu i mi zawsze działał. Oczywiście jeśli tytuł postu ma być w postaci linku to pamiętaj aby zrobić dodatkowy styl dla:
div.post-caption a:link, div.post-caption a:active, div.post-caption a:visited{...} oraz dla div.post-caption a:hover{...}
Tytuł: Odp: Tytuł postu na ikonie wpisu
Wiadomość wysłana przez: Drew w 03 Maj 2014, 21:25:07
Dzięki wielkie!! Działa ;-D
Tytuł: Odp: Tytuł postu na ikonie wpisu
Wiadomość wysłana przez: Skye w 04 Maj 2014, 22:22:13
a dodam jeszcze, że chodzi o te słynne indexy w cssie, czyli warstwy w divach:)

Polecana lektura: https://www.google.pl/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CC8QFjAA&url=http%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fpr_pos_z-index.asp&ei=SKFmU6uoD9LY0QWcoIHQBg&usg=AFQjCNGo5mGU8EL1dtgS5oJ1TZIetDBRjA&sig2=pery7hS_8ELrMlZZ2yroaw
Tytuł: Odp: Tytuł postu na ikonie wpisu
Wiadomość wysłana przez: Narwana w 28 Maj 2014, 19:05:04
Cześć. Wiecie może, jak ustawiać nagłówki wpisów, coś takiego jak jest np. tutaj http://gleeclub.pl/? Przejrzałam już dziesiątki stron, przekopałam całe to forum i domyślam się, że pewnie w tym temacie może o to chodzić, ale kompletnie nie wiem, gdzie i co wkleić, jaki kod... Proszę o pomoc! : (
Tytuł: Odp: Tytuł postu na ikonie wpisu
Wiadomość wysłana przez: PA_BLO w 28 Maj 2014, 19:49:55
Cześć. Wiecie może, jak ustawiać nagłówki wpisów, coś takiego jak jest np. tutaj http://gleeclub.pl/? Przejrzałam już dziesiątki stron, przekopałam całe to forum i domyślam się, że pewnie w tym temacie może o to chodzić, ale kompletnie nie wiem, gdzie i co wkleić, jaki kod... Proszę o pomoc! : (

To nic innego jak ikona wpisu. Aby włączyć taką funkcję musisz utworzyć plik functions.php i umieścić w nim następujący kod:
<?php if ( function_exists( &#39;add_theme_support&#39; ) ) {
add_theme_support( &#39;post-thumbnails&#39; );
        
set_post_thumbnail_size548278 );
?>

W miejsce liczby 548 wpisujesz szerokość jaką ma mieć obrazek, zaś w miejsce 278 podajesz wysokość.

Następnie podczas tworzenia i kodowania szablonu w pliku index.php w miejscu postów wstawiasz podobny kod, który będzie odpowiedzialny za wyświetlanie się ikony. Wstawiasz go tam gdzie ma pojawiać się ikona. Jeśli ma być ona nad tytułem postów, to umieszczasz kod przed kodem tytułu.
<?php
if ( has_post_thumbnail() ) {
 
set_post_thumbnail_size548278 );
 
the_post_thumbnail();
}
?>
Podobnie robisz z kodem pliku single.php (pliku wyglądu strony pojedynczej).

Ikonę wpisu dodaje się podczas pisania postów. Z lewej strony w panelu edytora powinno pojawić Ci się takie coś jak ustaw ikonę wpisu, klikasz w to i wtedy wgrywasz wcześniej przygotowane zdjęcie o wymiarach jakie zostały ustalone.

Plik functions.php umieszczasz wraz z innymi plikami w katalogu szablonu.