Wyświetlanie ostatnich postów w WordPress za pomocą shortocde

Co daje ten kod?

Kod umożliwia wyświetlanie ostatnich postów w WordPress w dowolnym miejscu Twojej strony. Dzięki zastosowaniu shortcode możesz umieścić sekcję z najnowszymi artykułami na stronach, wpisach blogowych lub w widżetach. Jest to doskonałe rozwiązanie dla osób, które chcą zwiększyć widoczność swoich treści i zachęcić użytkowników do eksploracji strony. Kod prezentuje wpisy w estetycznym układzie, dodając miniatury, tytuły, zajawki oraz informacje o autorze i dacie publikacji. To narzędzie znacząco ułatwia zarządzanie treścią, ponieważ automatycznie pobiera najnowsze wpisy, oszczędzając Twój czas.

Jak działa ten kod?

Kod oparty jest na klasie WP_Query, która pozwala dynamicznie pobierać wpisy z bazy danych i pozwala na wyświetlanie ostatnich postów w WordPress. Parametr posts_per_page określa liczbę wyświetlanych postów — w tym przypadku ustawiono cztery, ale możesz dostosować tę wartość do swoich potrzeb. Kod prezentuje te informacje w czytelnej strukturze HTML, co ułatwia ich stylizację i dostosowanie do wyglądu strony.

Krótka instrukcja obsługi

Po dodaniu tego kodu do plików motywu lub wtyczki WordPress, shortcode [ dwa_ostatnie_posty ] będzie gotowy do użycia. Wystarczy wkleić go w edytorze WordPress tam, gdzie chcesz wyświetlić wpisy. Kod upraszcza proces wdrażania, dzięki czemu osoby z podstawową znajomością WordPress mogą go szybko zastosować na swojej stronie. Funkcja obsługuje wszystkie standardowe posty WordPress, co czyni ją elastycznym narzędziem w zarządzaniu treścią.

function wyswietl_dwa_ostatnie_posty() {
    // Query to get the last two posts
    $args = array(
        'posts_per_page' => 2,
        'post_status' => 'publish',
    );
    $ostatnie_posty = new WP_Query($args);

    // HTML structure for displaying the posts
    ob_start();
    if ($ostatnie_posty->have_posts()) {
        echo '<div class="dwa-posty">';
        while ($ostatnie_posty->have_posts()) {
            $ostatnie_posty->the_post();
            $autor = get_the_author();
            $data_dodania = get_the_date();
            $link_do_wpisu = get_permalink();
            ?>
            <div class="pojedynczy-post">
                <div class="lewa-strona">
                    <?php if (has_post_thumbnail()) {
                        the_post_thumbnail('medium', array('class' => 'zdjecie-wpisu'));
                    } ?>
                </div>
                <div class="prawa-strona">
                    <div class="tytul-postu"><?php the_title(); ?></div>
                    <div class="zajawka-postu"><?php the_excerpt(); ?></div>
                    <div class="autor-data">
                        Autor:<b> <?php echo esc_html($autor); ?></b> | Data dodania:<b> <?php echo esc_html($data_dodania); ?></b>
                    </div>
                    <div class="czytaj-wiecej">
                        <a href="<?php echo esc_url($link_do_wpisu); ?>">Czytaj więcej...</a>
                    </div>
                </div>
            </div>
            <?php
        }
        echo '</div>';
        wp_reset_postdata();
    } else {
        echo '<p>Brak postów do wyświetlenia.</p>';
    }

    return ob_get_clean();
}
add_shortcode('dwa_ostatnie_posty', 'wyswietl_dwa_ostatnie_posty');

Dodatkowy kod CSS do stylizacji wyświetlania:

.pojedynczy-post{
	display:flex;
	border-style:solid;
	border-top-width:0px;
	border-bottom-width:1px;
	border-left-width:0px;
	border-right-width:0px;
	border-color:#d4d4d4;
	margin:10px;
}

.zdjecie-wpisu {
    width: 100%;
    height: auto;
    border-radius: 20px !important; 
    object-fit: cover !important;
}


.lewa-strona{
	padding:20px;
	width:25%;
}

.prawa-strona{
	width:75%;
	padding:20px;
	display:grid;
	justify-content: center !important;
    align-items: center !important;
}

.tytul-postu{
	font-family:montserrat;
	font-weight:700;
	font-style:italic;
	font-size:20px;
	padding-bottom:20px;
}

.zajawka-postu{
	font-family:montserrat;
	font-weight:500;
	font-size:14px
}

.czytaj-wiecej a{
	float:right;
	font-family:montserrat;
	text-decoration:none !important;
	font-weight:700;
	color: #00ADD9;
	font-size:20px;
	font-style:italic;
	padding-top:20px;
}

.autor-data{
	font-family:montserrat;
	font-weight:500;
	color:#a4a4a4;
	font-size:14px;
	letter-spacing:0.5px;
}

@media screen and (max-width:767px){
	.pojedynczy-post{
		display:block;
		text-align:center !important;
		padding:20px;
		border-width:1px;
		border-style:solid;
		border-color:#f4f4f4;
		margin:20px;
		border-radius:20px;
	}
	.lewa-strona, .prawa-strona{
		width:100%;
	}
	
	.zajawka-postu{
		font-size:12px;
		line-height:16px;
	}
	
	.autor-data{
		font-size:10px;
	}
	
	.czytaj-wiecej a{
		float:none;
		font-size:14px;
	}
	
	.tytul-postu{
		font-size:16px;
		padding:20px;
	}
	
	.zdjecie-wpisu{
		width:50%;
		border-radius:20px !important;
	}
	
	
	
}

Zobacz również: Wyświetl łączną liczbę wpisów dla danej kategorii i wyświetl ją za pomocą shortcode

POZNAJ NASZE MOŻLIWOŚCI: ŚWINICKI GROUP