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

>在這裡，我們使用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>

>在這裡，我們讓用戶從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中文網其他相關文章！