WordPress教程:如何创建推荐插件

文章撰写者:
  • WordPress
  • 更新:Aug 12,2013

所以,这里我们是关于WordPress的第二个每周教程。 我们已经学会了如何创建一个 无限滚动WP站点翻页插件 在过去。 今天我们将更多地了解自定义帖子类型以及如何加载他们的数据。

此功能在您的网站中非常重要,因为它可以让您向推荐给您的人展示。 推荐书是您卓越的一个很好的社会证明。 而且你不需要复杂的插件或很多代码来实现这一点,因为你会看到几个文件,你可以为你的推荐创建一个性感的演示文稿。

让我们开始吧!

邮编和安装

如果你急于检查这个,你可以 下载 并安装它。

您需要添加一些数据,然后使用全新的推荐书添加一些推荐信,您可以在信息中心看到:

列表推荐

然后你可以使用基本的短代码加载:

[testimonials rand = 0 max = 5]

当您添加该代码后,您会在页面中看到以下内容:

主推荐

现在我们将看到如何创建和探索它(通过添加更多功能和更改外观)。

基础知识

正如我们之前所说,你需要添加 标头元数据,创建插件文件并调用脚本。 简而言之,您将使用插件的名称在wp-content / plugins下创建一个新文件夹,然后创建一个与该文件夹同名的文件作为主插件文件。

完成该复制并粘贴后,如下所示:

<?php / *插件名称:推荐说明:显示客户推荐。 版本:1.0作者:Web收入博客许可证:GPL2 * / //入队脚本和样式函数plugin_scripts(){wp_enqueue_script('jquery'); wp_enqueue_script('flexslider',plugins_url('js / jquery.flexslider-min.js',__ FILE__),array('jquery'),'2.2',false); wp_enqueue_script('testimonials',plugins_url('js / testimonials.js',__ FILE__),array('jquery'),'1.0',false); wp_enqueue_style('flexsliderCSS',plugins_url('css / flexslider.css',__ FILE__),false,'2.2','all'); wp_enqueue_style('testimonialsCSS',plugins_url('css / testimonials.css',__ FILE__),false,'1.0','all'); } add_action(“wp_enqueue_scripts”,“plugin_scripts”);

这是我们正在做的事情:

  • 告诉WP什么是我们的插件名称,作者,它做什么
  • 创建一个函数,我们插入常规脚本(如jQuery)和自定义脚本(如flexslider)和样式表
  • 告诉WP在其默认脚本调用中加载脚本函数,因此它们实际上将被加载到页面中

这一切都很酷,但不要忘记在/ js和/ css下实际创建文件。 您可以在我们的演示内容中下载它们,这样您就不需要花费太多时间来查找flexslider文件。

现在我们已经掌握了所有基本的东西,我们可以开始有趣的部分。

自定义帖子类型

默认情况下,WordPress具有2常见的帖子类型,页面和帖子。 但它也有很多内部帖子类型(如附件),因此“帖子类型”定义是:您需要存储的每种类型的数据。

由于我们的插件将创建一个新的功能,WP没有内置的存储位置,所以我们需要创建它。 不要害怕小蚱蜢,这很简单,你可以使用这段代码:

//创建帖子类型函数的黑魔法create_post_type(){register_post_type('testimonials',//新帖子类型数组('labels'=> array('name'=> __('Testimonials'),'singular_name' => __('Testimonial')),'public'=> true,/ *帖子类型供公众使用。这包括在前端和wp-admin。* /'supports'=> array('title ','editor','thumbnail','custom_fields'),'hierarchical'=> false)); }

这里我们只是使用register_post_type()函数告诉WP“嘿伙计,我们需要存储这类数据,请准备接收它”。

我们还告诉他,这种数据称为“推荐”,它应该可供公众访问(因此它实际上在仪表板中为它创建了一个新的菜单项),我们需要的字段,以及它是否是分层的或不(如我们有父页和子页的页面)。

然后我们需要在每次加载WordPress时调用它。 这个钩子会这样做:

add_action('init','create_post_type');

自定义字段

现在我们的自定义帖子类型有标题(人名),内容(人的推荐),图片(特色图片)但它缺少一个链接,因为如果这个人足够好谈论你,你应该至少链接到他们的网站,对吗?

我们可以使用常用的自定义字段执行此操作,但最好有一个“关闭”字段,用户不需要键入字段名称,也可以添加一些验证规则。

首先,我们需要创建一个新的元数据框,这是您在帖子编辑区域中有的漂亮面板,每个小面板都是一个元数据框。 这个函数将创建并调用它:

//添加URL元框字段函数add_custom_metabox(){add_meta_box('custom-metabox',__('Link'),'url_custom_metabox','testimonials','side','low'); } add_action('admin_init','add_custom_metabox');

