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

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


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

此功能在您的网站中非常重要,因为它可以让您向人们推荐您。 推荐书是您令人敬畏的一个很好的社会证明。 而且您不需要复杂的插件或大量代码来实现这一点,正如您将看到的那样,您可以通过几个文件为您的推荐创建一个性感的演示文稿。

让我们开始吧!

压缩和安装

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

然后,您需要添加一些数据,通过使用全新的推荐添加一些推荐,您可以在仪表板中看到:

列表推荐

然后你可以使用基本的简码来加载它:

[ testimonials rand=0 max=5 ]

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

主要推荐

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

基础

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

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

<?php
/*
Plugin Name: Testimonials
Description: Display customer testimonials.
Version: 1.0
Author: Web Revenue Blog
License: GPL2
*/

//enqueueing scripts and styles
function 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 没有内置的位置来存储它,所以我们需要创建它。 小蚂蚱别怕,很简单,可以用这段代码:

//the black magic to create the post type
function create_post_type() {
    register_post_type(
        'testimonials',//new post type
        array(
            'labels' => array(
                'name' => __( 'Testimonials' ),
                'singular_name' => __( 'Testimonial' )
            ),
            'public' => true,/*Post type is intended for public use. This includes on the front end and in wp-admin. */
            'supports' => array('title','editor','thumbnail','custom_fields'),
            'hierarchical' => false
        )
    );    
}

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

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

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

add_action( 'init', 'create_post_type' );

自定义字段

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

我们可以使用通常的自定义字段来做到这一点,但最好有一个“封闭”字段,用户不需要输入字段名称,并且您可以在其中添加一些验证规则。

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

//adding the URL meta box field
function 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 – 它的唯一标识符。 你可以在这里使用任何独特的东西,比如“unicorn-eating-rainbow”或“testimonial-link”。 任何可以内部使用的东西
  2. 标题 – 将为用户显示什么? 在这里使用 __() 函数很重要,它允许来自外语的用户使用 .po 文件翻译您的插件(无需编辑插件文件)
  3. 回调 – 您拥有元框实际内容的函数
  4. 帖子类型——在我们的例子中,我们希望它只对推荐可见
  5. 上下文 – 您要在页面中的哪个位置显示它
  6. 优先级 – 如果它应该在相同位置的其他项目之前或之后

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

// HTML for the admin area
function url_custom_metabox() {
    global $post;
    $urllink = get_post_meta( $post->ID, 'urllink', true );

    //validating!
    if ( ! preg_match( "/http(s?):///", $urllink ) && $urllink != "") {
        $errors = "This URL isn't valid";
        $urllink = "http://";
    } 

    // output invlid url message and add the http:// to the input field
    if( isset($errors) ) { echo $errors; }
?>    
<p>
    <label for="siteurl">URL:<br />
        <input id="siteurl" size="37" name="siteurl" value="<?php if( isset($urllink) ) { echo $urllink; } ?>" />
    </label>
</p>
<?php
}

好的,现在将其翻译成简单的英语:

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

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

//saves custom field data
function 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' );

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

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

新证言

加载我们的自定义数据

现在我们需要实际加载我们的项目,我们将使用 get_posts() 函数,主要是因为我们只有简单的数据,所以我们不需要适当的 WP 循环(这会增加很多 DB 调用,我们真的不需要不需要它)。

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

//return URL for a post
function get_url($post) {
    $urllink = get_post_meta( $post->ID, 'urllink', true );

    return $urllink;
}

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

//registering the shortcode to show testimonials
function 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'];
    }
    //getting all testimonials
    $posts = get_posts($args);

    //HTML OUTPUT
}
add_shortcode("testimonials","load_testimonials");

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

现在我们需要在其中添加一些 HTML 代码,遵循 flexslider 的默认结构。 这是它的样子:

echo '<div>';
    echo '<ul>';

    foreach($posts as $post){
        //getting thumb image
        $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.'">Visit Site</a></p>'; }
        echo '</li>';
    }

    echo '</ul>';
echo '</div>';

等等,但是为什么我们要在 PHP 函数中创建 HTML 代码呢? 那是因为我们只有在用户添加了内容的情况下才能有条件地加载内容,所以你不会有空的 HTML 标签,只是等着弄乱你的布局。

侧边栏呢?

大多数人只想在侧边栏中显示推荐,而这个插件不能很好地工作,因为文本小部件不处理短代码。 有一个简单的解决方案,只需在代码中添加:

add_filter('widget_text', 'do_shortcode');

下一步是什么?

那么,你喜欢这个教程吗? 您会为推荐短代码添加什么选项? 你对未来的职位有什么想法吗? 让我们知道使用评论部分!

Leave a Comment