WordPressテーマの「Simplicity」に、「Push7」のボタンデザインを変えて設置してみた

Push7 | Webサイト運営者のための、Webプッシュ通知サービス

以前、プッシュ通知をする「Push7」をご紹介いたしました。

Webプッシュ通知をする噂の「Push7」を導入してみた
Push7 | Webサイト運営者のための、Webプッシュ通知サービス 以前、Webプッシュ通知をする「pushnate」を当サイトでご紹...

「Push7」のサービスは素晴らしいですが、設置するボタンデザインは一定なので、私が利用しているWordPressテーマの「Simplicity」のテイストとは少し違います。なので、デザインを変更して設置してみました。

今回ご紹介するのは、パソコン版のバイラルタイプ(高速)とモバイル版のデフォルト(アイコン)となります。

「Simplicity」テーマに「Push7」のボタンデザインを変えて設置

スクリプトを張り付ける

まずは、スクリプトを「Simplicity」子テーマにある「footer-insert.php」に挿入します。

「Push7」の管理画面に行き、「導入方法」のページにある下記の一文をコピーします。

Push7 スクリプトコピー

次に「simplicity2-child」フォルダ下にある「footer-insert.php」ファイルを開き、一番下あたりに貼りつけます。

htmlを張りつける

次は下記のHTMLをコピーします。

Push7 htmlコピー

次にsimplicity2フォルダ下、「sns-buttons-icon.php」ファイルのulタグにある任意の場所に貼りつけます。私はボタンの最後に「Push7」のボタンを表示したかったので、一番下に貼りつけました。

次がポイントです。貼りつけたhtmlを「Simplicty」に合わせ、デザインを変えやすいようにクラスを付け加えます。

上記の「div」を「li」に変え、「push7」というクラスを付け加えます。

スタイルを変更する

スクリプトとhtmlの準備はできましたので、次は「Push7」のボタンデザインのスタイルを上書きします。

パソコン版(バイラルタイプの高速ボタン)

simplicity2-child下の「style.css」に下記のように記述します。

バイラルタイプの高速ボタンデザイン

Push7 パソコン版(バイラルタイプの高速ボタン)

モバイル版(デフォルトアイコン)

simplicity2-child下の「mobile.css」に下記のように記述します。

デフォルトアイコンデザイン

Push7 モバイル版(デフォルトアイコン)

Push7のボタンが表示しない場合

WordPressの仕様などにより、テンプレートにスクリプトを記述した時、スキームが書き換えられて、「https」が「http」となる場合があります。

その場合、下記の関数を子テーマの「functions.php」に記述してみてください。

「APPNO」の部分は「自動プッシュ設定」ページなどにある、「APPNO」を入力してください。

Push7 「自動プッシュ設定」ページの「APPNO」

まとめ

  • 「Push7」の外部ファイルのスクリプトを子テーマにある「footer-insert.php」に貼りつける。
  • 「Push7」のボタン表示用のhtmlをsimplicity2フォルダ下にある「sns-buttons-icon.php」に貼りつける。
  • パソコン版はsimplicity2-child下の「style.css」でスタイルを上書きする。
  • モバイル版はsimplicity2-child下の「mobile.css」でスタイルを上書きする。
  • WordPressの仕様などにより、テンプレートにスクリプトを記述した時、スキームが書き換えられる場合がある。

スタイルはコピーするだけでは、個人の環境によってボタンデザインが変わらない可能性がありますので、ご了承ください。

CSSは「Push7」のオリジナルのスタイルを強制的に上書きするために、「!important」を多用して強引に変えています。

上記の変更だけで私は「Push7」のボタンをブログのテイストに合わせることができたので、改めて「Simplicity」のカスタマイズ性に惚れ直しました。

「Simplicity」で「Push7」のボタンデザインを変更する際の参考になれば幸いです。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressテーマの「Simplicity」に、「Push7」のボタンデザインを変えて設置してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!