>社交共享插件使您的網(wǎng)站訪問者可以在社交媒體網(wǎng)站上輕松共享您的網(wǎng)站內(nèi)容。這有助于提高您網(wǎng)站的整體認(rèn)識。

>

>已經(jīng)有數(shù)十個(gè)現(xiàn)有的社交共享插件可以安裝和完成，但是在哪里很有趣？

> 在本教程中，我將向您展示如何從Scratch構(gòu)建WordPress的社交共享插件，這可以在每個(gè)帖子下方添加社交共享按鈕。用戶只需單擊所需的社交媒體網(wǎng)站按鈕即可共享帖子。

>

鑰匙要點(diǎn)

>社交共享插件允許網(wǎng)站訪問者輕松在社交媒體網(wǎng)站上共享內(nèi)容，從而提高對您網(wǎng)站的認(rèn)識。
>為WordPress構(gòu)建自己的社交共享插件涉及創(chuàng)建目錄和文件，創(chuàng)建管理菜單項(xiàng)，創(chuàng)建選項(xiàng)頁面，顯示社交共享按鈕以及對社交媒體按鈕進(jìn)行造型。
• >
選項(xiàng)頁面允許用戶選擇他們想要的按鈕的哪些社交媒體網(wǎng)站，然后使用WordPress中的“ the_content”過濾器添加到帖子的末尾。
• >
>自定義社交共享插件可能涉及修改CSS樣式，添加更多社交媒體平臺，使按鈕響應(yīng)迅速，使用分析工具跟蹤性能，使用API??添加股票計(jì)數(shù)，并優(yōu)化SEO。
為什么您需要社交媒體共享按鈕？

>經(jīng)常報(bào)道，超過80％的用戶考慮根據(jù)朋友的建議閱讀內(nèi)容。通過社交共享，您可以使用戶能夠與自己的朋友網(wǎng)絡(luò)共享您的內(nèi)容。 每天在網(wǎng)絡(luò)上單擊

超過400億股，因此在您的WordPress網(wǎng)站上添加社交共享按鈕是幫助您推銷您的網(wǎng)站的第一步。

插件目錄和文件

>開始事物，創(chuàng)建一個(gè)稱為社交共享的目錄并在其中創(chuàng)建以下文件：>

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

>

創(chuàng)建管理菜單項(xiàng)

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

>我們需要為插件創(chuàng)建一個(gè)選項(xiàng)頁面，用戶可以在其中選擇應(yīng)為此顯示社交媒體網(wǎng)站的按鈕。首先要?jiǎng)?chuàng)建一個(gè)選項(xiàng)頁面，我們需要?jiǎng)?chuàng)建一個(gè)菜單項(xiàng)，將選項(xiàng)頁面附加到。

這是在設(shè)置頂級菜單項(xiàng)下創(chuàng)建管理菜單項(xiàng)的代碼。

<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>

>在這里，我們使用add_submenu_page添加菜單項(xiàng)，該菜單項(xiàng)確實(shí)在Admin_Menu操作中被調(diào)用。 Social_share_page是回調(diào)函數(shù)，需要顯示選項(xiàng)頁面的內(nèi)容。

>

這是我們的菜單項(xiàng)的樣子：

創(chuàng)建一個(gè)選項(xiàng)頁面

>讓我們代碼social_share_page函數(shù)顯示選項(xiàng)頁面內(nèi)容。

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

>在這里，我們添加了一個(gè)名為Social_share_config_section的部分，并將設(shè)置注冊為Social-Share。

現(xiàn)在，讓我們顯示該部分及其選項(xiàng)字段。

>

<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>

>在這里，我們讓用戶從Facebook，Twitter，LinkedIn和Reddit共享按鈕中進(jìn)行選擇。我們提供一個(gè)復(fù)選框接口，以允許管理員選擇要顯示哪些按鈕。您可以擴(kuò)展列表以根據(jù)需要支持更多社交媒體網(wǎng)站。

這是我們的最終選項(xiàng)頁面的樣子：

顯示社交共享按鈕

>要在每個(gè)帖子下方顯示社交共享按鈕，我們需要在發(fā)送每個(gè)帖子之前過濾每個(gè)帖子的內(nèi)容。我們需要使用the_content過濾器將社交共享按鈕添加到帖子的末尾。

>

這是有關(guān)如何過濾發(fā)布內(nèi)容和顯示社交媒體按鈕的代碼。>

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

>

<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>

首先，我們正在為社交媒體共享鏈接添加包裝。 然后，我們正在檢索將在社交媒體網(wǎng)站上共享的當(dāng)前帖子的完整URL。我們還使用WordPress提供的ESC_URL函數(shù)逃脫了URL。 然后，我們正在檢查哪些按鈕用戶要顯示哪些按鈕，并將相應(yīng)的按鈕標(biāo)記添加到帖子內(nèi)容中。

