Serpent.

Építs portált egyszerűen!
Ugrás a tartalomhoz
  • Before és After

    Before és After – Előtte és Utána. Ez a két dolog CSS -ben igazán hasznos tud lenni, sőt. Segítségével tartalmat fűzhetünk az adott elem elé / mögé HTML használata nélkül. A tartalmat a content -tel tudjuk megadni: p::before{ content: “Előtte “; } p::after{ content: ” Utána”; } Előtte   Ez a tartalom   Utána Ez lenne az […]

  • Mit NE csinálj design készítésekor

    Az aktuális trendek szinte mindig változnak, beszéljünk akár divatról, tévéműsorokról vagy akár sablonkészítésről. Ezek ugyan mindig változnak, de ha úgy vesszük, pár “aranyszabály” mindig van. Most ezekről szeretnék mesélni nektek, konkrétabban arról, hogy mit tartok mai szemmel nagy hibának design készítésekor. Egyébként, készítettem egy új projektdobozt, amit itt(link) tudtok meglesni 🙂 Betűtípusok Nehéz lehet megtalálni […]

Legutóbbi bejegyzések kiemelt képpel

Az első, elkészült rendelésemnél úgy képzeltem el a legutóbbi bejegyzéseket, hogy a kiemelt képpel együtt jelenik meg. Most ezt szeretném megmutatni, hogyan tudjátok ezt elérni, ahogy a képen látjátok.

<div id=”friss_hirek”>
<?php
$args = array( ‘posts_per_page’ => ‘3’ );

A kódot legelőször egy divbe rajuk, aminek az azonosítója mondjuk friss_hirek. A kód első részében rögtön megmondjuk neki, hány bejegyzést akarunk megjeleníteni egyszerre. Ez lesz ez a posts_per_page. Jelenleg három van utána írva, így csupán a legutóbbi hármat láthatjuk majd, ezt a számot persze kicserélheted, ha úgy szeretnéd.

A bejegyzés folytatódik a tovább mögött.

$recent_posts = new WP_Query($args);
while( $recent_posts->have_posts() ) :
$recent_posts->the_post() ?>

Aztán egy ciklus segítségével azt mondjuk, hogy már vannak bejegyzéseink, kezdje el őket megjeleníteni.

<li>

<a id=”friss_cim” href=”<?php echo get_permalink() ?>”><?php the_title() ?></a>

<?php if ( has_post_thumbnail() ) { ?>
<a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail() ?></a>
<?php } else { ?>
<a href=”<?php the_permalink(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/nincskep.jpg” alt=”<?php the_title(); ?>” /></a>
<?php } ?>

</li>

Ez pedig maga a bejegyzés szerkezet, ahogy megjeleníti. A legutóbbi bejegyzések listaelemként fognak megjelenni, azt pedig kiemelném, hogy a linknek nem véletlenül adtam id -t.A legutóbbi cikkemben arról olvashattatok, hogyan jelenítsünk meg egy helyettesítő képet, ha éppen nem használunk kiemelt képet a bejegyzésünkben. Nos, ennél a kódnál értelemszerűen nagy szükségünk lesz rá.

Ha nem láttad volna még a leírást, itt eléred(link).

<?php endwhile; ?>
<?php wp_reset_postdata();?>
</div>

Végül pedig ezzel a résszel lezárjuk mind a  a ciklust, a kódot és a divet.

Ahhoz, hogy a friss bejegyzések úgy jelenjenek meg, mint a fenti képen, a CSS kódnak így kell kinéznie:

#friss_hirek{
width: 100%;
}

#friss_hirek li{
display: inline-block;
list-style-type: none;
width: 30%; /* A bejegyzés szélessége */
margin-right: 3.3%; /* A köztük lévő távolság */
}

#friss_hirek li:last-child{
margin-right: 0px; /* Fontos: ezzel elérjük, hogy az utolsó bejegyzés után ne legyen helyköz. Így néz ki jól. */
}

#friss_hirek li:after { / * Ez az a színátment a képen */
position: relative;
content:””;
height:100%;
width:100%;
display: block;
margin-top: -82px;
z-index: 100;
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%, #000 100%);
}

#friss_hirek li #friss_cim{ / *És mint mondtam, nem hiába adtam a linknek azonosítót */
display: block;
position: absolute;
padding: 10px;
transform: translateY(110px); / * Elhelyezkedése */
-webkit-transform: translateY(110px);  / * Elhelyezkedése */
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 10px #000, 0px 0px 10px #000; / *Szöveg árnyéka */
z-index: 101;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Ezzel jelenik meg a …, ha túl hosszú a bejegyzés címe */
max-width: 170px;
}

#friss_hirek li img{
width: 100%;
height: 150px;
object-fit: cover;
border: 1px solid #777;
filter: grayscale(70%);
}

#friss_hirek li:hover img{
filter: grayscale(30%);
}

Forrás: wpbeginner.com

Devin
2020, május 10

Oszd meg az simerőseiddel

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük