wordpress插件_为WordPress构建自己的社交共享插件

wordpress插件

A social sharing plugin allows your website visitors to share your website content easily on social media sites. This helps to increase the overall awareness of your website.

社交共享插件使您的网站访问者可以在社交媒体网站上轻松共享您的网站内容。 这有助于提高您网站的整体知名度。

There are already dozens of existing social sharing plugins that you can just install and be done with it, but where’s the fun in that?

您已经可以安装并完成许多现有的社交共享插件，但是这样做的乐趣何在？

In this tutorial, I’ll show you how to build your very own social sharing plugin for WordPress from scratch, which can add social sharing buttons below every post. Users can share the post simply by clicking on the desired social media site button.

在本教程中，我将向您展示如何从头开始为WordPress构建自己的社交共享插件，该插件可以在每个帖子下方添加社交共享按钮。 用户只需单击所需的社交媒体网站按钮即可共享帖子。

为什么需要社交媒体共享按钮？ (Why Do You Need Social Media Share Buttons?)

It’s often reported that more than 80% of users consider reading content based on their friends’ recommendations. With social sharing, you give users the ability to share your content with their own networks of friends.

经常有报道称，超过80％的用户考虑根据其朋友的推荐来阅读内容 。 使用社交共享，您可以使用户与自己的朋友网络共享您的内容。

More than 40 billion shares are clicked each day on the web, therefore adding social sharing buttons on your WordPress website is first step to helping to market your site.

每天都有超过400亿股股票被点击 ，因此在WordPress网站上添加社交共享按钮是帮助营销网站的第一步。

插件目录和文件 (Plugin Directory and Files)

To kick things off, create a directory called social-share and create the following files in it:

首先，创建一个名为social-share的目录，并在其中创建以下文件：

--social-share
	-social-share.php
	-style.css

In the social-share.php file add the following text to make the plugin installable.

在social-share.php文件中，添加以下文本以使插件可安装。

<?php

/*
Plugin Name: Social Share
Plugin URI: https://www.sitepoint.com
Description: Displays Social Share icons below every post
Version: 1.0
Author: Narayan Prusty
*/

创建管理菜单项 (Creating a Admin Menu Item)

We need to create a options page for our plugin where user can select buttons for which social media sites should be displayed. For creating a options page first we need to create a menu item to which the options page will be attached to.

我们需要为插件创建一个选项页面，用户可以在其中选择应该显示社交媒体网站的按钮。 首先要创建选项页，我们需要创建一个菜单项，选项页将附加到该菜单项。

Here is the code to create a admin menu item under Settings top level menu item.

这是在“设置”顶级菜单项下创建管理菜单项的代码。

function social_share_menu_item()
{
  add_submenu_page("options-general.php", "Social Share", "Social Share", "manage_options", "social-share", "social_share_page"); 
}

add_action("admin_menu", "social_share_menu_item");

Here we’re adding a menu item using add_submenu_page which is indeed called inside the admin_menu action. social_share_page is the callback function which needs to display the contents of the options page.

在这里，我们使用add_submenu_page添加一个菜单项，该菜单项实际上是在admin_menu操作内部调用的。 social_share_page是需要显示选项页面内容的回调函数。

Here is what our menu item looks like:

这是我们菜单项的样子：

创建一个选项页面 (Creating an Options Page)

Let’s code the social_share_page function to display the options page content.

让我们对social_share_page函数进行编码以显示选项页面的内容。

function social_share_page()
{
   ?>
      <div class="wrap">
         <h1>Social Sharing Options</h1>
 
         <form method="post" action="options.php">
            <?php
               settings_fields("social_share_config_section");
 
               do_settings_sections("social-share");
                
               submit_button(); 
            ?>
         </form>
      </div>
   <?php
}

Here we’re adding a section named social_share_config_section, and registering the settings as social-share.

在这里，我们添加了一个名为social_share_config_section的部分，并将设置注册为social-share 。

Now lets display the section and its option fields.

现在让我们显示该部分及其选项字段。

function social_share_settings()
{
    add_settings_section("social_share_config_section", "", null, "social-share");
 
    add_settings_field("social-share-facebook", "Do you want to display Facebook share button?", "social_share_facebook_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-twitter", "Do you want to display Twitter share button?", "social_share_twitter_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-linkedin", "Do you want to display LinkedIn share button?", "social_share_linkedin_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-reddit", "Do you want to display Reddit share button?", "social_share_reddit_checkbox", "social-share", "social_share_config_section");
 
    register_setting("social_share_config_section", "social-share-facebook");
    register_setting("social_share_config_section", "social-share-twitter");
    register_setting("social_share_config_section", "social-share-linkedin");
    register_setting("social_share_config_section", "social-share-reddit");
}
 
function social_share_facebook_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-facebook" value="1" <?php checked(1, get_option('social-share-facebook'), true); ?> /> Check for Yes
   <?php
}

function social_share_twitter_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-twitter" value="1" <?php checked(1, get_option('social-share-twitter'), true); ?> /> Check for Yes
   <?php
}

function social_share_linkedin_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-linkedin" value="1" <?php checked(1, get_option('social-share-linkedin'), true); ?> /> Check for Yes
   <?php
}

function social_share_reddit_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-reddit" value="1" <?php checked(1, get_option('social-share-reddit'), true); ?> /> Check for Yes
   <?php
}
 
add_action("admin_init", "social_share_settings");

