Simplicityを少し改造してみた part4

2014/11/9版のSimplicityでは、feedlyのカウントが(非同期で)動作しなかったので、part3でやった方法に少し手を加えて自力でfeedlyのカウントを取得できるようにしてみる(内部的にはPHPで取得はしている)。ついでにpocketも追加しておきます。準備としてfeedlyはこれまでのようにjQueryだけではちょっと厳しかったのでPHPも利用しています((確か前に試した所、ajaxでjson拾えるところまではいけたんですが、そのjsonにエラーがあるのかはたまた何かしらでエラーを出しているのか、返ってきた値を処理する所まで行けなかったんです。そういう理由からPHPでの処理になっています))。

wordpressが動くサーバーを利用しているわけですからPHPは良いとして、それをどのようにして取得するかを説明していきます。その内に公式でも解説やらがあるかもしれないけど、先がけて書いておきます(ΦωΦ)

前回の記事(part3)のブログカード載せておきます

Simplicityを少し改造してみた part3
part2ではSNSボタンのカウント読み込みをしているjQuery部分(javascript.js)でsuccess,errorで書かれてい...

part3の通りにやらなくても普通に公式のファイル通りのajaxの書き方でもイケます。一応流れとしてpart3のに追加でやる方法を書いておきます。まずajaxでデータを取得する部分から。

大きな変更点としては、今までのdataType: “jsonp”からdataType: “html”にしている所です。何故にこうする必要があるかと言いますと、feedlyのカウント取得用PHPですでに取得して出力されているからなわけです。後でjQueryをいじってカウントを探さなくても良いです。

次に、javascript.jsでデータを取得して表示するメインの部分をfeedly用に追加します。

ちなみに改造を施すので、simplicity-childを使って、simplicity-child(子テーマ)内に新たにlibフォルダを作ってあります。で、その中にfeedlyの購読者を取得するためのphpファイルを置きます。
更にちなみに、前回クエリの渡し方がなんかいまいちアレなんだよねと言っていた部分は、上記の感じで普通にイケました。どうやら他にエラーがあったみたいです。

次にPHPの方ですが、これは以前書いた以下のページ「PHPでfeedlyの購読者数を取得する」を参考までに。まさかこんな所で役に立つとは思わなかった(笑)

PHPでfeedlyの購読者数を取得する
久しぶりのPHPの投稿ですが、大したものではありません。例えば自分のサイトがどれぐらいfeedlyで購読されているかを調べるためのプログラム...

以下のような感じでphpファイルを作ってみます。

ちなみにセキュリティは考慮してません。リファラであったり別の何かしら例えばIPアドレスとか色々とアイデアを出してセキュリティも考慮して下さい。まぁカウントを出力するだけなのでどうなんでしょうなぁ。このままでも良いような、やはり何かしら手を加えるべきか・・・。htmlspcialcharあたりはしておいたほうが良いのかも知れませんね。

方法としてはPHPの一番最初に、

こういうのを入れておくという方法もあります。他にもajaxの通信を見張ったりあるのですが、どれが一番良いのかは何とも言えない所です。外部からアクセスされたらlocation.hrefでindexとかyahooとかGoogleなどに飛ばしたり、404出したりと方法は様々。htaccessやファイルのパーミッションその他諸々もアリかも知れません。

で、先ほど子テーマにlibフォルダを作っておいたので、このphpファイルを保存してアップロードします。見ていただいたらわかるように、$_GETでurlを拾っています。これは、ajaxを処理する部分でdataにあたる部分。つまりはクエリを受け取っているということです。

http://xxxx.com/?url=wordpressのフィードアドレス

こんな感じです。?より後ろがクエリになります。上のようにアドレスで書くと?url=となりますが、?の部分はクエリが送られたら自動で付きまして、他にもクエリがあった場合は&でクエリが繋がっていきます。$.ajaxの場合は、

このような感じで送れるということになります。そのurl:が$_GET[‘url’]にあたります。
ここで注意なのですが、file_get_contentsが利用できないサーバーがあるかも知れません。いわゆる外部のファイルを取得できないと言う制限がしてあるサーバーですね。そういったサーバーでは今回の方法は利用できません。cUrlがもしかしたら使えるかも知れませんがそのあたりはググったり、サーバーを引っ越ししたりするのが良いかも知れません。ん、それだとこれまでのSimplicityでもfeedlyの数は取得できなかったはず・・・うーむ、まぁ細かいことは後回しで。

