如何在WordPress主题中添加工具提示推荐

In the past, we have shown you how to add rotating testimonials in WordPress. While creating the new landing page for WPBeginner WordPress Videos, we took inspiration from something that we have seen StudioPress doing for some time. That is displaying testimonials in a tooltip when the user brings their mouse over on a photo. This technique is becoming an industry standard because we have seen other folks using it as well. In this article, we will show you how to add tooltip testimonials popup in WordPress.

过去，我们向您展示了如何在WordPress中添加旋转推荐 。 在为WPBeginner WordPress视频创建新的登录页面时，我们从StudioPress做一段时间以来的工作中汲取了灵感。 当用户将鼠标移到照片上时，即在工具提示中显示推荐。 由于我们也看到其他人也在使用该技术，因此该技术正在成为行业标准。 在本文中，我们将向您展示如何在WordPress中添加工具提示推荐弹出窗口。

最后结果 (Final Result)

This is what the end product will look like. If you bring your mouse over on a person’s photo, it will show a tooltip testimonial. You can see the live demo here. However, this article will likely outlive the live demo, so attaching a screenshot below:

这就是最终产品的外观。 如果将鼠标移到某人的照片上，它将显示一个工具提示证明。 您可以在此处观看现场演示 。 但是，本文可能会超出现场演示的寿命，因此请在下面附加屏幕截图：

背景： (Background:)

From what we have heard from industry experts, showing prominent human faces tends to add a personal feeling to the page. This is the reason why we wanted to go this route. We did a simple google search to come across Loren Nason’s article. In which he essentially highlighted the code that StudioPress was using. The best part about StudioPress is their support. As Loren described, when he asked Brian Gardner about how he created the testimonials on his site, Brian simply sent over an example file.

根据我们从行业专家那里得到的消息，显示突出的人脸往往会给页面增添个人感。 这就是为什么我们要走这条路的原因。 我们做了一个简单的Google搜索，就发现了Loren Nason的文章 。 他从本质上强调了StudioPress使用的代码。 StudioPress最好的部分是他们的支持。 正如Loren所述，当他向Brian Gardner询问如何在自己的网站上创建推荐书时，Brian只是发送了一个示例文件。

The biggest issue was that they simply hard coded the feature into their template. While this would work fine for us developers, it is not an ideal solution if you are handing the website to a client? We wanted to have a solution where we give the client an ability to add/remove testimonials at will. This is why, we decided to utilize Custom Post Types, and meta fields to accomplish this along with the jQuery.

最大的问题是他们只是将功能硬编码到模板中。 虽然这对于我们的开发人员来说很好，但是如果您将网站交给客户，这不是理想的解决方案吗？ 我们希望有一个解决方案，使客户能够随意添加/删除推荐。 这就是为什么我们决定使用“自定义帖子类型”和meta字段与jQuery一起完成此操作的原因。

自定义帖子类型和元框 (Custom Post Types and Meta Boxes)

We need the client to have the ability to do the following:

我们需要客户有能力执行以下操作：

• Add User’s Photo (Thumbnails)
  添加用户的照片(缩略图)
• Add User’s name (Post Title)
  添加用户名(帖子标题)
• Add Testimonial Text (Post Body)
  添加推荐文字(帖子正文)
• Client’s Position in Company (Custom Field or Meta Box)
  客户在公司中的职位(自定义字段或元框)

First thing we did was add a custom post type called Testimonials which got us everything except for one field (client position/company). It’s up to you if you want to add a custom meta box, or make your client use custom fields. We say lets not be lazy, and give our clients a great backend experience even if it requires adding a few extra lines of code.

我们要做的第一件事是添加了一个称为“推荐”的自定义帖子类型，它使我们获得了除一个字段(客户职位/公司)以外的所有内容。 是否要添加自定义元框或让客户使用自定义字段由您自己决定。 我们说不要懒惰，即使需要添加一些额外的代码行，也可以为我们的客户提供出色的后端体验。

