Блог

Я хочу сделать первую страницу моего сайта, чтобы у вас были сообщения, перечисленные только с заголовками и метой (удобные для чтения, легко загружаемые …).

Когда вы находите что-то интересное, вы наводите курсор на заголовок (ссылку на сообщение), и рядом с ним отображается избранное изображение (либо в определенном месте на сайте, либо смещенное настолько, чтобы не закрывать текст или заменять курсор).

Это делалось раньше, вот пример:

Я предполагаю, что мне придется использовать это, чтобы получить сохраненное изображение : get_the_post_thumbnail_url( int|WP_Post $post = null, string|array $size = 'post-thumbnail' ) . Проблема в том, что я знаю только HTML и CSS, некоторые очень простые JS и понятия не имею о PHP. Я нашел пару примеров в Интернете, но не смог заставить их работать.

Можете ли вы сказать мне, как получить изображение из ссылки на сообщение и отобразить его (динамически, чтобы оно могло работать для любой ссылки на сообщение на сайте)?

Спасибо.

Вы можете добавить вывод the_post_thumbnail внутри <div></div> тега, в котором он скрыт, затем вы можете показать его при наведении курсора мыши. Структура примерно такая:

 <div class="featured-image">
   <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
   <php the_post_thumbnail( 'full' );   ?>
</div>
 

В файле css вы должны установить:

 div.featured-image img{
    display:none;
}
 

При наведении курсора мыши вы должны отобразить избранное изображение, код будет примерно таким:

 div.featured-image a:hover    img{
    display: inline-block;
}
 

Попробуйте использовать это the_post_thumbnail(); , оно должно отображать изображение сообщения.

Проверьте те:

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

https://codex.wordpress.org/Post_Thumbnails

https://smartwp.com/wordpress-get-featured-image/

Это первая ссылка, когда я ее погуглил, поэтому я опубликую решение здесь.

Итак, я добился этого эффекта с помощью Ajax:

AJAX — это аббревиатура, обозначающая асинхронный JavaScript и XML, и эта технология помогает нам загружать данные с сервера без обновления страницы браузера.

Подробности: https://api.jquery.com/jquery.ajax /

Диаграмма полезна для понимания: https://i.stack.imgur.com/Zqyrn.gif

Я создал jQuery, который получает URL-адрес из наведенной ссылки и отправляет его через Ajax на сервер, и если процесс проходит успешно, он отображает data возвращенное:

 var hrefValue;

jQuery(document).ready(function($) {
    $('#bio-box').find('a').mouseover(function() {
        hrefValue = ($(this).attr('href'))
        //console.log(hrefValue)
        $.ajax({
            url: frontendajax.ajaxurl,
            type: 'POST', 
            data: {
                'action': 'image',
                'php_test': hrefValue
            },
            success: function(data){
                $('#featured-image').html(data);
                //console.log(data);
            }
        });
    });
}); 
 

Эта функция генерирует data :

 function fimg() {
    if ( isset( $_POST['php_test'] ) ) {
        $testing = sanitize_text_field( wp_unslash( $_POST['php_test'] ) );
        $post_id = url_to_postid( $testing );
        echo get_the_post_thumbnail( $post_id );
    }
    die();
}
add_action( 'wp_ajax_image', 'fimg' );
add_action( 'wp_ajax_nopriv_image', 'fimg' );
 

HTML:

 <div id="featured-image”>
</div>
 

Это работает и решает проблему. Я надеюсь, что это кому-то поможет. Обратите внимание, что все это все еще нуждается в некоторой очистке.