ソーシャル共有プラグインを使用すると、ウェブサイトの訪問者がソーシャルメディアサイトでウェブサイトのコンテンツを簡単に共有できます。これはあなたのウェブサイトの全體的な認(rèn)識(shí)を高めるのに役立ちます。

すでにインストールしてそれを行うことができる既存のソーシャル共有プラグインが數(shù)十個(gè)いますが、その楽しみはどこですか？

このチュートリアルでは、WordPress用の獨(dú)自のソーシャル共有プラグインをゼロから構(gòu)築する方法を紹介します。これにより、すべての投稿の下にソーシャル共有ボタンを追加できます。ユーザーは、目的のソーシャルメディアサイトボタンをクリックするだけで投稿を共有できます。

キーテイクアウト

ソーシャル共有プラグインにより、ウェブサイトの訪問者はソーシャルメディアサイトでコンテンツを簡単に共有できるようになり、ウェブサイトの認(rèn)識(shí)が高まります。

WordPress用の獨(dú)自のソーシャル共有プラグインの構(gòu)築には、ディレクトリとファイルの作成、管理メニュー項(xiàng)目の作成、オプションページの作成、ソーシャル共有ボタンの表示、ソーシャルメディアボタンのスタイリングが含まれます。

オプションページでは、ユーザーがボタンを必要とするソーシャルメディアサイトを選択でき、ワードプレスの「the_content」フィルターを使用してボタン自體が投稿の最後に追加されます。
• ソーシャル共有プラグインのカスタマイズには、CSSスタイルの変更、ソーシャルメディアプラットフォームの追加、ボタンのレスポンシブの作成、分析ツールでのパフォーマンスの追跡、APIを使用した共有カウントの追加、SEOのボタンの最適化が含まれます。
• なぜソーシャルメディア共有ボタンが必要なのですか？
• ユーザーの80％以上が友人の推奨事項(xiàng)に基づいてコンテンツを読むことを検討していることがよくあります。ソーシャルシェアリングを使用すると、ユーザーに自分のコンテンツを友人のネットワークと共有することができます。
ウェブ上で毎日400億株以上がクリックされているため、WordPress Webサイトにソーシャル共有ボタンを追加することは、サイトの販売を支援するための最初のステップです。
• プラグインのディレクトリとファイル

物事を開始するには、ソーシャルシェアというディレクトリを作成し、その中に次のファイルを作成します。

管理メニュー項(xiàng)目の作成

ユーザーがソーシャルメディアサイトを表示するボタンを選択できるプラグインのオプションページを作成する必要があります。最初にオプションページを作成するには、オプションページが添付されるメニュー項(xiàng)目を作成する必要があります。

ここに、設(shè)定の下に管理メニュー項(xiàng)目を作成するコードがあります。トップレベルメニュー項(xiàng)目。

ここでは、add_submenu_pageを使用してメニュー項(xiàng)目を追加しています。 social_share_pageは、オプションページの內(nèi)容を表示する必要があるコールバック関數(shù)です。

これが私たちのメニュー項(xiàng)目のように見えるものです：

オプションページの作成

social_share_page関數(shù)をコーディングして、オプションページのコンテンツを表示します。

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

次に、セクションとそのオプションフィールドを表示します

ここでは、ユーザーがF(xiàn)acebook、Twitter、LinkedIn、Reddit共有ボタンから選択できるようにしています。管理者が表示するボタンを選択できるようにするためのチェックボックスインターフェイスを提供しています。リストを拡張して、必要に応じてより多くのソーシャルメディアサイトをサポートできます。

ここに最終的なオプションページがどのようになりますか：

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

ソーシャル共有ボタンの表示

すべての投稿の下にソーシャル共有ボタンを表示するには、送信する前にすべての投稿のコンテンツをフィルタリングする必要があります。 the_contentフィルターを使用して、投稿の最後にソーシャル共有ボタンを追加する必要があります。 ここに、コンテンツの投稿をフィルタリングし、ソーシャルメディアボタンを表示する方法に関するコードを示します。

このコードの仕組みは次のとおりです

最初に、ソーシャルメディア共有リンクにラッパーを追加します。

次に、ソーシャルメディアサイトで共有される現(xiàn)在の投稿の完全なURLを取得しています。また、WordPressを使用してESC_URL関數(shù)を使用してURLを脫出しています。

次に、どのボタンを表示したいかを確認(rèn)し、それぞれのボタンマークアップを投稿コンテンツに追加します。

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

最後に、それぞれのソーシャルメディアサイトのソーシャル共有リンクの最後に現(xiàn)在の投稿URLを追加します。

