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

Но вот шаги, необходимые для того, чтобы сделать что-то вроде этого:

Шаг 1; Зарегистрируйте пользовательский тип сообщения

function create_post_type() {
    register_post_type( 'products',
        array(
            'labels' => array(
                'name' => __( 'products' ),
                'singular_name' => __( 'products' )
            ),
        'public' => true,
        'menu_position' => 6,
        'rewrite' => array('slug' => 'products'),
        'supports' => array('title','thumbnail','editor','custom-fields')
        )
    );
}
add_action('init', 'create_post_type');

Ссылка на Кодекс: http://codex.wordpress.org/Function_Reference/register_post_type

Шаг 2; Показать пользовательский тип записи

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

<ul> <!-- to hold the posts -->
<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $post_per_page = 9; // -1 shows all posts & show 3 per line so 9 in total before showing the other pages
    $do_not_show_stickies = 1; // 0 to show stickies
    $args=array(
    'post_type' => 'products',
    'paged' => $paged,
    'posts_per_page' => $post_per_page,
    'order' => 'ASC',
    );
    $temp = $wp_query;  // assign orginal query to temp variable for later use
    $wp_query = null;
    $wp_query = new WP_Query($args);
    if( have_posts() ) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

    <?php $download_link = get_post_meta($post->ID, 'download-link', $single = true); // custom field on post to allow entry of a http link for the download?>

    <li>
        <?php the_post_thumbnail(array(200,300), array('title'  => trim(strip_tags( $attachment->post_title)), ));?>
        <a href="#" class="trigger"><?php the_title();?></a>
    </li>

    <div class="tooltip">
        <?php the_post_thumbnail(array(200,300), array('title'  => trim(strip_tags( $attachment->post_title)), ));?>
        <a href="<?php echo $download_link ?>"><?php the_title();?></a>
        <?php the_content();?>
    </div>

    <?php endwhile; ?>
<?php endif; $wp_query = $temp;  //reset back to original query ?>   
<?php wp_reset_query();?>
</ul>

Чтобы показать следующую и предыдущую страницы в пронумерованном формате, вы можете использовать плагин, такой как WP-Pagination, чтобы получить пронумерованные страницы, такие как [1] ​​[2] [3]

Шаг 3; jQuery

Это то, что потребует больше всего времени для реализации, но вы можете найти плагин стиля всплывающей подсказки или написать свой собственный, но если вы пишете его самостоятельно, все, что вам нужно сделать, это использовать div в приведенном выше коде и добавить.hide() к этому;

затем, когда мышь наводит курсор на class=»trigger», он будет.show() этого div, div будет содержать информацию для вашего курсора для эффектов скольжения страницы, что само по себе является более крупной задачей.

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

Вот несколько плагинов jQuery, которые помогут вам в этом.

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ http://jquery.bassistance.de/tooltip/demo/