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 rövid tartalommal

Már láthattátok, hogyan jelenítsük meg a legutóbbi bejegyzéseket kiemelt képpel(link), a mostani leírás pedig nagyon hasonló lesz. Ha megnyitjátok az oldalt, egyből ezzel a kóddal találkozhattok.

<div id=”legutobbi_bj”>

<ul>
<?php $the_query = new WP_Query( ‘posts_per_page=2’ ); ?>

<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

Mint mondtam, szinte egy az egyben ugyanaz, mint a kiemelt képes. Itt a kódot egy legutobbi_bj azonosítóval rendelkező divbe rakjuk. Azon belül helyezzük el a kódot, ami listaként fogja megjeleníteni a posztjainkat egy ciklus segítségével. Az utl utáni sorban a posts_per_page jelenleg 2 -re van állítva állítva, azaz ennyi bejegyzést fog mutatni. Csupán ki kell cserélned ezt a kettes a neked tetsző számra, és annyi bejegyzést láthatunk majd.

<li><a href=”<?php the_permalink() ?>”<?php the_title(); ?></a>
<?php the_excerpt(); ?></li>

És itt is lenne a bejegyzés, mint a listánk eleme.

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

</div>

Végül pedig lezárjuk a ciklust, a listát és a divet.

Ahhoz pedig, hogy megadjuk a legutóbbi bejegyzések bevezető szövegének hosszát, ezt a kódot kell elhelyeznünk a functions.php fájlon belül.

function wpdocs_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 );
A return utáni szám, azaz a 20 mondja meg, mennyi szó jelenjen meg. Ez persze módosítható.
Ennyi lenne hát a kód. Itt van hozzá CSS kód is, ha szeretnétek hasonlóan megjeleníteni, mint én.

#legutobbi_bj{
width: 100%;
display: block;
}

#legutobbi_bj ul{
list-style-type: none;
width: 100%;
margin: auto;
display: flex;
padding: 0px;
}

#legutobbi_bj ul li{
width: 50%;
display: block;
color: #eee;
background: #222;
padding: 20px;
}

#legutobbi_bj ul li a{
color: #ddd;
font-size: 1.2em;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}

#legutobbi_bj ul li p{
line-height: 25px;
font-size: 0.9em;
}

Oszd meg az ismerőseiddel