>最后，我們將當(dāng)前的帖子URL添加到各自社交媒體網(wǎng)站的社交共享鏈接的末尾。
這是我們的社交媒體按鈕在每篇文章下方的前端上的外觀：>
造型社交媒體按鈕
>讓我們在前端附加style.css，我們將在其中放置用于造型按鈕的代碼。這是Code inqueue the style.css file。

>這是用于造型按鈕的CSS代碼：

>

結(jié)論

在本文中，我向您展示了如何輕松構(gòu)建自己的社交媒體共享插件?，F(xiàn)在，您可以繼續(xù)進(jìn)行擴(kuò)展，以添加更多社交媒體網(wǎng)站的按鈕，還可以顯示股票數(shù)量以及按鈕。請?jiān)谙旅媾c自己的插件分享您的經(jīng)驗(yàn)。

>

經(jīng)常詢問有關(guān)為WordPress構(gòu)建自己的社交共享插件的問題

>如何自定義WordPress的社交共享插件？您可以更改按鈕的外觀，它們的大小，顏色，甚至懸停效果。您還可以決定要在網(wǎng)站上出現(xiàn)按鈕的位置，無論是在帖子的頂部，底部還是側(cè)面。請記住要始終測試您的更改，以確保它們按預(yù)期工作，并且不要干擾您的網(wǎng)站的功能。

我可以在我的插件中添加更多社交媒體平臺嗎？可以在插件中添加更多社交媒體平臺。這可以通過在PHP代碼中添加更多按鈕元素并將其鏈接到相應(yīng)的社交媒體共享URL來完成。確保為每個(gè)平臺使用正確的URL結(jié)構(gòu)，以確保共享功能正常工作。

>

>我如何使我的社交共享按鈕響應(yīng)迅速？

>

使您的社交共享按鈕響應(yīng)涉及使用CSS涉及CSS媒體查詢。這些使您可以為不同的屏幕尺寸設(shè)置不同的樣式，以確保您的按鈕在所有設(shè)備上看起來都不錯(cuò)。您可以根據(jù)屏幕尺寸為按鈕指定不同的尺寸，位置，甚至不同的圖像。

>可以跟蹤我的社交分享按鈕的性能嗎？通過將它們與Google Analytics（分析工具）集成在一起，跟蹤您的社交共享按鈕的性能。這可以通過將跟蹤代碼添加到您的按鈕鏈接來完成。這將使您可以查看每個(gè)按鈕單擊多少次，以及他們開車到您的網(wǎng)站的流量。

如何將股票計(jì)數(shù)添加到我的社交共享按鈕中？可以使用社交媒體平臺提供的API來完成您的社交共享按鈕中的股票計(jì)數(shù)。這些API允許您檢索在其平臺上共享URL的次數(shù)。然后，您可以在共享按鈕旁邊顯示此號碼。請注意，并非所有平臺都提供此功能，有些平臺可能需要您注冊使用其API。將社交共享按鈕添加到自定義帖子類型中。這可以通過修改生成按鈕的PHP代碼來完成。您需要添加一個(gè)檢查帖子類型并相應(yīng)添加按鈕的條件。確保測試您的更改以確保它們正常工作。

>如何為SEO優(yōu)化我的社交共享按鈕？這些標(biāo)簽向社交媒體平臺提供有關(guān)您的內(nèi)容的信息，例如當(dāng)您的內(nèi)容共享時(shí)顯示標(biāo)題，描述和圖像。這可以提高您共享內(nèi)容的可見性和點(diǎn)擊率。

>我可以將SVG圖標(biāo)用于我的社交共享按鈕嗎？

是的，您可以將SVG圖標(biāo)用于您的社交共享按鈕。 SVG圖標(biāo)是基于矢量的，這意味著可以將它們縮放而不會(huì)失去質(zhì)量。這使它們成為響應(yīng)式設(shè)計(jì)的絕佳選擇。您可以使用預(yù)制的SVG圖標(biāo)或使用圖形設(shè)計(jì)軟件創(chuàng)建自己的自己。

>如何將社交共享按鈕添加到我的WordPress菜單？

> WordPress菜單可以使用WordPress菜單編輯器完成。您可以在菜單中添加自定義鏈接，并使用CSS將其作為按鈕樣式。請注意，這將創(chuàng)建一個(gè)靜態(tài)鏈接，而不是基于當(dāng)前頁面更改的動(dòng)態(tài)鏈接。

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

>使您的社交共享按鈕加載負(fù)載可以通過優(yōu)化您的代碼和資源來更快。這包括縮小CSS和JavaScript文件，優(yōu)化圖像以及使用有效的代碼。您也可以使用緩存和內(nèi)容輸送網(wǎng)絡(luò)（CDN）進(jìn)一步改善加載時(shí)間。

以上是為WordPress構(gòu)建自己的社交共享插件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！