Добавить значок воспроизведения на наложение миниатюры для постов видео типов

Вопрос или проблема

<div class="img-responsive"> <?php if ( has_post_thumbnail() ) : ?>
    <a href="https://wordpress.stackexchange.com/questions/260382/<?php the_permalink(); ?>"><?php the_post_thumbnail('big-grid-one-image'); ?></a>
<?php else : ?>
    <img src=" <?php echo get_template_directory_uri (); ?>/img/no-thumb/acardio-548px-450px.png" />

<?php endif; ?></div>

// Это получит id поста и затем протестирует формат
global $post;
$post_id = $post->ID;
$post_format = get_post_format($post_id);

// Если ваш тип поста - это видео, добавьте код внутрь
if($post_format == 'video'){
    //ваш код
}

Ответ или решение

Для добавления иконки "Play" на миниатюры видео-постов в WordPress, вы можете использовать следующие подходы. Ваша цель — создать наложение иконки на изображение миниатюры, чтобы зрители мгновенно понимали, что это видео-контент.

Шаг 1: Подготовка HTML и PHP кода

Ваш исходный код для обработки миниатюр выглядит следующим образом:

<div class="img-responsive">
    <?php if ( has_post_thumbnail() ) : ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('big-grid-one-image'); ?>
        </a>
    <?php else : ?>
        <img src="<?php echo get_template_directory_uri(); ?>/img/no-thumb/acardio-548px-450px.png" />
    <?php endif; ?>
</div>

Шаг 2: Проверка формата поста

Для того чтобы убедиться, что ваш пост — это видео, вам нужно выполнить проверку формата поста. Это можно сделать с помощью следующего кода:

global $post;
$post_id = $post->ID;
$post_format = get_post_format($post_id);

// Если формат поста — видео, добавляем иконку
if($post_format == 'video'){ 
    // Ваш код
}

Шаг 3: Добавление иконки "Play"

Для добавления иконки "Play" к миниатюрам видео-постов, вы можете использовать CSS и HTML. Ваш код может быть изменен, чтобы включить наложение с иконкой. Вот пример, как это можно реализовать:

<div class="img-responsive">
    <?php if ( has_post_thumbnail() ) : ?>
        <a href="<?php the_permalink(); ?>" class="video-thumbnail">
            <?php the_post_thumbnail('big-grid-one-image'); ?>
            <span class="play-icon"></span> <!-- Иконка Play -->
        </a>
    <?php else : ?>
        <img src="<?php echo get_template_directory_uri(); ?>/img/no-thumb/acardio-548px-450px.png" />
    <?php endif; ?>
</div>

Шаг 4: Стилизация иконки с помощью CSS

Добавьте следующий CSS-код в ваш файл стилей (style.css) для стилизации иконки:

.video-thumbnail {
    position: relative;
    display: inline-block;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; /* Ширина иконки */
    height: 60px; /* Высота иконки */
    background: url('path_to_your_play_icon.png') no-repeat center center;
    background-size: contain;
    opacity: 0.8; /* Прозрачность иконки */
    pointer-events: none; /* Иконка не мешает кликам по миниатюре */
}

Заключение

В результате этого подхода вы добавите иконку "Play" к миниатюрам видео-постов. Это поможет визуально выделить видео-контент и привлечь внимание пользователей. Обязательно проверьте корректность путей к изображениям и адаптируйте CSS под ваш дизайн.

Данный метод не только улучшит пользовательский опыт, но и может положительно сказаться на взаимодействии с вашим контентом, что, в свою очередь, может быть благоприятно для SEO. Помните, что качество визуального контента играет важную роль в удерживании пользователей и увеличении временных показателей на странице.