書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】LINEのような動的にメッセージが表示できる診断BOXを作成する

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

お久しぶりです。かきてぃーです。

やっと手が1日だけ空いたので、サポートの記事を書こうと思います。

https://kakitare.info/web/affinger4-help/

今回、依頼があったのが以下のサイトの右下のような診断BOXを作成すること。

https://digitalnews365.com/line-mineo-compare

確かに。これは難易度高そうです。

作り方は

  1. 大枠のデザインを作成
  2. JQueryを導入してイベントを拾ってcssが変化するようにする
  3. cssで調整

ですね。

かきてぃー
2がとっても難しそうですが、やってみると意外と…アレ?って思いますので、まずはやってみましょう。

仕様を考える

まず初めにやらなきゃいけないことは仕様を決めることです。

動きは、参考サイトをそのまま流用するとして、じゃあどのように値を取得するか考えます。

  • パターン1:各ボタンやメッセージは全てウィジェットから取得する
  • パターン2:固定ページに書かれた内容を直接取得する
  • パターン3:phpに直接書いて取得する
  • パターン4:Wordpressの管理サイドバーを追加して設定画面を設ける

4が理想的ですが、面倒なので今回は3の方式でいきます。

LINEbox用のphpテンプレートを作成してその情報を表示するようにする

が仕様です。

大枠のデザインを作成する

JQueryとかは、ひとまず置いておいて。

まず大枠のデザインを作成します。

トップページに表示されるようにしたいので、bodyエリアが終了する直前にテンプレートを取得するロジックを入れます。

「footer.php」47行目付近

これで、子テーマ配下に「line-api-box.php」を作成すればゲットできます。

 

かきてぃー
6行目のif文でトップページのみ表示にしております。ここの条件分岐を変更すれば、好きなページ限定に出来ますのでお試しを。(JQueryにも読み込みの条件を書きますので合わせる必要があります。)

 

「line-api-box.php」新規作成

「AFFINGER」を使用している方で子テーマを設定しているならば、子テーマ配下に「images」というフォルダがあるはずです。

「images」の中に今回使用する画像を入れるようにして下さい。

子テーマ配下に上記のソースでアップロードすると、「footer.php」で取得しているテンプレートが有効になりフッター部に文言が表示されます。

後で、JQueryを使ってボタンクリックのアクションを拾ってcssを付与したりするので、いまは確認で以下のロジック2種類を試し画面を確認します。

通常パターン

最小化パターン

確認用CSS

上記のように画像が表示されていればOKです。

メインコンテンツの処理を考える

次に、「診断」をクリックした時のメイン処理を考えます。

クリックすると、既存のphpテンプレートを以下のように変更しなければなりません。

まあ、14行目~34行目のコメントエリアはJQueryで制御するとしてメインコンテンツを表示した際に以下の処理をしないといけないです。

  • 「shindan_banner_zone」の中身を削除
  • 「shindan_banner_zone」の下にメインコンテンツを挿入する

これもJQueryですね。

今は、とにかくデザインを実際に貼り付けてみましょう。

こんな感じに先ほど貼り付けたロジックの下にメインコンテンツ用のロジックを貼り付けます。

21、24、29行目の画像リンクは「images」フォルダにアップロードした

最小化・クローズ・コメントアイコン

の各3つを指定して下さい。

確認用CSS

上記のようにライン風の画像が表示されていれば、OKです。

JQueryでCSSを付与・削除して動的にする

ここが最も肝心です。

この設定を失敗すると、動的な画面は作れません。

ボタンを押しても何も反応しないので、ただ画像を置いているのと同じです。

今回、JQueryで実装しなければならない処理は…

  • バナーの最小化と最大化
  • バナークリック時のメインコンテンツ表示処理
  • バナークリック時のバナー画像非表示処理
  • メインコンテンツのクローズ処理
  • メインコンテンツのコメントエリア生成処理

です。

サメくん
JQueryとかよく分からないんだけど…

そんな方でも大丈夫。

まるパクリして下さいw

JQueryを準備する

まずはJQueryを使えるようにしましょう。

簡単なメッセージが表示される「alert」のJQueryを書きましょう。

こんな感じのロジックで「sc-line-box.js」のファイル名で保存します。

「AFFINGER」は子テーマ配下に「js」フォルダがあるので、そこに格納します。

次に上記のJQueryが起動するようにします。

条件で「ある画面のみ起動」とかも指定できるので、その方法はググって下さい。

http://irohacross.net/2015/02/wordpress_function.html

今回は、トップページのみ起動するように設定します。

起動設定は「functions.php」に定義します。

「functions.php」の追記

これで、トップページを「F5」で更新すると…

上記のようなメッセージが出力されればJQueryが正常に動作しています。

かきてぃー
これでJQueryを使う準備が出来ました!