Here we’re letting the user to choose from Facebook, Twitter, LinkedIn and Reddit sharing buttons. We are providing a checkbox interface to allow administrators to choose which buttons to display. You can expand the list to support more social media sites as needed.

在这里，我们允许用户从Facebook，Twitter，LinkedIn和Reddit共享按钮中进行选择。 我们提供了一个复选框界面，管理员可以选择要显示的按钮。 您可以根据需要扩展列表以支持更多社交媒体网站。

Here is what our final options page looks like:

这是我们最终选项页面的外观：

显示社交分享按钮 (Displaying the Social Sharing Buttons)

To display social sharing buttons below every post, we need to filter the content of every post before it’s sent out. We need to use the the_content filter to add social sharing buttons to the end of the posts.

要在每个帖子下方显示社交共享按钮，我们需要在每个帖子发送之前对其进行过滤。 我们需要使用the_content过滤器将社交分享按钮添加到帖子的末尾。

Here is code on how to filter post content and display social media buttons.

这是有关如何过滤帖子内容和显示社交媒体按钮的代码。

function add_social_share_icons($content)
{
    $html = "<div class='social-share-wrapper'><div class='share-on'>Share on: </div>";

    global $post;

    $url = get_permalink($post->ID);
    $url = esc_url($url);

    if(get_option("social-share-facebook") == 1)
    {
        $html = $html . "<div class='facebook'><a target='_blank' href='http://www.facebook.com/sharer.php?u=" . $url . "'>Facebook</a></div>";
    }

    if(get_option("social-share-twitter") == 1)
    {
        $html = $html . "<div class='twitter'><a target='_blank' href='https://twitter.com/share?url=" . $url . "'>Twitter</a></div>";
    }

    if(get_option("social-share-linkedin") == 1)
    {
        $html = $html . "<div class='linkedin'><a target='_blank' href='http://www.linkedin.com/shareArticle?url=" . $url . "'>LinkedIn</a></div>";
    }

    if(get_option("social-share-reddit") == 1)
    {
        $html = $html . "<div class='reddit'><a target='_blank' href='http://reddit.com/submit?url=" . $url . "'>Reddit</a></div>";
    }

    $html = $html . "<div class='clear'></div></div>";

    return $content = $content . $html;
}

add_filter("the_content", "add_social_share_icons");

Here’s how this code works:

此代码的工作方式如下：

• First we are adding a wrapper for our social media sharing links.
  首先，我们为社交媒体共享链接添加了包装器。

• Then, we are retrieving the complete URL of the current post which will be shared on the social media sites. We are also escaping the URL using WordPress provided esc_url function.

  然后，我们正在检索当前帖子的完整URL，该URL将在社交媒体网站上共享。 我们还使用WordPress提供的esc_url函数转义URL。

• Then we are checking which buttons users want to display and add the respective button markup to the post content.
  然后，我们检查用户想要显示哪些按钮，并将相应的按钮标记添加到帖子内容中。
• Finally, we’re adding the current post URL to the end of the social sharing links of the respective social media sites.
  最后，我们将当前的帖子URL添加到各个社交媒体网站的社交共享链接的末尾。

Here is how our social media buttons looks on the front-end below every post:

这是我们的社交媒体按钮在每个帖子下方的前端显示的样子：

设置社交媒体按钮的样式 (Styling the Social Media Buttons)

Let’s attach style.css on the front-end inside which we will place the code for styling the buttons. Here’s the code enqueue the style.css file.

让我们将style.css附加到前端，在其中放置用于设置按钮样式的代码。 这是使style.css文件入队的代码。

function social_share_style() 
{
    wp_register_style("social-share-style-file", plugin_dir_url(__FILE__) . "style.css");
    wp_enqueue_style("social-share-style-file");
}

add_action("wp_enqueue_scripts", "social_share_style");

Here’s the CSS code for styling the buttons:

这是样式按钮CSS代码：

.social-share-wrapper div
{
	float: left;
	margin-right: 10px;
}

.social-share-wrapper div.share-on
{
	padding: 5px;
	font-weight: bold;
}

.social-share-wrapper div.facebook
{
	background-color: #3a5795;
	padding: 5px;
}

.social-share-wrapper div.facebook a
{
	color: white;
}

.social-share-wrapper div.twitter
{
	background-color: #55acee;
	padding: 5px;
}

.social-share-wrapper div.twitter a
{
	color: white;
}

.social-share-wrapper div.linkedin
{
	background-color: #007bb6;
	padding: 5px;
}

.social-share-wrapper div.linkedin a
{
	color: white;
}

.social-share-wrapper div.reddit
{
	background-color: #ACD4FC;
	padding: 5px;
}

.social-share-wrapper div.reddit a
{
	color: white;
}

.social-share-wrapper div a
{
	text-decoration: none;
	border: none;
}

.clear
{
	clear: left;
}

结论 (Conclusion)

In this article I’ve shown you how to easily build your own a social media sharing plugin. You can now go ahead and expand on this to add buttons for more social media sites and also display the number of shares along with the buttons. Please share your experience with your own plugins below.

在本文中，我向您展示了如何轻松构建自己的社交媒体共享插件。 现在，您可以继续进行扩展，以添加用于更多社交媒体网站的按钮，还可以显示共享数量以及按钮。 请在下面与您自己的插件分享您的经验。

翻译自: https://www.sitepoint.com/building-your-own-social-sharing-plugin-for-wordpress/

wordpress插件