Forum portalu Fan-Strefa.pl Forum portalu Fan-Strefa.pl 

Autor Wątek: Tytuł postu na ikonie wpisu  (Przeczytany 1805 razy)

Drew

  • Fanik
  • **
  • Wiadomości: 235
  • Reputacja: 0
    • Zobacz profil
    • Zac Efron Polska
Tytuł postu na ikonie wpisu
« dnia: 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.

“Everyone looks so much better when they smile.”
~ Jimmy Fallon



// Arrow // The Flash // Grey's Anatomy // Scandal // Agents of S.H.I.E.L.D. // Agent Carter // The Vampire Diaries // Daredevil // Gotham // House of Cards // Chicago P.D. // Once Upon a Time // Bones // New Girl // Baby Daddy // Dark Matter // Killjoys // Scorpion // Mr. Robot // Suits // The Originals // Modern Family //

PA_BLO

  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 2529
  • Reputacja: 116
    • Zobacz profil
    • Degrassi Poland
Odp: Tytuł postu na ikonie wpisu
« Odpowiedź #1 dnia: 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{...}
Do you want more?


Drew

  • Fanik
  • **
  • Wiadomości: 235
  • Reputacja: 0
    • Zobacz profil
    • Zac Efron Polska
Odp: Tytuł postu na ikonie wpisu
« Odpowiedź #2 dnia: 03 Maj 2014, 21:25:07 »
Dzięki wielkie!! Działa ;-D

“Everyone looks so much better when they smile.”
~ Jimmy Fallon



// Arrow // The Flash // Grey's Anatomy // Scandal // Agents of S.H.I.E.L.D. // Agent Carter // The Vampire Diaries // Daredevil // Gotham // House of Cards // Chicago P.D. // Once Upon a Time // Bones // New Girl // Baby Daddy // Dark Matter // Killjoys // Scorpion // Mr. Robot // Suits // The Originals // Modern Family //

Skye

  • Let's get fired up:)
  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 1243
  • Reputacja: 81
    • Zobacz profil
    • Retro Creatives
I just wanna live fast, party hard,
make money, be a star
♥♥
Retroscream my name[/center]

Narwana

  • Nowicjusz
  • *
  • Wiadomości: 1
  • Reputacja: 0
    • Zobacz profil
Odp: Tytuł postu na ikonie wpisu
« Odpowiedź #4 dnia: 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! : (

PA_BLO

  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 2529
  • Reputacja: 116
    • Zobacz profil
    • Degrassi Poland
Odp: Tytuł postu na ikonie wpisu
« Odpowiedź #5 dnia: 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.
Do you want more?


Forum portalu Fan-Strefa.pl

Odp: Tytuł postu na ikonie wpisu
« Odpowiedź #5 dnia: 28 Maj 2014, 19:49:55 »