当サイトでも使用しているWordPressテーマ「Cocoon」ですが、Push7が標準で入っておりません。
同じわいひらさんが作成されたWordPressテーマ「Simplicity2」ではPush7が標準で入っていたので、テーマを「Simplicity2」から「Cocoon」に移行するとき、カスタマイズする必要があります。
準備するもの エディタ・ＦＴＰソフト・Push7の情報
ATOMやVisual Studio CodeなどphpをUTF-8形式で編集できるエディタソフトを準備しましょう。
ちなみに私は、ATOMからVisual Studio Codeに乗り換えたところです。
ウィジェットで表示させたいのなら、FTPソフトは不要です。
「SNSフォロー」ボタンに組み込むのなら、テーマを編集する必要があるためFilezillaなどのFTPソフトが必要です。
Filezillaについてはググってください・・・インストールしたらPCの設定が変わってしまい大変な思いをしたことがあるので、Cyberduckのほうがいいかもしれません。
Push7
Push7にログインしましょう。
登録していない方は、登録が必要です。
Push7登録方法
公式サイトから、「無料で試してみる」もしくは「ログイン」ボタンをクリックします。
新規登録します。
メールが届きますので、メールに記載してあるURLをクリックします。
パスワードなどを設定してください。
Push7で新規アプリケーションを作成
初めてログインすると、おそらく、多分、新規アプリケーションの画面が勝手に立ち上がると思います。
もし、立ち上がらなかったら、「新規アプリケーション」のボタンを探して、クリックしてください。
アプリケーション名は、自分がわかりやすい名前
URLは登録するURL 当サイトなら、https://aw1.jp/wordpsとなります。
アイコンはあれば登録。無ければそのまま。
導入するサイトに近そうなカテゴリを選択
アプリケーションURLは希望する英数字を入れましょう。
WordPressに導入する方法は２つ
WordPressにプラグインで導入する方法と、Cocoonに入れ込む方法があります。
WordPressにプラグインで導入する方法
Push7で下記の画面を表示させると、方法が記載されていますので、記載されている通りに設定します。
Cocoonに入れ込む方法
Push7で下記の通りに操作して、Push7 SDKの画面を表示させます。
そうすると、下記の画面が表示されます。
表示されたコードを
WordPress管理画面 ＞ Cocoon設定 ＞ アクセス解析・認証
フッター用コードの部分にコピペします。
保存するのを忘れずに。
ボタンを挿入する場所を決める
Push7のサイトで挿入するボタンを選びます。
ウィジェットで入れ込む方法
WordPress管理画面 ＞ 外観 ＞ ウィジェット
Push7のボタンを入れたいウィジェットに「カスタムHTML」を挿入します。
Push7で選択したボタンのコードをコピペします。
ウィジェットを保存すれば、ボタンが表示されます。
今回は、投稿SNSボタン下というウィジェットに入れ込みました。
ボタンのサイズなどは、CSSでカスタマイズできます。・・・方法は下でご紹介します。
フォローボタンに横並びで表示させたいなら、カスタマイズ
ウィジェットでボタンを挿入する方法は簡単ですが、SNSフォローボタンと横並びで表示させたい！
という方もいらっしゃると思います。
この時は、カスタマイズすれば可能です。
FTPで親テーマから、ダウンロードする
wp-content/themes/cocoon-master/tmpにあるsns-follow-buttons.phpをFTPソフトを使ってダウンロードします。
もし、子テーマでsns-follow-buttons.phpをカスタマイズしている場合は、子テーマからダウンロードしてください。
ATOMなどのエディタで、ダウンロードしたsns-follow-buttons.phpを編集します。
挿入する場所は任意ですが、一番最後に入れました。
挿入後・・・今回は、Push7で購読者付き（右）というボタンを挿入しました。
編集したsns-follow-buttons.phpをFTPソフトでアップロードします。
子テーマを使っている方は、
子テーマ ＞ tmp にアップロードします。
tmpというフォルダは、元々ありませんので、FTPソフトで作ってください。
通常なら、wp-content/themes/cocoon-child-master/tmpです。
親テーマの場合は、同じ場所にアップロードしますが、テーマが更新されると再度設定する必要があるので、子テーマ使用を推奨します。
アップロードした時点で、Push7のボタンが表示されます。
ボタンのデザインをCSSで調整
Push7のボタンは、Push7 SDKを導入しているので、自動で設定されます。
でも、吹き出しのところを見てもらうとわかりますが、ちょっとずれてしまいます。
また、文字もちょっとはみ出します。
これをCSSで修正します。
下記のCSSを子テーマのstyle.cssや、外観 ＞ カスタマイズ ＞ 追加CSS
に追記します。
div.p7button[data-align='right'] div.p7button-right {
background: #fff;
border: 1px solid #bbb;
border-radius: 3px;
color: #aaa;
display: inline-block;
height: 20px;
text-align: center;
margin-left: 0;
min-width: auto;
padding: 0;
width: 25px;
}
div.p7button[data-align='right'] div.p7button-right {
top: 11px;
}
div.p7button[data-align='right'] div.p7button-right::after,
div.p7button[data-align='right'] div.p7button-right::before {
border: solid transparent;
content: " ";
height: 0;
left: auto;
position: absolute;
pointer-events: none;
right: 100%;
top: 50%;
width: 0;
}
div.p7button[data-align='right'] div.p7button-right::after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 3px;
margin-top: -3px;
}
div.p7button[data-align='right'] div.p7button-right::before {
background: none;
border-color: rgba(119, 119, 119, 0);
border-right-color: #bbb;
border-width: 4px;
margin-top: -4px;
transform: none;
}
div.p7button a {
height: 45px;
margin-right: 5px;
}
上のように変わります。
ちなみに、CSSの優先順位を使ってカスタマイズしています。
購読者付き（上）ボタンのCSSは、作ってません。
要望があれば、作ります。