JQueryにアクション時の動作処理を書く

やっと動作の処理にきましたね。

1つずつ定義していきましょう。

定義するうえで、実装方法を決めなければなりません。

方法はいろいろあって、

  1. JQueryでクリックアクションを拾って新しい<div>要素を挿入していく
  2. JQueryでクリックアクションを拾って表示・非表示で制御する

が主な方法です。

今回はJQueryを複雑にしたくないので、2の方法でいきましょう。

かきてぃー
ちなみに、参考サイトは1ですね。

1、初期表示

一番初めに読み込まれた際に何をするのか。

/* onLoadイベント */

の下に書けば、最初に読み込んだ際の動作を定義できます。

まずはline-boxのテンプレート「line-api-box.php」に初期表示のパターンを定義しておきましょう。

ロード時はどのコンテンツが表示で非表示なのか定義する必要があります。

これで表示・非表示が制御できます。

2、バナー処理

  • バナーの最小化と最大化
  • バナークリック時のメインコンテンツ表示処理
  • バナークリック時のバナー画像非表示処理
  • メインコンテンツクローズ処理

の4つを定義します。

JQueryは要素のidやclass名からそのイベントを取得出来るようになっています。

バナーの最小化と最大化

バナー最小化のclass名は「shindan_close_btn」となります。このクラス名のdivをクリックしたアクションを取得すればいいのです。

これで、バナーの最小化・最大化の設定が出来ました。

画面でクリックした際に表示が変わっていればOKです。

バナークリック時のメイン表示とバナー非表示

次にバナーをクリックした際の動作です。

このままメインコンテンツの最小化とクローズ処理も書きましょう

いろいろ修正しました。

最小化した際の最大化イベントは「バナー」「メインコンテンツ」ともに同じイベントを拾うことになるので、どっちのイベントか直前の作業を保持する必要があります。

最小化した際に、バナー or メインコンテンツの情報を全体に保持し「True/False」で判定し最大化を切り分けています。

サメくん
…なんのこっちゃ。
イルカさん
コピペでいいんだよ。サメくん。

3、メインコンテンツのコメントエリア生成処理

かきてぃー
これが最も面倒かもしれませんね。色んな判定を入れないといけないので…
かきてぃー
くっそ疲れました!wなかなか頭使いましたわw

とりあえず、これで動くようにはなりました。

残すはゆっくりアクションするCSSデザインですが、それはまた次回にさせて下さい。

時間がなくなってしまった…。

スポンサーリンク

まとめ

修正ファイル

  • footer.php
  • functions.php
  • style.css

新規作成ファイル

  • line-api-box.php
  • sc-line-box.js

各ソース

「footer.php」(7~9行目追加)

「functions.php」(追加)

最終行に上記を追加

「style.css」(追加)

「line-api-box.php」(新規作成)

「sc-line-box.js」(新規作成)

<追加画像>

▼ディレクトリ

「AFFINGER」子テーマの「images」フォルダに格納する。

上記4つのボタンデザイン + バナーとコメント用画像

かきてぃー
時間があれば「レスポンシブ/コメント風/ふわっとスクロール」などやりたかったんですけど…。誠に申し訳ない!

また手が空いた時に更新しますね!

かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











Comment

  1. issen より:

    凄く役立つ記事をありがとうございます。
    自力で導入するのなら非常に難しい作業ですが、
    ココまで丁寧に解説して頂いたおかげでスムーズに導入する事が出来ました。
    サイトに導入してかっこよすぎて泣きそうになりました笑

    1つご質問なのですが、
    私の場合はトップページ以外にも表示されてしまいます。
    かきてぃーさんのテスト用ページでも右下に表示されているようです。
    http://anizi-test-nes.info/car/tire-burst/

    トップページ以外では表示しないように指定したつもりですが
    表示されてしまって困っています。
    お忙しい中、このような事を聞くのは恐縮ですが改善方法は御座いますでしょうか?
    御手すきの際にご確認頂ければ幸いです。

    • かきてぃー かきてぃー より:

      こんにちは。かきてぃーです。
      私の情報が活用できたようで何よりでした。
      そして、バグ含みすみません…。
      JQueryの読み込みは制御したのに表示を忘れていましたね…。
      「footer.php」の表示箇所に条件分岐を入れれば指定できます。
      https://kakitare.info/web/line-api-box/#i-2
      の「footer.php」を修正しましたので、ご確認下さい。

      • issen より:

        早々のご返信ありがとうございます!
        早速修正済みを導入しました。
        完璧に作動しています!

        非情に役立つ情報ばかり発信されていて凄く助かります。
        これからもブログを楽しみにしています。応援しています!

  2. ペンギン より:

    記事をお願いしたものです。
    お忙しい中、記事にしていただきありがとうございます。
    これからも参考にさせていただきます。

コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.