広告

CocoonにPush7を入れる方法

Push7で新規登録WordPress
この記事は約7分で読めます。

当サイトでも使用しているWordPressテーマ「Cocoon」ですが、Push7が標準で入っておりません。

同じわいひらさんが作成されたWordPressテーマ「Simplicity2」ではPush7が標準で入っていたので、テーマを「Simplicity2」から「Cocoon」に移行するとき、カスタマイズする必要があります。

準備するもの エディタ・FTPソフト・Push7の情報

ATOMやVisual Studio CodeなどphpをUTF-8形式で編集できるエディタソフトを準備しましょう。

ちなみに私は、ATOMからVisual Studio Codeに乗り換えたところです。

ウィジェットで表示させたいのなら、FTPソフトは不要です。

「SNSフォロー」ボタンに組み込むのなら、テーマを編集する必要があるためFilezillaなどのFTPソフトが必要です。

Filezillaについてはググってください・・・インストールしたらPCの設定が変わってしまい大変な思いをしたことがあるので、Cyberduckのほうがいいかもしれません。

Push7

Push7にログインしましょう。

登録していない方は、登録が必要です。

Push7登録方法

公式サイトから、「無料で試してみる」もしくは「ログイン」ボタンをクリックします。

Push7で新規登録

新規登録します。

新規登録

メールが届きますので、メールに記載してあるURLをクリックします。

パスワードなどを設定してください。

Push7で新規アプリケーションを作成

初めてログインすると、おそらく、多分、新規アプリケーションの画面が勝手に立ち上がると思います。

もし、立ち上がらなかったら、「新規アプリケーション」のボタンを探して、クリックしてください。

アプリケーション名は、自分がわかりやすい名前

URLは登録するURL 当サイトなら、https://aw1.jpとなります。

アイコンはあれば登録。無ければそのまま。

導入するサイトに近そうなカテゴリを選択

アプリケーションURLは希望する英数字を入れましょう。

新規アプリ登録

WordPressに導入する方法は2つ

WordPressにプラグインで導入する方法と、Cocoonに入れ込む方法があります。

WordPressにプラグインで導入する方法

Push7で下記の画面を表示させると、方法が記載されていますので、記載されている通りに設定します。

プラグインで導入

Cocoonに入れ込む方法

Push7で下記の通りに操作して、Push7 SDKの画面を表示させます。

SDKを導入

そうすると、下記の画面が表示されます。

コピペするところ

表示されたコードを

WordPress管理画面 > Cocoon設定 > アクセス解析・認証

フッター用コードの部分にコピペします。

Cocoon設定
cocoon設定2

保存するのを忘れずに。

ボタンを挿入する場所を決める

Push7のサイトで挿入するボタンを選びます。

ボタンを選ぶ

ウィジェットで入れ込む方法

WordPress管理画面 > 外観 > ウィジェット

Push7のボタンを入れたいウィジェットに「カスタムHTML」を挿入します。

Push7で選択したボタンのコードをコピペします。

ウィジェット利用

ウィジェットを保存すれば、ボタンが表示されます。

今回は、投稿SNSボタン下というウィジェットに入れ込みました。

表示例

ボタンのサイズなどは、CSSでカスタマイズできます。・・・方法は下でご紹介します。

フォローボタンに横並びで表示させたいなら、カスタマイズ

ウィジェットでボタンを挿入する方法は簡単ですが、SNSフォローボタンと横並びで表示させたい!

という方もいらっしゃると思います。

この時は、カスタマイズすれば可能です。

FTPで親テーマから、ダウンロードする

wp-content/themes/cocoon-master/tmpにあるsns-follow-buttons.phpをFTPソフトを使ってダウンロードします。

Cocoonテーマ > tmp > sns-follow-buttons.php

をダウンロードするという意味です。

もし、子テーマで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;
}

gistはこちら

CSS調整後

上のように変わります。

ちなみに、CSSの優先順位を使ってカスタマイズしています。

購読者付き(上)ボタンのCSSは、作ってません。

要望があれば、作ります。