これが私たちのソーシャルメディアボタンがすべての投稿の下のフロントエンドでどのように見えるかを示します：

• ソーシャルメディアボタンのスタイリング
フロントエンドにstyle.cssを添付してみましょう。ボタンをスタイリングするためのコードを配置します。これがコードenqueue.cssファイルです。
• ボタンをスタイリングするためのCSSコードは次のとおりです

結(jié)論

この記事では、ソーシャルメディア共有プラグインを簡単に構(gòu)築する方法を紹介しました。これで先に進(jìn)み、これを拡張して、より多くのソーシャルメディアサイトのボタンを追加し、ボタンとともに共有數(shù)を表示することもできます。以下の自分のプラグインであなたの経験を共有してください。

WordPress用の獨(dú)自のソーシャル共有プラグインを構(gòu)築することについてのよくある質(zhì)問WordPress用のソーシャル共有プラグインをカスタマイズするにはどうすればよいですか？

WordPress用のソーシャル共有プラグインをカスタマイズすることで、CSSスタイルを変更することで実行できます。ボタンの外観、サイズ、色、さらにはホバーエフェクトを変更できます。また、投稿の上部、下部、または側(cè)面に関係なく、ウェブサイトにボタンを表示したい場所を決定することもできます。変更を常にテストして、それらが期待どおりに機(jī)能し、ウェブサイトの機(jī)能に干渉しないようにしてください。

プラグインにソーシャルメディアプラットフォームを追加できますか？プラグインにソーシャルメディアプラットフォームを追加できます。これは、PHPコードにボタン要素を追加し、それぞれのソーシャルメディア共有URLにリンクすることで実行できます。各プラットフォームの正しいURL構(gòu)造を使用して、共有機(jī)能が正しく機(jī)能するようにしてください。

ソーシャル共有ボタンの応答性を高めるにはどうすればよいですか？メディアクエリ。これらを使用すると、さまざまな畫面サイズに異なるスタイルを設(shè)定することができ、すべてのデバイスでボタンがよく見えるようにします。畫面のサイズに応じて、ボタンのさまざまなサイズ、位置、さらにはさまざまな畫像を指定できます。 Google Analyticsなどの分析ツールと統(tǒng)合することにより、ソーシャル共有ボタンのパフォーマンスを追跡します。これは、ボタンリンクに追跡コードを追加することで実行できます。これにより、各ボタンが何回クリックされ、ウェブサイトに運(yùn)転しているトラフィックの量を確認(rèn)できます。ソーシャルメディアプラットフォームが提供するAPIを使用して、ソーシャル共有ボタンに共有カウントを追加することができます。これらのAPIを使用すると、URLがプラットフォームで共有されている回?cái)?shù)を取得できます。その後、共有ボタンの橫にこの番號(hào)を表示できます。すべてのプラットフォームがこの機(jī)能を提供しているわけではなく、一部のプラットフォームはAPIを使用するためにアプリケーションを登録する必要がある場合があります。カスタムポストタイプにソーシャル共有ボタンを追加します。これは、ボタンを生成するPHPコードを変更することで実行できます。投稿タイプをチェックし、それに応じてボタンを追加する條件を追加する必要があります。変更をテストして、それらが正しく機(jī)能することを確認(rèn)してください。SEOのソーシャル共有ボタンを最適化するには、適切なメタタグをページに追加する必要があります。これらのタグは、コンテンツが共有されたときに表示するタイトル、説明、畫像など、コンテンツに関する情報(bào)をソーシャルメディアプラットフォームに提供します。これにより、共有コンテンツの可視性とクリックスルーレートが向上します。

ソーシャル共有ボタンにSVGアイコンを使用できますか？ 。 SVGアイコンはベクトルベースです。つまり、品質(zhì)を失うことなくスケーリングできます。これにより、レスポンシブデザインに最適です。既製のSVGアイコンを使用するか、グラフィックデザインソフトウェアを使用して獨(dú)自のアイコンを作成できます。 WordPressメニューは、WordPressメニューエディターを使用して実行できます。メニューにカスタムリンクを追加し、CSSを使用してボタンとしてスタイリングできます。これにより、現(xiàn)在のページに基づいて変更される動(dòng)的なリンクではなく靜的リンクが作成されることに注意してください。コードとリソースを最適化することで、より速く達(dá)成できます。これには、CSSおよびJavaScriptファイルの模倣、畫像の最適化、効率的なコードの使用が含まれます。キャッシュおよびコンテンツ配信ネットワーク（CDN）を使用して、荷重時(shí)間をさらに改善することもできます。

以上がWordPress用の獨(dú)自のソーシャル共有プラグインを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。