で、これで準備は整ったのですが、更に変更する箇所がありまして、header.phpとsns-buttons-balloon.phpを修正する必要があります。ここは、子テーマではなく親の方の修正になります。またhtmlをいじる箇所もあるので、元に戻したい等と万が一を考える人はローカルでファイルをリネームしてどこかに複製した上で作業を行って下さい。

まず比較的簡単なheader.phpの方から。109行目あたり

ここから呼ばれていたんですね。色々探すのが大変でした。仕様が書いてあるドキュメントが欲しいですね(笑)
説明をさらっとしておきますと、これはjavascript.jsの今直している箇所の

これを表しています。つまり、twitterの部分で言うと、the_permalink()でページのアドレスを取得してjQueryに送り、そのアドレスのカウントが判明したら、「セレクタ.twitter-count」の部分を、取得したカウント値で書き換えるという感じです。
では、.twitter-countはどこにあるのでしょうか・・・、そう先程も書きましたがsns-buttons-balloon.phpなのです。ここで直す所はfeedlyの箇所。元々2014/11/9版のファイルにはFeedlyのカウントは、PHPでこれまでの手法で取得していた内容が入っています。なので、実はサーバー側で処理した内容が入っているのですが、そうするとサーバーで処理してサクッと表示されます。しかしやはり非同期でスピナーがクルクル回って欲しいじゃないですか、なので別に今回のfeedlyの部分は特に処理しなくても良いけども・・・いや、まぁ今後の勉強のために是非動く感じもトライしてみて下さい。

feedlyの部分だけ書き出します。だいたいsns-buttons-balloon.phpの115行目あたり。

こんな感じです。
元々は、

このように入っていますが、ここを該当のセレクタ(idとかclassとか)を持ったタグに書き換えるというわけです。
さて、おそらくこれで準備ができたので実際に試して下さい。feedlyの部分もクルクルとスピナーが回ってカウントされるはずです。

以下、現在このサーバーのSimplicityで動作しているjavascript.jsの部分を書き出しておきます。

query=””の部分はクエリを入れれば動作します。surlにまとめて必要な内容が書いてあるだけですので、urlとクエリを分離しても良いかと思います。ちなみにこれは親テーマのjavascript.jsに書いてあります。テーマがアップデートされて消えてしまうのがアレという場合は親テーマの方をコメントアウトして子テーマの方に移せば動くんじゃないかと思います((子テーマに移しても動作しました))。
その場合、親テーマがアップデートされたら親テーマのjavascipt.jsの該当部分を再度コメントアウトする必要があります。

スポンサーリンク

シェアする

フォローする

コメント

  1. Hidekichi より:

    なんか本家に拙作のスクリプトを採用してもらっちゃってありがたいことです。

    だがしかし、実は、この一連の流れの真髄はpart3にあります。
    スクリプトなんかはエラーさえ出てなければある程度どんなもんでもいいんですけれども、以前、僕も色々と勉強している時に、part3の最後の方で書いてある内容に触れました。
    あぁなんて素晴らしい可読性。まるで日本語のように書ける素晴らしさ。
    関数をこう書けば、こんなふうにできるんだとわかった時は( ̄ー ̄)ニヤリとしてしまいました。

    関数の書き方自体はあんまりスマートではないかも知れませんが、その考え方と言うか組み立て方みたいのを知ってほしいなぁと思ったり。「実はこういう書き方ってPHPでもできるんですよ」とちょっと伏線をはっておきます。いずれそのことについて書こうかと思います。

  2. […] シェア数を取得するjavascript.jsにある関数を大幅に書き換え(参考) […]

  3. ありがとうございます!
    お言葉に甘えて利用させていただきます。
    はい、利用するときは、メジャー5種のブラウザで確認し、自らの責任で実装させていただきます。

  4. こんにちは。
    Simplicityを作成しているわいひらと申します。
    この記事で紹介されている、JavaScriptの記述をSimplicityのjavascript.jsの方に取り入れさせてもらってよろしいでしょうか?

    あと、ブログカードの:afterに書かれているBlogcard部分のスタイルもカスタマイザーに機能追加させていただけると嬉しいです。

    • Hidekichi より:

      スクリプト、css共にご自由にご利用下さい。改変してもらっても全然大丈夫です
      ただ一応ですけども、いろんなブラウザで検証はお願いします。
      特にIEに関しては、うちの環境はlinuxなので動作すらできませんし、
      元々対応する気もないのでうまく動かないかも知れません。
      よろしくお願いします。

      コメントありがとうございました。