15196028940
info@mac163.com
会员登录

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

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

最后结果

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

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

背景：

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

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

自定义帖子类型和元框

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

  • 添加用户的照片（缩略图）
  • 添加用户名（帖子标题）
  • 添加推荐文字（帖子正文）
  • 客户在公司中的职位（自定义字段或元框）

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

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

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

//Add Image Sizeadd_image_size( 'testimonial-thumb', 96, 96, true ); // Hard Crop Mode
//Register Custom Post Types
add_action( 'init', 'register_cpt_testimonial');
functionregister_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."));  functioncreate_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');}}  functiondisplay_meta_box() {global$post, $meta_boxes, $key;?>  <div class="form-wrap">  <?phpwp_nonce_field( plugin_basename( __FILE__), $key. '_wpnonce', false, true );  foreach($meta_boxesas$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}  functionsave_meta_box( $post_id) {global$post, $meta_boxes, $key;  foreach( $meta_boxesas$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');

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

  • 添加用户的照片（缩略图/精选图像）。我们将其设置为将其尺寸调整为96 x 96px。始终最好遵循该比例。
  • 添加用户名（帖子标题）
  • 添加推荐文字（帖子正文）
  • 客户在公司中的职位（在推荐信息元框中）

在主题中显示

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

  • 在主题中添加自定义jQuery代码。
  • 创建一个自定义循环，该循环将在我们想要的结构中显示推荐。
  • 添加一些基本的CSS，使其看起来更漂亮

您需要做的第一件事是复制并粘贴以下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 } });      });

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

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

add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');functiontooltip_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');}}

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

<div id="testimonials"><div class="wrap"><?php$args= array( 'post_type'=> 'testimonial', 'posts_per_page'=> 6 );$loop= newWP_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 echoget_the_title(); ?></p>        <p class="company"><?php echo$data[ 'position']; ?></p>    </div><?phpendwhile; endif; ?>
</div></div>

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

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

#testimonials .testimonials{width: 116px; float: left; margin: 35px30px00;}
#testimonials .center{text-align: center; margin: 0px015px;; padding: 0px;}
#testimonials .centerimg{box-shadow: 0px2px2px#d2d2d2; -moz-box-shadow: 0px2px2px#d2d2d2; -webkit-box-shadow: 0px2px2px#d2d2d2; border: 3pxsolid#fff;}
#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px00; 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: 05px20px;}

包起来：

我们希望本文能帮助您在WordPress主题中添加工具提示推荐。这是一个非常基本的例子。正如我们上面提到的，您始终可以将wp_query参数调整为具有随机的推荐顺序。

相关内容

回到顶部