WordPressデザインレシピ集｜狩野祐東

2020年12月29日

「あのしくみはどう作るんだろう? 」が、スグにわかります。
WordPressによるWebサイト制作のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで、余すところなく集めました。テーマカスタマイズ／テーマ作成／投稿ページ・固定ページ／一覧ページ／ヘッダー・フッター／カスタム投稿タイプ／カスタムフィールドなど、目的別にレシピを整理。「あのしくみはどう作るんだろう？」が、スグにわかります。Webサイト運営者からWebプログラマーまで、WordPressを扱うすべての方にお届けします。WordPress 5.xに対応。

SNSのボタンを表示したい（プラグイン：JetPack）

FacebookやTwitterなどSNSサイトのいわゆる「共有ボタン（ソーシャルリンク）」をページに設置するには＜head＞〜＜/head＞にメタタグを埋め込むことと、ボタンを表示するためのタグを追加することの、ふたつの作業が必要になります。これらのタグを自前でテーマに追加するのもそれほど難しいわけではありませんが、プラグインを使用する方が手軽です。シェアボタンを設置するプラグインはたくさんあり、どれでも好きなもので構いませんが、ここではJetPackプラグインを使った方法を紹介します。JetPackプラグインの機能を使うにはwordpress.comのアカウントにログインしている必要があります。まだアカウントを取得していない場合は「211 メールで投稿できるようにしたい」で取り上げている手順を参考に、登録を済ませておきます。また、シェアボタンを設置するそれぞれのSNSサイトのアカウントも必要です。こちらも登録してから作業を進めましょう。

アカウントの準備が済んだらWordPressの管理画面にログインして、［JetPack］ー［設定］を選び、設定画面を開きます。JetPackメニューバーの［共有］をクリックします。

「共有ボタン」パネルの「投稿に共有ボタンを追加」をオンにして「共有ボタンを追加」をオンにして「共有ボタンを設定する」をクリックします。wordpress. comへログインしたのち、設定画面が開きます。上部のツールバーで［Sharing Buttons］が選ばれていることを確認します。

共有ボタンの表示を設定する

ページに共有ボタンを設置するには、3つの設定が必要です。

共有ボタンの表示方法を決める

共有ボタンを表示するページを設定する

SNSサービスと連携する

1. 共有ボタンの表示方法を決める

［Edit label text］❶をクリックして、共有ボタンが表示される場所につけるラベル（見出し）を編集します。デフォルトでは［共有］になっていますが、何も表示したくなければテキストフィールドを空欄にします。ラベルの編集が終わったら［Close］をクリックします。

次に［Edit sharing buttons］❷をクリックして、表示したい共有ボタンを選び、配置する順序を決めます。各ボタンをクリックすると、表示／非表示を切り替えられます。順序を変えたいときは［Reorder］をクリックします。ボタンをドラッグして配置を変更できるようになります。表示するボタンの選択と配置順が決まったら［Close］をクリックします。ラベルと表示するボタンの設定が終わったら［Save Changes］をクリックします。

2. 共有ボタンを表示するページを設定する

「Option」パネルには、共有ボタンを表示できるページのリストが表示されています。表示させたいページのリストが表示されています。表示させたいページにチェックをつけます❸。Twitterの共有ボタンを使用するときは、＠マークから始まるユーザーネームをテキストフィールドに入力します❹。表示するページの設定が終わったら［Save Changes］をクリックします。

3. SNSサービスと連携する

最後に各サービスと連携をします。ここではTwitterを例に操作を説明しますが、他のサービスでも基本的には同じです。上部のツールバーにある［Connections］をクリックします。Twitterの横にある［Connect］をクリックします。サービスの連携ウィンドウが開きます。Twitterの場合はユーザー名とパスワードを入力してから［連携アプリを認証］をクリックします。これで連携は完了です。