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

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

>

>已经有数十个现有的社交共享插件可以安装和完成，但是在哪里很有趣？

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

>

钥匙要点

>社交共享插件允许网站访问者轻松在社交媒体网站上共享内容，从而提高对您网站的认识。
>为WordPress构建自己的社交共享插件涉及创建目录和文件，创建管理菜单项，创建选项页面，显示社交共享按钮以及对社交媒体按钮进行造型。
• >
选项页面允许用户选择他们想要的按钮的哪些社交媒体网站，然后使用WordPress中的“ the_content”过滤器添加到帖子的末尾。
• >
>自定义社交共享插件可能涉及修改CSS样式，添加更多社交媒体平台，使按钮响应迅速，使用分析工具跟踪性能，使用API​​添加股票计数，并优化SEO。
为什么您需要社交媒体共享按钮？

>经常报道，超过80％的用户考虑根据朋友的建议阅读内容。通过社交共享，您可以使用户能够与自己的朋友网络共享您的内容。 每天在网络上单击

超过400亿股，因此在您的WordPress网站上添加社交共享按钮是帮助您推销您的网站的第一步。

插件目录和文件

>开始事物，创建一个称为社交共享的目录并在其中创建以下文件：>

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

>

创建管理菜单项

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

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

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

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

>在这里，我们使用add_submenu_page添加菜单项，该菜单项确实在Admin_Menu操作中被调用。 Social_share_page是回调函数，需要显示选项页面的内容。

>

这是我们的菜单项的样子：

创建一个选项页面

>让我们代码social_share_page函数显示选项页面内容。

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

>在这里，我们添加了一个名为Social_share_config_section的部分，并将设置注册为Social-Share。

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

>

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

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

这是我们的最终选项页面的样子：

显示社交共享按钮

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

>

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

以下是此代码的工作方式：

>

<span>function social_share_menu_item()
</span><span>{
</span>  <span>add_submenu_page("options-general.php", "Social Share", "Social Share", "manage_options", "social-share", "social_share_page"); 
</span><span>}
</span>
<span>add_action("admin_menu", "social_share_menu_item");</span>

首先，我们正在为社交媒体共享链接添加包装。 然后，我们正在检索将在社交媒体网站上共享的当前帖子的完整URL。我们还使用WordPress提供的ESC_URL函数逃脱了URL。 然后，我们正在检查哪些按钮用户要显示哪些按钮，并将相应的按钮标记添加到帖子内容中。

>最后，我们将当前的帖子URL添加到各自社交媒体网站的社交共享链接的末尾。
这是我们的社交媒体按钮在每篇文章下方的前端上的外观：>
造型社交媒体按钮
>让我们在前端附加style.css，我们将在其中放置用于造型按钮的代码。这是Code inqueue the style.css file。

>这是用于造型按钮的CSS代码：

>

结论

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

>

经常询问有关为WordPress构建自己的社交共享插件的问题

>如何自定义WordPress的社交共享插件？您可以更改按钮的外观，它们的大小，颜色，甚至悬停效果。您还可以决定要在网站上出现按钮的位置，无论是在帖子的顶部，底部还是侧面。请记住要始终测试您的更改，以确保它们按预期工作，并且不要干扰您的网站的功能。

我可以在我的插件中添加更多社交媒体平台吗？可以在插件中添加更多社交媒体平台。这可以通过在PHP代码中添加更多按钮元素并将其链接到相应的社交媒体共享URL来完成。确保为每个平台使用正确的URL结构，以确保共享功能正常工作。

>

>我如何使我的社交共享按钮响应迅速？

>

使您的社交共享按钮响应涉及使用CSS涉及CSS媒体查询。这些使您可以为不同的屏幕尺寸设置不同的样式，以确保您的按钮在所有设备上看起来都不错。您可以根据屏幕尺寸为按钮指定不同的尺寸，位置，甚至不同的图像。

>可以跟踪我的社交分享按钮的性能吗？通过将它们与Google Analytics（分析工具）集成在一起，跟踪您的社交共享按钮的性能。这可以通过将跟踪代码添加到您的按钮链接来完成。这将使您可以查看每个按钮单击多少次，以及他们开车到您的网站的流量。

如何将股票计数添加到我的社交共享按钮中？可以使用社交媒体平台提供的API来完成您的社交共享按钮中的股票计数。这些API允许您检索在其平台上共享URL的次数。然后，您可以在共享按钮旁边显示此号码。请注意，并非所有平台都提供此功能，有些平台可能需要您注册使用其API。将社交共享按钮添加到自定义帖子类型中。这可以通过修改生成按钮的PHP代码来完成。您需要添加一个检查帖子类型并相应添加按钮的条件。确保测试您的更改以确保它们正常工作。

>如何为SEO优化我的社交共享按钮？这些标签向社交媒体平台提供有关您的内容的信息，例如当您的内容共享时显示标题，描述和图像。这可以提高您共享内容的可见性和点击率。

>我可以将SVG图标用于我的社交共享按钮吗？

是的，您可以将SVG图标用于您的社交共享按钮。 SVG图标是基于矢量的，这意味着可以将它们缩放而不会失去质量。这使它们成为响应式设计的绝佳选择。您可以使用预制的SVG图标或使用图形设计软件创建自己的自己。

>如何将社交共享按钮添加到我的WordPress菜单？

> WordPress菜单可以使用WordPress菜单编辑器完成。您可以在菜单中添加自定义链接，并使用CSS将其作为按钮样式。请注意，这将创建一个静态链接，而不是基于当前页面更改的动态链接。

如何使我的社交共享按钮加载速度更快？

>使您的社交共享按钮加载负载可以通过优化您的代码和资源来更快。这包括缩小CSS和JavaScript文件，优化图像以及使用有效的代码。您也可以使用缓存和内容输送网络（CDN）进一步改善加载时间。

以上是为WordPress构建自己的社交共享插件的详细内容。更多信息请关注PHP中文网其他相关文章！