WordPress用の独自のソーシャル共有プラグインを構築します

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

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

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

キーテイクアウト

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

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

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

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

管理メニュー項目の作成

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

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

ここでは、add_submenu_pageを使用してメニュー項目を追加しています。 social_share_pageは、オプションページの内容を表示する必要があるコールバック関数です。

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

オプションページの作成

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

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

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

ここでは、ユーザーがFacebook、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></span>

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

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

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

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

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

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

<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を追加します。

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

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

結論

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

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

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

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

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

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

以上がWordPress用の独自のソーシャル共有プラグインを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。