All you have to do is take the code below and save it in a blank php file called tooltip-testimonials.php or any other name for that sake.

所有您需要做的就是获取下面的代码，并将其保存在一个空白的php文件中，该文件名为tooltip-testimonials.php或任何其他名称。

<?php
/*
Plugin Name: Tooltip Testimonial
Plugin URI: https://www.wpbeginner.com/
Description: Tooltip Testimonial in WordPress
Version: 0.1
Author: Syed Balkhi
Author URI: https://www.wpbeginner.com/
License: GPL v2 or higher
License URI: License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


//Add Image Size
add_image_size( 'testimonial-thumb', 96, 96, true ); // Hard Crop Mode

//Register Custom Post Types

add_action( 'init', 'register_cpt_testimonial' );

function register_cpt_testimonial() {

    $labels = array( 
        'name' => _x( 'Testimonials', 'testimonial' ),
        'singular_name' => _x( 'testimonial', 'testimonial' ),
        'add_new' => _x( 'Add New', 'testimonial' ),
        'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
        'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
        'new_item' => _x( 'New testimonial', 'testimonial' ),
        'view_item' => _x( 'View testimonial', 'testimonial' ),
        'search_items' => _x( 'Search Testimonials', 'testimonial' ),
        'not_found' => _x( 'No testimonials found', 'testimonial' ),
        'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
        'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
        'menu_name' => _x( 'Testimonials', 'testimonial' ),
    );

    $args = array( 
        'labels' => $labels,
        'hierarchical' => false,
        
        'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
        
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'testimonial', $args );
}

//Custom Meta Box

$key = "testimonial";
$meta_boxes = array(
"position" => array(
"name" => "position",
"title" => "Position and Company",
"description" => "Enter their position and their company name.")
);
 
function create_meta_box() {
global $key;
 
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
 
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
 
<div class="form-wrap">
 
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
 
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
 
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
 
<?php } ?>
 
</div>
<?php
}
 
function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
 
foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
 
if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
 
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
 
update_post_meta( $post_id, $key, $data );
}
 
add_action( 'admin_menu', 'create_meta_box' );
add_action( 'save_post', 'save_meta_box' );

This will get us the basic WordPress setup that we need to start with. Now, you need to start adding some testimonials, so you can display it. Let’s recap where each element is going.

这将为我们提供开始所需的基本WordPress设置。 现在，您需要开始添加一些推荐，以便可以显示它。 让我们回顾一下每个元素的去向。

• Add User’s Photo (Thumbnails / Featured image). We have it set to resize it by 96 x 96px. It’s always best to follow that ratio.
  添加用户的照片(缩略图/精选图像)。 我们将其设置为将其尺寸调整为96 x 96px。 始终最好遵循该比例。
• Add User’s name (Post Title)
  添加用户名(帖子标题)
• Add Testimonial Text (Post Body)
  添加推荐文字(帖子正文)
• Client’s Position in Company (in a Testimonial Information Meta Box)
  客户在公司的职位(在推荐信息元框中)

在主题中显示 (Displaying in Theme)

Tooltip testimonials is mostly intended for custom themes, so yes it will require getting your hands dirty with some theme editing. Because each theme have different dimensions, color schemes, and styles, we decided to release this as a tutorial rather than a plugin. Here is what we will be doing to display tooltip testimonials in your WordPress theme:

工具提示推荐书主要用于自定义主题，因此，是的，它需要通过一些主题编辑来使您的手变脏。 因为每个主题都有不同的尺寸，配色方案和样式，所以我们决定将其发布为教程而不是插件。 这是我们将在您的WordPress主题中显示工具提示推荐的操作：

• Add a custom jQuery code in the theme.
  在主题中添加自定义jQuery代码。
• Create a custom loop that will display the testimonials in a structure we want.
  创建一个自定义循环，该循环将在我们想要的结构中显示推荐。
• Add some basic CSS to make it look pretty
  添加一些基本CSS，使其看起来更漂亮

First thing you need to do is copy and paste the following jQuery code and save it in a blank file called tooltip-testimonials.js:

您需要做的第一件事是复制并粘贴以下jQuery代码，并将其保存在名为tooltip-testimonials.js的空白文件中：

jQuery(document).ready(function(){
     
    jQuery("#testimonials img[title]").tooltip({
 
       // tweak the position
       offset: [0, 0],
     
       // use the "slide" effect
       effect: 'slide'
     
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });
     
});

Once you have done that, we need to load this file into your theme’s header. You can either choose to do this manually by editing your header.php file and pasting a script code in your head area, or follow WP best practice and use wp_enqueue_script function. Let’s go ahead and upload our tooltip-testimonials.js file in our theme’s scripts folder. If it doesn’t exist, then just create a folder called scripts.

完成此操作后，我们需要将此文件加载到主题的标题中。 您可以选择通过编辑header.php文件并在您的头部区域粘贴脚本代码来手动执行此操作，或者遵循WP最佳实践并使用wp_enqueue_script函数。 让我们继续并将我们的tooltip-testimonials.js文件上传到主题的scripts文件夹中。 如果它不存在，则只需创建一个名为scripts的文件夹。

Add the following code to your theme’s functions.php file:

将以下代码添加到主题的functions.php文件中：

add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
if (!is_admin()) {
    wp_register_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);
        wp_enqueue_script('jquery_tools');
 
    wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true);
        wp_enqueue_script('tooltip');
}
}

Now we have that in place, lets create a custom loop that will let us display these tooltip testimonials with user’s pictures in a grid based format. Open the file where you want this testimonials to show up. Whether it is your sidebar, homepage, or wherever you like. Then paste the following loop:

现在我们就位了，让我们创建一个自定义循环，使我们可以使用基于网格的格式将这些工具提示推荐与用户图片一起显示。 打开要在其中显示此个人鉴定的文件。 无论是您的侧边栏，主页还是您喜欢的任何地方。 然后粘贴以下循环：

<div id="testimonials">
<div class="wrap">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
$user_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($loop->post->ID), 'testimonial-thumb');
?>    
    <div class="testimonials">
        <p class="center"><img class="frame" src="<?php echo $user_image_url[0] ?>" title="<?php echo get_the_content(); ?>" alt="<?php echo get_the_title(); ?>" /></p>
        <p class="testimonials-title"><?php echo get_the_title(); ?></p>
        <p class="company"><?php echo $data[ 'position' ]; ?></p>
    </div>
<?php
endwhile; 
endif; ?>

</div>
</div>

The loop code above will display 6 items on the page. You can style them however you choose. You can even add orderby = rand if you have like 20 or so testimonials. You can have 6 at random being displayed.

上面的循环代码将在页面上显示6个项目。 您可以随意选择样式。 如果您有20个左右的推荐，甚至可以添加orderby = rand。 您可以随机显示6个。

Now let’s add some CSS styles to make it look pretty. Below is some sample CSS that we used. You would probably need to adjust it based on your theme styles, color schemes etc.

现在，让我们添加一些CSS样式，使其看起来更漂亮。 以下是我们使用的一些示例CSS。 您可能需要根据主题样式，配色方案等进行调整。

#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}

#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}

#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}

#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}

#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}

#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}

结语： (Wrapping Up:)

We hope that this article helps you add tooltip testimonials in your WordPress themes. This is a very basic example. As we mentioned above that you can always adjust wp_query arguments to have random testimonials order. You can also use the plugin Post Types Order to allow your clients to determine the order with an easy drag-drop interface.

我们希望本文能帮助您在WordPress主题中添加工具提示推荐。 这是一个非常基本的例子。 如前所述，您可以随时调整wp_query参数以使其具有随机的推荐顺序。 您还可以使用插件“过帐类型订单”来允许您的客户通过简单的拖放界面确定订单。

If you have any questions or suggestions, feel free to leave a comment below.

如果您有任何疑问或建议，请随时在下面发表评论。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-tooltip-testimonials-in-wordpress-themes/