WordPressプラグインでソーシャルメディアボタンを実装する

「Jetpack」の「共有」機能の設定

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Jetpack」プラグインの「共有」機能を設定して、実際に共有ボタンをWebサイト上に反映する方法について解説致します。
講師:
05:32

字幕

このレッスンでは Jetpack プラグインの 共有機能を設定して 実際に共有ボタンを ウェブサイト上に反映する方法について 解説致します まずは プラグインの機能を 利用していない状態での 現状のウェブサイトを 確認しておきましょう それが こちらとなります この様に記事の一覧画面が 表示されている状態 となっています 今回はこれらの記事に対して Jetpack プラグインを使って ソーシャルメディアボタン 所謂シェアボタンを追加してみたいと思います それでは WordPress の管理画面に戻ります はい WordPress の 管理画面に戻ってきました そして今 Jetpack の設定ページを 開いている状態です では早速 共有機能を 有効化していきましょう こちらの画面の中に 「共有」という物がありますので 今こちらは 無効となっていますね これをクリックして 有効にしてあげます すると この様に 共有機能が有効化されました 共有機能が有効になったら その次は共有ボタンの設定に 進んでいきたいと思います その共有ボタンの設定ですが こちらの歯車ボタンをクリックする事によって その設定画面に移動する事が出来ます クリックしてみましょう すると この様に共有ボタンの設定ページに 移動してきます このページですが こちらの左メニューの中の 「設定」の中にある 「共有」をクリックしていただいても こちらのページに 移ってくる事が可能です それではさっそく 設定を行ってみましょう この Jetpack プラグインを 利用すれば ここに表示されている ソーシャルメディアに対しての シェアボタンをウェブサイト上に 追加できる様になっています そして この中から自分が利用したい ソーシャルメディアのボタンを選択して そして ドラッグ アンド ドロップで こちらの枠内に持ってきます そうする事で そのボタンが有効化されて ウェブサイト上に表示される といった形になります それでは早速 試してみましょう そうですね まずは LinkedIn を 試してみましょう こちらのボタンを ドラッグアンドドロップして こちらの枠に持っていきます こうする事によって LinkedIn のボタンが有効化されました 他にも Facebook や Twitter Google+ も 入れてみましょうか これで四つのボタンが 有効化された事になります また こちらの濃い灰色部分の枠に ボタンを入れる事が可能になっています ここに入れる事によって ここに入れられたボタンは 一つの「続き」というボタンの中に 格納されてクリックした際に 表示されるボタン となります もう一つぐらい こちらの「印刷」ボタン を入れておきましょうか こうして 有効化されたボタンが ウェブサイト上でどのように表示されるかを プレビュー出来るのが こちらの下の部分です こちらの「ライブプレビュー」ですね この様にウェブサイト上で表示されますよ といったプレビュー画面となります そして こちらの下の部分では そのボタンに対しての 様々な設定を行う事が 出来る様になっています 例えば ボタンのスタイルは 今は「アイコンとテキスト」となっていますが 例えば これを「アイコンのみ」に変更すると この様に上のライブプレビューが変更されます 例えば 他にも「テキストのみ」や 「公式ボタン」などがあります 今回はこの 「アイコンのみ」 にしておきましょう こちらは 共有ボタンの文言を 設定する事が出来て そして こちらの「ボタン表示」では どのページにこの共有ボタンを表示させるか といった事を設定する事が 出来る様になります 今回は すべてにチェックを 入れておきましょう そして こちらの「Twitter サイトタグ」の 部分には もしこのサイトの管理者が Twitter のアカウントを持っていれば その Twitter のユーザ名を 入力する事が出来ます そして次の「CSS と JavaScript の無効化」 と書かれている部分は この部分にチェックを入れる事によって 上記で示されている このようなデザインを 一切排除して自分でデザインをする事が 出来るようになっています 今回はこのまま チェックを付けないでおきます この状態でこちらの「変更を保存」ボタンを クリックすると 上記で設定された内容が保存されて ウェブサイト上に 表示されていきます それでは 「変更を保存」ボタンを クリックします はい これで「設定を保存しました」 と表示されて ウェブサイト上に反映されました それでは ウェブサイト上の方を 見てみましょう そして ウェブサイトを表示したら こちらの「更新」ボタンをクリックします そして 下の方にスクロールして行くと この様に共有ボタンが表示されましたね この様に表示されてくれば 設定は完了となります 以上でレッスンは終了です 今回は Jetpack プラグインの 共有機能を設定して 実際に共有ボタンをウェブサイト上に 反映させる方法について解説致しました

WordPressプラグインでソーシャルメディアボタンを実装する

WordPressは世界中で人気の無料のブログソフト/CMSです。このコースではその機能を人気のプラグインであるJetpackとWP Social Bookmarking Light、それにAddThis Sharing Buttonsでさらに拡張し、サイト上に各種ソーシャルメディアの共有ボタンを設置する方法について解説します。

54分 (15 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 1,990
発売日:2015年12月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。