add_meta_box()函数需要以下参数:

  1. ID - 它的唯一标识符。 你可以使用任何独特的东西,如“独角兽吃彩虹”或“推荐链接”。 任何可以在内部使用的东西
  2. 标题 - 将为用户显示什么? 这里使用__()函数很重要,它是允许外语用户使用.po文件翻译插件的功能(无需编辑插件文件)
  3. 回调 - 您拥有元数据的实际内容的函数
  4. 帖子类型 - 在我们的案例中,我们希望它只对推荐书可见
  5. 上下文 - 您希望在页面中显示的位置
  6. 优先级 - 如果它应该在相同位置的其他项目之前或之后

现在我们需要创建url_custom_metabox()函数,因为我们已经调用它。

//管理区域功能的HTML url_custom_metabox(){global $ post; $ urllink = get_post_meta($ post-> ID,'urllink',true); //证实! if(!preg_match(“/ http(s?):///”,$ urllink)&& $ urllink!=“”){$ errors =“此网址无效”; $ urllink =“http://”; } //输出invlid url消息并将http://添加到输入字段if(isset($ errors)){echo $ errors; }> <p> <label for =“siteurl”>网址:<br /> <input id =“siteurl”size =“37”name =“siteurl”value =“<?php if(isset($ urllink) ){echo $ urllink;}?>“/> </ label> </ p> <?php}

好的,现在把它翻译成普通英语:

  • 调用全局变量$ post,因此我们可以知道哪个是当前项的POSTID
  • 我们加载URL的当前值
  • 我们验证如果用户插入的值有效。 如果至少有一个“http”或“https”出现,则值为OK,否则它是有效的,我们需要使用默认值
  • 然后我们会显示错误,如果有的话
  • 现在我们启动实际的HTML,在输入字段中添加默认值,就像我们在PHP中获得的那样

在此之后,我们需要实际保存用户发送的内容。 我们将使用“save_post”挂钩,所以每次WordPress保存帖子时它都会调用此函数:

//保存自定义字段数据函数save_custom_url($ post_id){global $ post; if(isset($ _ POST ['siteurl'])){update_post_meta($ post-> ID,'urllink',$ _POST ['siteurl']); add_action('save_post','save_custom_url');

在这里,我们只检查是否有任何名为“sitelink”的帖子数据,这是我们的字段名称。 如果有附加链接,我们保存吧。

一切就绪后,您的新推荐页面将如下所示:

新告别赛

加载我们的自定义数据

现在我们需要实际加载我们的项目,我们将使用get_posts()函数,主要是因为我们只有简单的数据,所以我们不需要一个合适的WP循环(这将增加大量的数据库调用,我们真的不喜欢不需要它。

所以,首先让我们创建一个函数来获取我们网站的链接,如果有的话。

//返回帖子函数的URL get_url($ post){$ urllink = get_post_meta($ post-> ID,'urllink',true); return $ urllink; }

现在,我们可以启动短代码功能。 默认和验证短代码数据的一种简单方法是将循环的属性创建为数组,因此我们可以根据需要添加新项目,如下所示:

//注册短代码以显示推荐函数load_testimonials($ a){$ args = array(“post_type”=>“testimonials”); if(isset($ a ['rand'])&& $ a ['rand'] == true){$ args ['orderby'] ='rand'; } if(isset($ a ['max'])){$ args ['posts_per_page'] =(int)$ a ['max']; } //获取所有推荐书$ posts = get_posts($ args); // HTML OUTPUT} add_shortcode(“testimonials”,“load_testimonials”);

正如您所看到的那样,我们已经加载了短代码属性并在它们以WordPress需要的格式验证时传递给$ args数组,因此我们可以使用它们加载帖子。

现在我们需要在flexslider的默认结构之后添加一些HTML代码。 这是它的样子:

echo'<div>'; echo'<ul>'; foreach($ posts as $ post){//获取拇指图像$ url_thumb = wp_get_attachment_thumb_url(get_post_thumbnail_id($ post-> ID)); $ link = get_url($ post); echo'<li>'; if(!empty($ url_thumb)){echo'<img src =“'。$ url_thumb。'”/>'; } echo'<h2>'。$ post-> post_title。'</ h2>'; if(!empty($ post-> post_content)){echo'<p>'。$ post-> post_content。'<br />'; } if(!empty($ link)){echo' <a href="'.$link.'">访问网站</a> </ p>'; } echo'</ li>'; echo'</ ul>'; echo'</ div>';

等等,但为什么我们要在PHP函数内部创建HTML代码? 这是因为我们只有在用户添加了内容时才能有条件地加载内容,因此您不会有空的HTML标记,只是等待弄乱您的布局。

侧边栏怎么样?

大多数人只是想在侧边栏中显示推荐,并且由于文本小部件不处理短代码,因此该插件不会很好地工作。 有一个简单的解决方案,只需在您的代码中添加:

add_filter('widget_text','do_shortcode');

下一步是什么?

那么,你喜欢这个教程吗? 您将添加什么作为您的推荐短信的选项? 你对未来的帖子有什么想法吗? 请使用评论部分告诉我们!

关于罗切斯特奥利维拉

我是来自巴西Itajubá(MG)的网页设计师和企业家。 我喜欢写一些关于模糊主题和做一些很酷的东西。